Menu ngang 2 cấp

[hunghsmn]

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

Code:

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:

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

Code:

Code:


<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.

[IceFox]

Rất hay. Đã vote cho bác

[hizen]

bo vao dau vay bac hung

[IceFox]

Cho vào phía trên hoặc dưới khung login là phù hợp

[hunghsmn]

Vào Header thay cụm từ này bằng code đó, nhớ thêm menu, hoàn chỉnh rồi mới thay nhé:

Code:

{GENERATED_NAV_BAR}

[hizen]

"+" cho pac hung 1 phat vi day la nhung dieu tu lau nay em mong muon.lam dc rui

[hizen]

nếu được bác giúp em bài này lun http://diendan.chinhphuc.info/t16307-topic

[hian]

Bác hunghsmn giúp cháu tạo một Menu ngang 2 cấp nhưng với màu khác để phù hợp với 4rum của cháu không ạ?
Cháu không biết về html hay gì cả nên không thể tự mình sửa được.

Đây là menu hiện tại của 4rum cháu, bác xem code rồi sửa cho cháu sao cho cùng màu với menu cũ của cháu nhé!!!\



Mong bác và mọi người giúp đỡ.

[hunghsmn]

Bác thấy thanh menu ngang 2 cấp đẹp thật, bác vì có quá nhiều thứ nên bác dùng thanh menu đa cấp. Cháu chọn cái này là phải nhưng...

Mầu nền hay hình nền thanh menu thì bác làm, còn các link trong đó thì chỉ có cháu mới làm được, bác hay ai khác cũng chỉ làm được những link cơ bản mà ở forum nào cũng có như : Diễn đàn, tìm kiếm, thành viên, lý lịch,... Cũng có thể 2 người cùng làm, nghĩa là bác phải hỏi cháu tỉ mỉ cháu định sắp xếp các menu trên đó ra sao, các link trong các menu cấp 2 là gì ... rồi bác làm. Nhưng như vậy thì vất vả lắm, bác không thể nào biết được những thứ mà cháu có, cũng như ý định của cháu.

Hay thế này, để từ từ rồi bác hướng dẫn lại tỉ mỉ cách viết các menu cấp 2 rồi cháu tự làm theo

[hian]

Được thế thì còn gì bằng bác ạ!!

Nhưng cháu cũng có thể chèn link trong menu cấp 2 nếu như có 1 demo của bác trong code hay sửa những đề mục theo ý của cháu, cháu chỉ thấy khó nhất là nền của menu và hiệu ứng của chữ vì phải làm cho nó gần giống với menu cũ thì nó mới hợp lý với 4rum.

[hunghsmn]

cho link forum cháu để bác vô xem và lấy hình nền cho thanh menu

[[k]u[b]in]

Bài viết ý nghĩ. Vote

[hunghsmn]

Đây là toàn bộ code thanh menu ngang 2 cấp. Mình đã chú thích rất chi tiếc phần CSS để các bạn tự sửa theo ý mình ( đoạn từ <style...> đến </style>)

Code:


<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; /* Màu chữ thanh menu */
 font-weight: Bold;
 background-color: #1376C9; /* Màu nền của thanh menu. Nếu thích ảnh nền thì thay bằng  background-image: url('link ảnh nền'); */

}
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; /* màu nền của menu cấp 2 */
 color: #ffffff;
 /*-- Bo góc phải dưới cho menu cấp 2 --*/
 -moz-border-radius-bottomright: 7px;
 -khtml-border-radius-bottomright: 7px;
 -webkit-border-bottom-right-radius:7px;
 /*-- Bo góc trái dưới cho menu cấp 2 --*/
 -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; /* Bỏ gạch chân menu cấp 2 khi rê chuột vào */
background: #1CE321; /* Màu nền menu cấp 2 khi rê chuột vào */
color:#FF0000; /* Màu chữ menu cấp 2 khi rê chuột vào */
}
</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>
        <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>

    </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>

Về phần các menu thì nhìn vào đó các bạn sẽ biết cách viết thêm vào. Mình giải thích thêm để lỡ có bạn không biết gì cũng làm được:

* Một menu cấp một là nắm trong một cặp thẻ <li> ...</li>, ví dụ:

<li> <a href="/forum"> Diễn đàn </a></li>

* Bây giờ nếu ta làm các menu con cho nó (tức là menu cấp 2) thì ta không đặt link cho menu cấp một mà thay vào đó là một dấu #, đồng thời ta chưa đóng bằng thẻ </li>. Ví dụ

<li> <a href="#"> Menu mẹ </a>

Sau đó ta đặt một loạt link cho các menu con trong cặp thẻ <span>...</span>. Cuối cùng ta dùng thé </li> đóng lại - kết thúc một menu mẹ - con. Cụ thể như thế này:

<li> <a href="#"> Menu mẹ </a>
<span>
<a href="link menu con 1"> Menu con 1</a> |
<a href="link menu con 2"> Menu con 2</a> |
<a href="link menu con 3"> Menu con 3</a>|
</span>
</li>

( Mình để bên ngoài thẻ code để đánh dấu cho dễ, các mod thông cảm)

Ghi chú: Dấu sổ dọc (|) chỉ là để tạo đường ngăn giữa 2 menu cùng cấp, nếu các bạn không thích thì bỏ đi không sao.

Các bạn, kiến thức của mình không nhiều , nhất là CSS mình còn yếu, nhưng biết gì mình giảng giải hết. Chỉ mong các bạn hiểu trước khi dùng nên mới giải thích chi tiếc như vậy. Cân gì các bạn cứ hỏi

[_Mark_]

bài này hay quá, cháu cũng đang cần , đã vote cho bác

[hian]

Bài của Bác hunghsmn hay quá!!!

Cảm ơn bác nhiều. Đây là link 4rum của cháu

Code:

http://xomtroditrach.5forum.net/

Còn cháu làm được rồi

Demo Menu:

Code:

http://xomtroditrach.5forum.net/h6-page

Nhưng cho cháu hỏi thêm là muốn chỉnh cho chiều cao của Menu tăng thêm gấp 2 thì làm thế nào ạ? Nó kiểu kiểu như Menu cũ của cháu


Câu hỏi nữa cháu muốn hỏi là: Khi tạo xong Menu rồi thì cách bỏ Menu cũ của 4rum đi như thế nào ?
Thanks Bác lần nữa!!!

[hunghsmn]

@ hian:
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 )

[hian]

Cháu đang làm rồi bác ạ, cũng thành công một phần rồi.

Giờ cháu có 1 số vấn đề là:

1. Thay Menu cũ bằng Menu mới thì làm thế nào?
(Cháu đã làm theo hướng dẫn của bác rồi mà không được)

Vào Header thay cụm từ này bằng code đó, nhớ thêm menu, hoàn chỉnh rồi mới thay nhé:

Code:

{GENERATED_NAV_BAR}

Header của cháu không có

Code:

{GENERATED_NAV_BAR}

2. Thanh Menu mới này hình như chiều dài của Menu là khác so với Menu cũ của cháu. Nếu như thế thì làm thế nào bác nhỉ?

[hian]

Cháu đã thử thay thế Menu rồi. Nhưng kết quả có vẻ không được như ý muốn cho lắm:
1. font chữ là chữ bt chứ không phải là chữ đậm
2. Các mục trong menu cấp 2 tự nhiên lại ở chính giữa

Bác vào xem hộ cháu nhé

Link 4rum thử nghiệm của cháu

Code:

http://xomtroditrach.5forum.net/

còn đây là hình ảnh Menu cũ của cháu:

[hunghsmn]

Cháu làm vậy là rất đẹp rồi mà. Chỉ có chữ không đậm thôi.
Cháu thêm dòng này font-weight: Bold; vào ul#topnav li a

[hian]

hihi, thanks bác nhiều.

Nhưng giờ cháu lại tham hơn rồi, nếu cháu xin code về menu đa cấp thì lúc nào đó bác viết code cho cháu chứ>?

[hian]

Bác Hùng ơi, cái menu tự nhiên nó lỗi font chữ rồi, không hiểu vì sao lại thế, bác vào rồi xem lỗi cho cháu nha.


đây là menu của cháu: nó lỗi kinh quá

Code:

http://svcgditrach.8forum.net/h2-page

thanks bác.

[batonchinsu]

Bác Hùng ơi, cái menu tự nhiên nó lỗi font chữ rồi, không hiểu vì sao lại thế, bác vào rồi xem lỗi cho cháu nha.


đây là menu của cháu: nó lỗi kinh quá

Code:

http://svcgditrach.8forum.net/h2-page

thanks bác.

Có thấy lỗi font chữ đâu

[hian]

Đây là hình ảnh mình chụp khi vào địa chỉ trên



Mình thấy lỗi thật mà!

[hunghsmn]

Cháu chèn vô header thì nó hết lỗi
Hoặc nếu cháu để ở trang html đó nhưng muốn hiện font chữ tiếng Việt thì cho toàn bộ code trang đó vào đây:

Code:

<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<Title>Menu</Title>
</head>
<body>

CHO VÀO ĐÂY

</body>
</html>

Nói cách khác là cháu thêm phần đầu và phần cuối cho trang đó như trên là được.

(Khi thiết kế một trang html nếu muốn hiển thị tiếng Việt unicode thì phải có thẻ meta này: <meta http-equiv="Content-Type"content="text/html; charset=UTF-8">

[ikarosan]

nhìn xấu nhỉ

[batonchinsu]

Đây là hình ảnh mình chụp khi vào địa chỉ trên



Mình thấy lỗi thật mà!

Chắc lỗi trình duyệt, mình thấy như này:

Bạn thử làm theo cách của bác Hùng xem sao

[girlhungha]

Nhờ bác bo tròn góc thanh menu ngang 2 cấp cho em với !

Thanks!

[tranjunhan]

Cho mình xin cái code bạn đã hoàn thành được không? để mình thay link cho đỡ mệt

[gaubon]

làm sao để đưa chữ ra giữa vậy

[handsomevip007]

làm sao để đưa chữ ra giữa vậy

Code:

<center></center>

[Sponsored content]