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 相关文章推荐
jValidate 基于jQuery的表单验证插件
Dec 12 Javascript
Fixie.js 自动填充内容的插件
Jun 28 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
Mar 23 Javascript
Backbone.js的一些使用技巧
Jul 01 Javascript
JavaScript与jQuery实现的闪烁输入效果
Feb 18 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 Javascript
详解Javascript数据类型的转换规则
Dec 12 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
Feb 20 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
Sep 18 Javascript
package.json配置文件构成详解
Aug 27 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 Javascript
微信小程序实现多行文字滚动
Nov 18 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安全防范技巧分享
2011/11/03 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
Yii2框架实现利用mpdf创建pdf文件功能示例
2019/02/08 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
2013/07/15 Javascript
js 动态加载事件的几种方法总结
2013/12/25 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
React-Native 组件之 Modal的使用详解
2017/08/08 Javascript
element-ui使用导航栏跳转路由的用法详解
2018/08/22 Javascript
JQuery判断radio单选框是否选中并获取值的方法
2019/01/17 jQuery
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
python 中的列表解析和生成表达式
2011/03/10 Python
linux查找当前python解释器的位置方法
2019/02/20 Python
python入门之基础语法学习笔记
2020/02/08 Python
pandas数据处理之绘图的实现
2020/06/15 Python
matplotlib基础绘图命令之bar的使用方法
2020/08/13 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
SportsDirect.com新加坡:英国第一体育零售商
2019/03/30 全球购物
自荐信模版
2013/10/24 职场文书
奶茶店创业计划书范文
2014/01/17 职场文书
写求职信有哪些注意事项
2014/05/08 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
先进单位申报材料
2014/12/25 职场文书
大班下学期个人总结
2015/02/13 职场文书
博士生专家推荐信
2015/03/25 职场文书
工厂仓管员岗位职责
2015/04/01 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis
微信小程序调用python模型
2022/04/21 Python
JavaScript实现一键复制内容剪贴板
2022/07/23 Javascript