Làm thanh Menu đa cấp (Menu bar) với HTML5 và CSS3 từng bước đơn giản

» Bài viết: Làm thanh Menu đa cấp (Menu bar) với HTML5 và CSS3 từng bước đơn giản
» Lượt xem: 746

Mã:

/*anchors*/

#main_menu a, #main_menu a:hover {

background-color: #990066;

background-image: -webkit-linear-gradient(top, #990066, #cc0099, #990066);

background-image: -moz-linear-gradient(top, #990066, #cc0099, #990066);

background-image: -ms-linear-gradient(top, #990066, #cc0099, #990066);

background-image: -o-linear-gradient(top, #990066, #cc0099, #990066);

color:#ffffff;

display:block;

padding:5px;

text-decoration:none;

width:150px;

border-top-right-radius:2px;

border-top-left-radius:2px;

border-bottom-right-radius:10px;

border-bottom-left-radius:10px;

Như vậy phần menu cấp 1 đã hoàn thành bây giờ chúng ta tiếp tục đến menu cấp 2. Đoạn code sau quy định các thuộc tính cơ bản và lớn nhất của nó.

Mã:

/*sub menu list*/

#main_menu ul {

list-style:none;

position:absolute;

display:none;

}

/*sub menu when hover on top item*/

#main_menu li:hover ul {

display:block;

Phần code bên dưới có 3 thuộc tính cả 3 thuộc tính bên dưới đều cực kỳ quan trọng và không thể bỏ qua. Thuộc tính list-style-type: none; đã đề cập ở trên ta không nhắc lại nữa.

Thuộc tính position là để biến toàn bộ thẻ <ul>(submenu) thành một khối như vậy các thẻ <li>(của sub menu) sẽ không bị chạy loạn xạ mà chỉ nằm trong một khối và nằm ngay bên dưới thẻ <li> (menu) bên trên nó.

Thuộc tính display:none; là vì ở điều kiện bình thường thì các submenu bị ẩn đi, chỉ khi bạn rê chuột vào (hiệu ứng hover) thì nó mới hiện ra.

Bây giờ tiếp tục trang trí cho thẻ <li>(submenu)

Mã:

/*sub menu list items*/

#main_menu ul li {

padding-top:1px;

margin-left:-25%;

Cuối cùng là trang trí cho phần thẻ <a> của submenu.

/*sub menu list anchors*/

#main_menu ul a {

color:#ffff00;

box-shadow: 3px 3px 2px #888888;