效果：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. Lesson 11 One good turn deserves another

    Text I was having dinner at a restaurant when Tony Steele came in. Tony worked in a layer's office y ...

  2. 一个App完成入门篇-终结篇（八）- 应用收官

    经过以上几步的学习,我们终于来到最后一个步骤了,应用APP也接近尾声. 通过之前的几节教程,不知道您对使用DeviceOne开发一个应用是不是已经得心应手了,本节教程将教会大家如何在开发完成之后通过D ...

  3. .NET开发笔记（二十三） 谷歌地图下载

    关于如何将地球经纬度坐标系统转换成程序中常用到的平面2D坐标系统,网上的文章很多,参考http://www.cnblogs.com/beniao/archive/2010/04/18/1714544. ...

  4. 企业IT管理员IE11升级指南【6】—— Internet Explorer 11面向IT专业人员的常见问题

    企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...

  5. 说说设计模式~大话目录(Design Pattern)

    回到占占推荐博客索引 设计模式(Design pattern)与其它知识不同,它没有华丽的外表,没有吸引人的工具去实现,它是一种心法,一种内功,如果你希望在软件开发领域有一种新的突破,一个质的飞越,那 ...

  6. [Linux]Linux下安装和配置solr/tomcat/IK分词器 详细实例一.

    在这里一下讲解着三个的安装和配置, 是因为solr需要使用tomcat和IK分词器, 这里会通过图文教程的形式来详解它们的安装和使用.注: 本文属于原创文章, 如若转载,请注明出处, 谢谢.关于设置I ...

  7. 史上最全的 Redux 源码分析

    前言 用 React + Redux 已经一段时间了,记得刚开始用Redux 的时候感觉非常绕,总搞不起里面的关系,如果大家用一段时间Redux又看了它的源码话,对你的理解会有很大的帮助.看完后,在回 ...

  8. iOS-----Crash文件分析(一)

    开发程序的过程中不管我们已经如何小心,总是会在不经意间遇到程序闪退.脑补一下当你在一群人面前自信的拿着你的App做功能预演的时候,流畅的操作被无情地Crash打断.联想起老罗在发布Smartisan ...

  9. 用电脑给手机安装App

    每一个账号密码只允许同时授权5台电脑,当授权满后还想授权其他的就必须删除以前的授权.    

  10. bootstrap走动的进度条

    1.页面效果: 起始位置: