自己写的一个简单的导航菜单,先看效果:

鼠标悬浮时菜单项向上移动成蓝底白字,点击之后底部会有蓝条表示当前选中项。

页面代码,菜单的每一项都是一个 div ,其中包括一个 ul 用来放置显示文字等,另一个 div 则是底部的蓝条,需要给第一项和最后一项设置不同的 class ,样式需要用到:

<div id="nav">
  <div class="navItem indexNavItem">
    <ul class="navUl">
      <li>首页</li>
      <li class="hoverLi">首页</li>
    </ul>
    <div class="highlighter selectedNav"></div>
  </div>
  <div class="navItem">
    <ul class="navUl">
      <li>A</li>
      <li class="hoverLi">A</li>
</ul>
    <div class="highlighter"></div>
  </div>
  <div class="navItem lastNavItem">
    <ul class="navUl">
      <li>A</li>
      <li class="hoverLi">A</li>
    </ul>
    <div class="highlighter"></div>
  </div>
  <div id="logoutNavItem" class="navItem logoutNavItem lastNavItem">
    <ul class="navUl">
      <li>退出</li>
      <li class="hoverLi">退出</li>
    </ul>
    <div class="highlighter"></div>
  </div>
</div>

样式,主要就是每个菜单项的左右边框的设置以及 ul 和 li 的位置设置:

*
{
padding:;
margin:;
}
body
{
background-color: #fffff3;
font: 12px/1.6em Helvetica, Arial, sans-serif;
}
ul,li{
list-style: none;
}
#nav
{
text-align: center;
height: 50px;
font-size: 10px;
line-height: 30px;
background-color: #F0E6DB;
margin-bottom: 10px;
}
.navItem
{
cursor: pointer;
position: relative;
float: left;
width: 100px;
height: 50px;
font-size: 15px;
border-right: 2px solid rgb(255,255,255);
border-left: 2px solid rgb(255,255,255);
overflow: hidden;
font-weight:bold;
}
.indexNavItem
{
border-left: 4px solid rgb(255,255,255);
margin-left: 10px;
}
.lastNavItem
{
border-right: 4px solid rgb(255,255,255);
}
.logoutNavItem
{
float: right;
width: 120px;
margin-right: 10px;
border-left: 4px solid rgb(255,255,255);
}
.navUl
{
position: relative;
height: 100px;
width: 100%;
border-bottom: 5px solid rgb(2,159,212);
}
.navUl li
{
height: 50px;
line-height: 50px;
}
.highlighter
{
position: absolute;
bottom:;
height: 5px;
width: 100%;
}
.selectedNav
{
background-color: #029FD4;
}
.hoverLi
{
background-color: #029FD4;
color: #ffffff;
}

接下来就是给菜单编写悬浮和单击事件的 js 代码了,悬浮时将 ul 上移 li 的高度,鼠标移开后再恢复,点击之后就是给蓝条的 div 添加样式即可:

$(function() {
$(".navItem").hover(function() {
$(this).children("ul").animate({
top: "-50px"
}, 100);
}, function() {
$(this).children("ul").animate({
top: "0px"
}, 100);
}); $(".navItem").click(function(event) {
$(this).siblings().children('.highlighter').removeClass('selectedNav');
$(this).children('.highlighter').addClass('selectedNav');
});
})

jQuery 简单漂亮的 Nav 导航菜单的更多相关文章

  1. jQuery ui背景色动态渐变导航菜单

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

  2. 一款jQuery立体感动态下拉导航菜单特效

    一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...

  3. 一款基jquery超炫的动画导航菜单

    今天给大家分享一款基jquery超炫的动画导航菜单.这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中.再次单击按钮,导航飞入左侧消息.动画效果很非常炫.一起看下效果图: 在线预览   ...

  4. 基于jQuery动画二级下拉导航菜单

    春节回来给大家分享一款基于jQuery动画二级下拉导航菜单.鼠标经过的时候以动画的形式出现二级导航.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=" ...

  5. jquery实现的个人中心导航菜单

    之前为大家介绍了一款jquery和css3实现的很酷的菜单导航.这是一款由jquery开发的导航菜单.适合放在门户网站的个人用户中心后台.效果和美观都非常不错.我们先一起看看效果图: 在线预览   源 ...

  6. 使用 jQuery 和 CSS3 制作滑动导航菜单

    这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示  ...

  7. jquery和css3实现滑动导航菜单

    效果预览:http://keleyi.com/keleyi/phtml/html5/15/ 有都中颜色可供选择,请使用支持HTML5/CSS3的浏览器访问. HTML源代码: <!DOCTYPE ...

  8. jquery仿天猫商城左侧导航菜单

    之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果,只是都是一小块一小块的,现在重新拼凑.我将一步一步的实现拼凑过程,希望对你有所帮助. Demo在 ...

  9. (转)jquery仿天猫商城左侧导航菜单

    原文地址:http://www.cnblogs.com/WinKi/p/3398824.html 之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果 ...

随机推荐

  1. 淘宝Refrash_token签名错误的解决办法

    最近在做淘宝相关应用,想要通过Refrash_token来延长SessionKey的授权时间,但是总是报406 sign error. 经过多次尝试和多方询问,方才知道原来淘宝给的.net SDK里面 ...

  2. 解决fonts.gstatic.com无法访问

    最近很多google的服务又在大陆地区受限了,原因不做过多讨论.屏蔽这些服务不仅仅意味着gmail,谷歌学术等方便的工具使用受到限制,更意味着很多寄托于google的web服务无法使用.wordpre ...

  3. iOS缓存框架-PINCache解读

    文/Amin706(简书作者)原文链接:http://www.jianshu.com/p/4df5aad0cbd4著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 在项目中总是需要缓存一 ...

  4. C#面向对象(三)接口实现多态

    一.如何用接口实现多态? 1.定义一个接口. using System; using System.Collections.Generic; using System.Linq; using Syst ...

  5. 对C++/CLR的一些评价

    我以后要是再用这东西,我自砍双手

  6. [Java] HashMap详解

    转自:http://alex09.iteye.com/blog/539545 HashMap 和 HashSet 是 Java Collection Framework 的两个重要成员,其中 Hash ...

  7. Android(java)学习笔记264:Android下的属性动画高级用法(Property Animation)

    1. 大家好,在上一篇文章当中,我们学习了Android属性动画的基本用法,当然也是最常用的一些用法,这些用法足以覆盖我们平时大多情况下的动画需求了.但是,正如上篇文章当中所说到的,属性动画对补间动画 ...

  8. 3. Android框架和工具之 xUtils(DbUtils )

    1. xUtils简介 xUtils 包含了很多实用的android工具.xUtils 最初源于Afinal框架,进行了大量重构,使得xUtils支持大文件上传,更全面的http请求协议支持(10种谓 ...

  9. 【阿里云产品公测】PTS测试 SLB+ECS+RDS组合的DZ论坛负载极限压力,100并发2000页

    作者:阿里云用户woaj01 ​​环境介绍: 1.ECS:1核 1G 5M 杭州 2.RDS:240M  5G  杭州内网 3.SLB:私网实例​ 配置测试环境: 测试脚本: 1.生成参数文件,我的方 ...

  10. OC之protocol监听器的实现

    画图 图解 代码 总结 一.画图 本人画了一个图(字体和画图水平请忽略) 二.图解 1.首先我们上边是一个按钮的类,按钮当中包括了一条线,这个线是什么呢? 其实难理解就难理解到这条线上了 1⃣️这条线 ...