24 tháng 6, 2012

Menu ngang xổ dọc một cấp Style 3 bằng CSS 3 cho blogspot

Menu xổ dọc một cấp Style 3 bằng CSS 3 cho blogspot


Menu xổ dọc một cấp Style 3 bằng CSS 3 cho blogspot - hy http://namkna.blogspot.com/
Nhu cầu tạo các Dropme nu để làm đẹp và trang trí blog là rất lơn. Nếu để ý các bạn sẽ thấy namkna đã hướng dẫn rất nhiều bài về cách tạo Drop Menu. Từ Menu ngang dạng đơn giản đến các Menu ngang dạng phức tạp nhất. Hôm nay namkna sẽ giới thiệu cho các bạn một mãu Menu xổ dọc 1 cấp sử dụng CSS3 không dùng đến các hình ảnh và các file Javarscrip => giúp blog bạn tăng tốc nhanh và load ổn định hơn.


Menu xổ dọc một cấp Style 3 bằng CSS 3 cho blogspot - hy http://namkna.blogspot.com/
Ảnh minh họa
» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn Phần tử trang
4. Thêm đoạn code sau vào trước thẻ  ]]></b:skin>
#namkna-menu, #namkna-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#namkna-menu {
width: 692px;
margin: 15px 0 60px -17px;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#namkna-menu:before,
#namkna-menu:after {
content: "";
display: table;
}
#namkna-menu:after {
clear: both;
}
#namkna-menu {
zoom:1;
}
#namkna-menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
namkna-menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
namkna-menu li:hover > a {
color: #fafafa;
background-color: #599100;
}
*html namkna-menu li a:hover { /* IE6 only */
color: #fafafa;
}
#namkna-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#namkna-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#namkna-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#namkna-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#namkna-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#namkna-menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#namkna-menu ul a:hover {
background-color: #0186ba;
background-image: -moz-linear-gradient(#04acec, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background-image: -webkit-linear-gradient(#04acec, #0186ba);
background-image: -o-linear-gradient(#04acec, #0186ba);
background-image: -ms-linear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba);
}
#namkna-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#namkna-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#namkna-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#namkna-menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#namkna-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#namkna-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
Trong đó: 
  • Thay width: 692px; bằng chiều rộng của blog bạn. 
  • Thuộc tính margin: 15px 0 60px -17px; thay đổi về căn lề 4 bên,
5. Chọn Thêm tiện ích => Chọn Thêm tiện ích HTML/Javar Scrip .
6. Thêm đoạn code bên dưới vào.
<ul id="namkna-menu">
<li><a href="/">Home</a></li>
<li>
<a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Development tools</a></li>
<li><a href="#">Web design</a></li>
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li> 
</ul>
Trong đó:
  • Thay các dấu thăng là các liên kết tới nhãn hoặc bài viết
  • Thay ác phần chữ màu xanh là tên nhãn hoặc bài viết hiển thị trên Menu.
Chúc thành công!
Chủ đề:

0 nhận xét:

Đăng nhận xét

Support : Guide | Blogspot Tips | Television | IDM | Software Free | Site Map | Back Link | Contact | ↑ back to top
Ghi rõ nguồn kynangblog.blogspot.com khi phát hành lại thông tin từ trang này
Copyright © 2011. KỸ NĂNG BLOG - All Rights Reserved
Design by KyNangBlog Edit Ky nang blog
Xem tốt nhất ở độ phân giải 1024 x 768 pixel
Six million kynangblog template byKyNangBlog
Blogger Gadgets