Not long after entering the company, there were not many tasks for new people. Today, I wrote two navigation menus with different styles in my free time, one vertical menu and one horizontal menu.CodeIf CSS or jquery is not in place, you can point out the progress together.
Vertical navigation menu:
CSS is as follows: navigation.css
# Navigation {width: 200px;} # navigation ul {list-style: none; margin: 0; padding: 0 ;}# navigation Li {border-bottom: 1px solid # ed9f9f;} # navigation Li A: Link, # navigation Li A: visited {font-size: 90%; display: block; padding: 0.4em 0 0.4em 0.5em; border-left: 12px solid #711515; border-Right: 1px solid #711515; Background-color: # b51032; color: # ffffff; text-Decoration: none ;} # navigation Li A: hover {background-color: #711515; color: # ffffff ;}# navigation ul {margin-left: 12px ;} # navigation ul Li {border-bottom: 1px solid #711515; margin: 0 ;}# navigation ul a: Link, # navigation ul a: visited {background-color: # ed9f9f; color: #711515;} # navigation ul a: hover {background-color: #711515; color: # FFF ;}
The HTML is as follows:
<! Doctype HTML public "-// W3C // dtd html 4.01 // en" "http://www.w3.org/TR/html4/strict.dtd"> <HTML>
The effect is still acceptable. The style in this example comes from sitepoint, an example of CSS essence (the third edition). On this basis, I added some jquery drop-down effects for sub-menus.
//-------------------------------------------------------------------
Navigation menu
CSS is like horizontalnav.css.
Body {padding: 1em; font-family: "Times New Roman", times, Serif ;}# navigation {font-size: 90% ;}# navigation ul {list-style: none; margin: 0; padding: 0; padding-top: 1em ;}# navigation Li {float: Left ;}# navigation. submenu {border-top: 1px solid # ffffff; padding-top: 0 ;}# navigation. submenu Li {float: none; border-bottom: 1px solid # FFF; border-Right: 0px ;}# navigation A {display: block; padding: 0.4em 1em 0.4em 1em; font-weight: bold; text-Decoration: none; color: # ffffff; width: 7em; border-Right: 2px solid # dafce0;} # navigation. submenu A {border-left: 10px solid # d3de4e; width: 6em;} # navigation A: Link, # navigation A: visited {background-color: #388d29 ;;} # navigation A: hover {color: #388d29; Background-color: # c0e296; text-Decoration: underline ;}
The HTML is as follows:
<! Doctype HTML public "-// W3C // dtd html 4.01 // en" "http://www.w3.org/TR/html4/strict.dtd"> <HTML>There is a problem here. For how to expand and contract the navigation menu sub-menu, move the mouse to the top menu and expand its sub-menu. If you move the mouse to the sub-menu and then exit, the sub-menu can be scaled normally. however, if the top-level menu is selected, it will not be scaled back after its sub-menu is expanded. I thought about it for a long time and didn't come up with a good solution. So if a friend knows how to do it, you may want to reply and teach me how to learn.
Click here to download the navigation menu code
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
