Anda di halaman 1dari 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

Anda mungkin juga menyukai