Cấp bậc tác giả:

TRAINING

DropDown Menu với CSS

Được viết bởi QuangIT ngày 31/07/2012 lúc 02:28 PM
Hiện nay Dropdown menu là dạng menu rất phổ biến trên nhiều trang web đặc biệt là những trang web có cấu trúc phức tạp và cần nhiều Categories để hiển thị hết nội dung của trang.
  • 0
  • 9530
Tải tệp tin: Click ở đây

DropDown Menu với CSS

Hiện nay Dropdown menu là dạng menu rất phổ biến trên nhiều trang web đặc biệt là những trang web có cấu trúc phức tạp và cần nhiều Categories để hiển thị hết nội dung của trang. Do vậy Dropdown menu là dạng menu lý tưởng để giải quyết vấn đề này. Trước đây nếu muốn có được Dropdown menu bạn cần phải dùng Javascript và cũng hơi rắc rối mới có được menu như ý. 

Nhưng hiện nay với những trình duyệt tân tiến hơn bạn hoàn toàn có thể dùng CSS để tạo ra dropdown menu rất đơn giản. Tuy nhiên, như đã nói, cách này chỉ phù hợp với những trình duyệt mới, còn những trình duyệt cũ như IE 7 trở xuống sẽ không dùng được mà nếu muốn dùng bạn phải dùng Javascript để khắc phục.


Home.htm
<html>
<head>
<link href="stylesheet.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div>
  <h1>DNGAZ</h1>
  <p>Free CSS Template</p>
</div>
<div id="menu">
  <ul>
    <li><a href="#">Homepage</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact Us</a>
        <ul>
        <li><a href="#">Admin</a></li>
        <li><a href="#">Smod User</a></li>
        <li><a href="#">User</a></li>
        </ul>
    </li>
  </ul>
</div>
</body>
</html>
</html>
 
Stylesheet.css
/* Edited with EditCSS */
/**** Style sheets whose contents could be loaded were ****/
/**** imported instead. Rule order may be incorrect ****/
/**** as a result. ****/
@import "file:///C:/Users/Quang.It/Desktop/QuangLTN/stylesheet.css";

/**** LINK-tag style sheet stylesheet.css ****/

/* Non-http; imported above. */


* {margin: 0; padding: 0;}

#menu {
border: 1px solid #686;
background: #e4e4e3;
float: left;
}

#menu ul {
float: left;
list-style: none;
}

#menu ul li {
position: relative;
float: left;
}

#menu li a {
display: block;
color: #232323;
font-weight: bold;
text-decoration: none;
padding: .3em 6px
}

#menu li a:hover {
color: white;
background:  orange;
}

#menu li ul {
position: absolute;
display: none;
width: 10em;
}

#menu li:hover ul {
display: block;
}

#menu ul li ul li{
border: 1px solid #686;
width: 100%;
}

Nguồn bài viết: Sưu tầm

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML