使用定时器、鼠标移动事件

var img = $('#user_head');
var menu = $('.nav_list');
var i=0;
var timer;
img.mouseenter(function () {
clearTimeout(timer)
menu.show()
})
img.mouseleave(function () {
timer = window.setTimeout(function () {
menu.hide()
},500)
})
menu.mouseenter(function () {
clearTimeout(timer)
// menu.css('visibility','vidible')
})
menu.mouseleave(function () {
menu.hide()
})

使用纯css方式

  • html
<nav class="nav-swrap">
<ul>
<li><a href="#">首页</a> </li>
<li>
<a href="#">消息管理</a>
<ul class="sub-nav">
<li><a href="#1">添加用户</a> </li>
<li><a href="#">删除用户</a> </li>
<li><a href="#">查询用户</a> </li>
</ul>
</li>
<li>
<a href="#">用户管理</a>
<ul class="sub-nav">
<li><a href="#">添加用户</a> </li>
<li><a href="#">删除用户</a> </li>
<li><a href="#">修改用户</a> </li>
</ul>
</li>
<li><a href="#">头像</a></li>
</ul> </nav>
  • css
*{
padding: 0; margin: 0; list-style: none;
}
/*初始化 a */
a{
text-decoration: none; color: deepskyblue;
}
/*设置外层导航布局*/
.nav-swrap>ul{
display: -webkit-box;
width: 80%;
height: 50px;
margin: 0 auto;
}
/*外层li*/
.nav-swrap>ul>li{
-webkit-box-flex: 1;
height: 100%; line-height: 50px;
background-color: #eee;
text-align: center;
} /*内层ul, 绝对定位, 高度为0,保证鼠标移动到二级导航下,不会出现*/
.sub-nav{
padding-top: 10px;
width: 100%;
-webkit-perspective: 400px; /* 透视,站在400px前看 */
}
/*内层li*/
.sub-nav>li{
background: -webkit-linear-gradient(top, #ccc,#eee);
width: 50%;
margin: 0 auto;
}
.sub-nav{
display: none;
}
.nav-swrap>ul>li>a{
display: inline-block;
height: 100%;
width: 100%;
}
.nav-swrap>ul>li>a:hover+ul,.sub-nav:hover{
display: block;
}

js导航下拉菜单的更多相关文章

  1. 用原生JS实现的一个导航下拉菜单,下拉菜单的宽度与浏览器视口的宽度一样(js+html+css)

    这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消 ...

  2. 纯CSS实现二级导航下拉菜单--css的简单应用

    思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...

  3. 纯css和js版下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. js 联动下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. js版本下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. JS实现下拉菜单的功能

    <!DOCTYPE html> <html> <head> <meta charset = "utf8"> <title> ...

  7. jq+css+html简单实现导航下拉菜单

    相信导航栏下拉菜单是web开发最常见的一个item了.这里就不做介绍了,直接上code. Html部分 <div class="_nav"> <ul id=&qu ...

  8. HTML DOM部分---做竖向横向的下拉导航 下拉菜单 图片轮播(圆点、箭头) 选项卡 进度条;

    1,竖向下拉导航 鼠标单击打开 再打击关闭 <style> *{ margin:0px auto; padding:0px;} div{ width:100px; height:50px; ...

  9. 兼容ie7的导航下拉菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 「HNOI 2015」实验比较

    \(Description\) 有\(n\)个元素,对于每个元素\(x_i\)最多知道一个形如\(x_j < x_i\)或\(x_j=x_i\)的条件,问有多少合法的序列.合法的序列满足每个元素 ...

  2. linux 动态库加载路径修改

    1.在 /etc/ld.so.conf 文件中添加搜索路径,重启或者 ldconfig 生效: 2.在 /etc/ld.so.conf.d 目录下添加 *.conf 文件,其中可以添加搜索路径,重启获 ...

  3. 在Gogland里对GO程序进行单元测试!

    单元测试在程序开发中具有很重要的作用! 1,可以保证程序代码的健壮,能够最小范围测试程序代码,从而保证程序的正确性! 2,可以通过单元测试代码快速了解当前的程序. 我在先前的几个软件公司工作时候,都对 ...

  4. kali linux之steghide

    Steghide  Linux 命令行隐写工具 Steghide是一款开源的隐写术软件,它可以让你在一张图片或者音频文件中隐藏你的秘密信息,而且你不会注意到图片或音频文件发生了任何的改变.而且,你的秘 ...

  5. ORM的查询操作

    查询的分类 class Author(models.Model): name = models.CharField(max_length=32) age = models.IntegerField() ...

  6. [javascript]——移动端 HTML5 图片上传预览和压缩

    在开发移动端web网页中,我们不可避免的会遇到文件上传的功能,但由于手机图片尺寸太大,上传时间过长导致用户体验太差,就需要在上传前对图片进行一定的压缩. 在代码之前,有必要先了解我们即将使用到的几个A ...

  7. Swift 函数提前返回

    简评:函数提前返回主要的好处是:将每个错误处理进行分离,审查代码时不需要考虑多种复杂异常,我们可以吧注意力集中在也业务逻辑中,调试代码时可以直接在异常中打断点. 提前返回 首先来看一下需要改进的代码示 ...

  8. urllib的使用

    1.urllib 中的urlopen urllib.urlopen(url,data) 如果请求是json格式,则data是json.dumps(data_dict)形成的数据,注意,不能在进行url ...

  9. CSS03--框模型、定位position、浮动

    我们接着“CSS02”,继续学习一些新的样式属性. 1.框模型:   规定了元素框处理  元素内容.内边距(padding).边框(border).外边距(margin,可以是负值)的方式 2.内边距 ...

  10. js继承(自备水,这非常干货)

    讲js继承之前,想一想什么是继承? 生活中有很多例子,比方说继承财产,继承女朋友的前男友的前女友 ヽ(ー_ー)ノ ,这些和js继承差不多,但是有一个不一样的地方,就是继承过后,原先的人就没有了,js继 ...