效果：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. UI控件（UITextField）

    @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; UITextField* textField1 = ...

  2. NoSQL初探之人人都爱Redis：（4）Redis主从复制架构初步探索

    一.主从复制架构简介 通过前面几篇的介绍中,我们都是在单机上使用Redis进行相关的实践操作,从本篇起,我们将初步探索一下Redis的集群,而集群中最经典的架构便是主从复制架构.那么,我们首先来了解一 ...

  3. 从零3D基础入门XNA 4.0(2)——模型和BasicEffect

    [题外话] 上一篇文章介绍了3D开发基础与XNA开发程序的整体结构,以及使用Model类的Draw方法将模型绘制到屏幕上.本文接着上一篇文章继续,介绍XNA中模型的结构.BasicEffect的使用以 ...

  4. 【干货】JS版汉字与拼音互转终极方案，附简单的JS拼音输入法

    前言 网上关于JS实现汉字和拼音互转的文章很多,但是比较杂乱,都是互相抄来抄去,而且有的不支持多音字,有的不支持声调,有的字典文件太大,还比如有时候我仅仅是需要获取汉字拼音首字母却要引入200kb的字 ...

  5. Stored Procedure 里的 WITH RECOMPILE 到底是干麻的？

    在 SQL Server 创建或修改「存储过程(stored procedure)」时,可加上 WITH RECOMPILE 选项,但多数文档或书籍都写得语焉不详,或只解释为「每次执行此存储过程时,都 ...

  6. Chrome开发者工具不完全指南（四、性能进阶篇）

    前言 Profiles面板功能的作用主要是监控网页中各种方法执行时间和内存的变化,简单来说它就是Timeline的数字化版本.它的功能选项卡不是很多(只有三个),操作起来比较前面的几块功能版本来说简单 ...

  7. 自用迷你版的Deferred

    啥也不说贴代码,项目用 /** * 迷你版的deferred */ function Deferred(func) { if (this instanceof Deferred === false) ...

  8. 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器

    × 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...

  9. 使用Ubuntu 12.04作为日常电脑环境

    搜狗输入法出来之后,我觉得有必要写一篇博客说明一下,如何使用Ubuntu作为日常的电脑系统.我使用的Ubuntu版本是12.04,没有使用Ubuntukylin,因为的电脑比较老,使用那个版本,电脑有 ...

  10. Yii2的深入学习--事件Event

    我们先来看下事件在 Yii2 中的使用,如下内容摘自 Yii2中文文档 事件可以将自定义代码“注入”到现有代码中的特定执行点.附加自定义代码到某个事件,当这个事件被触发时,这些代码就会自动执行.例如, ...