简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > php教程 > PHP开发 > 正文

用jquery实现的一个超级简单的下拉菜单

高洛峰
发布： 2016-12-15 16:01:21
原创
1241 人浏览过

用jquery实现的一个超级简单的下拉菜单。 

效果图 

初始效果 

0_1331794367N08i.gif

鼠标悬浮效果 

0_1331794367N08i.gif

代码 

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="jquery-1.11.1.js"></script> 
<style> 

nav a { 
text-decoration: none; 
} 
nav > ul > li { 
float: left; 
text-align: center; 
padding: 0 0.5em; 
} 

nav li ul.sub-menu { 
display: none; 
padding-left: 0 !important; 
} 

.sub-menu li { 
color: white; 
} 

.sub-menu li:hover { 
background-color: black; 
} 

.sub-menu li:hover a { 
color: white; 
} 

ul { 
list-style: none; 
} 
</style> 
</head> 
<body> 
<nav> 
<ul> 
<li><a href="#">Home 
<ul class="sub-menu"> 
<li><a href="#">sub1</a></li> 
<li><a href="#">sub2</a></li> 
<li><a href="#">sub3</a></li> 
</ul> 
</li> 
<li><a href="#">Programming 
<ul class="sub-menu"> 
<li><a href="#">sub1</a></li> 
<li><a href="#">sub2</a></li> 
<li><a href="#">sub3</a></li> 
</ul> 
</li> 
<li><a href="#">Japanese 
<ul class="sub-menu"> 
<li><a href="#">sub1</a></li> 
<li><a href="#">sub2</a></li> 
<li><a href="#">sub3</a></li> 
</ul> 
</li> 
</ul> 
</nav> 
</body> 
<script type="text/javascript"> 
$(document).ready(function() { 
$(&#39;nav li&#39;).hover(function() { 
$(this).find(&#39;.sub-menu&#39;).css(&#39;display&#39;, &#39;block&#39;); 
}, function() { 
$(this).find(&#39;.sub-menu&#39;).css(&#39;display&#39;, &#39;none&#39;); 
}); 
}); 
</script> 
</html>
登录后复制


更多用jquery实现的一个超级简单的下拉菜单相关文章请关注PHP中文网！

相关标签：
jquery下拉菜单
来源：php.cn
上一篇：JQuery实现简单下拉菜单 下一篇：jQuery实现的导航下拉菜单效果
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
使用 Javascript / Jquery 提交表单且不带按钮 我试图通过调用JavaScript函数并使用JQUERY/PHP执行表单来提交没有按钮的表单。我希望表单在后端静默执行，而无需重新加载页面。不幸的是，它不断返回JavaScript...
来自于 2024-04-06 14:54:03
0
2
421
需要一个 jquery 脚本，根据最终用户的当前选择从选择框中移动选定的选项 我有一个HTML页面，最终用户可以通过选择框元素对我们的项目进行排名。请参阅小提琴来观看简单的演示：https://jsfiddle.net/Balkanlii/ghecv1j8/...
来自于 2024-04-04 18:40:04
0
1
3528
在导航栏中居中显示下拉菜单 我制作了这个CSS/HTML。.navbar{width:100%;background-color:rgb(151,44,44);overflow:auto;}.navbara{...
来自于 2024-04-04 18:24:52
0
1
338
焦点不起作用时从显示隐藏更改为显示块 我试图让我的“searchbardropdown”在单击“searchbarinput”时显示，但这不起作用。有谁知道这是怎么回事？谢谢！在图中，您可以看到当输入获得焦点时背景颜色...
来自于 2024-04-04 14:24:47
0
1
371
个性化 Select2 Dropdown 的外观 在我看来，我使用select2Combobox作为我的下拉菜单。在这里，当Country选择更改时，我将该选定的id传递给JSON结果并获取结果，分配给省份组合框。发生这种情况时，...
来自于 2024-04-03 11:27:22
0
1
338
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！