Tạo Menu Accordion đẹp với HTML CSS và jQuery (Phần 1)

Accordion menu là một dạng menu phổ biến được sử dụng nhiều trong các website hiện đại. Accordion không chỉ được sử dụng cho Menu, nó cũng có thể được sử dụng cho nội dung, hình ảnh. Ở bài này tôi sẽ hướng dẫn cách tạo một menu dọc, trong đó áp dụng accordion vào.

Về cơ bản hiệu ứng Accordion này hoạt động theo nguyên lý khi người dùng mới mở trang web, Khi người dùng click chuột vào icon, nội dung của thành phần con nó sẽ được hiển thị và các phần khác bị ẩn. Khi đóng thành phần cha, thì tất cả các thành phần con cũng đóng theo.

See the Pen Accordion Menu by Thai Thanh Nhan (@thanhnhan2tn) on CodePen.

Để hiểu và làm được theo hướng dẫn dưới đây, các bạn cần có một số kiến thức:

– HTML – CSS: cơ bản.

– jQuery: Nắm rõ các sử dụng animation, và thao tác trên DOM.

Để tránh bài quá dài, tôi sẽ chia bài viết làm 2 phần:

Phần 1: Tạo menu và định dạng cho menu Accordion với HTML – CSS.

Phần 2: Xử lý sự kiện cho Accordion Menu với jQuery.


Phần 1: Tạo menu và định dạng cho menu với HTML và CSS

– Dựng sườn cho menu bằng HTML

Ở đây chúng ta sẽ sử dụng HTML để dựng các list, nó chính là menu của chúng ta cần code HTML như sau:

<html>
  <head>
    <meta charset="utf-8"/>
    <title>Demo Accordion Menu</title>
  </head>
  <body>
    <div class="content">
      <nav>
        <div id="menu" class="menu">
          <div class="menu-header"> ACCORDION MENU </div>
          <ul>
            <li class="active"><a href="#"><i class="fa fa-home"> </i>Home</a></li>
            <li><a href="#"><i class="fa fa-file-image-o"> </i>Gallery</a>
              <ul class="submenu">
                <li><a href="#"> Graphics</a></li>
                <li><a href="#"> Photoshop</a></li>
              </ul>
            </li>
            <li><a href="#"><i class="fa fa-cog"> </i>Services</a>
              <ul class="submenu">
                <li><a href="#"> Web Design </a>
                  <ul class="submenu">
                    <li><a href="#"> Graphics</a></li>
                    <li><a href="#"> Photoshop</a></li>
                  </ul>
                </li>
                <li><a href="#"> Hosting</a></li>
                <li><a href="#"> Design </a></li>
                <li><a href="#"> Consulting </a></li>
              </ul>
            </li>
            <li><a href="#"><i class="fa fa-newspaper-o"> </i>News<span class="menu-label"> 8 </span></a></li>
            <li><a href="#"><i class="fa fa-user"> </i>About</a></li>
            <li><a href="#"><i class="fa fa-envelope"> </i> Contact</a></li>
          </ul>
          <div class="menu-footer"> @ Test</div>
        </div>
      </nav>
    </div>
  </body>
</html>

– Với đoạn mã trên, chúng ta đã tạo được các danh sách, và trong số đó có chứa danh sách con,

 

– Các thẻ <i > chứa các class “fa fa-**” là sử dụng bộ icon của font-awesome nên bạn phải thêm thư viện của font-awesome vào trước thẻ </head >, chúng ta sửa lại code trên như sau:

<body>
<meta charset="utf-8"/>
<title>Demo Accordion Menu</title>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>

– sau khi chạy code sẽ hiển thị như sau:

html-accordion-menu-before-css

 

– Layout giao diện cho menu với CSS

Để menu được đẹp, và ẩn đi các thành phần thuộc cấp con,.. chúng ta cần thêm CSS cho menu:

– Để thêm css, các bạn có thể sử dụng nhiều cách, ở đây tôi sẽ cho trực tiếp vào file html, để làm việc này, các bạn thêm thẻ sau vào trong trước thẻ </head>

<style type="text/css">
</style>

– Trước tiên chúng ta layout từ bố cục bên ngoài, đóng khung và font mặc định cho menu, các bạn chèn code sau vào trong cặp thẻ vừa thêm như sau:

<style type="text/css">
.content {
  margin: 100px auto;
  width: 260px;
}

.menu {
  font-family: 'Open Sans', sans-serif;
  min-width: 260px;
  box-shadow: 0 20px 50px #333333;
  float: left;
  outline: 0;
  position: relative;
}
.menu * {
  font-family: 'Open Sans', sans-serif;
  box-sizing: border-box;
  
  outline: 0;
}
</style>

– Tiếp theo chúng ta sẽ layout cho header, footer của menu

.menu .menu-footer {
  background: #414956;
  color: #f0f0f0;
  height: 50px;
  line-height: 50px;
  font-size: 6px;float: left;
  width: 100%;
  font-weight: normal;
  text-align: center;
}
.menu .menu-header {
  background: #414956;
  color: #f0f0f0;
  line-height: 50px;
  text-align: center;
  font-weight: bold;
  height: 50px;
  width: 100%;
}

– Menu của chúng ta lúc này như sau:

html-accordion-css-header

– Tiếp đến chúng ta layout cho các thẻ ul, li trong menu, cho đồng bộ với các thành phần khác, ngoài ra các thẻ con chúng ta sẽ ẩn đi với thuộc tính “display: none;”, các bạn thêm code sau vào:

menu ul {
  list-style: none; 
  margin: 0;
  padding: 0;
}
.menu ul li {
  display: block;
  float: left;    
  position: relative;
  width: 100%;   
}
.menu ul li a {
  background: #414956;
  font-size: 13px;
  overflow: hidden;
  padding: 14px 22px;
  white-space: nowrap; 
  color: #f0f0f0;
  float: left;
  position: relative;
  text-decoration: none; 
  width: 100%;
}
.menu ul .submenu {
  display: none;
  position: static;
  width: 100%;
}
.menu ul .submenu li {
  clear: both;
  width: 100%;
}
.menu ul .submenu li ul.submenu {
  display: none;
  position: static;
  width: 100%;
  overflow: hidden;
}
.menu ul .submenu li a {
  background: #383838;
  float: left;
  font-size: 11px;
  border-left: solid 6px transparent;
  border-top: none;
  position: relative;
  width: 100%;
}

– Khi thêm CSS trên, thì menu của chúng ta hiện tại như sau:

html-accordion-css-li

– Ở đây chúng ta nhận thấy một số vấn đề cần chỉnh lại như sau:

+ icon dính vào chữ trên menu

+ Thêm đường viền cách giữa các item.

+ Thêm hiệu ứng khi rê chuột vào, và hiệu ứng khi menu item được kích hoạt.

Bây giờ chúng ta thêm một vài dòng CSS như sau:

/* padding cho icon */
.menu ul li a i {  
  float: left;
  font-size: 16px;
  line-height: 18px;
  text-align: left;
  width: 34px;
}
/* style cho cac the a khi dang active*/
.menu > ul > li.active > a {
  background: #3b424d;
  color: #ffffff;
}
/* style cho cac the a khi dang re chuot vao*/
.menu > ul > li:hover > a {
  background: #3b424d;
  color: #ffffff;
}
/* line cho moi item */
.menu > ul > li > a {
  border-bottom: solid 1px #3b422d;
}

– Đây là thành quả:

html-accordion-css-style

– Sau đây à code toàn bộ các phần trên:

<html>
  <head>
    <meta charset="utf-8"/>
    <title>Accordion Menu</title>
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
    <style type="text/css">
       .content {
          margin: 10px auto;
          width: 260px;
        }
        .menu {
          box-shadow: 0 20px 50px #333;
          float: left;
          font-family: 'Open Sans', sans-serif;
          min-width: 260px;
          outline: 0;
          position: relative;
        }
        .menu * {
          box-sizing: border-box;
          font-family: 'Open Sans', sans-serif;
          outline: 0;
        }
        .menu .menu-footer {
          background: #414954;
          color: #f0f0f0;
          float: left;
          font-weight: normal;
          height: 45px;
          line-height: 45px;
          font-size: 6px;
          width: 100%;
          text-align: center;
        }
        .menu .menu-header {
          background: #414954;
          color: #f0f0f0;
          font-weight: bold;
          height: 50px;
          line-height: 50px;
          text-align: center;
          width: 100%;
        }
        .menu .menu-footer {
          background: #414954;
          color: #f0f0f0;
          float: left;
          font-weight: normal;
          height: 45px;
          line-height: 45px;
          font-size: 6px;
          width: 100%;
          text-align: center;
        }
        .menu .menu-header {
          background: #414956;
          color: #f0f0f0;
          font-weight: bold;
          height: 50px;
          line-height: 50px;
          text-align: center;
          width: 100%;
        }
        .menu ul {
          list-style: none;
          margin: 0;
          padding: 0;
        }
        .menu ul li {
          display: block;
          float: left;
          position: relative;
          width: 100%;
        }
        .menu ul li a {
          background: #414954;
          color: #f0f0f0;
          float: left;
          font-size: 13px;
          overflow: hidden;
          padding: 14px 22px;
          position: relative;
          text-decoration: none;
          white-space: nowrap;
          width: 100%;
        }
        .menu ul .submenu {
          display: none;
          position: static;
          width: 100%;
        }

        .menu ul .submenu li {
          clear: both;
          width: 100%;
        }
        .menu ul .submenu li ul.submenu {
          display: none;
          position: static;
          width: 100%;
          overflow: hidden;
        }
        .menu ul .submenu li a {
          background: #383838;
          border-left: solid 6px transparent;
          border-top: none;
          float: left;
          font-size: 11px;
          position: relative;
          width: 100%;
        }

        .menu ul li a i {
          float: left;
          font-size: 16px;
          line-height: 18px;
          text-align: left;
          width: 34px;
        }
        .menu ul .submenu .submenu-indicator {
          line-height: 16px;
        }
        .menu > ul > li.active > a {
          background: #3b424d;
          color: #ffffff;
        }
        .menu > ul > li:hover > a { 
          background: #3b424d;
          color: #ffffff;
        }
        .menu > ul > li > a {
          border-bottom: solid 1px #3b424d;
        }
    </style>
  </head>
  <body>
    <div class="content">
      <nav>
        <div id="menu" class="menu">
          <div class="menu-header"> ACCORDION MENU </div>
          <ul>
            <li class="active"><a href="#"><i class="fa fa-home"> </i>Home</a></li>
            <li><a href="#"><i class="fa fa-file-image-o"> </i>Gallery</a>
              <ul class="submenu">
                <li><a href="#"> Graphics</a></li>
                <li><a href="#"> Photoshop</a></li>
              </ul>
            </li>
            <li><a href="#"><i class="fa fa-cog"> </i>Services</a>
              <ul class="submenu">
                <li><a href="#"> Web Developments </a>
                  <ul class="submenu">
                    <li><a href="#"> HTML/CSS</a></li>
                    <li><a href="#"> Javascript</a></li>
                  </ul>
                </li>
                <li><a href="#"> Hosting</a></li>
                <li><a href="#"> Design </a></li>
              </ul>
            </li>
            <li><a href="#"><i class="fa fa-newspaper-o"> </i>News<span class="menu-label"> 8 </span></a></li>
            <li><a href="#"><i class="fa fa-user"> </i>About</a></li>
            <li><a href="#"><i class="fa fa-envelope"> </i> Contact</a></li>
          </ul>
          <div class="menu-footer"> @ Test</div>
        </div>
      </nav>
    </div>
  </body>
</html>

Đây mới chỉ là style cho menu, phần sau chúng ta sẽ viết jQuery xử lý sự kiện để ẩn hiện các thành phần con của menu.

Trả lời

Nhập mã kiểm tra * Time limit exceeded. Please complete the captcha once again.