SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adding drop down functionality to existing css menu

    I have using a horizontal css menu that i really like. What I would like to do is add drop down functionality to it. I have tried coding this from scratch but have had a hard time since I am not an expert at drop downs. Can someone help me?

    Here is the link the development page: http://20communications.com/menu.html

    here is the added code for the drop down list: http://20communications.com/3col.html

    CSS
    Code:
      
    /* Navigation */
    
    .glossymenu{
    	position: relative;
    	padding: 0 0 0 34px;
    	margin: 0 auto 0 auto;
    	background: url(../images/menub_bg.gif) repeat-x; /*tab background image path*/
    	height: 46px;
    	list-style: none;
    }
    
    .glossymenu li{
    	float:left;
    }
    
    .glossymenu li a{
    	float: left;
    	display: block;
    	color:#000;
    	text-decoration: none;
    	font-family: sans-serif;
    	font-size: 13px;
    	font-weight: bold;
    	padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
    	height: 46px;
    	line-height: 46px;
    	text-align: center;
    	cursor: pointer;	
    }
    
    .glossymenu li a b{
    	float: left;
    	display: block;
    	padding: 0 24px 0 8px; /*Padding of menu items*/
    }
    
    .glossymenu li.current a, .glossymenu li a:hover{
    	color: #fff;
    	background: url(../images/menub_hover_left.gif) no-repeat; /*left tab image path*/
    	background-position: left;
    }
    
    .glossymenu li.current a b, .glossymenu li a:hover b{
    	color: #fff;
    	background: url(../images/menub_hover_right.gif) no-repeat right top; /*right tab image path*/
    }
    
    /* Nav for sub menus */
    
    .glossymenu ul
    {position:absolute;
    top: 0;
    border: 1px solid black; /*THEME CHANGE HERE*/
    border-top-width: 8px; /*Top border width. Should match height of .ddcolortabsline above*/
    border-bottom-width: 0;
    font:normal 12px Arial;
    line-height:18px;
    z-index:100;
    background-color: white;
    width: 200px;
    visibility: hidden;
    }
    
    .glossymenu ul li ul li:hover {
    width: auto;
    display: block;
    text-indent: 5px;
    border-top: 0 solid #678b3f;
    border-bottom: 1px solid #678b3f; /*THEME CHANGE HERE*/
    padding: 2px 0;
    text-decoration: none;
    color: black;
    visibility: visible;
    }
    HTML

    HTML 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" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>menu  dev</title>
    
    
    
    <style type="text/css">
    
    body{
    margin:0;
    padding:0;
    line-height: 1.5em;
    }
    
    b{font-size: 110%;}
    em{color: red;}
    
    #maincontainer{
    width: 840px; /*Width of main container*/
    margin: 0 auto; /*Center container on page*/
    }
    
    #topsection{
    background: #EAEAEA;
    height: 90px; /*Height of top section*/
    }
    
    #topsection h1{
    margin: 0;
    padding-top: 15px;
    }
    
    #contentwrapper{
    float: left;
    width: 100%;
    }
    
    #contentcolumn{
    margin: 0 190px 0 180px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
    }
    
    #leftcolumn{
    float: left;
    width: 180px; /*Width of left column in pixel*/
    margin-left: -840px; /*Set margin to that of -(MainContainerWidth)*/
    background: #C8FC98;
    }
    
    #rightcolumn{
    float: left;
    width: 190px; /*Width of right column*/
    margin-left: -190px; /*Set left margin to -(RightColumnWidth)*/
    background: #FDE95E;
    }
    
    #footer{
    clear: left;
    width: 100%;
    background: black;
    color: #FFF;
    text-align: center;
    padding: 4px 0;
    }
    
    #footer a{
    color: #FFFF80;
    }
    
    .innertube{
    margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
    margin-top: 0;
    }
    
    </style>
    
    <script type="text/javascript">
    /*** Temporary text filler function. Remove when deploying template. ***/
    var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
    function filltext(words){
    for (var i=0; i<words; i++)
    document.write(gibberish[Math.floor(Math.random()*3)]+" ")
    }
    </script>
    
    <link rel="stylesheet" type="text/css" href="styles/nav.css">
    
    </head>
    <body>
    
    <div id="maincontainer">
    
    <div id="topsection"><div class="innertube">
      <h1>Header</h1>
    </div></div>
    
    <ul class="glossymenu">
    	<li class="current"><a href="#"><b>Who We Are</b></a></li>
         <ul> 
            <li><a href="#"><b>About 2|0</b></a></li> 
            <li><a href="#">The Team</a></li> 
            <li><a href="#">Consultative Approach</a></li> 
            <li><a href="#">PR in a Web 2.0 World</a></li> 
          </ul> 
    	<li><a href="#"><b>What We Do</b></a></li>
             <ul> 
            <li><a href="#">Media Relations</a></li> 
            <li><a href="#">Analyst Relations</a></li> 
            <li><a href="#">SEO/SEM</a></li> 
            <li><a href="#">Event Management</a></li> 
            <li><a href="#">Business Development</a></li> 
            <li><a href="#">Fundraising</a></li> 
          </ul> 
    	<li><a href="#"><b>Our Clients</b></a></li>	
        	<ul>
                <li><a href="#">Case Studies</a></li> 
          </ul> 
    	<li><a href="#"><b>News</b></a></li>	
    	<li><a href="#"><b>Contact</b></a></li>	
                 <ul> 
            <li><a href="#">Employment</a></li> 
            <li><a href="#">Internships</a></li> 
          </ul> 
    </ul>
    
    <div id="contentwrapper">
    <div id="contentcolumn">
    <div class="innertube"><b>Content Column: <em>Fixed</em></b> </div>
    </div>
    </div>
    
    <div id="leftcolumn">
    <div class="innertube"><b>Left Column: <em>180px</em></b> </div>
    
    </div>
    
    <div id="rightcolumn">
    <div class="innertube"><b>Right Column: <em>190px</em></b> </div>
    </div>
    
    <div id="footer"></div>
    
    </div>
    </body>
    </html>

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Welcome to SitePoint mikeconner
    The menu looks nice!

    Haven't got the time, but to start you off:

    First, in the html, The li containing the sub-ul must have it's closing tag after the sub-list.

    Then a couple of css declaration is missing like this for showing the sub-lists:
    Code CSS:
    .glossymenu li:hover ul {
        display: block;
    }
    For the hiding of the sub-lists you have choosed the rule "visibility: hidden;".
    That should rather be "display:none" to work as expected.

    At least you should see the sub-menu now. Hope it is to some help.
    Happy ADD/ADHD with Asperger's

  3. #3
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks Erik

    That got me off on the right foot. I will continue to explore this. If anyone has anymore advise I would appreciate it. Noticed that in IE6 the drop down lists are way off.

    Thanks again!

  4. #4
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Able to get drop down to work in Firefox and Safari, no luck in IE 6 & 7

    So I was able to get the menu to work in all browsers except IE6 and 7. Does anyone know what code I should use to offset the drop down problem to correctly display in IE?

    Also not as important but how could i make the top level navigation keep the background image on when you hover down the drop down?

    Dev Site: http://20communications.com/dev/menu/

    Current Code:

    CSS - topnav.css

    Code:
    @charset "UTF-8";
    /* CSS Document */
    
    /*Navigation*/
    
    #topnav {
    	text-align: center;
    	width: 830px;
    	height: 46px;
    	clear: both;
    	margin: 0 auto;
    	
    }
    
    #nav {
    	padding: 0 0 0 155px;
    	margin: 0 auto 0 auto;
    	background: url(../images/menub_bg.gif) repeat-x; /*tab background image path*/
    	height: 46px;
    	list-style: none;
    }
    
    #nav a {
    	display: block;
    }
    
    #nav li {
    	text-align: left;
    	float: left;
    }
    
    #nav li a {
    	float: left;
    	display: block;
    	color: #006699;
    	text-decoration: none;
    	font-family: sans-serif;
    	font-size: 13px;
    	font-weight: bold;
    	padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
    	height: 46px;
    	line-height: 40px;
    	text-align: center;
    	cursor: pointer;	
    }
    
    #nav li a b{
    float: left;
    	display: block;
    	padding: 0 24px 0 8px; /*Padding of menu items*/}
    
    #nav li a.current {
    	color: #fff;
    	font-size: 12px;
    	background-color: #afbc21;
    	background-image: url(../images/current_nav_arrow.gif);
    	background-repeat: no-repeat;
    	background-position: center bottom;
    	margin: 0;
    }
    
    #nav li a.current, #nav li a:hover{
    	color: #fff;
    	background: url(../images/menub_hover_left.gif) no-repeat; /*left tab image path*/
    	background-position: left;
    }
    
    
    #nav li a.current b, #nav li a:hover b{
    	color: #fff;
    	background: url(../images/menub_hover_right.gif) no-repeat right top; /*right tab image path*/
    }
    
    
    
    #nav li a:hover {
    	color: #fff;
    	margin: 0;
    }
    
    #nav li ul {
    	background-color: #006699;
    	position: absolute;
    	left: -999em;
    	width: 135px;
    	margin-top: 46px;
    	list-style: none;
    	margin: 46px 0 0 0;
    	padding: 0;
    	line-height: normal;
    	border: solid #006699;
    	
    	}
    
    
    #nav li ul a {
    	color: #006699;
    	background-color: #fff;
    	background-image: none;
    	width: 120px;
    	padding: 0 0 0 15px;
    	border-top: 1px solid #006699;
    	text-align: left;
    }
    
    #nav li ul a:hover {
    	color: #fff;
    	background-color: #ccc;
    	background-image: none;
    	width: 120px;
    	margin: 0;
    }
    
    #nav li ul a.first {
    	border-top: 2px solid #006699;
    }
    
    #nav li ul a.last {
    	border-bottom: 2px solid #006699;
    }
    
    #nav li:hover ul {
    	left: auto;
    }
    
    /*#nav li:hover ul, #nav li.sfhover ul {
    	left: auto;
    }*/
    
    #nav li ul a:hover, #nav li.sfhover ul {
    	left: auto;
    }
    HTML

    HTML 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" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>20 communications</title>
    
    <link rel="stylesheet" type="text/css" href="styles/topnav.css">
    <!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="http://www.klf.org/css/ie6.css" /><![endif]-->
    
    <style type="text/css">
    
    body{
    margin:0;
    padding:0;
    line-height: 1.5em;
    }
    
    b{font-size: 110%;}
    em{color: red;}
    
    #maincontainer{
    width: 840px; /*Width of main container*/
    margin: 0 auto; /*Center container on page*/
    }
    
    #topsection{
    background: #EAEAEA;
    height: 90px; /*Height of top section*/
    }
    
    #topsection h1{
    margin: 0;
    padding-top: 15px;
    }
    
    #contentwrapper{
    float: left;
    width: 100%;
    
    
    }
    
    #contentcolumn{
    margin: 0 190px 0 180px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
    }
    
    #leftcolumn{
    float: left;
    width: 180px; /*Width of left column in pixel*/
    margin-left: -840px; /*Set margin to that of -(MainContainerWidth)*/
    background: #C8FC98;
    }
    
    #rightcolumn{
    float: left;
    width: 190px; /*Width of right column*/
    margin-left: -190px; /*Set left margin to -(RightColumnWidth)*/
    background: #FDE95E;
    }
    
    #footer{
    clear: left;
    width: 100%;
    background: black;
    color: #FFF;
    text-align: center;
    padding: 4px 0;
    }
    
    #footer a{
    color: #FFFF80;
    }
    
    .innertube{
    margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
    margin-top: 0;
    }
    
    </style>
    
    
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    
    sfHover = function() {
    	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" sfhover";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    //--><!]]></script>
    
    </head>
    <body>
    
    <div id="maincontainer">
    
    <div id="topsection"><div class="innertube">
      <h1>Header</h1>
    </div></div>
    
    <div id="topnav">
    <ul id="nav">
    	<li><a class="current" href="#"><b>Who We Are</b></a>
         <ul> 
            <li><a class="first" href="#">About 2|0</a></li> 
            <li><a href="#">The Team</a></li> 
            <li><a href="#">Consultative Approach</a></li> 
            <li><a class="last" href="#">PR in a Web 2.0 World</a></li> 
          </ul> 
    	</li>
    	<li><a href="#"><b>What We Do</b></a>
             <ul> 
            <li><a class="first" href="#">Media Relations</a></li> 
            <li><a href="#">Analyst Relations</a></li> 
            <li><a href="#">SEO/SEM</a></li> 
            <li><a href="#">Event Management</a></li> 
            <li><a href="#">Business Development</a></li> 
            <li><a class="last" href="#">Fundraising</a></li> 
          </ul> 
        </li>
    	<li><a href="#"><b>Our Clients</b></a>
        	<ul>
                <li><a class="first" href="#">Case Studies</a></li> 
          </ul> 
    	</li>	
    	<li><a class="first" href="#"><b>News</b></a></li>	
    	<li><a class="last" href="#"><b>Contact</b></a>	
                 <ul> 
            <li><a href="#">Employment</a></li> 
            <li><a href="#">Internships</a></li> 
          </ul> 
    	</li>
    </ul>
    <!--Nav UL end tag-->
    </div>
    <div id="contentwrapper">
    
    <div id="contentcolumn">
    <div class="innertube">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut eros vestibulum eros aliquam faucibus. Suspendisse potenti. Vivamus massa neque, consectetuer vel, vulputate et, sagittis et, nisl. Sed condimentum, orci nec varius posuere, mauris lorem pulvinar magna, a pharetra mi mi vel urna. Pellentesque dictum dolor in lacus. Pellentesque viverra mi at dolor. Phasellus tortor. Proin arcu sapien, tempor nec, tincidunt ac, sodales gravida, mi. Proin nulla urna, porta id, bibendum id, vestibulum et, enim. Donec purus erat, placerat id, feugiat ut, faucibus nec, ante. Donec scelerisque tincidunt arcu.</p>
      <p>Aliquam erat volutpat. Donec lacinia, velit non viverra hendrerit, erat tortor pharetra diam, vel pretium neque risus vel tellus. Praesent interdum sagittis diam. Vivamus posuere odio et dolor. Quisque risus. Aliquam nulla. Nam lacus dui, hendrerit ac, vulputate sit amet, faucibus id, felis. Curabitur sit amet libero lobortis dolor porttitor vulputate. </p>
    </div>
    </div>
    </div>
    
    <div id="leftcolumn">
    <div class="innertube">Left Column: <em>180px</em> </div>
    
    </div>
    
    <div id="rightcolumn">
    <div class="innertube">Right Column: <em>190px</em> </div>
    </div>
    
    <div id="footer"></div>
    
    </div>
    </body>
    </html>
    Last edited by mikeconner; Feb 5, 2008 at 15:22. Reason: typo

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You need to set position relative on the top level list and then set teh drop down to left:0 instead of left:auto.

    Code:
    #nav li {position:relative;}
    
    #nav li:hover ul , #nav li.sfhover ul {
        left: 0;
    }

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    To keep the top level highlighted you will need to add this code at the end.

    Code:
    #nav li:hover a,
    #nav li.sfhover a {
        background: url(http://20communications.com/dev/menu/images/menub_hover_left.gif) no-repeat left top; /*left tab image path*/
    }
    
    #nav li:hover a b,
    #nav li.sfhover a b{
        color: #fff;
        background: url(http://20communications.com/dev/menu/images/menub_hover_right.gif) no-repeat right top; /*right tab image path*/
    }
    
    #nav li:hover li a,
    #nav li.sfhover li a{
            background: #fff;
    }
    #nav li:hover li a:hover,
    #nav li.sfhover li a:hover {background:#ccc}

  7. #7
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up great! that worked! Last question:

    Quote Originally Posted by Paul O'B View Post
    Hi,

    You need to set position relative on the top level list and then set teh drop down to left:0 instead of left:auto.

    Code:
    #nav li {position:relative;}
    
    #nav li:hover ul , #nav li.sfhover ul {
        left: 0;
    }
    That did it! I really appreciate the help!

    Now my final question, how do I make the top level navigation keep the background image on when you hover down the drop down?

    Thanks again!

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Now my final question, how do I make the top level navigation keep the background image on when you hover down the drop down?
    See post #6 lol


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
  •