Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with expanding menu - adding color to menu items

    I'm creating a menu using html, css and a javascript, I found a tutorial to follow online. What I am trying to achieve is when the mouse hovers over the menu items, each item will have a different colour background. the problem is that i can do this but it only works with one colour and not different colours.

    this is the html:

    Code:
    <ul>
    <li><a href="1.php">Things</a></li>
    <li><a href="2.php">Animals</a>
      <ul>
        <li><a href="2-1.php">Cani</a>
            <ul>
              <li><a href="2-1-1.php">Domestic dogs</a></li>
              <li><a href="2-1-2.php">Wolves</a></li>
            </ul>
        </li>
        <li><a href="2-2.php">Felidae</a>
            <ul>
              <li><a href="2-2-1.php">Domestic cats</a></li>
              <li><a href="2-2-2.php">Wild cats</a></li>
            </ul>
        </li>
      </ul>
    </li>
    <li><a href="3.php">Humans</a></li>
    </ul>
    the css is as follows:

    Code:
    div#s1 {
    width: 200px;          /* menu width */
    }
    
    div#s1 ul {
    background-color: #036;
    list-style-type: none; /* get rid of the bullets */
    padding:0;             /* no padding */
    margin:0;              /* no margin for IE either */
    }
    
    div#s1 ul li {
    margin: 0;
    padding: 0;
    background-color: #036;
    display:block;
    border-top: 1px solid white; /* lines */
    }
    
    div#s1 ul li a {
    display: block;         /* lines extend to right, make area clickable */
    color: white;
    background-color: #036;
    padding: 3px 3px 3px 23px;
    margin:0;
    text-decoration: none;
    height:15px;           /* hint for IE, alternatively remove whitespace from HTML */
    }
    
    div#s1 ul ul li a {
    margin-left: 20px;     /* indent level 1 */
    }
    
    div#s1 ul ul ul li a {
    margin-left: 40px;     /* indent level 2 */
    }
    
    div#s1 ul ul ul ul li a {
    margin-left: 60px;     /* indent level 3 */
    }
    
    div#s1 li ul, div#s1 li.open li.closed ul {
    display: none;         /* collapse */
    }
    
    div#s1 li.open ul {
    display: block;        /* expand */
    }
    
    div#s1 ul li.open a {
    background-image: url(bullet_open.gif);
    background-repeat: no-repeat;
    }
    
    div#s1 ul li.closed a {
    background-image: url(bullet_closed.gif);
    background-repeat: no-repeat;
    }
    
    div#s1 ul li.leaf a {
    background-image: url(bullet_leaf.gif);
    background-repeat: no-repeat;
    }
    
    div#s1 li.active a {
    background-position: 0px -20px;
    color: red;            /* highlight text */
    }
    
    div#s1 li.active li a {
    background-position: 0px 0px;
    color: white;          /* fix lower levels */
    }
    
    div#s1 ul li a:hover {
    color: red;
    background-color: #06C; /* rollover effect */
    }
    and finally the javascript:

    Code:
    var menu_active_class = "active";
    var menu_leaf_class = "leaf";
    var menu_open_class = "open";
    var menu_closed_class = "closed";
    
    //the default page that is displayed if URL ends in /
    var menu_default_page = "index.php";
    var menu_url;
    
    //main function
    //menu_id : id of the element containing the navigation
    function menu_main(menu_id) {
     var url = location.href;
     if (url.lastIndexOf("/") == (url.length-1)) {
       url = url+menu_default_page;
     }
     if (url.lastIndexOf("?") >= 0) {
       url = url.substring(0, url.lastIndexOf("?"));
     }
     if (url.lastIndexOf("#") >= 0) {
       url = url.substring(0, url.lastIndexOf("#"));
     }
     menu_url = url;
    
     var main = document.getElementById(menu_id);
     if (!main) alert("No element with id '"+ menu_id +"' found");
     menu_traverse(main);
     }
    
     /* Walks down the subtree and on the way back
     sets properties.
     returns bit set
             1: set = element is a node, unset = element is a leaf
             2: set = element contains the active node
             4: set = element is the active A node
    */
    function menu_traverse(element) {
    var props  = 0;
    
    // walk down
    for (var i=0; i<element.childNodes.length; i++) {
      var child = element.childNodes[i];
      props |= menu_traverse(child); // aggregate bits
    }
    
    // on the way back now
    switch (element.tagName) {
      case "UL":
        props |= 1;
        break;
    
      case "LI":
        var c1 = (props & 1) ? 
                   ((props & (2|4)) ? menu_open_class : menu_closed_class)
                 : menu_leaf_class; 
        element.className = element.className ? element.className+" "+c1 : c1;
        if (props & 4) {
          if (!(props & 2)) element.className += " "+menu_active_class;
          props |= 2;
          props &= 1 | 2; // reset bit 4
        }
        break;
    
      case "A":
        if (props & 2) break; // once is enough
        var href = element.getAttribute("href");
        if (menu_isSameUrl(menu_url, href)) props |= 4;
        break;
      }
    
      return props;
    }
    
    //matches two URIs when href is the last part of url
    //.. and . are correctly resolved
    function menu_isSameUrl(url, href) {
    var a = url.split(/[?\/]/i);
    var b = href.split(/[?\/]/i);
    var i = a.length - 1;
    var j = b.length - 1;
    while ((i >= 0) && (j >= 0)) {
      if (b[j] == "..") { j-=2; continue; }
      if (a[i] == "..") { i-=2; continue; }
      if ((b[j] == ".") || (b[j] == "")) { j--; continue; }
      if ((a[i] == ".") || (a[i] == "")) { i--; continue; }
      if (! (a[i] == b[j])) return false;
      i--;
      j--;
     }
     return true;
    }
    New to this forum but hope this will explain my problem, any help is much appreciated!

    thanks!!

    Jesper

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    I can't get your example to work. I do see that somethings are missing.
    But, I hate menus with javascript.

    Go here and see css menus. More can be found on the net
    http://www.htmldog.com/articles/suck...downs/example/
    and
    http://www.htmldog.com/articles/suck.../vertical.html

    Code for the first page
    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" xml:lang="en" lang="en">
    
    <head>
    <title>Suckerfish Dropdowns - Perciformes!</title>
    
    <style type="text/css">
    
    body {
    	font: 78%/1.5 arial, helvetica, serif;
    	background: white url(bgbaba.gif);
    	text-align: center;
    	padding: 0;
    	margin: 2em;
    }
    
    #container {
    	width: 36em;
    	background: #F4ECD9;
    	text-align: left;
    	border: 1px solid #eda;
    	margin: 0 auto;
    }
    
    p {
    	background: url(remorabg.gif) center no-repeat;
    	margin: 1em 2em;
    }
    
    p#smurf {
    	background: transparent;
    	font-style: italic;
    	text-align: center;
    	font-weight: bold;
    	color: #7C6240;
    }
    
    #smurf strong {
    	font-size: 1.2em;
    	color: black;
    }
    
    h1 {
    	height: 108px;
    	background: url(perciformes3.gif) bottom center no-repeat;
    	text-indent: -999em;
    	margin: 1em 0 0 0;
    }
    
    #nav, #nav ul {
    	float: left;
    	width: 36em;
    	list-style: none;
    	line-height: 1;
    	background: white;
    	font-weight: bold;
    	padding: 0;
    	border: solid #eda;
    	border-width: 1px 0;
    	margin: 0 0 1em 0;
    }
    
    #nav a {
    	display: block;
    	width: 10em;
    	width: 6em;
    	color: #7C6240;
    	text-decoration: none;
    	padding: 0.25em 2em;
    }
    
    #nav a.daddy {
    	background: url(rightarrow2.gif) center right no-repeat;
    }
    
    #nav li {
    	float: left;
    	padding: 0;
    	width: 10em;
    }
    
    #nav li ul {
    	position: absolute;
    	left: -999em;
    	height: auto;
    	width: 14.4em;
    	width: 13.9em;
    	font-weight: normal;
    	border-width: 0.25em;
    	margin: 0;
    }
    
    #nav li li {
    	padding-right: 1em;
    	width: 13em
    }
    
    #nav li ul a {
    	width: 13em;
    	width: 9em;
    }
    
    #nav li ul ul {
    	margin: -1.75em 0 0 14em;
    }
    
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    	left: -999em;
    }
    
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    	left: auto;
    }
    
    #nav li:hover, #nav li.sfhover {
    	background: #eda;
    }
    
    #content {
    	clear: left;
    }
    
    #content a {
    	color: #7C6240;
    }
    
    #content a:hover {
    	text-decoration: none;
    }
    
    #scaffolding {
    	height: 70px;
    	background: white url(/images/header_bg.gif) no-repeat;
    	border: solid #eda;
    	border-width: 1px 0 0 0;
    	margin: 1em 0 0 0;
    }
    
    #scaffolding a {
    	text-decoration: none;
    	text-indent: -999em;
    	display: block;
    	height: 70px;
    	background: url(/images/hdlogo_flip2.gif) no-repeat;
    	background-position: 181px 0;
    }
    
    #scaffolding a:hover {
    	background-position: 181px -70px;
    }
    
    </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="container">
    <h1>PERCIFORMES!</h1>
    <p id="smurf">Welcome to the universe of Perciformes - perch-like fish that include the world famous <strong>Suckerfish</strong></p>
    
    <ul id="nav">
    
    	<li><a href="#">Percoidei</a>
    		<ul>
    			<li><a href="#" class="daddy">Remoras</a>
    				<ul>
    					<li><a href="#" class="daddy">Echeneis</a>
    						<ul>
    							<li><a href="#">Sharksucker</a></li>
    							<li><a href="#">Whitefin Sharksucker</a></li>
    						</ul>
    					</li>
    					<li><a href="#" class="daddy">Phtheirichthys</a>
    						<ul>
    							<li><a href="#">Slender Suckerfish</a></li>
    						</ul>
    					</li>
    					<li><a href="#" class="daddy">Remora</a>
    						<ul>
    							<li><a href="#">Whalesucker</a></li>
    							<li><a href="#">Spearfish remora</a></li>
    							<li><a href="#">Marlinsucker</a></li>
    							<li><a href="#">Remora</a></li>
    							<li><a href="#">Ceylonese remora</a></li>
    						</ul>
    					</li>
    					<li><a href="#" class="daddy">Remorina</a>
    						<ul>
    							<li><a href="#">White suckerfish</a></li>
    						</ul>
    					</li>
    					<li><a href="#" class="daddy">Rhombochirus</a>
    						<ul>
    							<li><a href="#">R. osteochir</a></li>
    						</ul>
    					</li>
    				</ul>
    			</li>
    			<li><a href="#" class="daddy">Tilefishes</a>
    				<ul>
    					<li><a href="#">Caulolatilus</a></li>
    					<li><a href="#">Lopholatilus</a></li>
    					<li><a href="#">Malacanthus</a></li>
    				</ul>
    			</li>
    			<li><a href="#" class="daddy">Bluefishes</a>
    				<ul>
    					<li><a href="#">Pomatomus</a></li>
    					<li><a href="#">Scombrops</a></li>
    					<li><a href="#">Sphyraenops</a></li>
    				</ul>
    			</li>
    			<li><a href="#" class="daddy">Tigerfishes</a>
    				<ul>
    					<li><a href="#">Amniataba</a></li>
    					<li><a href="#">Bidyanus</a></li>
    					<li><a href="#">Hannia</a></li>
    					<li><a href="#">Hephaestus</a></li>
    					<li><a href="#">Lagusia</a></li>
    					<li><a href="#">Leiopotherapon</a></li>
    					<li><a href="#">Mesopristes</a></li>
    					<li><a href="#">Pelates</a></li>
    					<li><a href="#">Pelsartia</a></li>
    					<li><a href="#">Pingalla</a></li>
    					<li><a href="#">Rhyncopelates</a></li>
    					<li><a href="#">Scortum</a></li>
    					<li><a href="#">Syncomistes</a></li>
    					<li><a href="#">Terapon</a></li>
    				</ul>
    			</li>
    
    		</ul>
    	</li>
    
    	<li><a href="#">Anabantoidei</a>
    		<ul>
    			<li><a href="#" class="daddy">Climbing perches</a>
    				<ul>
    					<li><a href="#">Anabas</a></li>
    					<li><a href="#">Ctenopoma</a></li>
    				</ul>
    			</li>
    			<li><a href="#" class="daddy">Labyrinthfishes</a>
    				<ul>
    					<li><a href="#">Belontia</a></li>
    					<li><a href="#">Betta</a></li>
    					<li><a href="#">Colisa</a></li>
    					<li><a href="#">Macropodus</a></li>
    					<li><a href="#">Malpulutta</a></li>
    					<li><a href="#">Parosphromenus</a></li>
    					<li><a href="#">Sphaerichthys</a></li>
    					<li><a href="#">Trichogaster</a></li>
    					<li><a href="#">Trichopsis</a></li>
    				</ul>
    			</li>
    			<li><a href="#">Kissing gouramis</a></li>
    			<li><a href="#">Pike-heads</a></li>
    			<li><a href="#">Giant gouramis</a></li>
    
    		</ul>
    	</li>
    
    	<li><a href="#">Gobioidei</a>
    		<ul>
    			<li><a href="#">Burrowing gobies</a></li>
    			<li><a href="#">Dartfishes</a></li>
    			<li><a href="#">Eellike gobies</a></li>
    			<li><a href="#">Gobies</a></li>
    			<li><a href="#">Loach gobies</a></li>
    			<li><a href="#">Odontobutidae</a></li>
    			<li><a href="#">Sandfishes</a></li>
    			<li><a href="#">Schindleriidae</a></li>
    			<li><a href="#">Sleepers</a></li>
    			<li><a href="#">Xenisthmidae</a></li>
    		</ul>
    	</li>
    
    </ul>
    
    <div id="content">
    	<p>Hello. You have found an example page for <strong>Suckerfish Dropdowns</strong>. Under the hood you will find some nice structured HTML, a smattering of CSS and a teensy bit of JavaScript (that's just 12 lines of it). It's lightweight, it's accessible, it's cross-compatible.</p>
    	<p>Suckerfish Dropdowns are brought to you by <a href="/ptg/">Patrick Griffiths</a>, <a href="http://www.danwebb.net/">Dan Webb</a> and the letter C. To find out more about Suckerfish Dropdowns, check out the <a href="/articles/suckerfish/dropdowns/">article in HTML Dog</a>. To find out more about perch-like fishes, <a href="http://www.google.com/search?q=perciformes">give Google a try</a>.</p>
    	<p>Something else that might (possibly) be of interest (maybe) is that this page has an <a href="http://www.alistapart.com/articles/elastic/">elastic layout</a>. Try increasing your browser's text size setting and watch that layout grow! It's just like those toys that expand when you put them in water. Only without the water. And with more HTML. And CSS. Oh forget it. It's not really like them at all.</p>
    	<p id="scaffolding"><a href="http://www.htmldog.com/" title="Go t'HTML Dog">Go on. Visit HTML Dog</a></p>
    </div>
    
    </div>
    
    </body>
    
    </html>


  •  

    Tags for this Thread

    Posting Permissions

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