Home
HTML and CSS
Tutorials
CSS Menu Using JavaScript (Revised)
Level: Experienced Software:
I noticed a flaw with my original JavaScript drop down menu regarding customization using CSS. The problem was this; the LI elements below the #div's that were hidden didn't conform to their own CSS customization and stuck with the rules of the above LI's.
So the answer was simple, I had to try and customize the containers (#div1, div2 ect), but this didn't seem to work either ... the answer was staring me straight in the face with my own navigation, use the dt and dd tags. It is a completely different element so it should follow different rules.
Here's what I came up with:
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title></title> <style type="text/css"> ul { list-style-type: none; margin: 0px; padding: 0px; } ul li a { display: block; background-color: #DDEEFF; color: #369; width: 100px; padding: 2px 0px 2px 5px; text-decoration: none; } ul li a:hover { background-color: #369; color: #fff; } dt a { display: block; background-color: #369; color: #FFF; width: 100px; padding: 2px 0px 2px 5px; text-decoration: none; } dt a:hover { background-color: #FFF; color: #369; } </style> </head> <body> <script type="text/javascript"> //<![CDATA[ function HideandUNhideObj(ThisObj){ nav=document.getElementById(ThisObj).style if(nav.display=="none"){ nav.display='block'; }else{ nav.display='none'; } } //]]> </script> <ul> <li><a href="#" onclick="HideandUNhideObj('div1');"> Menu 1</a></li> <div style="display: none;" id="div1"> <dl> <dt><a href="#">Submenu 1</a></dt> <dt><a href="#">Submenu 2</a></dt> <dt><a href="#">Submenu 3</a></dt> <dt><a href="#">Submenu 4</a></dt> </dl> </div> </ul> <ul> <li><a href="#" onclick="HideandUNhideObj('div2');"> Menu 2</a></li> <div style="display: none;" id="div2"> <dl> <dt><a href="#">Submenu 1</a></dt> <dt><a href="#">Submenu 2</a></dt> <dt><a href="#">Submenu 3</a></dt> <dt><a href="#">Submenu 4</a></dt> </dl> </div> </ul> <ul> <li><a href="#" onclick="HideandUNhideObj('div3');"> Menu 3</a></li> <div style="display: none;" id="div3"> <dl> <dt><a href="#">Submenu 1</a></dt> <dt><a href="#">Submenu 2</a></dt> <dt><a href="#">Submenu 3</a></dt> <dt><a href="#">Submenu 4</a></dt> </dl> </div> </ul> </body> </html> |
So the final product actually gives the menu and each submenu it's own style ... perfection! View an example of this working code here: CSS Menu Using JavaScript (Re-Visited).
More HTML and CSS: Most Popular Materials | Fresh Materials
| More HTML Tutorials at Markuptutorials.com