Home > Developer > JavaScript
So how should we implement the flow navigation menu?
I,
Move the mouse over Menu, that is, the Show prompt information.
II. Implementation steps
1. CSS code
Copy codeThe Code is as follows:
MenuBarHolder {width: 730px; height: 45px; background-color: #000; color: # fff; font-family: Arial; font-size: 14px; margin-top: 20px ;}
# MenuBarHolder ul {list-style-type: none; display: block ;}
# Container {margin-top: 100px ;}
# MenuBar li {float: left; padding: 15px; height: 16px; width: 50px; border-right: 1px solid # ccc ;}
# MenuBar li a {color: # fff; text-decoration: none; letter-spacing:-1px; font-weight: bold ;}
. MenuHover {background-color: #999 ;}
. Firstchild {border-left: 1px solid # ccc ;}
. MenuInfo {cursor: hand; background-color: #000; color: # fff;
Width: 74px; font-size: 11px; height: 100px; padding: 3px; display: none;
Position: absolute; margin-left:-15px; margin-top:-15px;
-Moz-border-radius-bottomright: 5px;
-Moz-border-radius-bottomleft: 5px;
-Webkit-border-bottom-left-radius: 5px;
-Webkit-border-bottom-right-radius: 5px;
-Khtml-border-radius-bottomright: 5px;
-Khtml-border-radius-bottomleft: 5px;
Border-radius-bottomright: 5px;
Border-radius-bottomleft: 5px;
}
MenuBarHolder: Fixed container of Menu, width = 730px.
MenuInfo: displays the prompt information.
2. HTML code
Copy codeThe Code is as follows:
<Div id = "menuBarHolder">
<Ul id = "menuBar">
<Li class = "firstchild"> <a href = "javascript: #"> Home </a>
<Div class = "menuInfo"> I am some text about the home section </div> </li>
<Li> <a href = "javascript: #"> Services </a>
<Div class = "menuInfo"> I am some text about the services section </div> </li>
<Li> <a href = "javascript: #"> Clients </a>
<Div class = "menuInfo"> I am some text about the clients section </div> </li>
<Li> <a href = "javascript: #"> Portfolio </a>
<Div class = "menuInfo"> I am some text about the portfolio section </div> </li>
<Li> <a href = "javascript: #"> About </a>
<Div class = "menuInfo"> I am some text about the about section </div> </li>
<Li> <a href = "javascript: #"> Blog </a>
<Div class = "menuInfo"> I am some text about the blog section </div> </li>
<Li> <a href = "javascript: #"> Follow </a>
<Div class = "menuInfo"> I am some text about the follow section </div> </li>
<Li> <a href = "javascript: #"> Contact </a>
<Div class = "menuInfo"> I am some text about the contact section </div> </li>
</Ul>
</Div>
Ui li element: list element.
DIV element: the prompt content.
3. Javascript code
Copy codeThe Code is as follows:
$ (Document). ready (function ()
{
$ ('# MenuBar li'). click (function ()
{
Var url = $ (this). find ('A'). attr ('href ');
Document. location. href = url;
});
$ ('# MenuBar li'). hover (function ()
{
$ (This). find ('. menuinfo'). slideDown ();
},
Function ()
{
$ (This). find ('. menuinfo'). slideUp ();
});
});
Click () and hover (): bind a click event and a mouse over event to the Li element.
Find () function: searches for all elements that match the specified expression. This function is a good way to find the child element of the element being processed.
SlideDown (speed, [callback]): dynamically displays all matching elements by increasing the height (down). After the display is complete, a callback function is triggered.
SlideUp (speed, [callback]): dynamically hides all matching elements by changing the height (decreasing upwards). After hiding, a callback function is triggered.
<Html> <style type = "text/css"> # menuBarHolder {width: 730px; height: 45px; background-color: #000; color: # fff; font-family: arial; font-size: 14px; margin-top: 20px;} # menuBarHolder ul {list-style-type: none; display: block ;}. firstchild {border-left: 1px solid # ccc ;}# container {margin-top: 100px ;}# menuBar li {float: left; padding: 15px; height: 16px; width: 50px; border-right: 1px solid # ccc ;}# menuBar li a {color: # fff; text-decoration: none; letter-spacing:-1px; font-weight: bold ;}. menuHover {background-color: #999 ;}. menuInfo {cursor: hand; background-color: #000; color: # fff; width: 74px; font-size: 11px; height: 100px; padding: 3px; display: none; position: absolute; margin-left:-15px; margin-top:-15px;-moz-border-radius-bottomright: 5px;-moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px;-webkit-border-bottom-right-radius: 5px;-khtml-border-radius-bottomright: 5px; -khtml-border-radius-bottomleft: 5px; border-radius-bottomright: 5px; border-radius-bottomleft: 5px;} h1 {font: 50px normal Georgia, 'times New Roman ', Times, serif; color: #111; margin: 0; text-align: center; padding: 5px 0;} h1 small {font: 0.2em normal Verdana, arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 1.4em; display: block; color: # ccc ;} </style> <center> Fluid NavigationCSS & jQuery <small> Tutorial by Addy Osmani </small> <ul id = "menuBar"> <li class = "firstchild"> HomeI am some text about the home section </li> <li> ServicesI am some text about the services section </li> <li> ClientsI am some text about the clients section </li> <li> PortfolioI am some text about the portfolio section </li> <li> AboutI am some text about the about section </li> <li> BlogI am some text about the blog section </li> <li> FollowI am some text about the follow section </li> <li> ContactI am some text about the contact section </li> </ul> </center> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
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
