CSS3 DROP MENU ĐƠN GIẢN MÀ ĐẸP CHO BLOGGER

Đây là mẫu Drop menu đơn giản mà đẹp cho Blogger sử dụng CSS3. Mẫu drop menu này khá đơn giản, với hiệu ứng bo tròn và màu sắc chủ đạo là màu xám

CSS3 Drop Menu đơn giản mà đẹp cho Blogger

Demo

ĐẶC ĐIỂM CỦA MẪU DROP MENU NÀY

• Chỉ sử dụng CSS3
• Phù hợp với nhiều trình duyệt
• Menu có nhiều cấp để lựa chọn
• Dễ dàng làm và tùy chỉnh

CSS3 DROP MENU ĐƠN GIẢN MÀ ĐẸP CHO BLOGGER

1. Đăng nhập vào Blog

2. Vào mẫu (Template)

3. Chọn chỉnh sửa HTML.

4. Chèn dưới đây trước thẻ ]]></b:skin> :

#nav {
margin: 0;
padding: 7px 6px 0;
line-height: 100%;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);

background: #8b8b8b; /* for non-css3 browsers */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=’#a9a9a9′, endColorstr=’#7a7a7a’); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #a9a9a9,  #7a7a7a); /* for firefox 3.6+ */

border: solid 1px#6d6d6d;
}
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
/* main level link */
#nav a {
font-weight: bold;
font-family: Helvetica, Arial;
color: #e7e5e5;
text-decoration: none;
display: block;
padding:  8px 20px;
margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
background: #d1d1d1; /* for non-css3 browsers */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ebebeb’, endColorstr=’#a1a1a1′); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#a1a1a1)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ebebeb,  #a1a1a1); /* for firefox 3.6+ */

color: #444;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav ul a:hover {
background: #0399d4 !important; /* for non-css3 browsers */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=’#04acec’, endColorstr=’#0186ba’); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)) !important; /* for webkit browsers */
background: -moz-linear-gradient(top,  #04acec,  #0186ba) !important; /* for firefox 3.6+ */
border-radius: .4em;
color: #fff !important;
-webkit-border-radius:  .4em;
-moz-border-radius:  .4em;
text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
/* level 2 list */
#nav ul {
background: #ddd; /* for non-css3 browsers */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffffff’, endColorstr=’#cfcfcf’); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cfcfcf)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #fff,  #cfcfcf); /* for firefox 3.6+ */

display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
/* dropdown */
#nav li:hover > ul {
display: block;
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
}
/* level 3+ list */
#nav ul ul {
left: 181px;
top: -3px;
}
/* rounded corners for first and last child */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* clearfix */
#nav:after {
content: “.”;
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
display: inline-block;
}

• Độ bo tròn : 2em
• Màu nền menu :  #8b8b8b
• Đường viền : 1px #6d6d6d
• Font chữ và màu chữ : Helvetica, Arial; #e7e5e5;
• Màu khi rê chuột vào : #d1d1d1
• Màu khi rê chuột vào sub menu : #0399d4

5. Vào Bố cục (Layout)

6. Chọn Thêm Tiện ích (Add Widget)

7. Tạo 1 tiện ích HTML/Javarscip và chèn đoạn code phía dưới vào

<ul id=”nav”>
<li><a href=”http://www.wbtsource.host22.com”>Home</a></li>
<li><a href=”#”>My Projects</a>
<ul>
<li><a href=”#”>N.Design Studio</a>
<ul>
<li><a href=”#”>Portfolio</a></li>
<li><a href=”#”>WordPress Themes</a></li>
<li><a href=”#”>Wallpapers</a></li>
<li><a href=”#”>Illustrator Tutorials</a></li>
</ul>
</li>
<li><a href=”#”>Web Designer Wall</a>
<ul>
<li><a href=”#”>Design Job Wall</a></li>
</ul>
</li>
<li><a href=”#”>IconDock</a></li>
<li><a href=”#”>Best Web Gallery</a></li>
</ul>
</li>
<li><a href=”#”>Multi-Levels</a>
<ul>
<li><a href=”#”>Team</a>
<ul>
<li><a href=”#”>Sub-Level Item-1</a></li>
<li><a href=”#”>Sub-Level Item-2</a>
<ul>
<li><a href=”#”>Sub-Level Item-2.1</a></li>
<li><a href=”#”>Sub-Level Item-2.2</a></li>
<li><a href=”#”>Sub-Level Item-2.3</a></li>
</ul>
</li>
<li><a href=”#”>Sub-Level Item-3</a></li>
</ul>
</li>
<li><a href=”#”>Sales</a></li>
<li><a href=”#”>Another Link</a></li>
<li><a href=”#”>Department</a>
<ul>
<li><a href=”#”>Sub-Level Item</a></li>
<li><a href=”#”>Sub-Level Item</a></li>
<li><a href=”#”>Sub-Level Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul>

• Thay chữ in đậm bằng tên phần tử
• Thay # bằng link

Save template lại