使用CSS 制作导航菜单

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

代码如下：

效果如下：

• Home
• News
• Sports
• Weather
• Contact Me

方式二：使用jQuery 代码实现 

代码如下：

注意：该代码必须加载了jquery.min.js 文件，并且所写的CSS 只能在Firefox 浏览器中正常显示。

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

代码如下：

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 下载