Bạn có thích 1 thanh menu đẹp để áp dụng cho thanh menu cố định khi cuộn trang lung thị linh hơn? ^_^ Ở đây mình sẽ chia sẻ cách làm menu xổ xuống (drop down) cơ bản nhất cho Blogspot. Sau khi hoàn thành bạn sẽ có 1 thanh menu ấn tượng!
Chú ý là tất cả hướng dẫn ở đây chỉ áp dụng cho những mẫu có sẵn khu vực navigation ở top, còn những mẫu template khác thì các bạn phải tùy biến nhiều hơn mới có kết quả!
Làm thế nào để làm menu xổ xuống (Drop down)?
– Truy cập vào trang quản trị Blogger > Design (Thiết kế) > Page Elements (Bố cục)
– Hãy chọn thêm HTML/JavaScript như ảnh trên, và paste đoạn code này vào:
<div id=’drnavbar’><ul id=’drnav’><li><a href=’#‘>Trang chủ</a></li><li><a href=’#‘>Chém gió</a></li><li><a href=’#‘>Liên hệ</a></li><li><a href=’#‘>Menu</a><ul><li><a href=’#‘>Menu 1</a></li><li><a href=’#‘>Menu 2</a></li><li><a href=’#‘>Menu 3</a></li></ul></li></ul></div>
/*—– Drop Down Menu —-*/#drnavbar {background: #060505;width: 960px;color: #FFF;margin: 0px;padding: 0;position: relative;border-top:0px solid #960100;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: #FFF;display: block;font:normal 12px Helvetica, sans-serif; margin: 0;padding: 9px 12px 10px 12px;text-decoration: none;}#drnav li a:hover, #drnav li a:active {background: #BF0100;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: #BF0100;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: #060505;color: #FFF;display: block; margin: 0;padding: 9px 12px 10px 12px;text-decoration: none;}
Cuối cùng là lưu template lại và tận hưởng thành quả Nhưng nhớ là có không vừa ý thì cũng tự hiểu rằng đây chỉ là đoạn code cơ bản để làm menu xổ xuống (Drop down) cho Blogspot thôi ^_^ Bạn phải tùy chỉnh một vài nội dung nữa nó mới hợp với trang web của bạn!
e mún thanh menu nó hiện ra bài đăng trong trang web của a.
Thanh menu sử dụng ajax như vậy bạn phải code thêm rất nhiều mới được nha.
không thể click chuột vào menu con
không hiểu sao em làm nó bị lệch ra 1 bên :((( anh ơi giúp em
This comment has been removed by the author.
😮