Source Code thiết kế menu xổ xuống (Drop down) cho Web/Blogspot

Dưới đây là một menu Drop Down Navigation có trình đơn xổ xuống. Các bạn có thể tự thay đổi hay chế tác lại để dùng trong thiết kế Web / Blog. Vỏn vẹn chỉ có 2 thao tác đơn giản: Cho Css vào trong </b:skin> và tạo một Widget. Lưu ý: Trước khi làm, bạn luôn quan tâm Save lại Template đã làm trước đó nhé, Cần nhất là để tạo một bản template backup khi cần thiết. 

Cách làm như sau:

- Truy cập vào trang Blogger > vào mục Layout (Bố cục)

- Chọn Thêm tiện ích dưới tiện ích tiêu đề trang và chọn thêm HTML/JavaScript khi có cửa sổ tiện ích  bật ra như ảnh trên, và paste đoạn code này vào:

/*----- Drop Down Menu ----*/ #drnavbar { background: #999999; width: 820px; color: #a64d79; margin: 0px; padding: 0; position: relative; border-top:0px solid #d9ead3; height:35px; } #drnav { margin: 0; padding: 0; } #drnav ul { float: left; list-style: none; margin: 0; padding: 0; } #drnav li { list-style: none; margin: 0; padding: 0; border-left:1px solid #333; border-right:1px solid #333; height:35px; } #drnav li a, #drnav li a:link, #drnav li a:visited { color: #a64d79; display: block; font:normal 13px Helvetica, sans-serif; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; } #drnav li a:hover, #drnav li a:active { background: #6fa8dc; color: #FFF; display: block; text-decoration: none; margin: 0; padding: 9px 12px 10px 12px; } #drnav li { float: left; padding: 0; } #drnav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 160px; margin: 0; padding: 0; } #drnav li ul a { width: 140px; } #drnav li ul ul { margin: -25px 0 0 161px; } #drnav li:hover ul ul, #drnav li:hover ul ul ul, #drnav li.sfhover ul ul, #drnav li.sfhover ul ul ul { left: -999em; } #drnav li:hover ul, #drnav li li:hover ul, #drnav li li li:hover ul, #drnav li.sfhover ul, #drnav li li.sfhover ul, #drnav li li li.sfhover ul { left: auto; } #drnav li:hover, #drnav li.sfhover { position: static; } #drnav li li a, #drnav li li a:link, #drnav li li a:visited { background: #ffd966; width: 120px; color: #FFF; display: block; font:normal 12px Helvetica, sans-serif; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; z-index:9999; border-bottom:1px dotted #333; } #drnav li li a:hover, #drnavli li a:active { background: #3d85c6; color: #f4cccc; display: block; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; }

- Chọn vào Design (Mẫu)> Edit HTML (Chỉnh sửa HTML)

- Dùng tổ hợp phím Ctrl+F tìm kiếm thẻ ]]></b:skin> và thêm đoạn CSS này lên trên nó:

<div id='drnavbar'> <ul id='drnav'> <li> <a href='http://tinhockhanhdat10.blogspot.com/'>Trang chủ</a> </li> <li> <a href='http://tinhockhanhdat10.blogspot.com/search/label/B%E1%BA%A7u%20r%C6%B0%E1%BB%A3u%20t%C3%BAi%20th%C6%A1'>Bầu rượu túi thơ</a> </li> <li> <a href='#'>Tin học</a> <ul> <li><a href='http://tinhockhanhdat10.blogspot.com/search/label/K%E1%BB%B9%20thu%E1%BA%ADt%20tin%20h%E1%BB%8Dc'>Kỹ thuật tin học</a></li> <li><a href='http://tinhockhanhdat10.blogspot.com/search/label/Win%2010'>Win 10</a></li> <li><a href='http://tinhockhanhdat10.blogspot.com/search/label/M%E1%BA%A1ng%20IT'>Mạng It</a></li> </ul> </li> <li> <a href='http://tinhockhanhdat10.blogspot.com/p/lien-he-voi-toi-gioi-thieu-blog-cua-toi.html'>Liên hệ</a> </li> </ul> </div>

Các đoạn CSS trên phần thêm vào trong thẻ <b:skin> bạn có thể lưu ý các thành phần cấu trúc để thay đổi giao diện. 

Cuối cùng là lưu template lại và tận hưởng thành quả.

Mời các bạn xem bản Demo nhé. Chúc các bạn thành công.

• DEMO

Người viết: Nguyễn Đạt Khánh