So how do we implement the mobile navigation menu?
One, the effect chart
Mouse over menu, that is, show prompt information.
Second, the realization step
1, CSS Code
Copy Code code 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: A fixed container for menu menus, width =730px.
Menuinfo: Control the presentation of the message or not.
2, HTML code
Copy Code code 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: Prompt content information.
3. JavaScript code
Copy Code code 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 (), hover (): Bind the LI element to the event and mouse over events.
Find () function: Searches for all elements that match the specified expression. This function is a good way to find the descendant elements of the element being processed.
Slidedown (speed, [callback]): dynamically displays all matching elements by changing the height (increasing downward), optionally triggering a callback function after the display is complete.
Slideup (speed, [callback]): Dynamically hides all matching elements by changing the height (decreasing up), optionally triggering a callback function after the shadowing is complete.
<ptml> <style type= "Text/css" > #menuBarHolder {width:730px; height:45px; Background-color: #000; color: #ff F 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> <!--[if ie]> <style type= "Text/css" > #menuBar li a{width:50px;} . menuinfo {margin-left:-65px; width:80px;} </style> <! [endif]--> <script src= "http://code.jquery.com/jquery-1.4.1.min.js" ></script> <script type= "text /javascript "> $ (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 (); }); }); </script> <center> <div id= "ContaineR "> <p>fluid navigation CSS & JQuery <small>tutorial by Addy Osmani</small></p> <div id= "Menubarholder" > <ul id= "MenuBar" > <li class= "firstchild" >home<div class= "MenuInfo" > I am Some text about the home section</div></li> <li>services<div class= "Menuinfo" >i am some text About the services section</div></li> <li>clients<div class= "Menuinfo" >i am some text about the Clients section</div></li> <li>portfolio<div class= "Menuinfo" >i am some text about the Portfolio section</div></li> <li>about<div class= "Menuinfo" >i am some text about the "about" secti on</div></li> <li>blog<div class= "Menuinfo" >i am some text about the Blog section</div>& lt;/li> <li>follow<div class= "Menuinfo" >i am some text about the Follow section</div></li> T;li>contact<div class= "Menuinfo">i am Some text about the contact section</div></li> </ul> </div> </div> </center& Gt </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
