Tạo menu chính có submenu xuất hiện ở hàng dưới
Bạn down về chạy thử. Việc thêm thắc để có menu đẹp là do chính bạn. Thay đổi thuộc tính của thẻ <a> như hover link...v..v.
<html>
<head>
<title>... test ...</title>
<style type="text/css">
.glossymenu{
position: relative;
padding: 0 0 0 5px;
margin:0px;
background:url(image/menu.gif) repeat-x bottom; /*tab background image path*/
height: 25px;
list-style: none;
}
.glossymenu li{
float:left;
border-right:#FFFFFF 1px groove;
}
.glossymenu li a{
float: left;
display: block;
color:#FFFFFF;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
padding:0 0 0 5px; /*5px = width of menu1*/
height: 25px;
line-height: 25px;
text-align: center;
cursor: pointer;
}
.glossymenu li a span{
float: left;
display: block;
padding: 0 10px 0 8px; /*Padding of menu items*/
}
.glossymenu li.current a, .glossymenu li a:hover{
color:#000000;
background: url(image/menu1.gif) no-repeat bottom; /*left tab image path*/
background-position: left;
}
.glossymenu li.current a span, .glossymenu li a:hover span{
color:#000000;
background: url(image/menu2.gif) no-repeat right bottom; /*right tab image path*/
}
a { text-decoration:none;}
a:hover {color:#FF9900;}
</style>
<script language="javascript">
var menu_2 = new Array()
menu_2[0] = '<a href="#">Sup menu demo 1</a>'
menu_2[1] = '<a href="#">Sup menu demo 2</a>'
menu_2[2] = '<a href="#">Sup menu demo 3</a>'
menu_2[3] = '<a href="#">Sup menu demo 4</a>'
var menu_3 = new Array()
menu_3[0] = '<a href="#">Sup menu demo 5</a>'
menu_3[1] = '<a href="#">Sup menu demo 6</a>'
menu_3[2] = '<a href="#">Sup menu demo 7</a>'
function show(id)
{
var men="menu"+id;
document.getElementById(men).style.display='block';
}
function hiden(id)
{
var men="menu"+id;
document.getElementById(men).style.display='none';
}
</script>
<head>
<body bgcolor="#CCCCCC">
<div style="width:600px;">
<ul class="glossymenu">
<li><a href="#" onMouseOver="show(1)" onMouseOut="hiden(1)" ><span>Trang Nhất</span></a></li>
<li><a href="#" onMouseOver="show(2)" onMouseOut="hiden(2)"><span>Xã hội</span></a></li>
<li><a href="#" onMouseOver="show(3)" onMouseOut="hiden(3)"><span>Thế giới</span></a></li>
<li><a href="#" onMouseOver="show(4)" onMouseOut="hiden(4)"><span>Kinh Doanh</span></a></li>
<li><a href="#" onMouseOver="show(5)" onMouseOut="hiden(5)"><span>Văn hóa</span></a></li>
<li><a href="#" onMouseOver="show(6)" onMouseOut="hiden(6)"><span>Thể Thao</span></a></li>
</ul>
</div>
<div style="background:#d0d8e0; width:600px; height:20px;" >
<div id="menu1" style="display:none;" onMouseOver="show(1)" onMouseOut="hiden(1)">
<a href="#"> Link demo 1.1</a>
<a href="#"> Link demo 1.2</a>
<a href="#"> Link demo 1.3</a>
<a href="#"> Link demo 1.4</a>
</div>
<div id="menu2" style="display:none;" onMouseOver="show(2)" onMouseOut="hiden(2)">
<a href="#"> Link demo 2.1</a>
<a href="#"> Link demo 2.2</a>
<a href="#"> Link demo 2.3</a>
<a href="#"> Link demo 2.4</a>
</div>
<div id="menu3" style="display:none;" onMouseOver="show(3)" onMouseOut="hiden(3)">
<a href="#"> Link demo 3.1</a>
<a href="#"> Link demo 3.2</a>
<a href="#"> Link demo 3.3</a>
<a href="#"> Link demo 3.4</a>
</div>
<div id="menu4" style="display:none;" onMouseOver="show(4)" onMouseOut="hiden(4)">
<a href="#"> Link demo 4.1</a>
<a href="#"> Link demo 4.2</a>
<a href="#"> Link demo 4.3</a>
<a href="#"> Link demo 4.4</a>
</div>
<div id="menu5" style="display:none;" onMouseOver="show(5)" onMouseOut="hiden(5)">
<a href="#"> Link demo 5.1</a>
<a href="#"> Link demo 5.2</a>
<a href="#"> Link demo 5.3</a>
<a href="#"> Link demo 5.4</a>
</div>
<div id="menu6" style="display:none;" onMouseOver="show(6)" onMouseOut="hiden(6)">
<a href="#"> Link demo 6.1</a>
<a href="#"> Link demo 6.2</a>
<a href="#"> Link demo 6.3</a>
<a href="#"> Link demo 6.4</a>
</div>
</div>
</body>
</html>
Nhận xét
Đăng nhận xét