纯CSS打造的导航菜单(附jquery版)


Posted in Javascript onAugust 07, 2010

方式一:直接编写代码实现
效果如下:
纯CSS打造的导航菜单(附jquery版)
代码如下:

<html> 
<head> 
<title>无需表格的菜单</title> 
<style> 
<!-- 
body{ 
background-color:#ffdee0; 
} 
#navigation { 
width:200px; 
font-family:Arial; 
} 
#navigation ul { 
list-style-type:none; /* 不显示项目符号 */ 
margin:0px; 
padding:0px; 
} 
#navigation li { 
border-bottom:1px solid #ED9F9F; /* 添加下划线 */ 
} 
#navigation li a{ 
display:block; /* 区块显示 */ 
padding:5px 5px 5px 0.5em; 
text-decoration:none; 
border-left:12px solid #711515; /* 左边的粗红边 */ 
border-right:1px solid #711515; /* 右侧阴影 */ 
width:175px; /* xg_超连接以外的部分也触发CSS样式效果 */ 
} 
#navigation li a:link, #navigation li a:visited{ 
background-color:#c11136; 
color:#FFFFFF; 
} 
#navigation li a:hover{ /* 鼠标经过时 */ 
background-color:#990020; /* 改变背景色 */ 
color:#ffff00; /* 改变文字颜色 */ 
} 
--> 
</style> 
</head> 
<body> 
<div id="navigation"> 
<ul> 
<li><a href="#">Home</a></li> 
<li><a href="#">News</a></li> 
<li><a href="#">Sports</a></li> 
<li><a href="#">Weather</a></li> 
<li><a href="#">Contact Me</a></li> 
</ul> 
</div> 
</body> 
</html>

方式二:使用jQuery 代码实现
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<title>伸缩的菜单,用toggle()重写</title> 
<style> 
<!-- 
body{ 
background-color:#ffdee0; 
} 
#navigation { 
width:200px; 
font-family:Arial; 
} 
#navigation > ul { 
list-style-type:none; /* 不显示项目符号 */ 
margin:0px; 
padding:0px; 
} 
#navigation > ul > li { 
border-bottom:1px solid #ED9F9F; /* 添加下划线 */ 
} 
#navigation > ul > li > a{ 
display:block; /* 区块显示 */ 
padding:5px 5px 5px 0.5em; 
text-decoration:none; 
border-left:12px solid #711515; /* 左边的粗红边 */ 
border-right:1px solid #711515; /* 右侧阴影 */ 
} 
#navigation > ul > li > a:link, #navigation > ul > li > a:visited{ 
background-color:#c11136; 
color:#FFFFFF; 
} 
#navigation > ul > li > a:hover{ /* 鼠标经过时 */ 
background-color:#990020; /* 改变背景色 */ 
color:#ffff00; /* 改变文字颜色 */ 
} 
/* 子菜单的CSS样式 */ 
#navigation ul li ul{ 
list-style-type:none; 
margin:0px; 
padding:0px 0px 0px 0px; 
} 
#navigation ul li ul li{ 
border-top:1px solid #ED9F9F; 
} 
#navigation ul li ul li a{ 
display:block; 
padding:3px 3px 3px 0.5em; 
text-decoration:none; 
border-left:28px solid #a71f1f; 
border-right:1px solid #711515; 
} 
#navigation ul li ul li a:link, #navigation ul li ul li a:visited{ 
background-color:#e85070; 
color:#FFFFFF; 
} 
#navigation ul li ul li a:hover{ 
background-color:#c2425d; 
color:#ffff00; 
} 
--> 
</style> 
<script language="javascript" src="jquery.min.js"></script> 
<script language="javascript"> 
$(function(){ 
$("li").find("ul").prev().click(function(){ 
$(this).next().toggle(); 
}); 
$("li:has(ul)").find("ul").hide(); 
}); 
</script> 
</head> 
<body> 
<div id="navigation"> 
<ul id="listUL"> 
<li><a href="#">Home</a></li> 
<li><a href="#">News</a> 
<ul> 
<li><a href="#">Lastest News</a></li> 
<li><a href="#">All News</a></li> 
</ul> 
</li> 
<li><a href="#">Sports</a> 
<ul> 
<li><a href="#">Basketball</a></li> 
<li><a href="#">Football</a></li> 
<li><a href="#">Volleyball</a></li> 
</ul> 
</li> 
<li><a href="#">Weather</a> 
<ul> 
<li><a href="#">Today's Weather</a></li> 
<li><a href="#">Forecast</a></li> 
</ul> 
</li> 
<li><a href="#">Contact Me</a></li> 
</ul> 
</div> 
</body> 
</html>

注意:该代码必须加载了jquery.min.js 文件,并且所写的CSS 只能在Firefox 浏览器中正常显示。
Javascript 相关文章推荐
js登录弹出层特效
Mar 07 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
JS继承用法实例分析
Feb 05 Javascript
JavaScript显示表单内元素数量的方法
Apr 02 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
Dec 09 Javascript
小白谈谈对JS原型链的理解
May 03 Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 Javascript
关于JS变量和作用域详解
Jul 28 Javascript
基于AngularJS的简单使用详解
Sep 10 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
Nov 06 Javascript
vue使用Font Awesome的方法步骤
Feb 26 Javascript
JS数组方法join()用法实例分析
Jan 18 Javascript
基于jquery的商品展示放大镜
Aug 07 #Javascript
jquery autocomplete自动完成插件的的使用方法
Aug 07 #Javascript
jQuery的实现原理的模拟代码 -5 Ajax
Aug 07 #Javascript
javascript new fun的执行过程
Aug 05 #Javascript
过虑特殊字符输入的js代码
Aug 05 #Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
Aug 05 #Javascript
javascript new后的constructor属性
Aug 05 #Javascript
You might like
在线短消息收发的程序,不用数据库
2006/10/09 PHP
PHP中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
codeigniter中实现一次性加载多个view的方法
2015/03/20 PHP
php获取网页上所有链接的方法
2015/04/03 PHP
php 输出json及显示json中的中文汉字详解及实例
2016/11/09 PHP
PHP无限极分类函数的实现方法详解
2017/04/15 PHP
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
Javascript改变CSS样式(局部和全局)
2013/12/18 Javascript
angularjs中的单元测试实例
2014/12/06 Javascript
javascript中replace( )方法的使用
2015/04/24 Javascript
简单谈谈javascript中this的隐式绑定
2016/02/22 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
2016/10/10 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
2018/07/19 Javascript
element-ui多文件上传的实现示例
2019/04/10 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
python3编写C/S网络程序实例教程
2014/08/25 Python
Python中Random和Math模块学习笔记
2015/05/18 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
Flask和Django框架中自定义模型类的表名、父类相关问题分析
2018/07/19 Python
numpy 声明空数组详解
2019/12/05 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
师范大学应届生求职信
2013/11/21 职场文书
个人评价范文分享
2014/01/11 职场文书
护士思想汇报
2014/01/12 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
交通安全横幅标语
2014/10/07 职场文书
英雄儿女观后感
2015/06/09 职场文书
余世维讲座观后感
2015/06/11 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书
JDBC连接的六步实例代码(与mysql连接)
2021/05/12 MySQL
浅谈Laravel中使用Slack进行异常通知
2021/05/29 PHP
教你怎么用Python实现GIF动图的提取及合成
2021/06/15 Python
Python标准库pathlib操作目录和文件
2021/11/20 Python
pytest实现多进程与多线程运行超好用的插件
2022/07/15 Python