JQuery 写的个性导航菜单


Posted in Javascript onDecember 24, 2009

(一):XHTML:

<div id="sidebar"> 
<ul> 
<li><a href="index.html" class="normalMenu">Home</a></li> 
<li><a href="services.html" class="normalMenu">Services</a></li> 
<li><a href="faq.html" class="normalMenu">FAQ</a></li> 
<li><a href="testimonials.html" class="selectedMenu">Testimonials</a></li> 
<li><a href="about.html" class="normalMenu">About Alpacas</a></li> 
<li><a href="contact.html" class="normalMenu">Contact Us</a></li> 
</ul> 
</div>

(二):JQuery
$(document).ready(function(){ 
$('#navigationMenu li .normalMenu').each(function(){ 
// create a duplicate hyperlink and position it above the current one 
$(this).before($(this).clone().removeClass().addClass('hoverMenu')); 
}); 
$('#navigationMenu li').hover(function(){ 
// we assign an action on mouse over 
$(this).find('.hoverMenu').stop().animate({marginTop:'0px'},200); 
// the animate method provides countless possibilities 
}, 
function(){ 
// and an action on mouse out 
$(this).find('.hoverMenu').stop().animate({marginTop:'-25px'},200); 
}); 
});

(三)CSS
/* Page styles */ 
body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{ 
margin:0px; 
padding:0px; 
} 
body{ 
margin-top:20px; 
font-family:Arial, Helvetica, sans-serif; 
color:#51555C; 
height:100%; 
font-size:12px; 
} 
/* Navigation menu styles */ 
ul{ 
height:25px; 
font-family:Arial, Helvetica, sans-serif; 
font-size:12px; 
} 
ul li{ 
border:1px solid #444444; 
display:inline-block; 
float:left; 
height:25px; 
list-style-type:none; 
overflow:hidden; 
} 
ul li a, ul li a:hover, 
ul li a:visited{ 
text-decoration:none; 
} 
.normalMenu, .normalMenu:visited, 
.hoverMenu, .hoverMenu:visited, 
.selectedMenu,.selectedMenu:visited { 
outline:none; 
padding:5px 10px; 
display:block; 
} 
.hoverMenu,.hoverMenu:visited, 
.selectedMenu,.selectedMenu:visited { 
margin-top:-25px; 
background:url(img/grey_bg.gif) repeat-x #eeeeee; 
color:#444444; 
} 
.selectedMenu,.selectedMenu:visited { 
margin:0; 
} 
.normalMenu, .normalMenu:visited{ 
color:white; 
background:url(img/dark_bg.gif) repeat-x #444444; 
}

(四) 效果图
JQuery 写的个性导航菜单 
Javascript 相关文章推荐
关于JS中的闭包浅谈
Aug 23 Javascript
js中的数组Array定义与sort方法使用示例
Aug 29 Javascript
javascript的alert box在java中如何显示多行
May 18 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
Oct 29 Javascript
AngularJS指令与指令之间的交互功能示例
Dec 14 Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
JS 中使用Promise 实现红绿灯实例代码(demo)
Oct 20 Javascript
layer实现关闭弹出层刷新父界面功能详解
Nov 15 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
Jan 13 Javascript
JavaScript引用类型Array实例分析
Jul 24 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
使用Node.js写一个代码生成器的方法步骤
May 10 Javascript
JavaScript中出现乱码的处理心得
Dec 24 #Javascript
js 页面刷新location.reload和location.replace的区别小结
Dec 24 #Javascript
CSS+Jquery实现页面圆角框方法大全
Dec 24 #Javascript
HTA版JSMin(省略修饰语若干)基于javascript语言编写
Dec 24 #Javascript
javascript下arguments,caller,callee,call,apply示例及理解
Dec 24 #Javascript
关于Aptana Studio生成自动备份文件的解决办法
Dec 23 #Javascript
window.js 主要包含了页面的一些操作
Dec 23 #Javascript
You might like
如何实现php图片等比例缩放
2015/07/28 PHP
php封装的验证码类分享
2017/02/26 PHP
jquery 防止表单重复提交代码
2010/01/21 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
2013/03/01 Javascript
JS获取农历日期具体实例
2013/11/14 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
javascript实现表格排序 编辑 拖拽 缩放
2015/01/02 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
js实现根据身份证号自动生成出生日期
2015/12/15 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
2016/05/09 Javascript
window.onload绑定多个事件的两种解决方案
2016/05/15 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
jQuery实现简单的抽奖游戏
2017/05/05 jQuery
详解node服务器中打开html文件的两种方法
2017/09/18 Javascript
BootStrap模态框闪退问题实例代码详解
2018/12/10 Javascript
Vue实现类似Spring官网图片滑动效果方法
2019/03/01 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
2020/02/10 Javascript
基于Python的身份证号码自动生成程序
2014/08/15 Python
基于Django的python验证码(实例讲解)
2017/10/23 Python
python实现人工智能Ai抠图功能
2019/09/05 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
Python爬虫设置ip代理过程解析
2020/07/20 Python
深入浅析HTML5中的SVG
2015/11/27 HTML / CSS
英国二手物品交易网站:Preloved
2017/10/06 全球购物
Bose法国官网:购买耳机、扬声器、家庭影院、专业音响
2017/12/21 全球购物
Myholidays美国:在线旅游网站
2019/08/16 全球购物
俄罗斯便宜的在线服装商店:GroupPrice
2020/04/10 全球购物
总经理助理岗位职责
2013/11/08 职场文书
幼儿园运动会加油词
2014/02/14 职场文书
工作睡觉检讨书
2014/02/25 职场文书
《大自然的语言》教学反思
2014/04/08 职场文书
导游个人求职信
2014/04/25 职场文书
学校安全责任书范本
2014/07/23 职场文书
聘任证明怎么写
2015/03/02 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL