纯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 相关文章推荐
jQuery.clean使用方法及思路分析
Jan 07 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
Nov 12 Javascript
JavaScript中的值类型转换介绍
Dec 31 Javascript
Javascript中innerHTML用法实例分析
Jan 12 Javascript
jQuery实现简单的日期输入格式化控件
Mar 12 Javascript
原生js结合html5制作小飞龙的简易跳球
Mar 30 Javascript
jQuery的层级查找方式分析
Jun 16 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
Oct 11 Javascript
使用vue-router为每个路由配置各自的title
Jul 30 Javascript
对layui数据表格动态cols(字段)动态变化详解
Oct 25 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
Sep 14 Javascript
基于angular实现树形二级表格
Oct 16 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
php通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
windows下zendframework项目环境搭建(通过命令行配置)
2012/12/06 PHP
PHP根据IP判断地区名信息的示例代码
2014/03/03 PHP
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
PHP上传图片类显示缩略图功能
2016/06/30 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
使用命令对象代替switch语句的写法示例
2015/02/28 Javascript
实现音乐播放器的代码(html5+css3+jquery)
2015/08/04 Javascript
浅谈javascript中replace()方法
2015/11/10 Javascript
Javascript之Math对象详解
2016/06/07 Javascript
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
vue构建动态表单的方法示例
2018/09/22 Javascript
微信小程序实现选项卡效果
2018/11/06 Javascript
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
微信小程序常用简易小函数总结
2019/02/01 Javascript
Python的shutil模块中文件的复制操作函数详解
2016/07/05 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
python处理“
2019/06/10 Python
Python目录和文件处理总结详解
2019/09/02 Python
如何通过Python实现RabbitMQ延迟队列
2020/11/28 Python
详解canvas在圆弧周围绘制文本的两种写法
2018/05/22 HTML / CSS
HTML5图片预览实例分享
2014/06/04 HTML / CSS
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
接口的多继承会带来哪些问题
2015/08/17 面试题
积极分子思想汇报
2014/01/04 职场文书
小学优秀班主任材料
2014/12/17 职场文书
三行辞职书范文
2015/02/26 职场文书
2015年助残日活动总结
2015/03/27 职场文书
大学生支教感言
2015/08/01 职场文书
nginx里的rewrite跳转的实现
2021/03/31 Servers