Cách thêm CSS Dropdown menu dơn giản cho blogspot:
Thứ Hai, 27 tháng 4, 2015
2- Vào Bố cục (Layout)
3- Bấm vào thêm tiện ích => Chọn HTML/Javascripts và dán code bên dưới vào.
<style>nav.drop-menu {
position:relative;
padding:10px 15px;
background:transparent;
width:200px;
font:bold 16px Arial,Sans-Serif;
text-transform:uppercase;
color:#0000ff;
}
nav.drop-menu:after {
content:"";
width:0px;
height:0px;
border:5px solid transparent;
border-top-color:#38761d;
position:absolute;
top:16px;
right:14px;
}
nav.drop-menu ul {
position:absolute;
top:100%;
left:0px;
z-index:99;
text-transform:none;
margin:0px;
padding:0px;
background:transparent;
width:100%;
font-weight:normal;
display:none;
}
nav.drop-menu li {
list-style:none;
margin:0px;
padding:0px;
}
nav.drop-menu li a {
display:block;
margin:0px;
padding:7px 15px;
text-decoration:none;
color:#38761d;
}
nav.drop-menu li a:hover {
background:#93c47d;
padding-left:19px;
}
nav.drop-menu:hover ul {
display:block;
}</style>
<nav class='drop-menu'>
Drop Down Menu
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Portfolio</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Archive</a></li>
<li><a href='#'>Search</a></li>
<li><a href='#'>Company</a></li>
</ul>
</nav>
» Tùy chỉnh:
Thay dấu thăng màu đỏ (#) thành liên kết URL tới blog, nhãn hoặc bài viết của bạn.
Thay phần màu xanh thành tiêu đề tương ứng với các liên kết cùng hàng. (Không nên đặt quá dài sẽ xuống dòng không đẹp nha.
Thay chữ Drop Down Menu thành chữ tiêu đề. Đây là phần luôn hiển thị của menu.
4- Lưu mẫu lại và quay trở lại blog để xem kết quả.
Nguồn :ST
Bài liên quan

Home










Comments[ 0 ]
Đăng nhận xét