Hướng Dẫn Cách Tạo Dropdown Menu, Sub Menu đơn Giản đến ...

Trang chủ » Cách Làm Menu Bằng Javascript » Hướng Dẫn Cách Tạo Dropdown Menu, Sub Menu đơn Giản đến ...

Có thể bạn quan tâm

VNLab Logo VNLab coworker Toggle navigation
  • GMO-Z.com Vietnam Lab Center
  • Tin tức
  • Blog
  • Tuyển dụng
  • RSS

Hướng dẫn cách tạo Dropdown menu, Sub menu đơn giản đến nâng cao bằng HTML/CSS/JS

23 June 2020 0 Hướng dẫn cách tạo Dropdown menu, Sub menu đơn giản đến nâng cao bằng HTML/CSS/JS Tweet

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

Từ khóa » Cách Làm Menu Bằng Javascript