效果：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. 循序渐进做项目系列（4）迷你QQ篇(2)——视频聊天！（附源码）

    一·效果展示 源码派送:MiniQQ1.1 文字聊天的实现参见:循序渐进做项目系列(3):迷你QQ篇(1)——实现客户端互相聊天 二·服务端设计 对于实现视频聊天而言,服务端最核心的工作就是要构造多媒 ...

  2. clojure基础入门(一)

    最近在看storm的源码,就学习分享下clojure语法. 阅读目录: 概述 变量 运算符 流程控制 总结 概述 clojure是一种运行在JVM上的Lisp方言,属于函数式编程范式,它和java可以 ...

  3. 关于分工的思考 (Thoughts on Division of Labor)

    Did you ever have the feeling that adding people doesn't help in software development? Did you ever ...

  4. .NET 新标准介绍

    本文介绍如何使用 .NET 标准,更容易地实现向 .NET Core 迁移.文中会讨论计划包含的 APIs,跨构架兼容性如何工作以及这对 .NET Core 意味着什么. 如果你对细节感兴趣,这篇文章 ...

  5. ASP.NET MVC 从零开始 - 请求处理

    这篇文章是从我的 github 博客 lxconan.github.io 导入的. 这是这个系列的第三篇了.前两篇文章请参见: ASP.NET MVC 从零开始 - Create and Run AS ...

  6. How To Use Goto?

    看到,网上很多人对于goto的询问, 因为本身在工作中经常使用到,所以写下此文, 如有错误, 请指出. 本人写博文的时候主要从事C++工作 对于goto的态度,本人目前成长如下: 学生时代 老师课堂上 ...

  7. RequireJS学习笔记

    前言 进入移动前端是很不错的选择,这块也是我希望的道路,但是不熟悉啊... 现在项目用的是require+backbone,整个框架被封装了一次,今天看了代码搞不清楚,觉得应该先从源头抓起,所以再看看 ...

  8. ES6新特性之 promise

    新的ES6中引入了promise的概念,目的是让回调更为优雅.层层嵌套的回调会让javascript失去美感和可读性,同时javascript也推荐采用链式的方式去书写函数调用.于是Promise就应 ...

  9. CSS之flex布局

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  10. Sql Server系列：聚合函数

    1 SUM SUM是一个求和函数,返回指定列值的总和.SUM 只能用于数字列. 其中忽略 Null 值. 语法 SUM ( [ ALL | DISTINCT ] expression ) OVER ( ...