Some help with expandable navigation menu.

G

goldenwaters

Member
Hi friends,
how do i design a navigation menu that is expandable. That is, when the mouse is over a particular menu button, it reveals other pages. I was told it can be done also with css. Pls help me out with the sample codes to get it done.
Thanks.
 
CaldwellYSR

CaldwellYSR

Member
There are plenty of tutorials online about this. Quick answer (I think this might only work on vertical navigation)

Also note that the css should obviously go in an external file but to keep it easy on the eyes I went ahead and kept it all together.

HTML: 
<html>
  <head>
    <title>new_file</title>
    <style type="text/css">
    /* Most of this is personal preference stuff.
     * The important stuff is noted in comments.
     * Each comment pertains only to the block below it.
     */
        body {
          margin: 0;
          padding: 0;
        }
	#nav {
	  list-style: none;
	  width: 150px;
	}
	#nav li {
	  margin: 5px 0;
	  font-size: 120%;
	  font-weight: 700;
          letter-spacing: 2px;
	}
	#nav li a:link,
	#nav li a:visited {
	  display: block;
	  color: black;
	  text-decoration: none;
        }
	#nav li a:hover {
	  color: white;
	  background-color: black;
	}
    /* The display: none; is the important part that hides 
     * the subnavigation by default 
     */
	#nav li ul {
	  display: none;
	}
    /* The display: block; is the important part that makes 
     * the subnav show!!!
     */
	#nav li:hover #sub_nav {
	  display: block;
	  list-style: none;
        }
	#nav li ul li {
	  font-size: 85%;
	  font-weight: 300;
	}
      </style>
    </head>
    <body>
      <ul id="nav">
        <li><a href="#">Item 1</a></li>
	<li><a href="#">Item 2</a> <!-- Notice the end tag isn't here -->
	  <ul id="sub_nav">
	    <li><a href="#">Item 2.1</a></li>
	    <li><a href="#">Item 2.2</a></li>
	    <li><a href="#">Item 2.3</a></li>
	  </ul>
	</li><!-- End tag for Item 2 -->
        <li><a href="#">Item 3</a></li>
	<li><a href="#">Item 4</a></li>
      </ul>
  </body>
</html>

so basically you have the sub_nav <ul> inside the <li> it needs to be shown under. Most of the styling is optional for personal preference but the important stuff is commented. There are better looking ways to do this using more css and even some jquery/javascript but this is the basic way to get it done.
 
Last edited:
You must log in or register to reply here.
Top