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 相关文章推荐
JavaScript 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
JavaScript Event事件学习第一章 Event介绍
Feb 07 Javascript
有关于JS构造函数的重载和工厂方法
Apr 07 Javascript
JavaScript回调(callback)函数概念自我理解及示例
Jul 04 Javascript
JavaScript设计模式之工厂模式和构造器模式
Feb 11 Javascript
jquery实现用户打分评分特效
May 28 Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 Javascript
H5用户注册表单页 注册模态框!
Sep 17 Javascript
Vue.js更改调试地址端口号的实例
Sep 19 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 Javascript
JS实现导航栏楼层特效
Jan 01 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执行速度全攻略(下)
2006/10/09 PHP
php实现的短网址算法分享
2014/06/20 PHP
PHP内存缓存功能memcached示例
2016/10/19 PHP
php 函数使用可变数量的参数方法
2017/05/02 PHP
html超链接打开窗口大小的方法
2013/03/05 Javascript
jQuery.holdReady()使用方法
2014/05/20 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
2014/09/17 Javascript
nodejs中转换URL字符串与查询字符串详解
2014/11/26 NodeJs
js在指定位置增加节点函数insertBefore()用法实例
2015/01/12 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
浅析JavaScript动画模拟拖拽原理
2016/12/09 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
微信小程序 网络请求(post请求,get请求)
2017/01/17 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
ionic实现底部分享功能
2017/05/11 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
2017/09/27 Javascript
Vue中在新窗口打开页面及Vue-router的使用
2018/06/13 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
小程序实现列表多个批量倒计时
2021/01/29 Javascript
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[01:22:29]真视界:2019年国际邀请赛总决赛
2020/01/29 DOTA
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
Django项目中包含多个应用时对url的配置方法
2018/05/30 Python
Python内存读写操作示例
2018/07/18 Python
Python从入门到精通之环境搭建教程图解
2019/09/26 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
商业街策划方案
2014/05/31 职场文书
政府采购方案
2014/06/12 职场文书
党员个人承诺书
2015/04/27 职场文书
干货:如何写好工作总结报告!
2019/05/10 职场文书