使用CSS 制作导航菜单

简介:

方式一:直接编写代码实现

代码如下:

<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 浏览器中正常显示。

方式三:实现伸缩的两级菜单

代码如下:

ExpandedBlockStart.gif 6-14.html
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< 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 > 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 ;
}
#navigation ul li ul.myHide { /* 隐藏子菜单 */
display : none ;
}
#navigation ul li ul.myShow { /* 显示子菜单 */
display : block ;
}
-->
</ style >
< script language ="javascript" >
function change(){
// 通过父元素li,找到兄弟元素ul
var oSecondDiv = this .parentNode.getElementsByTagName( " ul " )[ 0 ];
// CSS交替更换来实现显、隐
if (oSecondDiv.className == " myHide " )
oSecondDiv.className = " myShow " ;
else
oSecondDiv.className = " myHide " ;
}
window.onload = function (){
var oUl = document.getElementById( " listUL " );
var aLi = oUl.childNodes; // 子元素
var oA;
for ( var i = 0 ;i < aLi.length;i ++ ){
// 如果子元素为li,且这个li有子菜单ul
if (aLi[i].tagName == " LI " && aLi[i].getElementsByTagName( " ul " ).length){
oA = aLi[i].firstChild; // 找到超链接
oA.onclick = change; // 动态添加点击函数
}
}
}
</ script >
</ head >
< body >
< div id ="navigation" >
< ul id ="listUL" >
< li >< a href ="#" >Home </ a ></ li >
< li >< a href ="#" >News </ a >
< ul class ="myHide" >
< li >< a href ="#" >Lastest News </ a ></ li >
< li >< a href ="#" >All News </ a ></ li >
</ ul >
</ li >
< li >< a href ="#" >Sports </ a >
< ul class ="myHide" >
< 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 class ="myHide" >
< 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 >

注意:该代码在Firefox 下正常显示,但在IE6 下无法显示正常。

jQuery1.2.3 下载




本文转自钢钢博客园博客,原文链接:http://www.cnblogs.com/xugang/archive/2010/08/07/1794679.html,如需转载请自行联系原作者

相关文章
|
7月前
|
前端开发 JavaScript 开发者
|
前端开发
实训-利用HTML+CSS制作某米官网首页(二)
实训-利用HTML+CSS制作某米官网首页
208 0
实训-利用HTML+CSS制作某米官网首页(二)
|
前端开发
实训-利用HTML+CSS制作某米官网首页(一)
实训-利用HTML+CSS制作某米官网首页
289 0
实训-利用HTML+CSS制作某米官网首页(一)
|
存储 移动开发 前端开发
零基础学网页开发入门(制作博客案例)适应手机端div+css+js的综合介绍
零基础学网页开发入门(制作博客案例)适应手机端div+css+js的综合介绍
114 0
零基础学网页开发入门(制作博客案例)适应手机端div+css+js的综合介绍
|
人工智能 JavaScript 前端开发
使用 HTML、CSS 和 JS 制作一个中国象棋
这是一个简单的 JavaScript 项目,中国象棋人机对战,文末有完整源码免费下载地址,祝大家玩得开心,学得轻松。
340 2
使用 HTML、CSS 和 JS 制作一个中国象棋
|
前端开发 JavaScript 数据可视化
(web前端网页制作课作业)使用HTML+CSS制作非物质文化遗产专题网页设计与实现
(web前端网页制作课作业)使用HTML+CSS制作非物质文化遗产专题网页设计与实现
(web前端网页制作课作业)使用HTML+CSS制作非物质文化遗产专题网页设计与实现
|
前端开发 JavaScript 程序员
基于CSS的3D旋转画册的制作
这是一种使用CSS做出来的旋转效果,可用于宣传海报
基于CSS的3D旋转画册的制作
|
前端开发
HTML+CSS制作可以自适应的数据表格
HTML+CSS制作可以自适应的数据表格
HTML+CSS制作可以自适应的数据表格
|
前端开发
CSS 轻松制作 SVG 动画
如果从未在前端使用过 SVG,那么就错过了很多改善性体验,如果不知道如何使用 SVG 制作动画,那么将错过更多。本文开始制作第一个 SVG 图形,为其添加动画。
602 0
CSS 轻松制作 SVG 动画
|
前端开发 JavaScript 容器
页面制作的15个CSS技巧
本文跟大家分享一些在技术文档中很少提到的CSS属性和值,但是,在我看来,对于提高web界面开发的速度和质量特别有帮助。文章中涉及的很多特性都是实验性质的,现代浏览器基本支持了大部分了,如果在使用下面提到的属性的时候又需要兼容主流浏览器的时候,可以先查看一下Can I use。
144 0
页面制作的15个CSS技巧