Advanced Search

Results 1 to 5 of 5

Thread: I would like to make a enu drop down like this...

  1. #1
    Join Date
    May 2006
    Posts
    266
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default I would like to make a enu drop down like this...

    Hi can some tell me how ninemsn.com.au menu works and if the you can post the code that would be great. Thanks
    The web in one word.

  2. #2
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,626
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    I think you are looking for something like this one

    You can change the images used in the demo according to your requirements.

  3. #3
    Join Date
    May 2006
    Posts
    266
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    did you click on any of the menu button if you did then you would see they drop down?
    The web in one word.

  4. #4
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,626
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    
    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */
    
    #thicktabs
    {
    margin: 0;
    padding: 0;
    float: left;
    font: bold 13px Tahoma;
    }
    
    #thicktabs li
    {
    display: inline;
    }
    
    #thicktabs li a
    {
    float: left;
    color: black;
    padding: 8px 11px; /*padding of tabs*/
    text-decoration: none;
    background: transparent url(pinkbg.gif) top right no-repeat;
    border-top: 1px solid #d3bdbe; /*top border style*/
    border-bottom: 3px solid #ffa1a3; /*thick bottom border below tabs*/
    }
    
    #thicktabs li a#leftmostitem 
    { /*Extra CSS for left most menu item*/
    border-left: 1px solid #d3bdbe; /*left border style*/
    }
    
    #thicktabs li a#rightmostitem 
    { /*Extra CSS for right most menu item*/
    border-right: 1px solid #d3bdbe; /*right border style*/
    background-position: top left; /*Position background image to the left instead of default right, to hide indented underline for this link*/
    }
    
    #thicktabs li a:visited 
    {
    color: black;
    }
    
    #thicktabs li a:hover
    {
    color: black;
    background-image: url(pinkbgover.gif); /*background image swap on hover*/
    }
    
    #homeDiv
    {
    	position:absolute;
    	top: 60px;
    	left: 15px;
    	width: 600px;
    	border:1px solid blue;
    	background-color:#CCFF99;
    	height:100px;
    	font:Verdana, Arial, Helvetica, sans-serif;
    	font-weight:bold;
    	font-size:14px;
    	display:none;
    }
    #cssDiv
    {
    	position:absolute;
    	top: 60px;
    	left: 15px;
    	width: 600px;
    	border:1px solid blue;
    	background-color:#669999;
    	height:100px;
    	font:Verdana, Arial, Helvetica, sans-serif;
    	font-weight:bold;
    	font-size:14px;
    	display:none;
    }
    #forumsDiv
    {
    	position:absolute;
    	top: 60px;
    	left: 15px;
    	width: 600px;
    	border:1px solid blue;
    	background-color:#009999;
    	height:100px;
    	font:Verdana, Arial, Helvetica, sans-serif;
    	font-weight:bold;
    	font-size:14px;
    	display:none;
    }
    #webmasterDiv
    {
    	position:absolute;
    	top: 60px;
    	left: 15px;
    	width: 600px;
    	border:1px solid blue;
    	background-color:#9999FF;
    	height:100px;
    	font:Verdana, Arial, Helvetica, sans-serif;
    	font-weight:bold;
    	font-size:14px;
    	display:none;
    }
    
    #jsDiv
    {
    	position:absolute;
    	top: 60px;
    	left: 15px;
    	width: 600px;
    	border:1px solid blue;
    	background-color:#666666;
    	height:100px;
    	font:Verdana, Arial, Helvetica, sans-serif;
    	font-weight:bold;
    	font-size:14px;
    	display:none;
    }
    #galleryDiv
    {
    	position:absolute;
    	top: 60px;
    	left: 15px;
    	width: 600px;
    	border:1px solid blue;
    	background-color:#CC9999;
    	height:100px;
    	font:Verdana, Arial, Helvetica, sans-serif;
    	font-weight:bold;
    	font-size:14px;
    	display:none;
    }
    
    </style>
    <script type="text/javascript">
    function showTheDiv(showid)
    {
    	
    	document.getElementById(showid).style.display = "block";
    	
    	var idArray = new Array("homeDiv","cssDiv","forumsDiv","webmasterDiv","jsDiv","galleryDiv");
    	var i;
    	
    	for(i=0;i<idArray.length;i++)
    	{
    		if((document.getElementById(idArray[i]).style.display == "block") && (showid != idArray[i]))
    			document.getElementById(idArray[i]).style.display = "none";		
    	}
    	
    }
    </script>
    </head>
    
    <body>
    <ul id="thicktabs">
    <li><a id="leftmostitem" href="#" onclick="showTheDiv('homeDiv');">Home</a></li>
    <li><a href="#" onclick="showTheDiv('cssDiv');">CSS Codes</a></li>
    <li><a href="#" onclick="showTheDiv('forumsDiv');">Forums</a></li>
    <li><a href="#" onclick="showTheDiv('webmasterDiv');">Webmaster Tools</a></li>
    <li><a href="#" onclick="showTheDiv('jsDiv');">JavaScript</a></li>
    <li><a href="#" onclick="showTheDiv('galleryDiv');">Gallery</a></li>
    </ul>
    <p></p>
    <div id="homeDiv">This is Home menu target</div>
    <div id="cssDiv">This is Css menu target</div>
    <div id="forumsDiv">This is Forums menu target</div>
    <div id="webmasterDiv">This is Webmaster Tools menu target</div>
    <div id="jsDiv">This is JavaScript menu target</div>
    <div id="galleryDiv">This is Gallery menu target</div>
    </body>
    </html>
    Just an example try to click on the menu items
    Last edited by codeexploiter; 02-16-2007 at 07:48 AM.

  5. #5
    Join Date
    May 2006
    Posts
    266
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Works well
    The web in one word.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •