Tạo menu đa cấp cực pro bằng CSS3

Hôm nay mình sẽ chia sẻ với các bạn thêm một hiệu ứng làm menu bằng CSS3 giúp bạn bổ sung thêm nhiều lựa chọn cho việc thiết kế menu cho web của mình. Các bạn có thể xem demo bài viết tại đây và làm theo từng bước sau :

Bước 1 : HTML
Như thường lệ , chúng ta sẽ bắt đầu tạo ra menu bằng các phần tử html

<div>
<ul id="nav">
<li>
<a href="#">Parent link #1</a>
<a href="#">Sub #11</a>
<a href="#">Sub #12</a>
<a href="#">Sub #13</a>
<a href="#">Sub #14</a>
</li>
<li>
<a href="#">Parent link #2</a>
<a href="#">Sub #21</a>
<a href="#">Sub #22</a>
<a href="#">Sub #23</a>
<a href="#">Sub #24</a>
</li>
<li>
<a href="#">Parent link #3</a>
<a href="#">Sub #31</a>
<a href="#">Sub #32</a>
<a href="#">Sub #33</a>
<a href="#">Sub #34</a>
</li>
<li>
<a href="#">Parent link #4</a>
<a href="#">Sub #41</a>
<a href="#">Sub #42</a>
<a href="#">Sub #43</a>
<a href="#">Sub #44</a>
</li>
</ul>

</div>

Bước 2 : CSS

Sau đây là css types cho menu của chúng ta

ul#nav {
border: 1px solid #454545;
display: block;
height: 400px;
margin: 0;
padding: 15px;
awidth: 160px;

-moz-border-radius: 9px;
-ms-border-radius: 9px;
-webkit-border-radius: 9px;
-o-border-radius: 9px;
border-radius: 9px;

background: -moz-linear-gradient(#f1f7ff, #d9e1ec);
background: -ms-linear-gradient(#f1f7ff, #d9e1ec);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1f7ff), color-stop(100%, #d9e1ec));
background: -webkit-linear-gradient(#f1f7ff, #d9e1ec);
background: -o-linear-gradient(#f1f7ff, #d9e1ec);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f7ff', endColorstr='#d9e1ec');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f7ff', endColorstr='#d9e1ec')";
background: linear-gradient(#f1f7ff, #d9e1ec);
}

@-moz-keyframes custom_effect {
0% {
background:rgba(255, 255, 255, 0.0);
height: 60px;
}
33% {
background:rgba(255, 255, 255, 0.0);
height: 160px;
}
66% {
background:rgba(255, 255, 255, 1.0);
}
100% {
background:rgba(190, 220, 255, 0.8);
height: 135px;
}
}
@-webkit-keyframes custom_effect {
0% {
background:rgba(255, 255, 255, 0.0);
height: 60px;
}
33% {
background:rgba(255, 255, 255, 0.0);
height: 160px;
}
66% {
background:rgba(255, 255, 255, 1.0);
}
100% {
background:rgba(190, 220, 255, 0.8);
height: 135px;
}
}
ul#nav li {
-moz-border-radius: 9px;
-ms-border-radius: 9px;
-webkit-border-radius: 9px;
-o-border-radius: 9px;
border-radius: 9px;

background-color:transparent;
border: 1px solid #454545;
display: block;
height: 60px;
line-height: 60px;
margin-bottom: 15px;
overflow: hidden;
}
ul#nav li:hover {
-moz-animation-name: custom_effect;
-moz-animation-duration: 0.4s;
-moz-animation-timing-function: ease;
-moz-animation-iteration-count: 1;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;

-webkit-animation-name: custom_effect;
-webkit-animation-duration: 0.4s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;

background:rgba(190, 220, 255, 0.8);
height: 135px;
}
ul#nav a {
border-style: none;
border-awidth: 0;
color: #181818;
cursor: pointer;
float: left;
font-size: 13px;
font-weight: bold;
line-height: 30px;
margin-top: 100px;
padding-left: 18px;
text-align: left;
text-decoration: none;
text-shadow: 0 1px 1px #FFFFFF;
vertical-align: middle;

-moz-transition: all 0.1s 0.4s;
-ms-transition: all 0.1s 0.4s;
-o-transition: all 0.1s 0.4s;
-webkit-transition: all 0.1s 0.4s;
transition: all 0.1s 0.4s;
}
ul#nav a:hover {
text-decoration: underline;
}
ul#nav li a:first-child {
display: block;
float: none;
line-height: 60px;
margin-top: 0;
}
ul#nav li:hover a:first-child {
line-height: 60px;
}
ul#nav li:hover a {
margin-top: 0;
}

Mình hy vọng các bạn sẽ thấy thích và sử dụng menu dạng này cho website của mình. Chúc các bạn thành công !

Chuyên Mục: Css

Bài viết được đăng bởi webmaster