Hôm nay mình vừa học thêm được một số tính năng trong CSS3 từ việc tạo một Menu cho trang web của mình, và mình nghĩ sẽ thật là ích kỷ nếu không chia sẻ những tính năng tuyệt vời về CSS3 này cho các bạn.
Chúng ta chỉ sử dụng border-radius, box-shadow, và text-shadow cho việc tạo menu, lưu ý rằng chúng hoạt động tốt nhất trên trình duyệt Firefox, Chrome và Safari.
Đầu tiên như thường lệ chúng ta sẽ tạo ra các menu từ HTML. Các bạn copy đoạn html sau để tham khảo.
<ul id="nav">
<li><a href="#">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="#"</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</a></li>
<li><a href="#">Sub-Level Item</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>
<li><a href="#">Sub-Level Item</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>
Sau đó các bạn copy đoạn css sau :
body {
background: none repeat scroll 0 0 #EBEBEB;
color: #666666;
font: 0.8em/1.5em Arial,Helvetica,sans-serif;
margin: 100px auto;
width: 900px;
}
a {
color: #333333;
}
#nav {
background: url("img/gradient.png") repeat-x scroll 0 -110px #7D7D7D;
border-radius: 2em 2em 2em 2em;
line-height: 100%;
margin: 0;
padding: 7px 6px 0;
}
#nav li {
float: left;
list-style: none outside none;
margin: 0 5px;
padding: 0 0 8px;
position: relative;
}
#nav a {
color: #E7E5E5;
display: block;
font-weight: bold;
margin: 0;
padding: 8px 20px;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
#nav a:hover {
background: none repeat scroll 0 0 #000000;
color: #FFFFFF;
}
#nav .current a, #nav li:hover > a {
background: url("img/gradient.png") repeat-x scroll 0 -40px #666666;
border-top: 1px solid #F8F8F8;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
color: #444444;
text-shadow: 0 1px 0 #FFFFFF;
}
#nav ul li:hover a, #nav li:hover li a {
background: none repeat scroll 0 0 transparent;
border: medium none;
color: #666666;
}
#nav ul a:hover {
background: url("img/gradient.png") repeat-x scroll 0 -100px #0078FF !important;
color: #FFFFFF !important;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
#nav li:hover > ul {
display: block;
}
#nav ul {
background: url("img/gradient.png") repeat-x scroll 0 0 #DDDDDD;
border: 1px solid #B4B4B4;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
display: none;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 35px;
width: 185px;
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
text-shadow: 0 1px 0 #FFFFFF;
}
#nav ul ul {
left: 181px;
top: -3px;
}
#nav ul li:first-child > a {
}
#nav ul li:last-child > a {
}
#nav:after {
clear: both;
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}
#nav {
display: inline-block;
}
html[xmlns] #nav {
display: block;
}
* html #nav {
height: 1%;
}
Nếu các bạn không thích sử dụng thêm hình gradient thì có thể thay thế bằng background sau :
background: -moz-linear-gradient(center top , #EBEBEB, #A1A1A1) repeat scroll 0 0 transparent;
/* có thể bo thêm góc cho đẹp */
border-radius:10px;
Bây giờ các bạn có thể xem lại thành quả của mình, thật tuyệt vời với menu như vậy phải không các bạn.