I.Giới thiệu:

  • Dropdown menu, Sub menu là 1 chức năng khá phổ biến ở các trang web và có nhiều plugin về chức năng này.
  • Tuy nhiên trong bài viết này mình muốn giới thiệu về các cách làm drop down menu mà không cần dùng đến plugin để các bạn có thể hiểu rõ cơ bản về drop down menu và cũng là để trong trường hợp không được sử dụng được plugin hay plugin không đáp ứng được yêu cầu thì chúng ta vẫn không bị động.
  • Menu sẽ giống như hình dưới đây:
    uc?id=1N4qz2OqhBLagXQQI02VteoEkek3y7eVO&export=download

II.Dropdown menu đơn giản với chỉ HTML/CSS:

  1. Tạo file
    Tạo file index.html hoặc file có đuôi .html
  2. Copy đoạn code hoàn chỉnh dưới đây:
<!DOCTYPE html>
<html>
  <head>
    <title>Dropdown, Submenu<</title>
    <meta charset="UTF-8">
  </head>
  <body class="test">
      <h3>Dropdown, Submenu</h3>
      <ul id="menu">
          <li>
            <a href="javascript:void(0)">
              item 1
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              item 2
              <span class="arrow arrow-down"></span>
            </a>
            <ul class="dropdown_menu">
              <li>
                <a href="javascript:void(0)">item 2.1</a>
              </li>
              <li>
                <ul class="submenu">
                  <li>
                    <a href="javascript:void(0)">item 2.2.1</a>
                  </li>
                  <li>
                    <a href="javascript:void(0)">item 2.2.2</a>
                  </li>
                  <li>
                    <a href="javascript:void(0)">item 2.2.3</a>
                  </li>
                </ul>
                <a href="javascript:void(0)">item 2.2 (Submenu)<span class="arrow arrow-right"></span></a>
              </li>
              <li>
                <a href="javascript:void(0)">item 2.3</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="javascript:void(0)">
              item 3
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              item 4
              <span class="arrow arrow-down"></span>
            </a>
            <ul class="dropdown_menu">
              <li>
                <a href="javascript:void(0)">item 4.1</a>
              </li>
              <li>
                <ul class="submenu">
                  <li>
                    <a href="javascript:void(0)">item 4.2.1</a>
                  </li>
                  <li>
                    <a href="javascript:void(0)">item 4.2.2</a>
                  </li>
                  <li>
                    <a href="javascript:void(0)">item 4.2.3</a>
                  </li>
                </ul>
                <a href="javascript:void(0)">item 4.2 (Submenu) <span class="arrow arrow-right"></span></a>
              </li>
              <li>
                <a>item 4.3</a>
              </li>
            </ul>
          </li>
      </ul>
  </body>
</html>
<style>
* {
  padding: 0;
  margin: 0;
}
#menu {
  list-style: none;
  height: 48px;
}
#menu li {
  text-align: left;
  color: #fff;
}
#menu li a {
  text-decoration: none;
  font-size: 16px;
  display: block;
  padding: 15px;
  color: #fff;
  background-color: #333;
}
#menu > li {
  float: left;
  border-right: 1px solid #fff;
  position: relative;
}
#menu > li > ul.dropdown_menu {
  position: absolute;
  list-style: none;
  display: none;
  top: 48px;
  left: 0;
  width: 200px;
}
#menu > li:hover > a {
  background-color: #5C5C5C;
}
#menu > li:hover > ul.dropdown_menu {
  z-index: 100;
  display: block;
}
ul.dropdown_menu > li > ul.submenu {
  position: absolute;
  display: none;
  left: 200px;
  list-style: none;
  width: 200px;
}
ul.dropdown_menu > li:hover > a {
  background-color: #5C5C5C !important;
}
ul.dropdown_menu > li:hover > ul.submenu {
  z-index: 100;
  display: block;
}
ul.submenu > li:hover > a {
  background-color: #5C5C5C !important;
}
.arrow {
  width: 0;
  height: 0;
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
}
.arrow-down {
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #fff;
}
.arrow-right {
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 7px solid #fff;
}
</style>

Mở file của bạn bằng trình duyệt bạn sẽ thấy giao diện như dưới đây, bạn có thể rê chuột xuống item 2, item 4 để thấy dropdown, rê chuột tới item 2.2 và 4.2 để thấy thêm sub menu.

Dropdown, Submenu<

Dropdown, Submenu

  1. 1 số điểm cần lưu ý:
  • Những điểm cần lưu ý kỹ đó là những dropdown menu, sub menu sẽ mang thuộc tính css ẩn đó là là **display: none **, tuy nhiên khi thẻ li cha chứa các thẻ ul dropdown menu và sub menu được hover thì chúng ta sẽ bật thuộc tính display: block, nên cần phải chú ý những chỗ css có thuộc tính :hover.
  • Các phần tử ul dropdown menu và sub menu luôn có thuộc tính position: absolute và các phần tử cha chứa nó phải có thuộc tính position: relative để vị trí thẻ con luôn nằm trong thẻ cha.

III. Dropdown menu hiệu ứng đẹp hơn HTML/CSS/Javascript (jquery):

  • Chúng ta sẽ giữ nguyên hầu hết đoạn code trên, chỉ xóa đi những những dòng css display: block ở những chỗ hover, và nhúng thêm thư viện jquery và 10 dòng code query khá ngắn.
  • Code hoàn chỉnh:
<!DOCTYPE html>
<html>
  <head>
    <title>Dropdown, Submenu<</title>
    <meta charset="UTF-8">
  </head>
  <body class="test">
      <h3>Dropdown, Submenu</h3>
      <ul id="menu">
          <li>
            <a href="javascript:void(0)">
              item 1
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              item 2
              <span class="arrow arrow-down"></span>
            </a>
            <ul class="dropdown_menu">
              <li>
                <a href="javascript:void(0)">item 2.1</a>
              </li>
              <li>
                <ul class="submenu">
                  <li>
                    <a href="javascript:void(0)">item 2.2.1</a>
                  </li>
                  <li>
                    <a href="javascript:void(0)">item 2.2.2</a>
                  </li>
                  <li>
                    <a href="javascript:void(0)">item 2.2.3</a>
                  </li>
                </ul>
                <a href="javascript:void(0)">item 2.2 (Submenu)<span class="arrow arrow-right"></span></a>
              </li>
              <li>
                <a href="javascript:void(0)">item 2.3</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="javascript:void(0)">
              item 3
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              item 4
              <span class="arrow arrow-down"></span>
            </a>
            <ul class="dropdown_menu">
              <li>
                <a href="javascript:void(0)">item 4.1</a>
              </li>
              <li>
                <ul class="submenu">
                  <li>
                    <a href="javascript:void(0)">item 4.2.1</a>
                  </li>
                  <li>
                    <a href="javascript:void(0)">item 4.2.2</a>
                  </li>
                  <li>
                    <a href="javascript:void(0)">item 4.2.3</a>
                  </li>
                </ul>
                <a href="javascript:void(0)">item 4.2 (Submenu) <span class="arrow arrow-right"></span></a>
              </li>
              <li>
                <a>item 4.3</a>
              </li>
            </ul>
          </li>
      </ul>
  </body>
</html>
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script>
  $('#menu > li').hover(function() {
    // khi thẻ menu li bị hover thì drop down menu thuộc thẻ li đó sẽ trượt xuống(hiện)
    $('.dropdown_menu', this).slideDown();
  },function() {
    // khi thẻ menu li bị out không hover nữa thì drop down menu thuộc thẻ li đó sẽ trượt lên(ẩn)
    $('.dropdown_menu', this).slideUp();
  });

  $('.dropdown_menu > li').hover(function() {
    // khi thẻ dropdown_menu li bị hover thì submenusubmenu thuộc thẻ li đó sẽ trượt xuống(hiện)
    $('.submenu', this).slideDown();
  },function() {
    // khi thẻ dropdown_menu li bị hover thì submenusubmenu thuộc thẻ li đó sẽ trượt lên(ẩnẩn)
    $('.submenu', this).slideUp();
  });
</script>
<style>
* {
  padding: 0;
  margin: 0;
}
#menu {
  list-style: none;
  height: 48px;
}
#menu li {
  text-align: left;
  color: #fff;
}
#menu li a {
  text-decoration: none;
  font-size: 16px;
  display: block;
  padding: 15px;
  color: #fff;
  background-color: #333;
}
#menu > li {
  float: left;
  border-right: 1px solid #fff;
  position: relative;
}
#menu > li > ul.dropdown_menu {
  position: absolute;
  list-style: none;
  display: none;
  width: 200px;
}
#menu > li:hover > a {
  background-color: #5C5C5C;
}
#menu > li:hover > ul.dropdown_menu {
  z-index: 100;
}
ul.dropdown_menu > li {
  position: relative;
}
ul.dropdown_menu > li > ul.submenu {
  position: absolute;
  display: none;
  list-style: none;
  width: 200px;
  left: 200px;
}
ul.dropdown_menu > li:hover > a {
  background-color: #5C5C5C !important;
}
ul.dropdown_menu > li:hover > ul.submenu {
  z-index: 100;
}
ul.submenu > li:hover > a {
  background-color: #5C5C5C !important;
}
.arrow {
  width: 0;
  height: 0;
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
}
.arrow-down {
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #fff;
}
.arrow-right {
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 7px solid #fff;
}
</style>
  • Demo
Dropdown, Submenu<

Dropdown, Submenu

IV. Kết luận:

  • Hy vọng với những kiến thức trên có thể giúp các bạn hiểu rõ hơn về dropdown menu và sub menu, và có thể dễ dàng tùy biến theo những thiết kế bay bổng của designer.