Scribd
Upload
28 views

Creating A Drop-Down Menu With Jquery: HTML Code

The document outlines how to create a drop-down menu with jQuery, HTML, and CSS. The menu structure is created with HTML - a div wraps the entire menu, and an unordered list forms the menu nodes. Links inside list items provide the functionality. CSS styles the menu and submenus. jQuery is not directly used, but the document shows how the menu can be built without a full jQuery UI library.

Uploaded by

linuxubv
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
28 views

Creating A Drop-Down Menu With Jquery: HTML Code

The document outlines how to create a drop-down menu with jQuery, HTML, and CSS. The menu structure is created with HTML - a div wraps the entire menu, and an unordered list forms the menu nodes. Links inside list items provide the functionality. CSS styles the menu and submenus. jQuery is not directly used, but the document shows how the menu can be built without a full jQuery UI library.

Uploaded by

linuxubv
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
You are on page 1/ 2

Creating a Drop-down Menu with jQuery

jQuery UI has recently added a menu widget to its array of UI controls - however, sometimes jQuery
UI can be overkill for a project - and for this reason, I'm going to outline how to make a drop-down
menu with jQuery, H!", and #$$%
&% he first step to creating a jQuery menu is to write the markup for the structure of the menu% '
div is wrapped around the menu, and an unordered list forms the various nodes of the menu%
(inally, anchors inside the list items provide the hyperlinks that make the drop-down menu
functional%
HTML Code

<!-- All of the links on this demo menu are preceded by a hash - in
production, they should be links to actual pages, i.e., a.html, b.php, etc-->
<div id="menuemo">
<ul>
<li id="home!enu"><a href=""menu#ome">#ome<$a>
<$li>
<li><a href=""">%ages<$a>
<ul>
<li><a href=""menu%ages&ne">%age 'umber &ne<$a><$li>
<li><a href=""menu%ages()o">%age 'umber ()o<$a><$li>
<li><a href=""menu%ages(hree">%age 'umber (hree<$a><$li>
<$ul>
<$li>
<li><a href=""">*inks<$a>
<ul>
<li><a href=""*ink'umber+">*ink 'umber +<$a><$li>
<li><a href=""*ink'umber,">*ink 'umber ,<$a><$li>
<li><a href=""*ink'umber-">*ink 'umber -<$a><$li>
<$ul>
<$li>
<$ul>
<$div>


CSS Code

div"menuemo, .
)idth/ 011p23
height/ -1p23
position/ relative3
left/ 13
top/ 13
background-color/ orange3
color/ )hite3
border-bottom/ +p2 solid black3
$45emove this ne2t one in production - 6sed for demo purpose only4$
margin-bottom/ -11p23
7
div"menuemo, ul .
list-style/ none3
margin/ 13
padding/ 13
background-color/ orange3
7
div"menuemo, > ul > li .
float/ left3
7
div"menuemo, ul li .
)idth/ ,89p23
background-color/ orange3
7
div"menuemo, ul li"home!enu .
)idth/ ,88p23
background-color/ orange3
7
div"menuemo, ul li a .
)idth/ ,88p23
te2t-decoration/ none3
7
div"menuemo, > ul > li > ul .
display/ none3
background-color/ orange3
)idth/ ,89p23
7
div"menuemo, > ul > li/hover > ul .
display/ block3
7

You might also like