Menu ngang xổ dọc xuống nhiều cấp (Kiểu 1) với CSS3

Menu ngang xổ dọc xuống nhiều cấp (Kiểu 1) với CSS3
Đây là mẫu menu ngang xổ dọc nhiều cấp nhưng chỉ sử dụng thuần túy CSS3 không có javascript nên không ảnh hưởng tới tốc độ load của blog.Cài đặt cũng đơn giản nên rất thuận tiện cho các blog mới.
Xem thử

DEMO

Làm thế nào để cài đặt menu này cho blog
Ta vào bố cục và thêm 1 tiện ích và thường để menu này ngay trên phần bài viết trên blog.
<style type="text/css">
#nav {
float: left;
font: bold 12px Arial, Helvetica, Sans-serif;
border: 1px solid #121314;
border-top: 1px solid #2b2e30;
overflow: hidden;
width: 100%;
background: #3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
}

#nav ul {
margin: 0;
padding: 0;
list-style: none;
}

#nav ul li {
float: left;
}

#nav ul li a {
float: left;
color: #d4d4d4;
padding: 10px 20px;
text-decoration: none;
background: #3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
border-left: 1px solid rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(0,0,0,0.2);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}
#nav ul li a:hover,
#nav ul li:hover > a {
color: #252525;
background: #3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;
}

#nav li ul a:hover,
#nav ul li li:hover > a {
color: #2c2c2c;
background: #5C9ACD;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );
background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
border-bottom: 1px solid rgba(0,0,0,0.6);
border-top: 1px solid #7BAED9;
text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}
#nav li ul {
background: #3C4042;
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
left: -999em;
margin: 35px 0 0;
position: absolute;
width: 160px;
z-index: 9999;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
border: 1px solid rgba(0, 0, 0, 0.5);
}

#nav li:hover ul {
left: auto;
}

#nav li ul a {
background: none;
border: 0 none;
margin-right: 0;
width: 120px;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
}

.nav ul li ul {
position: absolute;
left: 0;
display: none;
visibility: hidden;
}

.nav ul li ul li {
display: list-item;
float: none;
}

.nav ul li ul li ul {
top: 0;
}

.nav ul li ul li a {
font: normal 13px Verdana;
width: 160px;
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

#nav li li ul {
margin: -1px 0 0 160px;
visibility: hidden;
}

#nav li li:hover ul {
visibility: visible;
}</style>
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Portfolio</a></li>
<li><a href="#">One Dropdown</a>
<ul>
<li><a href="#">Level 2.1</a></li>
<li><a href="#">Level 2.2</a></li>
<li><a href="#">Level 2.3</a></li>
<li><a href="#">Level 2.4</a></li>
<li><a href="#">Level 2.5</a></li>
</ul>
</li>
<li><a href="#">Three Levels</a>
<ul>
<li><a href="#">Level 2.1</a></li>
<li><a href="#">Level 2.2</a></li>
<li><a href="#">Level 2.3</a>
<ul>
<li><a href="#">Level 2.3.1</a></li>
<li><a href="#">Level 2.3.2</a></li>
<li><a href="#">Level 2.3.3</a></li>
<li><a href="#">Level 2.3.4</a></li>
<li><a href="#">Level 2.3.5</a></li>
<li><a href="#">Level 2.3.6</a></li>
<li><a href="#">Level 2.3.7</a></li>
</ul>
</li>
<li><a href="#">Level 2.4</a></li>
<li><a href="#">Level 2.5</a></li>
</ul>
</li>
<li><a href="#">Services</a></li>
</ul>
</div>

Bạn nên chỉnh sửa tại bảng thử HTML/Javascrip cho thật vừa ý trước khi đưa vào blog.Bảng thử bạn có thể dùng tại ĐÂY
Nhận xét

8 nhận xét :

  1. mình muốn thay đổi màu khung thì ở đâu vậy bạn. mình vẫn chưa hiểu lắm cách thêm địa chỉ vào các thư mục bạn chỉ cho mình được không

    Trả lờiXóa
    Trả lời
    1. Thay đổi màu khung tại phần css của code nhưng với menu này thì ko nên thay đổi.
      Cách thêm thư mục:

      <li><a href="URL nhãn bạn muốn hiển thị">Tên nhãn tương ứng với URL nhãn đó</a></li>

      Lấy link nhãn trên thanh địa chỉ của trình duyệt(addresses)

      Xóa
    2. minhf muốn thêm code tìm khangfnawmf ở bên phải sau menu cùng hàng voi menu thì làm như thế nào

      Xóa
  2. code tìm kiếm nằm sau thanh manu do ban

    Trả lờiXóa
  3. code tìm kiếm nằm sau thanh manu do ban

    Trả lờiXóa
    Trả lời
    1. Blog mình ko có menu tích hợp cả ô tìm kiếm.

      Xóa
  4. mình muốn thay đổi màu khung thì ở đâu vậy bạn. mình vẫn chưa hiểu lắm cách thêm địa chỉ vào các thư mục bạn chỉ cho mình được không

    Trả lờiXóa