Jquery + CSS create flow Navigation menu Fluid Navigation

Source: Internet
Author: User

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]

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.