Why do I use the li + a label instead of the label or the nav + a label for html navigation menus? -

0 reply content: many new HTML5 elements are prone to misunderstanding. Some of the reasons are that some elements are ambiguous and the semantics expressed are constantly corrected in the standard.

It is not a visual navigation bar, but Navigation contentTo be accurate:

Element indicates a region that contains multiple links. These links point to other pages or other parts of this page.

Note the following:

• Not all links need to be placed in the nav element, which should contain the part used to form the main navigation block. For example, the footer usually has a link list linked to other pages of the website, such as services, home pages, and copyright pages. In this case, it is enough to use only the footer element and there is no need to use the nav element.
• If the content in the nav element describes a project list,Then we should mark the list (ol, ul, etc)Help to understand (enhance semantics) and navigate.
• The user agent (such as a screen reader) can use this element to determine which content on the page can be skipped or selected as required.
  

Therefore, a page navigation can be written as follows:

     
    
  
 
   
 href="index.html">Home
 
   
 href="#about">About
 
   
 href="#">Contact
 
  
   

From the implementation point of view, you can use any tag to implement it, but for the sake of semantics, this is usually written for search engine friendliness.

[HTML5 touch screen sliding sidebar navigation menu special effects]

Special Effect description:

A special menu effect download for HTML5 sliding sidebar navigation on the touch screen. This Bootstrap navigation menu special effect is a jquery + html5-based compatible mobile phone and PC-side animation navigation menu plug-in, code materials necessary for responsive website construction. Use mainstream HTML5 + CSS3 browsers to preview the effect. (Compatibility testing: Mainstream HTML5 + CSS3 browsers supported by IE9, Firefox, Chrome, Opera, Safari, and 360)

Usage:

1. Call the CSS style:




2. Call the JS plug-in code: