效果：http://hovertree.com/texiao/nav/1/

代码如下：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>可控制导航下拉方向的jQuery下拉菜单代码 - 何问起</title>

<base target="_blank" />

<style>

.nav * {

margin: 0;

padding: 0;

list-style: none;

}

.nav {

width: 700px;

height: 30px;

line-height: 30px;

margin: 2px auto;

}

.nav li a {

color: #fff;

text-decoration: none;

display: block;

float: left;

height: 30px;

line-height: 30px;

padding: 0px 15px;

font-size: 12px;

background: #636871;

}

.nav li a:hover {

background: #4b505a;

}

.nav li {

float: left;

position: relative;

height: 30px;

line-height: 30px;

}

.nav li .second {

position: absolute;

left: 0;

display: none;

}

.hovertreeinfo {

width: 100%;

height: 234px;

text-align: center;

}

.hovertreeinfo a {

color: blue;

}

</style>

</head>

<body>

<div class="hovertreeinfo">

<h1>jQuery上弹菜单</h1>

<a href="http://hovertree.com/h/bjaf/kxl2s00m.htm">原文</a> <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/texiao/keleyi/">推荐</a>

<a href="http://hovertree.com/texiao/nav/1/1.htm">Demo 2</a>

</div>

<ul class="nav">

<li>

<a href='http://hovertree.com/'>首页</a>

<div class="second">

<a href='http://hovertree.com/texiao/'>特效</a>

<a href='http://hovertree.com/map/'>导航</a>

<a href='http://hovertree.com/hvtart/bjae/5w5svpu4.htm'>菜单</a>

<a href='http://hovertree.com/h/bjae/0st5ww13.htm'>磨砂</a>

</div>

</li>

<li>

<a href='http://hovertree.com/h/bjaf/qufo9d03.htm'>菜单导航</a>

<div class="second">

<a href='http://keleyi.com/'>柯乐义</a>

<a href='http://hovertree.com/code/css/uofyn8bc.htm'>何问起</a>

<a href='http://hovertree.com/texiao/jeasyui/2/'>EasyUI</a>

<a href='http://hovertree.com/texiao/keleyi/'>Keleyi</a>

</div>

</li>

<li>

<a href='http://hovertree.com/h/bjaf/citydate.htm'>时间日期</a>

<div class="second">

<a href='http://hovertree.com/h/bjaf/jshour.htm'>时间日期</a>

<a href='http://hovertree.com/code/javascript/sqchrhfe.htm'>时间日期</a>

<a href='http://hovertree.com/h/bjaf/p49wvx4e.htm'>时间日期</a>

<a href='http://hovertree.com/h/bjaf/46xrokmy.htm'>时间日期</a>

</div>

</li>

<li>

<a href='http://hovertree.com/hvtart/bjae/yqhu1ug9.htm'>焦点图</a>

<div class="second">

<a href='http://hovertree.com/h/bjaf/8c5uhche.htm'>焦点图</a>

<a href='http://hovertree.com/hvtart/bjae/f03e85410878db53.htm'>焦点图</a>

<a href='http://hovertree.com/code/jquery/smjv6d0n.htm'>焦点图</a>

<a href='http://hovertree.com/h/bjaf/a6598spx.htm'>焦点图</a>

</div>

</li>

<li>

<a href='http://hovertree.com/h/bjaf/sk1tputv.htm'>tab标签</a>

<div class="second">

<a href='http://hovertree.com/hvtart/bjae/wokffp10.htm'>tab标签</a>

<a href='http://hovertree.com/h/bjae/9glhm7lv.htm'>tab标签</a>

<a href='http://hovertree.com/h/bjaf/uoarumwr.htm'>tab标签</a>

<a href='http://hovertree.com/h/bjaf/s6y2vlsx.htm'>tab标签</a>

</div>

</li>

<li>

<a href='http://hovertree.com/h/bjaf/gundong.htm'>jquery特效</a>

<div class="second">

<a href='http://hovertree.com/h/bjaf/picqiehuan.htm'>jquery特效</a>

<a href='http://hovertree.com/h/bjaf/41eyinh2.htm'>jquery特效</a>

<a href='http://hovertree.com/h/bjaf/vc8993j8.htm'>jquery特效</a>

<a href='http://hovertree.com/h/bjaf/6sm1esjw.htm'>jquery特效</a>

</div>

</li>

<li>

<a href='http://hovertree.com/hvtart/bjae/yjm6v683.htm'>在线客服</a>

<div class="second">

<a href='http://hovertree.com/h/bjaf/mbrpxe4o.htm'>在线客服</a>

<a href='http://hovertree.com/h/bjaf/tishiceng.htm'>在线客服</a>

<a href='http://hovertree.com/h/bjaf/1kquypy7.htm'>在线客服</a>

<a href='http://hovertree.com/h/bjaf/5mkg51yt.htm'>在线客服</a>

</div>

</li>

<li>

<a href='http://hovertree.com/h/bjaf/3dxfknkj.htm'>广告代码</a>

<div class="second">

<a href='http://hovertree.com/h/bjaf/c03itibx.htm'>广告代码</a>

<a href='http://hovertree.com/h/bjaf/kqud99m6.htm'>广告代码</a>

<a href='http://hovertree.com/h/bjaf/ajw4dsfb.htm'>广告代码</a>

<a href='http://hovertree.com/h/bjaf/ws50ueia.htm'>广告代码</a>

</div>

</li>

<li>

<a href='http://hovertree.com/h/bjaf/l3c6nm7b.htm'>相册代码</a>

<div class="second">

<a href='http://hovertree.com/hvtart/bjae/upnrkt1d.htm'>相册代码</a>

<a href='http://hovertree.com/h/bjaf/gk8mko69.htm'>相册代码</a>

<a href='http://hovertree.com/texiao/css/23/'>相册代码</a>

<a href='http://hovertree.com/texiao/html5/30/'>相册代码</a>

</div>

</li>

</ul>

<div class="hovertreeinfo"></div>

<script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.8.3.min.js"></script>

<script type="text/javascript">

$(function () {

var nav = 1; // 默认值为0，二级菜单向下滑动显示；值为1，则二级菜单向上滑动显示

if (nav == 0) {

$('.nav li').hover(function () {

$('.second', this).css('top', '30px').show();

}, function () {

$('.second', this).hide();

});

} else if (nav == 1) {

$('.nav li').hover(function () {

$('.second', this).css('bottom', '30px').show();

}, function () {

$('.second', this).hide();

});

}

});

</script>

</body>

</html>

转自：http://hovertree.com/h/bjaf/kxl2s00m.htm

特效：http://www.cnblogs.com/roucheng/p/texiao.html

可控制导航下拉方向的jQuery下拉菜单代码的更多相关文章

  1. 20款jquery下拉导航菜单特效代码分享

    20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...

  2. div模拟的下拉框特效jquery

    从网上找来的,感觉不错就拿来分享下 <style type="text/css"> body, ul, li { margin: 0; padding: 0; font ...

  3. jquery 下拉框 收藏

    jquery 下拉框  Query获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code. ...

  4. jquery下拉菜单

    下拉菜单或者导航是我们在网站开发中不可或缺的网站元素之一,使用jQuery可以制作出简洁易用.美观大方的下拉菜单或者导航效果. 下面展示的12款利用jQuery实现的下拉菜单即导航效果整理自前端大牛爱 ...

  5. 分享一个discuz touch端的jQuery下拉刷新组件

    在线Demo 最近装了个discuz论坛, 趣股VIP吧,发现里面内置的jQuery上拉刷新组件写得还行,STATICURL可以用'http://o9gzet7tk.bkt.clouddn.com/i ...

  6. FancySelect – 更好用的 jQuery 下拉选择框插件

    FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...

  7. jQuery下拉友情链接美化效果代码分享

    这篇文章主要介绍了jQuery下拉友情链接美化效果,很实用的代码,推荐给大家,有需要的小伙伴可以参考下. 文实例讲述了jQuery下拉友情链接美化效果,jQuery下拉友情链接美化代码是一款基于jQu ...

  8. 带搜索框的jQuery下拉框插件

    由于下拉框的条数有几十个,于是打算找一个可以搜索查找功能的下拉框,刚开始在网上看了几个,都是有浏览器兼容性问题,后来看到这个“带搜索框的jQuery下拉框美化插件 searchable”,看演示代码简 ...

  9. jQuery下拉框操作系列$("option:selected",this) &&（锋利的jQuery）

    jQuery下拉框操作系列$("option:selected",this)  &&(锋利的jQuery) <!DOCTYPE html> <ht ...

随机推荐

  1. 领域驱动设计（DDD）部分核心概念的个人理解

    领域驱动设计(DDD)是一种基于模型驱动的软件设计方式.它以领域为核心,分析领域中的问题,通过建立一个领域模型来有效的解决领域中的核心的复杂问题.Eric Ivans为领域驱动设计提出了大量的最佳实践 ...

  2. .NET中使用APlayer组件自制播放器

    目录 说明 APlayer介绍 APlayer具备功能 APlayer使用 自制播放器Demo 未完成工作 源码下载 说明 由于需求原因,需要在项目中(桌面程序)集成一个在线播放视频的功能.大概要具备 ...

  3. iOS开发系列--并行开发其实很容易

    --多线程开发 概览 大家都知道,在开发过程中应该尽可能减少用户等待时间,让程序尽可能快的完成运算.可是无论是哪种语言开发的程序最终往往转换成汇编语言进而解释成机器码来执行.但是机器码是按顺序执行的, ...

  4. c#语言-高阶函数

    介绍 如果说函数是程序中的基本模块,代码段,那高阶函数就是函数的高阶(级)版本,其基本定义如下: 函数自身接受一个或多个函数作为输入. 函数自身能输出一个函数,即函数生产函数. 满足其中一个条件就可以 ...

  5. jQuery插件编写及链式编程模型小结

    JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQu ...

  6. 《Entity Framework 6 Recipes》中文翻译系列 (13) -----第三章 查询之使用Entity SQL

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 3-4使用实体SQL查询模型 问题 你想通过执行Entity SQL语句来查询你的实 ...

  7. 使用angular中ng-repeat ， track by的用处

    我们见到最简单的例子是: <div ng-repeat="link in links" ></div> 如果item的值有重复的,比如links=[&quo ...

  8. .net 网络编程

    1.首先说下计算机网络中的TCP/IP参考模型 TCP/IP把网络分为5层,每一层负责完成不同的功能 1)应用层:传输报文,提供各种网络应用,有FTP.SMTP.HTTP等协议 2)运输层:传输报文段 ...

  9. 【求助】WPF 在XP下 有的Textbox光标会消失

    最近做个项目,一直有一个问题没有解决,就是在XP下,有的Textbox里在文本框里没有东西的时候,会没有光标.不同的XP机器,失去光标的Textbox也不一样. 各位大师看下面的三张图,当Textbo ...

  10. Caffe学习笔记1--Ubuntu 14.04 64bit caffe安装

    本篇博客主要用于记录Ubuntu 14.04 64bit操作系统搭建caffe环境,目前针对的的是CPU版本: 1.安装依赖库 sudo apt-get install libprotobuf-dev ...