效果：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. （翻译）《Hands-on Node.js》—— Why?

    事出有因 为何选择event loop? Event Loop是一种推进无阻塞I/O(网络.文件或跨进程通讯)的软件模式.传统的阻塞编程也是用一样的方式,通过function来调用I/O.但进程会在该 ...

  2. Vivado SDK 2014.2 创建新工程后，BSP版本不对的解决办法

    问题描述如下: 1. 使用Vivado SDK 2014.2已经创建了工程,但是此时,hdf文件增加了外设,需要重新创建工程以更新SDK中的外设描述: 2. 使用新的hdf创建工程后,发现system ...

  3. ASP.NET MVC 5 - 视图

    在本节中,你要去修改HelloWorldController类,使用视图模板文件,在干净利索地封装的过程中:客户端浏览器生成HTML. 您将创建一个视图模板文件,其中使用了ASP.NET MVC 3所 ...

  4. Linux下MongoDB服务安装

    Linux下MongoDB服务安装 MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案.MongoDB是一个介于关系数据库和非关系数据 ...

  5. 使用Ldoc给Lua生成文档

    Ldoc介绍 LDoc是一个Lua的文档生成工具,过去,比较常用的Lua生成文档的工具是LuaDoc,可惜作者自从2008年之后就再也没有发布过新的版本了,说明作者基本上已经放弃维护了.而LDoc则是 ...

  6. sql的行转列(PIVOT)与列转行(UNPIVOT)

    在做数据统计的时候,行转列,列转行是经常碰到的问题.case when方式太麻烦了,而且可扩展性不强,可以使用 PIVOT,UNPIVOT比较快速实现行转列,列转行,而且可扩展性强 一.行转列 1.测 ...

  7. Zabbix实现微信报警

    一.  申请企业微信账号,申请地址 https://qy.weixin.qq.com/ 二. 登陆企业微信账 图一 图二 2.添加微信账号 图一 图二 完成以上步骤后 就完成了微信账号的添加 三.新建 ...

  8. Mask裁切UI粒子特效或者3D模型

    刚好前几天有人问我这个问题,再加上新项目也可能用,所以这两天就研究了一下.其实如果粒子特效 和3D模型 都用RenderTexture来做的话就不会有裁切的问题,但是粒子特效用RenderTextur ...

  9. WPF DataGrid分页功能实现代码 修改原作者不能实现的部分

    这两天需要给Datagrid加个分页,查找了一些相关的文章,发现有一个写了一个控件比较好,地址是 http://blog.csdn.net/zdw_wym/article/details/822189 ...

  10. 前端工程师技能之photoshop巧用系列第三篇——切图篇

    × 目录 [1]切图信息 [2]切图步骤 [3]实战 前面的话 前端工程师除了使用photoshop进行测量之外,更重要的是要使用该软件进行切图.本文是photoshop巧用系列的第三篇——切图篇 切 ...