WCDSTUDIO专注于互联网服务!
24小时网站建设热线:15006227297
首页网站运营网站建设教程

网站运营

官方动态

网站建设教程

网站建设知识

网站建设与管理

一个简单的JQ导航(二级三级菜单)


这其实是一个很简单的JQ的特效,对于像我这样的新手也能快速掌握,甚至是触类旁通。

那么就简单地说下这个特效是怎么做的。

在页面中插入这样一段js代码
<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>

然后在页面的body里面编写导航代码,如下

<ul class="nav">
<li><a href="#">网站首页</a></li>
<li>
<a href="#">产品中心</a>
<ul>
<li><a href="#">干燥柜</a></li>
<li>
<a href="#">氮气柜</a>
<ul>
<li><a href="#">智能氮气柜</a></li>
<li><a href="#">不锈钢氮气柜</a></li>
<li><a href="#">洁净氮气柜</a></li>
<li><a href="#">非标订制氮气柜</a></li>
</ul>
</li>
<li><a href="#">工业烘箱</a></li>
<li><a href="#">培养箱</a></li>
<li><a href="#">环境试验箱</a></li>
</ul>
</li>
<li><a href="#">新闻中心</a></li>
</ul>

因为有三级菜单,所以里面嵌套了下,再加上一个class就够了。

之后是设置菜单样式

<style type="text/css">
  *{ margin:0; padding:0;}
  body{ padding:20px;}
  ul{ list-style:none;}
  a:link{ text-decoration:none;}
  /*以下样式*/
  .nav{ background:#eee;}
  .nav:after{ content:""; clear:both; height:0; visibility:hidden; display:block;}
  .nav li{ float:left; position:relative;}
  .nav li a{ display:block; width:150px; height:30px; line-height:30px; padding-left:20px;}
  .nav li a:hover{ background:#c00; color:#fff;}
  .nav li ul{ position:absolute; top:30px; left:0; background:#f3f3f3;}
  .nav li ul li{ float:none;}
  .nav li ul li ul{ position:absolute; left:170px; top:0;}
  .nav li ul li ul li{}
  </style>


最后就是加入特效的一段JQ代码了:

<script type="text/javascript">
  $(".nav li ul").hide();
  $(".nav li").mouseover(function(){
$(this).addClass("cur")
$(this).find('ul:first').slideDown("fast")
})

$(".nav li").mouseleave(function(){
$(this).removeClass("cur")
$(this).find('ul:first').slideUp("fast")

})

</script>


tip:在样式表中我并没有让二级菜单隐藏,其实也可以在样式表中加入display:none;事先隐藏二级三级菜单的。
我是在JQ的代码里面第一行就让ul li下的所有的ul都隐藏,这样在打开页面的时候就隐藏了。

还有如果是特别熟悉css的人,可能对:first-child比较熟悉,这样这个简短的JQ代码应该是更容易看懂了。

发表时间

20160826

文章标签

被浏览次数

点我搜索

“CSS”相关的文章

  • 昆山网站建设小编讲讲IIS如何使用

    2018-12-14

    通过前文《如何在win7系统里创建ASP程序测试环境》我们学会了在win7系统里面安装IIS,那么如何使用IIS来创建运行网站呢?...

  • Ps Play无法连接的问题

    2018-04-05

    前段时间发了一个替代Ps Play的移动端设计稿预览工具,不过做为日常不太使用PsMirror的人来说,可能不会去专门购买,所以还是用回了Ps Play,也顺便解决了无法连接预览的问题。...

  • 替代Ps play的设计稿实时预览工具PsMirror

    2018-01-31

    PsMirror是一款实时预览photoshop设计稿的工具。 它让你极方便地在手机上查看PS中的设计稿, 提升设计效率。 支持android/ios两个平台......

  • 配置PHPStorm2017主题(颜色字体)

    2017-12-24

    PHPstorm默认的主题和可选的主题有时候不能满足有些人的需求,怎么配置自己喜欢的主题呢?首先先去下载自己喜欢的主题:http://www.phpstorm-themes.com/...

  • 使用css解决视频大小自适应

    2017-03-07

    自适应网站有的时候会碰到视频页面,那么怎么样才能让页面中的视频也能自适应设备屏幕尺寸呢?...

  • 如何优化自己的网站

    2016-12-19

    一个网站如果我们访问的时候,他的页面打开速度很慢,或者页面看起来很糟糕,看起来很费劲,让人不舒服,那么都是会影响访客的体验,使访客失去继续访问的兴趣,那么怎么优化自己的网站就是一件很重要的事。...

WCDSTUDIO专注于互联网服务

立即沟通您的需求
版权所有 WCDSTUDIO © All Rights Reserved 2015-2020CSS快速查询CSS选择符演示html常用标签演示flexui