可控制导航下拉方向的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

时间: 2024-10-12 21:51:10

可控制导航下拉方向的jQuery下拉菜单代码的相关文章

20款jquery下拉导航菜单特效代码分享

jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应式导航菜单支持手机导航菜单代码 jquery鼠标导航下滑显示图片列表效果 jQuery个性动画二级下拉导航代码 jquery网站下拉菜单制作企业网站导航菜单代码 jQuery游戏网站顶部滑动导航菜单代码 jquery.superfish.js导航菜单插件制作网页无限级下拉菜单代码 jquery hover事件实用的企业网站二级导航菜单样式 j

jquery 下拉框 收藏

jquery 下拉框 Query获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text 3. var checkValue=$

jquery下拉框插件心得

想记录下自己在开发这个下拉框插件之后的心得,发现写一篇博客,真是"知之非艰,行之惟艰".所以再有看到好的文章,就不会再吝啬自己的"赞"了. 多次想该如何写比较好呢?最终决定,将以后我可能用得到的东西一条条记录下来,一条条来写,这样比较清晰. 1.写jquery插件需要的一个结构 // 定义jQuery私有作用域 (function ($) { // 插件默认属性 var defaults = { name1: "value1", name2: &

JQuery 下拉框左右移动

JQuery下拉框左右移动 触发点击按钮时间 然后通过$("#one option:selected")获取目标的下拉框所选中的值  然后把选中的添加到你所要的下拉框中 同时要把原来下拉框的值删除  代码可以一句搞定 $("#one option:selected").appendTo("#two") 要注意的是: append()与appendTo()方法的区别. append(content|fn)向每个匹配的元素内部追加内容. append

css导航栏下拉菜单代码【转自http://zxm.92.blog.163.com/blog/static/544600282010727112723874/】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" c

jquery下拉城市选择代码

非常好的下拉城市选择代码,可选择热门城市,按字母排序的城市选择,带搜索框样式. <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>jQuery下拉框美化特效-素材吧</title> <meta http-equiv="X-UA-Compatible" content=&quo

jQuery下拉友情链接美化效果代码分享

这篇文章主要介绍了jQuery下拉友情链接美化效果,很实用的代码,推荐给大家,有需要的小伙伴可以参考下. 文实例讲述了jQuery下拉友情链接美化效果,jQuery下拉友情链接美化代码是一款基于jQuery实现的下拉美化特效,分享给大家供大家参考.具体如下:运行效果图: 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式.为大家分享的jQuery下拉友情链接美化效果代码如下 <head> <meta http-equiv="Content-Type" conten

jQuery下拉框操作系列$(&quot;option:selected&quot;,this) &amp;&amp;(锋利的jQuery)

jQuery下拉框操作系列$("option:selected",this)  &&(锋利的jQuery) <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

用JS和C#分别在前端和后端控制下拉框为只读的方法的代码

代码期间,将写代码过程较好的代码段备份一次,下面资料是关于用JS和C#分别在前端和后端控制下拉框为只读的方法的代码,应该对各位朋友有较大用途. <HTML> <HEAD> <TITLE>下拉框模拟只读</TITLE> <script type="text/javascript"> function setReadOnly(obj_id){ var obj = document.getElementById(obj_id); o