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 相关文章推荐
HTTP状态代码以及定义(解释)
Feb 02 Javascript
JavaScript 节点操作 以及DOMDocument属性和方法
Dec 06 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
Jun 27 Javascript
输入框过滤非数字的js代码
Sep 18 Javascript
jquery实现简单文字提示效果
Dec 02 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
js实现倒计时及时间对象
Nov 15 Javascript
微信小程序 石头剪刀布实例代码
Jan 04 Javascript
vue使用watch 观察路由变化,重新获取内容
Mar 08 Javascript
微信小程序分页加载的实例代码
Jul 11 Javascript
js + css实现标签内容切换功能(实例讲解)
Oct 09 Javascript
基于JavaScript实现简单的轮播图
Mar 03 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实例分享判断客户端是否使用代理服务器及其匿名级别
2014/06/04 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
一个对于js this关键字的问题
2007/01/09 Javascript
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
调用HttpHanlder的几种返回方式小结
2013/12/20 Javascript
JS交换变量的方法
2015/01/21 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
jquery使整个div区域可以点击的方法
2015/06/24 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
JavaScript 函数节流详解及方法总结
2017/02/09 Javascript
iframe高度自适应及隐藏滚动条的实例详解
2017/09/29 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
详解如何探测小程序返回到webview页面
2019/05/14 Javascript
JS获取表格视图所选行号的ids过程解析
2020/02/21 Javascript
Python类的专用方法实例分析
2015/01/09 Python
Python爬取APP下载链接的实现方法
2016/09/30 Python
python实现自主查询实时天气
2018/06/22 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
详解10个可以快速用Python进行数据分析的小技巧
2019/06/24 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
Python操控mysql批量插入数据的实现方法
2020/10/27 Python
python实现MySQL指定表增量同步数据到clickhouse的脚本
2021/02/26 Python
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
年度考核自我鉴定
2013/11/09 职场文书
参观监狱心得体会
2014/01/02 职场文书
信息管理专业自荐书
2014/06/05 职场文书
学校工会工作总结2015
2015/05/19 职场文书
张丽莉观后感
2015/06/16 职场文书
安全生产感想
2015/08/07 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS
浅谈MySQL之select优化方案
2021/08/07 MySQL