Menu ngang sổ dọc 2 cấp.

Hôm qua mình vào forum này:

Code:chọn nội dung

http://www.nhatnghe.com/forum/

Và học được cách làm một thanh Menu ngang 2 cấp. Theo đánh gía của mình tuy nó không hiện đại bằng menu ngang sổ dọc đa cấp nhưng cũng rất đẹp, rất phù hợp với loại forum mà không cần nhiều menu lắm, nghĩa là không có nhiều cái để bấm.
Xem hình (Thanh màu xanh ):
Sờ thử:

Code:chọn nội dung

http://www.trekhuyettat.org/h165-page

Code:

Code:chọn nội dung

<style type="text/css"> ul#topnav {  margin: 0; padding: 0;  float: left;  width: 100%;  list-style: none;  position: relative; /*--thiết lập vị trí của ul chưa menu--*/  font-family: Tahoma;  font-size: 12px;  color: #FFFFFF;  font-weight: Bold;  background-color: #1376C9; } ul#topnav li {  float: left;  margin: 0; padding: 0;  border-right: 0px solid #555; /*-- các menu li --*/ } ul#topnav li a {  padding: 6px 10px;  display: block;  color: #f0f0f0;  text-decoration: none; } #topnav li a:hover, #topnav li a:active, #topnav li a:focus {  color: #00FF00;  /* Màu chữ khi rê chuột vào */ background-color:#00A5F4; /* Màu nền khi rê chuột vào */ } ul#topnav li:hover {background: #00A5F4; url(topnav_active.gif) repeat-x; } ul#topnav li span {  float: left;  padding: 6px 0;  position: absolute;  left: 0; top:26px;  display: none; /*-- mặc định menu cấp 2 là ẩn --*/  width: 100%;  background: #00A5F4;  color: #ffffff;  /*--Bottom right rounded corner--*/  -moz-border-radius-bottomright: 7px;  -khtml-border-radius-bottomright: 7px;  -webkit-border-bottom-right-radius:7px;  /*--Bottom left rounded corner--*/  -moz-border-radius-bottomleft: 7px;  -khtml-border-radius-bottomleft: 7px;  -webkit-border-bottom-left-radius: 7px; } ul#topnav li:hover span { display: block;} /*--hiển thị menu cấp 2 khi đưa chuột vào--*/ ul#topnav li span a { display: inline; } /*-- tất cả các menu câp 2 cùng nằm trên 1 dòng--*/ ul#topnav li span a:hover {text-decoration: none; background: #1CE321; color:#FF0000;} </style> <ul id="topnav">         <li>         <a href="#">Menu 1</a>         <!--Subnav Starts Here-->         <span>             <a href="#"> Menu 1-1</a> |             <a href="#"> Menu 1-2</a> |             <a href="#">Menu 1-3</a>         </span>         <!--Subnav Ends Here-->     </li>     <li>         <a href="#">Menu 2</a>         <!--Subnav Starts Here-->         <span>             <a href="#"> Menu 2-1</a> |             <a href="#"> Menu 2-2</a> |             <a href="#"> Menu 2-3</a> |             <a href="#"> Menu 2-4</a>|             <a href="#"> Menu 2-5</a>|             <a href="#">Menu 2-6</a>|         </span>         <!--Subnav Ends Here-->     </li>     <li>         <a href="#">Menu 3</a>         <!--Subnav Starts Here-->         <span>             <a href="#">Menu 3-1</a> |             <a href="#"> Menu 3-2</a> |             <a href="#"> Menu 3-3</a>|             <a href="#">Menu 3-4</a>|             <a href="#"> Menu 3-5</a>|         </span>         <!--Subnav Ends Here-->     </li>     <li><a href="#">Menu 4</a></li>     <li><a href="#">Menu 5</a></li>     <li>         <a href="#">Trang cá nhân</a>         <!--Subnav Starts Here-->         <span> <!-- BEGIN switch_user_logged_in -->             <a href="/memberlist" target="_blank">Danh sách thành viên</a>|             <a href="/profile?mode=editprofile" target="_blank">Lý lịch của bạn </a>|             <a href="/profile.forum?mode=editprofile&page_profil=preferences&change_theme=aquagrey" class="postlink" target="_blank">Tùy chỉnh giao diện</a>|             <a href="/profile.forum?mode=editprofile&page_profil=signature&change_theme=aquagrey" class="postlink" target="_blank">Sửa chữ ký</a>|             <a href="/profile.forum?mode=editprofile&page_profil=avatars&change_theme=aquagrey" class="postlink" target="_blank">Sửa hình đại diện</a>| <!-- END switch_user_logged_in -->             <a href="/faq" target="_blank">Trợ giúp</a>|             <a href="/search" target="_blank">Tìm kiếm</a>|             <a href="/privmsg?mode=post&u=1" target="_blank">Liên hệ: Admin</a>|         </span>         <!--Subnav Ends Here-->     </li>   <li><!-- BEGIN switch_user_logged_out --><a href="/register"><blink>Đăng ký</blink></a><!-- END switch_user_logged_out --></li>   <li><!-- BEGIN switch_user_logged_out --><a href="/login">Đăng nhập</a><!-- END switch_user_logged_out --></li>     <li><!-- BEGIN switch_user_logged_in --><a href="#" title="Tin nhắn">Tin nhắn</a><!-- END switch_user_logged_in --></li>     <li><!-- BEGIN switch_user_logged_in --><a href="/login?logout=1" title="Thoát">Thoát</a><!-- END switch_user_logged_in --></li> </ul>

Kiểu này mình nhớ là có một bạn nào đó chia sẻ rồi thì phải. Dù sao thì cũng để các bạn tham khảo thêm.

Chú ý thêm :

Muốn tăng chiều cao cho thanh menu thì cháu sửa CSS lại:

- Trong ul#topnav li a
Cháu sửa padding: 6px 10px; thành padding: 12px 10px; ( 12 hay bao nhiêu tùy ý, muốn thay đổi khoảng cách giữa các menu thì cháu có thể sửa luôn con số 10 phía sau)

- Trong ul#topnav li span cháu cũng làm tương tự cho menu cấp 2
Sửa padding: 6px 0; lại thành padding: 12px 0;
Đồng thời sửa left: 0; top:26px; lại thành left: 0; top:38px; (Dòng này xác định vị trí của thanh menu cấp 2 so với cạnh trái và cạnh trên của cửa sổ trình duyệt).

- Bác sửa lại chú thích về màu chữ: Để chỉnh mài chữ cháu sửa color trong ul#topnav li a nhé.

- Thêm: Nếu cháu thích tạo bóng cho chữ thì thêm vào ul#topnav dòng sau:
text-shadow: -1px 0 #000000, 0 3px #FF0000, 2px 0 #000000, 0 -1px #00FF00;
( Những con số này là chỉ độ dày , chiều hướng và màu sắc của bóng ).
Các bạn cũng có thể xem thêm một số cách khắc phục lỗi tại địa chỉ : http://diendan.chinhphuc.info/t16333-topic

Được đăng tại nhãn: Thủ thuật blog