• Tạo tài khoản
    *
    *
    *
    *
    *
    *

    Thông tin có dấu hoa thị (*) là bắt buộc.

MẠNG SINH VIÊN CNTT VIỆT NAM - ITSTUDENT.net ®

Tuyển tập CSS – Accordion Menu CSS (Phần 2)

  • Share

cssmenu13ITStudent.net – Trong bài viết trước đã giới thiệu đến các Bạn một phong cách phối màu trẻ trung áp dụng trên menu dạng Accordion trong bài viết này sẽ giới thiệu tiếp đến các Bạn một Accordion Menu khác, mang phong cách phối màu với tông màu chủ đạo là trắng và đen sử dụng để tô điểm lên các thành phần menu chính và menu phụ, đồng thời tạo điểm nhấn bằng một màu sắc khác cho các menu được chọn (active menu) là một màu xanh lá khá đẹp mắt.

Dựa theo ý tưởng thiết kế của Accordion Menu từ bài viết trước, phần trước sử dụng các biểu tượng dấu cộng (+) và dấu trừ (-) để biểu diễn hình thức trình bày menu, nội dung của bài viết lần này sẽ tận dụng lại các biểu tượng dấu (+) và dấu (-) đó để diễn đạt khi menu được chọn và đồng thời thay đổi cách thiết kế về màu sắc cũng như sự tách bạch giữa các menu.

Thiết kế cho mẫu Accordion Menu trong bài viết này các Bạn sẽ thấy sự thay đổi về hình thức trình bày đó chính là sự tách bạch từng phần trong hệ thống menu, không kết dính (liền lạc) với nhau theo từng mảng màu như hệ thống menu trước. Đồng thời các thành phần của menu cũng được chăm chút lại với những đường cong bo góc toàn bộ các thành phần của menu được thiết kế nổi bật từ việc đổ bóng.

Các Bạn có thể thay đổi việc phối màu sắc cho hệ thống Accordion Menu thông qua tập tin .CSS, cũng như thay đổi những thiết lập khác như độ trễ mỗi khi suất hiện menu con hay hiệu ứng đóng mở menu thông qua tập tin .JS được viết theo ngôn ngữ JQuery.

Đoạn mã minh hoạ cssmenu.css

#cssmenu > ul > li > a {
font-size: 15px;
display: block;
color: #ffffff;
text-shadow: 0 1px 1px #000;
background: #565656;
background: -moz-linear-gradient(#565656 0%, #323232 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
background: -webkit-linear-gradient(#565656 0%, #323232 100%);
background: linear-gradient(#565656 0%, #323232 100%);
border: 1px solid #000;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#cssmenu > ul > li > a > span {
display: block;
border: 1px solid #666666;
padding: 6px 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-weight: bold;
}

Cách thực hiện

Đoạn code đặt tại thẻ <head>

<link rel='stylesheet' type='text/css' href='cssmenu.css' />
<script src='jquery.min.js'></script>
<script type='text/javascript' src='menu_jquery.js'></script>

Đoạn code đặt tại thẻ <body>

<div id='cssmenu'>
<ul>
   <li class='active'><a href='#'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Widgets</span></a></li>
         <li><a href='#'><span>Menus</span></a></li>
         <li class='last'><a href='#'><span>Products</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Company</span></a>
      <ul>
         <li><a href='#'><span>About</span></a></li>
         <li class='last'><a href='#'><span>Location</span></a></li>
      </ul>
   </li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

 Xem DEMO

Các Bạn có thể tải thư viện css tại đây.