Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "how to implement a vertical navigation menu in CSS". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Implementation of Vertical Navigation menu in CSS

As the CSS vertical navigation menu is shown in the figure, let's take a look at the code structure:

CSS css entry css Advanced css Advanced webUI theoretical knowledge practical Application Advanced skills DOM DOM entry DOM Application DOM and browser XHTML reference Manual Exchange Forum

As can be seen from the above, the horizontal code of the XHTML part of the code is slightly different, we do not continue to use ul and li tags, in fact, continue to use ul elements can also be intact to achieve the vertical navigation system, but in this scenic spot we hope to provide more ways to show the flexibility and convenience of css design in order to attract jade and develop more design ideas.

This time in the form of div+h2+h3. We use the div tag to set a structural area for navigation. In this area, we use H2 as the title of the secondary classification and h3 to do the details below the secondary classification. In the meaning of XHTML, these tags themselves have the meaning of hierarchical division of the text. It is simpler and more intuitive than adding id or class in the tag to express the hierarchical relationship. Here, it is more appropriate to use h2Magneh3 to mark different levels of classification names. Let's look at the design of the css code:

# nav {width:100px;border-color:#c5c6c4; border-style:solid;border-width:0px1px1px1px;} # navh2 {margin:0px;padding:4px;font-size:12px; font-weight:bold;font-family:Verdana; border-top:1pxsolid#c5c6c4;background-color:#CCCCCC;} # navh3 {margin:0px;padding:4px;font-size:12px; font-family:Verdana;font-weight:normal;} # navh3a {color:#666666;text-decoration:none } # navh3a:hover {color:#999999;text-decoration:underline;}

This implementation of the CSS vertical navigation menu of the CSS code part uses a simplified writing method, if the meaning of which sentence is not understood, you can open in Dreamweaver and choose to edit the style sheet to see which one, I believe that after several exercises, you can fully understand the code, indicating that you are a step closer to the master.

You may have noticed that the border of # nav in this case only sets the left and right bottom and one pixel, but not the top pixel, while the upper pixel is set in the H2 style? Why is that? Because there is a horizontal line at the top of the H2 style, if there is another horizontal line at the top of the nav, it will grow two, and the result will be a height of two pixels.

The complete code is as follows:

CSS Vertical Navigation menu # nav {width:100px;border-color:#c5c6c4; border-style:solid;border-width:0px1px1px1px;} # navh2 {margin:0px;padding:4px;font-size:12px; font-weight:bold;font-family:Verdana; border-top:1pxsolid#c5c6c4;background-color:#CCCCCC;} # navh3 {margin:0px;padding:4px;font-size:12px; font-family:Verdana;font-weight:normal;} # navh3a {color:#666666;text-decoration:none } # navh3a:hover {color:#999999;text-decoration:underline;} CSS css introduction to css Advanced css Advanced theoretical knowledge, practical Application Advanced skills DOM DOM introduction to DOM application DOM and browser XHTML reference manual exchange forum "how to implement a vertical navigation menu in CSS" is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.