Home > Developer > Web Develop
Use jQuery to design horizontal and vertical menus.
On the webpage, the menu plays the role of "Pathfinder. How can we design a user-friendly menu? The following small series will be done with you.
:
Design Process:
1. First, use the <ul> and <li> tags in html for nesting to build an overall framework. As shown in:
Html code:
<Head> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <title> portrait menu </title> <link rel =" stylesheet "type =" text/css "href =" css/menu.css "/> <script type = "text/javascript" src = "js/jquery. js "> </script> <script type =" text/javascript "src =" js/menu. js "> </script>(This shows the code of the vertical menu, as is the code of the horizontal menu. You only need to change the class name so that it is not available in the time zone of the design style .)
2. The two images above are in stark contrast. The user should choose the former, and then "wear" the frame.
CSS code:
Ul, li {/* clear the default dot before ul and li */list-style: none;} ul {/* clear the indent value of the sub-menu */padding: 0; margin: 0 ;}. main ,. hmain {/* the background of the menu item is composed of a small image that is repeated in translation. It looks stereoscopic */background-image: url (.. /image/title.gif); background-repeat: repeat-x; width: 120px;} li {/* set the background color, the background image of the menu item overwrites the background color */background-color: # CCC;} a {/* cancel the underline of all links */text-decoration: none; /* fill a with the entire area, and the row clicked by the mouse is always in the hand shape */display: block; display: inline-block; width: 100px; padding-left: 20px; padding-top: 3px; padding-bottom: 3px ;}. main ,. hmain a {/* set the font color of the menu item */color: white;/* Add the image to the right before the menu item */background-image: url (.. /image/collapsed.gif); background-repeat: no-repeat; background-position: 3px center ;}. main li ,. hmain li a {/* set the font color of the sub-menu */color: black; background-image: none ;}. main ul ,. hmain ul {/* Do Not display sub-menu items */display: none ;}. hmain {/* Each menu item in the horizontal menu float to the left and displays */float: left; margin-right: 1px ;}*/Note: "main"-vertical "hmain"-horizontal
3. The surface work of the menu is completed. It is not displayed to people. It needs to interact with users to achieve some dynamic effects. When you click a menu item, the mouse arrow first changes to the hand shape. After you click it, the hidden sub-menu items are displayed, and the right arrow points to the bottom. When you click the menu item, the Sub-menu item is hidden and the arrow image is replaced.
Javascript is the great god that gives the web page vitality, while jQuery is a javascript library compatible with multiple browsers. With it, javascript is written less and done more. After referencing the jQuery library, write the following code:
Javascript code:
$ (Document ). ready (function () {// portrait menu $ (". main> "). click (function () {var ulNode = $ (this ). next ("ul"); ulNode. slideToggle (); changeIcon ($ (this) ;}); // horizontal menu $ (". hmain "). hover (function () {$ (this ). children ("ul "). slideDown (); changeIcon ($ (this ). children ("a");}, function () {$ (this ). children ("ul "). slideUp (); changeIcon ($ (this ). children ("a");});/* modify the indicator icon of the Main Menu */function changeicon(mainnode1_if(mainnode1_if(mainnode.css ("background-image "). indexOf ("collapsed.gif")> = 0) {mainNode.css ("background-image", "url ('image/expanded.gif ')");} else {mainNode.css ("background-image", "url ('image/collapsed.gif ')");}}}At this point, the two menus have been designed. Is it a sense of accomplishment!
Throughout the world, html is the body, css is the clothes, and js is the soul. The combination of the three constitutes a lively and smart web page. I remember that when I first followed the video and knocked on the news and publishing system, I thought that B/S development was just a mix of things. With the subsequent "blind people touch images", we now have a clearer understanding.
The jquery ui menu official website demonstrates that demos is a vertical menu. Ask how to change it to a horizontal drop-down form. The document is not found on the official website.The top menu is displayed horizontally with css. You can set position in the menu.
Use jquery to design the drop-down menu. The default sub-menu is hidden. Click the parent menu to expand the sub-menu. The sub-menu is a hyperlink. How can this problem be designed?The page is refreshed. It must have been reset ~
Two ideas: 1. Use cookies to record the click status. After the menu is loaded, expand the corresponding menu based on the cookie value.
2. Click the event connection to implement iframe. Click to change only the src of iframe.
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
