Hôm nay tôi sẽ giới thiệu cho các bạn tạo 1 Menu động nhanh chóng bằng cách sử dụng style CSS. Với Style này bạn có thể áp dụng rất nhanh chóng cho trang web của bạn thêm linh hoạt hơn
Cascading Style Sheets (CSS) – được dùng để miêu tả cách trình bày các tài liệu viết bằng ngôn ngữ HTML và XHTML. Để tạo ra các kiểu dáng có thể áp dụng cho nhiều trang web, giúp tránh phải lặp lại việc định dạng cho các trang web giống nhau.
Để tạo menu giống như menu trên Blog, bạn xem ví dụ dưới:
<html>
<head>
<title>Test Menu using CSS</title>
<style type="text/css">
<!--
#blockborder
{
background-color: #5A7798
}
.buttonscontainer {width: 173px;} (xác định độ rộng của menu, k0 phụ thuộc vào block)
.buttons a {color: #FFFFFF;
border: 1px solid;
background-color: #609dcc;
padding:2.5px;
padding-left: 3.5px;
font: 13px Arial, sans-serif;
font-weight: bold;
text-decoration: none;
border-color: #6699FF # 333399 #333399 #6699FF;
display: block;
margin: -1px;
width: 100%;
text-align:left;}
.buttons a:hover {border: 1px solid; ( thay đổi hiệu ứng khi di chuyển chuột qua)
padding-left:2px;
padding-top: 3px;
padding-bottom: 2.5px;
background-color: #0077b0;
border-color:#333399 #6699FF #6699FF #333399;
color: #FFFFFF;
text-decoration: none;}
{top: 90px;
position:absolute;}
.buttons a:active hover {border: 1px solid; (hiệu ứng đôi với submenu đang được active, hiển thị )
padding-left:2px;
padding-top: 3px;
padding-bottom: 2.5px;
background-color: #0077b0;
border-color:#333399 #6699FF #6699FF #333399;
color: #FFFFFF;
text-decoration: none;}
{top: 90px;
position:absolute;}
-->
</style>
</head>
<body>
<div class="buttonscontainer">
<div class="buttons">
<a href="/Love4all1080/Link1">Blog Tips</a><br>
<a href="/Love4all1080/Link2">Ebook</a><br>
<a href="/Love4all1080/Link3">Funny</a><br>
<a href="/Love4all1080/Link4">News</a><br>
<a href="/Love4all1080/Link5">PhotoShop</a><br>
<a href="/Love4all1080/Link6">Softwares</a><br>
<a href="/Love4all1080/Link7">Templates</a><br>
...... ( thêm vào các menu nếu muốn )
</div>
</div>
</body>
</html>
Post a Comment
Bạn có ý kiến thắc mắc hay bình luận gì về bài viết này vui lòng để lại lời nhắn.Cám ơn bạn đã ghé thăm !