3 tháng 12, 2009

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>

0 Ý kiến:

Blog Hoc Tap :)) Blog Hoc Tap ;)) Blog Hoc Tap ;;) Blog Hoc Tap :D Blog Hoc Tap ;) Blog Hoc Tap :p Blog Hoc Tap :(( Blog Hoc Tap :( Blog Hoc Tap :X Blog Hoc Tap =(( Blog Hoc Tap :-o Blog Hoc Tap :-/ Blog Hoc Tap :-* Blog Hoc Tap 8-} Blog Hoc Tap :)] Blog Hoc Tap ~x( Blog Hoc Tap :-t Blog Hoc Tap b-( Blog Hoc Tap :-L Blog Hoc Tap x( Blog Hoc Tap =))

Đăng ý kiến của bạnBlog Hoc Tap

Đây là Web Blog dùng để "Ghi lại" trong quá trình làm việc và học tập. Bạn có thể đăng ý kiến để Đóng góp, Xây dựng, Trao đổi, Học tập với tôi. Cảm ơn bạn đã ghé qua web blog của tôi.
Bạn có thể sử dụng các biểu tượng cảm xúc trong bài "ý kiến" bằng cách gõ ký tự bên phải của mỗi biểu tượng.
Thân chàoBlog Hoc Tap

BlogWeb: tạo từ Blog của Google
Nội dung: lấy từ nhiều Nguồn khác nhau.
Mục đích: note lại bài Hướng dẫn hay và Đáng đọc.
Kết quả: nghiện Internet Nặng.
Tương lại: xuống lỗ Vẫn Nghiện nếu không có ai giúp.
Blog Web của: Trí Dũng đến từ Việt Nam - Liên kết đến trang Blog Cá Nhân
Tôi biết (^_^)
Thông tin về Tác giả. Chi Tiết
Sử dụng (FireFox | Google Chrome on Ubuntu) để xem tốt nhất. Học Nhiều Hơn Tại Đây
©2009 Google Blogger - HuuNguyen's Home