HTML Code for Multiple IRLs in a Drop Down Menu
Creating a drop-down navigation menu for a website involves pasting HTML codes into the HTML document for the page where you want the menu to appear. Adding multiple URLs to the menu, which affords visitors who click each option multiple navigation options, involves a simple manipulation of the basic HTML code that comprises the pages in the menu.
Other People Are Reading
-
Basic HTML Code
-
The basic HTML code for a drop-down menu uses "List" and "Unordered List" HTML tags, which creates a hierarchical arrangement of links divided into main "parent" and hidden "child" options the only appear when you click the parent option. An example HTML code for a drop-down menu is as follows:
<ul id="nav">
<li>
<a href="#">First Drop-Down Tab</a>
<ul>
<li><a href="/index.html">Homepage</a></li>
<li><a href="photography.html">Photography</a></li>
</ul>
</li>
</ul>The parent option appears just behind the "List" or <li> tag, while the child options appear in "List" tags within "Unordered List" or <ul> elements.
Adding Additional URLs and Tabs
-
To add an additional menu tab, simply create a new parent <li> element, like in this example:
<ul id="nav">
<li>
<a href="#">First Drop-Down Tab</a>
<ul>
<li><a href="/index.html">Homepage</a></li>
<li><a href="photography.html">Photography</a></li>
</ul>
</li>
<li>
<a href="#">Second Drop-Down Tab</a>
<ul>
<li><a href="/contact.html">Contact</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
</ul>
</li>
</ul>To add addition items to an existing tab, add a new child <li> element to the tab, like so:
<li>
<a href="#">First Drop-Down Tab</a>
<ul>
<li><a href="/index.html">Homepage</a></li>
<li><a href="photography.html">Photography</a></li>
<li><a href="/contact.html">Contact</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
</ul>
</li> -
Where to Paste the Code
-
Once you have assembled the code for the menu and the URLs to which you want it to link within a text or code editor, paste it into the HTML or PHP document for the page where you want to add it. The code should go just behind the <head> tag so that it appears within the Web page. Content you paste within or before the <head> tag doesn't show on the page, but only within the HTML itself. Save the HTML document, but don't preview the Web page yet.
Changing Menu Appearance
-
Changing the menu's appearance involves using cascading style sheet or "CSS" code to change its color, the font it uses and, in fact, to give the menu -- which would otherwise appear as a data table -- the drop-down menu functionality. An example of CSS code to use, which you paste into the style.css document for your page, appears below as it does on the Web courtesy of coding resource CSS Wizardry:
/*------------------------------------*\
NAV
\*------------------------------------*/
#nav{
list-style:none;
font-weight:bold;
margin-bottom:10px;
/* Clear floats */
float:left;
width:100%;
/* Bring the nav above everything else--uncomment if needed.
position:relative;
z-index:5;
*/
}
#nav li{
float:left;
margin-right:10px;
position:relative;
}
#nav a{
display:block;
padding:5px;
color:#fff;
background:#333;
text-decoration:none;
}
#nav a:hover{
color:#fff;
background:#6b0c36;
text-decoration:underline;
}/*--- DROPDOWN ---*/
#nav ul{
background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
list-style:none;
position:absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav ul li{
padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
float:none;
}
#nav ul a{
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
left:0; /* Bring back on-screen when needed */
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
background:#6b0c36;
text-decoration:underline;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
text-decoration:none;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
background:#333;
}Change color, font and image values within this sample code to ascribe desired stylistic attributes to the drop-down menu within your page. Save the CSS document, and then open the page in a new tab or window to preview it.
-
