jQuery 简单漂亮的 Nav 导航菜单
自己写的一个简单的导航菜单,先看效果:
鼠标悬浮时菜单项向上移动成蓝底白字,点击之后底部会有蓝条表示当前选中项。
页面代码,菜单的每一项都是一个 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 导航菜单的更多相关文章
- jQuery ui背景色动态渐变导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 一款jQuery立体感动态下拉导航菜单特效
一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...
- 一款基jquery超炫的动画导航菜单
今天给大家分享一款基jquery超炫的动画导航菜单.这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中.再次单击按钮,导航飞入左侧消息.动画效果很非常炫.一起看下效果图: 在线预览 ...
- 基于jQuery动画二级下拉导航菜单
春节回来给大家分享一款基于jQuery动画二级下拉导航菜单.鼠标经过的时候以动画的形式出现二级导航.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id=" ...
- jquery实现的个人中心导航菜单
之前为大家介绍了一款jquery和css3实现的很酷的菜单导航.这是一款由jquery开发的导航菜单.适合放在门户网站的个人用户中心后台.效果和美观都非常不错.我们先一起看看效果图: 在线预览 源 ...
- 使用 jQuery 和 CSS3 制作滑动导航菜单
这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示 ...
- jquery和css3实现滑动导航菜单
效果预览:http://keleyi.com/keleyi/phtml/html5/15/ 有都中颜色可供选择,请使用支持HTML5/CSS3的浏览器访问. HTML源代码: <!DOCTYPE ...
- jquery仿天猫商城左侧导航菜单
之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果,只是都是一小块一小块的,现在重新拼凑.我将一步一步的实现拼凑过程,希望对你有所帮助. Demo在 ...
- (转)jquery仿天猫商城左侧导航菜单
原文地址:http://www.cnblogs.com/WinKi/p/3398824.html 之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果 ...
随机推荐
- Cocos2dx 3.0 过渡篇(二十九)globalZOrder()与localZOrder()
前天非常难得的加班到八点...为什么说难得呢?由于平时我差点儿就没加班过.六点下班后想走就走,想留就留.率直洒脱.不拘一格.尽显男儿本色.程序猿,就是这么自信! -----------这篇博客的标题本 ...
- js模板引擎介绍搜集
js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...
- /proc/sys/vm/ 内存参数
linux下proc里关于磁盘性能的参数 http://blog.csdn.net/eroswang/article/details/6126646 我们在磁盘写操作持续繁忙的服务器上曾经碰到一个特 ...
- Linux内核设计与实现 读书笔记 转
Linux内核设计与实现 读书笔记: http://www.cnblogs.com/wang_yb/tag/linux-kernel/ <深入理解LINUX内存管理> http://bl ...
- hdu1050 Moving Tables
题目:http://acm.hdu.edu.cn/showproblem.php?pid=1050 求区间上点的最大重叠次数. #include <stdio.h> #include &l ...
- Golang学习 - unsafe 包
------------------------------------------------------------ 指针类型: *类型:普通指针,用于传递对象地址,不能进行指针运算. unsaf ...
- jquery . fancybox()
1.父页面 function chooseTopic(btn) {//选择议题 $.fancybox({ type : 'iframe', href : '', fitToView : false, ...
- A C
Problem Description Are you excited when you see the title "AC" ? If the answer is YES , A ...
- ubuntu 换源
经过自己一番折腾后,发现用这个方法换源最简单.直接. sudo vi /etc/apt/sources.list 把sources.list里面的内容全部替换为一下内容 deb http://mirr ...
- ubuntu创建、删除文件及文件夹,强制清空回收站方法
mkdir 目录名 => 创建一个目录 rmdir 空目录名 => 删除一个空目录 rm 文件名 文件名 => 删除一个文件或多个文件 rm –rf 非 ...