Làm thế nào để tạo một menu xổ xuống CSS3 Dropdown Menu

Làm thế nào để tạo một menu xổ xuống CSS3 Dropdown Menu

Chúng tôi sẽ tạo ra một danh sách có thứ tự với một mục danh sách và một thẻ neo cho mỗi liên kết đơn. Để tạo ra các trình đơn phụ thêm một danh sách có thứ tự trong danh sách.

Demo

Step 1 – HTML Markup

<ul class="menu">

 <li><a href="#">My dashboard</a></li>
 <li><a href="#">Likes</a></li>
 <li><a href="#">Views</a>

  <ul>
   <li><a href="#" class="documents">Documents</a></li>
   <li><a href="#" class="messages">Messages</a></li>
   <li><a href="#" class="signout">Sign Out</a></li>
  </ul>

 </li>
 <li><a href="#">Uploads</a></li>
 <li><a href="#">Videos</a></li>
 <li><a href="#">Documents</a></li>

</ul>

 

Bước 2 – Menu Layout (Bố cục)

 

Chúng tôi sẽ bắt đầu loại bỏ các lề, đệm, biên giới và đường nét như tất cả các phần tử của menu. Sau đó, chúng ta sẽ thêm một chiều rộng cố định và chiều cao để trình đơn, làm tròn góc và gradients CSS3. Để sắp xếp các liên kết theo chiều ngang, chúng ta sẽ thả nổi một danh sách bên trái. Chúng ta cũng cần phải thiết lập vị trí tương đối vì chúng ta sẽ cần điều đó để sắp xếp các trình đơn phụ.

.menu,

.menu ul,

.menu li,

.menu a {

    margin: 0;

    padding: 0;

    border: none;

    outline: none;

}

.menu {

    height: 40px;

    width: 505px;

    background: #4c4e5a;

    background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

    background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

    background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

    background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

    background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

}

.menu li {

    position: relative;

    list-style: none;

    float: left;

    display: block;

    height: 40px;

}

Chúng ta sẽ ẩn các menu con tạm thời để được dễ dàng hơn để tạo kiểu cho cấp độ đầu tiên.

.menu ul { display: none; }

Step 3 – Menu Links

Để tạo kiểu cho liên kết đơn, chúng tôi sẽ bổ sung thêm một số thuộc tính CSS cơ bản như font chữ, màu sắc, đệm, vv Sau đó, chúng ta sẽ thêm một văn bản bóng tối và một quá trình chuyển đổi màu sắc để tạo ra một hiệu ứng mượt mà khi thay đổi màu sắc trên trạng thái hover. Để tạo ra các liên kết phân cách thêm một đường viền bên trái và bên phải và sau đó chúng tôi sẽ loại bỏ các biên giới trái từ liên kết đầu tiên và biên giới ngay từ những liên kết cuối cùng. Đối với các hover chúng tôi sẽ chỉ thay đổi màu sắc văn bản. 

.menu li a {
    display: block;
    padding: 0 14px;
    margin: 6px 0;
    line-height: 28px;
    text-decoration: none;
 
    border-left: 1px solid #393942;
    border-right: 1px solid #4f5058;
 
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
 
    color: #f3f3f3;
    text-shadow: 1px 1px 1px rgba(0,0,0,.6);
 
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
}
 
.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }
 
.menu li:hover > a { color: #8fde62; }

Step 4 – Sub Menu (Menu con)

 

Đầu tiên chúng ta hãy loại bỏ dòng này của mã mà chúng tôi đã thêm vào bước thứ hai.

.menu ul { display: none; }

Bây giờ chúng ta sẽ tạo kiểu menu phụ. Chúng ta sẽ bắt đầu với vị trí 40px menu phụ từ trên và 0px từ bên trái của menu item và thêm dưới góc tròn. Chúng ta sẽ thiết lập Opacity về 0 và vào trạng thái hover để 1 để tạo ra các hiệu ứng fade in / out. Cho slide down / up hiệu quả chúng ta cần phải thiết lập chiều cao danh sách để 0px khi được ẩn và để 36px vào trạng thái hover. 

.menu ul {
    position: absolute;
    top: 40px;
    left: 0;
 
    opacity: 0;
    background: #1f2024;
 
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
 
    -webkit-transition: opacity .25s ease .1s;
    -moz-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
}
 
.menu li:hover > ul { opacity: 1; }
 
.menu ul li {
    height: 0;
    overflow: hidden;
    padding: 0;
 
    -webkit-transition: height .25s ease .1s;
    -moz-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
}
 
.menu li:hover > ul li {
    height: 36px;
    overflow: visible;
    padding: 0;
}

Chúng ta sẽ thiết lập chiều rộng của các liên kết trình đơn phụ để 100px. Thay vì biên trái và biên phải chúng ta sẽ thêm một đáy một và loại bỏ nó từ các liên kết cuối cùng.

.menu ul li a {

    width: 100px;

    padding: 4px 0 4px 40px;

    margin: 0;

    border: none;

    border-bottom: 1px solid #353539;

}

.menu ul li:last-child a { border: none; }

Để hoàn thành nó, chúng ta chỉ cần thêm một biểu tượng cho mỗi liên kết trình đơn phụ. Để làm điều đó, chúng tôi sẽ tạo ra một lớp tùy chỉnh cho mỗi một và thêm hình nền.

.menu a.documents { background: url(../img/docs.png) no-repeat 6px center; }

.menu a.messages { background: url(../img/bubble.png) no-repeat 6px center; }

.menu a.signout { background: url(../img/arrow.png) no-repeat 6px center; }

Chúng ta đã tạo thành công trình đơn menu thả xuống CSS3 - CSS3 Dropdown Menu.

Related Post

Admin Huỳnh Phụng

Xuất thân là Quản Trị Kinh Doanh. Yêu thích Marketing Online và trở thành Blogger với gần 1000 bài viết về nhiều lĩnh vực. Blog cá nhân http://toilaquantri.com