可控制导航下拉方向的jQuery下拉菜单代码
效果：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下拉菜单代码的更多相关文章
- 20款jquery下拉导航菜单特效代码分享
20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...
- div模拟的下拉框特效jquery
从网上找来的,感觉不错就拿来分享下 <style type="text/css"> body, ul, li { margin: 0; padding: 0; font ...
- jquery 下拉框 收藏
jquery 下拉框 Query获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code. ...
- jquery下拉菜单
下拉菜单或者导航是我们在网站开发中不可或缺的网站元素之一,使用jQuery可以制作出简洁易用.美观大方的下拉菜单或者导航效果. 下面展示的12款利用jQuery实现的下拉菜单即导航效果整理自前端大牛爱 ...
- 分享一个discuz touch端的jQuery下拉刷新组件
在线Demo 最近装了个discuz论坛, 趣股VIP吧,发现里面内置的jQuery上拉刷新组件写得还行,STATICURL可以用'http://o9gzet7tk.bkt.clouddn.com/i ...
- FancySelect – 更好用的 jQuery 下拉选择框插件
FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...
- jQuery下拉友情链接美化效果代码分享
这篇文章主要介绍了jQuery下拉友情链接美化效果,很实用的代码,推荐给大家,有需要的小伙伴可以参考下. 文实例讲述了jQuery下拉友情链接美化效果,jQuery下拉友情链接美化代码是一款基于jQu ...
- 带搜索框的jQuery下拉框插件
由于下拉框的条数有几十个,于是打算找一个可以搜索查找功能的下拉框,刚开始在网上看了几个,都是有浏览器兼容性问题,后来看到这个“带搜索框的jQuery下拉框美化插件 searchable”,看演示代码简 ...
- jQuery下拉框操作系列$("option:selected",this) &&（锋利的jQuery）
jQuery下拉框操作系列$("option:selected",this) &&(锋利的jQuery) <!DOCTYPE html> <ht ...
随机推荐
- 一劳永逸：域名支持通配符，ASP.NET Core中配置CORS更轻松
ASP.NET Core 内置了对 CORS 的支持,使用很简单,只需先在 Startup 的 ConfigureServices() 中添加 CORS 策略: public void Configu ...
- ABP理论学习之内嵌资源文件
返回总目录 本篇目录 介绍 创建内嵌文件 暴露内嵌文件 使用内嵌文件 介绍 在一个web应用中,有供客户端使用的javascript,css,xml等文件.它们一般是作为分离的文件被添加到web项目中 ...
- Hadoop学习笔记—21.Hadoop2的改进内容简介
Hadoop2相比较于Hadoop1.x来说,HDFS的架构与MapReduce的都有较大的变化,且速度上和可用性上都有了很大的提高,Hadoop2中有两个重要的变更: (1)HDFS的NameNod ...
- sysbench 压力测试
200 ? "200px" : this.width)!important;} --> 介绍 sysbench是一个模块化.跨平台.多线程基准测试工具,主要用于测试不同系统参 ...
- 台式电脑、笔记本快捷选择Boot(启动项快捷键)大全
我们在安装系统时,会去设置电脑是从硬盘启动.U盘启动.光驱启动.网卡启动. 一般设置的方法有两种:一种是进BIOS主板菜单设置启动项顺序:另一种就是我在这里要介绍的快捷选择启动项. 以下是网友整理的各 ...
- Git命令汇总
1. 工作区和版本库 说明: 工作区(Working Directory)就是创建仓库的文件夹 版本库(Repository)就是工作区的隐藏目录.git,版本库中有暂存区(stage/index)和 ...
- 《JS修炼之道》—— 读后总结
本篇是基于<JS修炼之道>的记录性与总结性的文章,这本书从多种框架的角度,讲述了JS开发中的一些实用技巧. 比如Prototype,JQuery,Mootools,YUI,Dojo,Ext ...
- The currently selected variant "arm-debug" uses split APKs, but none of the 1 split apks are compatible with the current device with density "213" and ABIs "x86".
出现这种错误一般是在电脑上用模拟器运行APK的吧. 可以在build.gradle中这样配置下: android{ ... defaultConfig { applicationId "XX ...
- 那些让IE6-8羞愧的替补型js
1,html5shiv 这个js特别简单,可以让IE8识别一些新的标签,常用的比如 header footor section,就能使用更好的语义的标签了. 引入方式: <!--[if lt I ...
- ExtJS4 源码解析（一）带项目分析
Ext这个东东太大了,能看完就已经很不错了,完整的源码分析就不敢说了,大概就涉及了类管理,事件管理,数据结构缓存架构,UI组件核心机制,MVC这几个方面,只是挑着源码看的,没有实际完整的使用. 公司的 ...