纯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 相关文章推荐
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
Jun 02 Javascript
基于JS实现简单的样式切换效果代码
Sep 04 Javascript
js生成随机数的过程解析
Nov 24 Javascript
JS实现数字格式千分位相互转换方法
Aug 01 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
Nov 23 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 Javascript
浅谈react.js中实现tab吸顶效果的问题
Sep 06 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 Javascript
vuex的使用及持久化state的方式详解
Jan 23 Javascript
js删除数组中的元素delete和splice的区别详解
Feb 03 Javascript
加快Vue项目的开发速度的方法
Dec 12 Javascript
ES2020 已定稿,真实场景案例分析
May 25 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
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
PHP中strncmp()函数比较两个字符串前2个字符是否相等的方法
2016/01/07 PHP
thinkPHP中配置的读取与C方法详解
2016/12/05 PHP
JavaScript 的方法重载效果
2009/08/07 Javascript
js 动态文字滚动的例子
2011/01/17 Javascript
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
基于jquery实现动态竖向柱状条特效
2016/02/12 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
2016/09/23 Javascript
简单的网页广告特效实例
2017/08/19 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
2017/10/12 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
小程序日历控件使用方法详解
2018/12/29 Javascript
Vue实现点击按钮复制文本内容的例子
2019/11/09 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
Python select及selectors模块概念用法详解
2020/06/22 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
Python大批量搜索引擎图像爬虫工具详解
2020/11/16 Python
iframe与window.onload如何使用详解
2020/05/07 HTML / CSS
法国最大电子商务平台:Cdiscount
2018/03/13 全球购物
世界上最大的皮肤科医生拥有和经营的美容网站:LovelySkin
2021/01/03 全球购物
Java软件工程师综合面试题笔试题
2013/09/08 面试题
《雷雨》教学反思
2014/02/20 职场文书
公司晚会策划方案
2014/05/17 职场文书
关于运动会广播稿200字
2014/10/08 职场文书
岗位聘任报告
2015/03/02 职场文书
志愿者服务活动总结报告
2015/05/06 职场文书
家长意见书
2015/06/04 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书
spring cloud 配置中心native配置方式
2021/09/25 Java/Android