可控制导航下拉方向的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 ...
随机推荐
- Redis系列(三)-Redis发布订阅及客户端编程
阅读目录 发布订阅模型 Redis中的发布订阅 客户端编程示例 0.3版本Hredis 发布订阅模型 在应用级其作用是为了减少依赖关系,通常也叫观察者模式.主要是把耦合点单独抽离出来作为第三方,隔离易 ...
- 使用VS+VisualGDB编译调试Linux程序
Linux程序开发变得越来越多,越来越多的程序.产品需要跨平台,甚至有些开源项目只支持Linux平台,所以掌握Linux开发变得越来越重要. 但是对于习惯了Windows下的开发,使用了VS这个宇宙第 ...
- MySQL 基础及性能优化工具
数据库,用户及权限 常用用户管理操作 # 创建本地用户 abc create user abc@localhost # 创建内网能够访问的用户 abc create user abc@'192.168 ...
- 如何给CentOS安装字体库
很多时候,我们需要做一些图像生成工作(譬如验证码之类的),这时候,我们一般都需要用到系统的字体库.但事情却总非尽善人意,我们所使用的Linux操作系统无法像Windows操作系统那样足够“旗舰”,字体 ...
- ASP.NET MVC 从零开始 - Web.config
这篇文章是从我的 github 博客 http://lxconan.github.io 导入的. 在上一篇中,我们从零开始创建了一个非常简单的 ASP.NET MVC 应用程序.接下来,你是不是期望我 ...
- salesforce 零基础学习（四十七） 数据加密简单介绍
对于一个项目来说,除了稳定性以及健壮性以外,还需要有较好的安全性,此篇博客简单描述salesforce中关于安全性的一点小知识,特别感谢公司中的nate大神和鹏哥让我学到了新得知识. 项目简单背景: ...
- CGI概念
CGI(通用网关接口,Common Gateway Interface) CGI是Web服务器与请求处理程序之间传输数据的一种标准,保证Web服务器传递过来的数据是标准格式的,其程序须运行在网络服务器 ...
- 使用hexo搭建github.io博客(一)
使用github.io可以搭建一个自己的博客,把静态文件项目托管到github上,可以写博客,可以使用markdown语法,也可以展示作品.灵活性高.但是有较大的难度. node,git版本变化日新月 ...
- [C#]想说一说嵌套数组
今天早上,随感而发,随便写了点东西.结果下午的时候看了看评论,吓我一跳.估计是不是写代码的人看散文看得太少了,还是因为现在的人读的书太少了,似乎有有些大惊小怪. 关于Y美女,我声明一下,尽管她很脱俗, ...
- JAVA的静态变量、静态方法、静态类
静态变量和静态方法都属于静态对象,它与非静态对象的差别需要做个说明. (1)Java静态对象和非静态对象有什么区别? 比对如下: 静态对象 ...