纯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,水平有待提高
Jan 31 Javascript
通过jquery的$.getJSON做一个跨域ajax请求试验
May 03 Javascript
JavaScript中变量提升 Hoisting
Jul 03 Javascript
js异常捕获方法介绍
Apr 10 Javascript
jquery实现顶部向右伸缩的导航区域代码
Sep 02 Javascript
自定义require函数让浏览器按需加载Js文件
Nov 24 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
Nov 26 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
JSON对象转化为字符串详解
Aug 11 Javascript
使用 vue.js 构建大型单页应用
Feb 10 Javascript
javascript实现留言板功能
Feb 08 Javascript
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
基于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
基于MySQL体系结构的分析
2013/05/02 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
php安全配置记录和常见错误梳理(总结)
2017/03/28 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
javascript 面向对象编程基础:封装
2009/08/21 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
javascript拖拽效果延伸学习
2016/04/04 Javascript
js数字舍入误差以及解决方法(必看篇)
2017/02/28 Javascript
BootStrap给table表格的每一行添加一个按钮事件
2017/09/07 Javascript
Vue页面跳转动画效果的实现方法
2018/09/23 Javascript
一文了解vue-router之hash模式和history模式
2019/05/31 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
[47:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
关于Django外键赋值问题详解
2017/08/13 Python
Python批量更改文件名的实现方法
2017/10/29 Python
和孩子一起学习python之变量命名规则
2018/05/27 Python
带你认识Django
2019/01/15 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
python 同时读取多个文件的例子
2019/07/16 Python
python数据预处理之数据标准化的几种处理方式
2019/07/17 Python
python 实现按对象传值
2019/12/26 Python
Pandas实现DataFrame按行求百分数(比例数)
2019/12/27 Python
pytorch的batch normalize使用详解
2020/01/15 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
详解background属性的8个属性值(面试题)
2020/11/02 HTML / CSS
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
面包店的创业计划书范文
2014/01/16 职场文书
旅游网创业计划书
2014/01/31 职场文书
红色旅游心得体会
2014/09/03 职场文书
学生抄作业检讨书(2篇)
2014/10/17 职场文书
python 制作一个gui界面的翻译工具
2021/05/14 Python
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL
各种货币符号快捷输入
2022/02/17 杂记
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL