Hướng dẫn list menu html - danh sách menu html

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:
  

1. Tạo file Tạo file index.html hoặc file có đuôi .html
   Tạo file index.html hoặc file có đuôi .html
2. Copy đoạn code hoàn chỉnh dưới đây:

  
    
    
  
  
      
Dropdown, Submenu
      

          

            
              item 1
            
          
          

            
              item 2
              
            
            

              

                item 2.1
              
              

                

                  

                    item 2.2.1
                  
                  

                    item 2.2.2
                  
                  

                    item 2.2.3
                  
                
                item 2.2 (Submenu)
              
              

                item 2.3
              
            
          
          

            
              item 3
            
          
          

            
              item 4
              
            
            

              

                item 4.1
              
              

                

                  

                    item 4.2.1
                  
                  

                    item 4.2.2
                  
                  

                    item 4.2.3
                  
                
                item 4.2 (Submenu) 
              
              

                item 4.3
              
            
          
      
  

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

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.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.

• 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:

  
    
    
  
  
      
Dropdown, Submenu
      

          

            
              item 1
            
          
          

            
              item 2
              
            
            

              

                item 2.1
              
              

                

                  

                    item 2.2.1
                  
                  

                    item 2.2.2
                  
                  

                    item 2.2.3
                  
                
                item 2.2 (Submenu)
              
              

                item 2.3
              
            
          
          

            
              item 3
            
          
          

            
              item 4
              
            
            

              

                item 4.1
              
              

                

                  

                    item 4.2.1
                  
                  

                    item 4.2.2
                  
                  

                    item 4.2.3
                  
                
                item 4.2 (Submenu) 
              
              

                item 4.3
              
            
          
      
  

• Demo

Dropdown, Submenu

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.