Có nhiều cách để tạo menu cho một website bằng cách sử dụng
Photoshop, Corel, Flash, CSS... Tuy nhiên, sử dụng CSS là các tối ưu
nhất. Website sẽ được tải lên nhanh hơn.
Trong bài viết này, tôi sẽ
hướng dẫn cách tạo một menu đơn giản
Bước 1: Tạo menu được bo góc bên trái:
Bước 2: Xây dựng một menu hoàn chỉnh:
(http://code.forumotion.com/)
Photoshop, Corel, Flash, CSS... Tuy nhiên, sử dụng CSS là các tối ưu
nhất. Website sẽ được tải lên nhanh hơn.
Trong bài viết này, tôi sẽ
hướng dẫn cách tạo một menu đơn giản
Bước 1: Tạo menu được bo góc bên trái:
- Code:
<body>
<div id="navigation"><a href="#">Home</a></div>
</body>
<style type="text/css">
#navigation a
{
color: #000;
background: #fb0 url("images/left_tab.gif") left top no-repeat;
text-decoration: none;
padding-left: 10px
}
</style>
Bước 2: Xây dựng một menu hoàn chỉnh:
- Code:
<body>
<div id="navigation">
<a href="/"><span>Home</span></a>
<a href="/"><span>Services</span></a>
<a href="/"><span>Products</span></a>
<a href="/"><span>About Us</span></a>
<a href="/"><span>Contact Us</span></a>
</div>
<div id="border"></div>
</body>
<style type="text/css">
/*Tao mau vang cho menu */
#navigation a span
{
background: url("images/right_tab.gif") right top no-repeat;
padding-right: 10px;
font-weight:bold
}
#navigation a
{
color: #000;
background: #fb0 url("images/left_tab.gif") left top no-repeat;
text-decoration: none;
padding-left: 10px
}
/*Doi mau thi di chuot len menu*/
#navigation a:hover
{
color: #fff;
background: #26a url("images/left_tab_blue.gif") left top no-repeat;
text-decoration: none;
padding-left: 10px
}
#navigation a:hover span
{
background: url("images/right_tab_blue.gif") right top no-repeat;
padding-right: 10px
}
#border {height:1em; background:#26a}
</style>
(http://code.forumotion.com/)
