jQuery实现导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery实现导航栏</title>
<style>
*{
padding:0;
margin:0;
}
#navigation>ul{
list-style: none;
}
#navigation>ul>li{
float: left;
width: 80px;
height: 30px;
background: #009f95;
color: #ffffff;
text-align: center;
line-height: 30px;
cursor:pointer;
}
#navigation>ul>li:hover{
background:#0B61A4;
}
#navigation>ul>li>a{
color:#fff;
text-decoration:none;
}
#navigation>ul>li>ul{
display:none; }
#navigation>ul>li>ul>li{
background: #00B83F;
list-style: none;
}
#navigation>ul>li>ul>li:hover{
background: #1E9FFF;
}
#navigation>ul>li>ul>li>a{
color:#fff;
text-decoration: none;
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li>
<a href="">1</a>
<ul>
<li><a href="">11</a></li>
<li><a href="">13</a></li>
<li><a href="">14</a></li>
</ul>
</li>
<li>
<a href="">2</a>
<ul>
<li><a href="">21</a></li>
<li><a href="">22</a></li>
<li><a href="">23</a></li>
</ul>
</li>
<li>
<a href="">3</a>
</li>
</ul>
</div>
<script src="../js/vendor/jquery-3.2.1.min.js"></script>
<script>
$("#navigation>ul>li:has(ul)").hover(function(){
//show
$(this).children('ul').stop().slideDown();
},function(){
//hide
$(this).children('ul').stop().slideUp();
}) </script>
</body> </html>
jQuery实现导航栏的更多相关文章
- jQuery Mobile 导航栏
jQuery Mobile 导航栏 导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部. 默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button"). ...
- jquery实现导航栏跟随窗口滚动
最近在制作一个模版的时候用到的一个jquery插件,当网站导航滚动到当前可见页面顶部时,固定在顶部并随窗口滚动,有很多的网站前台模版有有类似的效果. smohan.fixednav.js /* * 随 ...
- jquery 实现导航栏滑动效果
精简的代码实现导航栏滑动效果,实现详解: 1.滑块位置:通过父节点position=fixed,子节点position=absolute方式,实现子节点浮动: 2.导航栏居中:通过left=0px,r ...
- 简单的jquery左侧导航栏和页面选中
这里是要实现导航的左侧并选中的,此功能需引用jquery 左侧导航: <div class="box"> <ul class="menu"&g ...
- 简单的jquery左侧导航栏和页面选中效果
这里是要实现导航的左侧并选中的,此功能需引用jquery 效果: 左侧导航 <div class="box"> <ul class="menu" ...
- jquery实现导航栏头部点击变换颜色
实现效果如下: 话不多说直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- jquery实现导航栏鼠标点击后实行背景高亮,点击离开恢复(超级简单!!!!),jquery导航栏
1.header部分要引入Jquery <asp:Content ID="HeaderContent" runat="server" ContentPla ...
- jquery实现导航栏效果
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
- JQuery Mobile - 导航栏选中状态代码
class="ui-btn-active" 参考: https://wizardforcel.gitbooks.io/w3school-jqmobile/content/8.htm ...
随机推荐
- zabbix共享内存报错cannot create semaphore set
zabbix共享内存报错 cannot open log: cannot create semaphore set: [28] No space left on device 报错原因: kernel ...
- 关于Spring MVC中的表单标签库的使用
普通的MVC设计模式中M代表模型层,V代表视图层,C代表控制器,SpringMVC是一个典型的MVC设置模式的框架,对于视图和控制器的优化很多,其中就有与控制器相结合的JSP的表单标签库. 我们先简单 ...
- redis在windows上安装+RedisDesktopManager
redis我就不在这里介绍了,这里直接介绍windows安装redis服务,网上有很多介绍windows版,我这边安装的是一个极简版的. redis官方下载地址:https://redis.io/do ...
- oracle 帐号scott被锁定 如何解锁
由于多次输入:账号 密码不对 oracle 帐号scott被锁定 如何解锁: 具体操作步骤如下:C:> sqlplus请输入用户名:sys输入口令:sys as sysdba //注意:在口令这 ...
- 安装Xcode主题
安装Xcode主题 下载地址 https://github.com/YouXianMing/Xcode-Themes 安装教程 1. 安装文件夹中的字体 2. 如下图,执行 ./cp_themes.s ...
- Microsoft Visual Studio 遇到了问题需要关闭
新年刚来Microsoft Visual Studio就找麻烦,debug的时候如果不打断点可以正常跑过,一打断点就崩溃,重启.报的问题是:Microsoft Visual Studio 遇到了问题需 ...
- [BZOJ 1924][Sdoi2010]所驼门王的宝藏
1924: [Sdoi2010]所驼门王的宝藏 Time Limit: 5 Sec Memory Limit: 128 MBSubmit: 1285 Solved: 574[Submit][Sta ...
- python正则二
在python中,我们可以使用re模块来使用正则表达式. 正则表达式使用\对特殊字符进行转义,因为python本身也是用\作为转义,所以在使用正则的时候会出现这样的情况,'python\\.org', ...
- angularjs中factory, service和provider
在Angular里面,services作为单例对象在需要到的时候被创建,只有在应用生命周期结束的时候(关闭浏览器)才会被清除.而controllers在不需要的时候就会被销毁了(因为service的底 ...
- BZOJ1499:[NOI2005]瑰丽华尔兹(DP,单调队列)
Description 你跳过华尔兹吗?当音乐响起,当你随着旋律滑动舞步,是不是有一种漫步仙境的惬意?众所周知,跳华尔兹时,最重要的是有好的音乐.但是很少有几个人知道,世界上最伟大的钢琴家一生都漂泊在 ...