Tạo dropdown menu với CSS3

Hiện tại, vì công việc quá bận rộn nên mình không còn thời gian để post bài và duy trì nội dung cho blog nữa. Do đó tại thời điểm này, mình quyết định ngừng phát triển blog. Mọi bài viết sẽ vẫn được lưu trữ và mình sẽ cố gắng hỗ trợ tất cả các bạn khi có comment hỏi. Cảm ơn các bạn đã ủng hộ blog suốt thời gian qua !

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 mục để hiển thị hết nội dung của trang. Hôm nay, mình sẽ giới thiệu với các bạn bài hướng dẫn nhanh cách tạo Dropdown Menu với CSS3 kèm theo việc chèn icon vào website không cần hình ảnh, không cần đến jQuery.

HTML

Đầu tiên là chúng ta tạo menu cha

 <nav> 
        <ul class="menu">
            <li><a href="#">Trang chủ</a></li>
            <li><a href="#">Giới thiệu</a></li>
            <li><a href="#">Dịch vụ</a></li>
            <li><a href="#">Liên hệ</a></li>
        </ul>
    </nav>

CSS3

CSS dành cho menu cha

nav {
 position: relative;
 color: #fff;
 border: 1px solid #222;
 position: relative;
 z-index: 1;
 background: #395775;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;}

.menu li {
 float: left;
 position: relative;}

.menu li a {
 color: #fff;
 display: block;
 font-size: 14px;
 line-height: 20px;
 padding: 15px 25px;
 text-decoration: none;
 -webkit-transition: background 0.5s ease;
 -moz-transition: background 0.5s ease;
 -o-transition: background 0.5s ease;
 -ms-transition: background 0.5s ease;
 transition: background 0.5s ease;}

.menu li a:hover {
 background: #222;}

HTML Dropdown Menu

 <nav>
  <ul class="menu">
   <li>....</li>
   <li><a href="#">Giới thiệu</a>
    <ul>
     <li><a href="#">Sứ mệnh công ty</a></li>
     <li><a href="#">Quy mô công ty</a></li>
    </ul>
   </li>
   <li><a href="#">Dịch vụ</a>
    <ul>
     <li><a href="#">Lập trình Website</a></li>
     <li><a href="#">Thiết kế và in ấn</a></li>
     <li><a href="#">Dịch vụ đẩy PageRank</a></li>
     <li><a href="#">Dịch vụ SEO</a></li>
    </ul>
   </li>
   <li>...</li>
  </ul>

CSS Dropdown Menu

.menu ul {
 position: absolute;
 left: -9999px;
 list-style: none;
 opacity: 0;
 transition: opacity 1s ease;}

.menu ul li {
 float: none;}

.menu ul a {
 white-space: nowrap;}

.menu li:hover ul {
 border-radius: 0 0 4px 4px;
 box-shadow: inset 0px 2px 4px rgba(0,0,0,0.4);
 left: 0px;
 opacity: 1;
 background: #333;}

.menu li:hover ul a {
 background: none;
 border-radius: 0;
 box-shadow: none;}

.menu li:hover ul li a:hover {
 background: #222;
 border-radius: 0 0 4px 4px;}

Các bạn chú ý khi rê chuột vào menu con, menu cha mất đi màu background. Nên chúng ta sẽ bổ sung thêm một đoạn CSS để fix lỗi này.

.menu li:hover a {
 background: #222;}

Icon

Lúc trước khi muốn chèn icon vào menu thì chúng ta thường chèn theo kiểu hình ảnh. Nay mình giới thiệu một cách chèn hiệu quả, nhẹ và nhanh hơn nhiều.

Các bạn vào trang genericons.com, download bộ source về. Giải nén và copy thư mục font và file genericons.css vào trong thư mục gốc của bài hướng dẫn này.

Tiếp theo ta khai báo để đưa file genericons.css vào trong web.

<link href="/genericons.css" media="screen" rel="stylesheet" type="text/css" />

Sau đó đưa icon vào website thông qua đoạn mã HTML dưới đây, đặt trong thẻ <head>

 <ul class="menu">
  <li><a href="#"><span class="genericon genericon-home"></span>Trang chủ</a></li>
 </ul>

Các bạn thắc mắc dòng genericon genericon-home ở đâu ra. Các bạn tiếp tục vào trang genericons.com, chọn một icon, sau đó để ý đoạn Copy HTML, click vào đó, ta sẽ được một đoạn mã để nhúng icon vào website.

Bạn làm tương tự với những menu còn lại. Bạn sẽ nhanh chóng tạo ra những icon đặt trong menu nhưng nhược điểm là số lượng icon chưa nhiều, chưa đa dạng và không có nhiều màu sắc như những icon thông thường.

Nguồn: Y2Graphic