WordPress.org

1. prosperewebitor
   Member
   Posted 3 years ago #

   I've downloaded the suckerfish multi-level nav, but I'm having trouble configuring it. Every time I add the code to my header, my categories show up vertically, rather than horizontally (with the exception of two categories). It is therefore pushing the rest of my blog down. Am I missing something?

   Note: I have deleted the code for now, because it is interfering with my site (and I don't want to lose readers).

   Thanks
   C

2. Pete
   Member
   Posted 3 years ago #

   try using this... it's the open source code for the menus from the new revolution themes.. i found the suckerfish a bit too hard

   CSS
   

   #subnavbar {
   
   	background: #666666;
   
   	width: 960px;
   
   	height: 24px;
   
   	color: #FFFFFF;
   
   	margin: 0px;
   
   	padding: 0px;
   
   	}
   
   #subnav {
   
   	margin: 0px;
   
   	padding: 0px;
   
   	}
   
   #subnav ul {
   
   	float: left;
   
   	list-style: none;
   
   	margin: 0px;
   
   	padding: 0px;
   
   	}
   
   #subnav li {
   
   	float: left;
   
   	list-style: none;
   
   	margin: 0px;
   
   	padding: 0px;
   
   	}
   
   #subnav li a, #subnav li a:link, #subnav li a:visited {
   
   	color: #FFFFFF;
   
   	display: block;
   
   	font-size: 10px;
   
       font-weight: bold;
   
       text-transform: uppercase;
   
       margin: 0px 5px 0px 0px;
   
   	padding: 6px 13px 6px 13px;
   
   	}
   
   #subnav li a:hover, #subnav li a:active {
   
   	background: #85ACAC;
   
   	color: #FFFFFF;
   
   	display: block;
   
   	text-decoration: none;
   
       margin: 0px 5px 0px 0px;
   
   	padding: 6px 13px 6px 13px;
   
   	}
   
   #subnav li li a, #subnav li li a:link, #subnav li li a:visited {
   
   	background: #666666;
   
   	width: 140px;
   
   	float: none;
   
   	margin: 0px;
   
   	padding: 6px 10px 6px 10px;
   
   	border-bottom: 1px solid #FFFFFF;
   
   	border-left: 1px solid #FFFFFF;
   
   	border-right: 1px solid #FFFFFF;
   
   	}
   
   #subnav li li a:hover, #subnav li li a:active {
   
   	background: #85ACAC;
   
   	margin: 0px;
   
   	padding: 6px 10px 6px 10px;
   
   	}
   
   #subnav li ul {
   
   	z-index: 9999;
   
   	position: absolute;
   
   	left: -999em;
   
   	height: auto;
   
   	width: 160px;
   
   	margin: 0px;
   
   	padding: 0px;
   
   	}
   
   #subnav li li { 
   
   	}
   
   #subnav li ul a { 
   
   	width: 140px;
   
   	}
   
   #subnav li ul a:hover, #subnav li ul a:active { 
   
   	}
   
   #subnav li ul ul {
   
   	margin: -25px 0 0 161px;
   
   	}
   
   #subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul {
   
   	left: -999em;
   
   	}
   
   #subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {
   
   	left: auto;
   
   	}
   
   #subnav li:hover, #subnav li.sfhover { 
   
   	position: static;
   
   	}

   JS - stick it in your HEAD
   

   <script type="text/javascript"><!--//--><![CDATA[//><!--
   sfHover = function() {
   	if (!document.getElementsByTagName) return false;
   	var sfEls = document.getElementById("nav").getElementsByTagName("li");
   
   	// if you only have one main menu - delete the line below //
   	var sfEls1 = document.getElementById("subnav").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 you only have one main menu - delete the "for" loop below //
   	for (var i=0; i<sfEls1.length; i++) {
   		sfEls1[i].onmouseover=function() {
   			this.className+=" sfhover1";
   		}
   		sfEls1[i].onmouseout=function() {
   			this.className=this.className.replace(new RegExp(" sfhover1\\b"), "");
   		}
   	}
   	//
   
   }
   if (window.attachEvent) window.attachEvent("onload", sfHover);
   //--><!]]></script>

   HTML
   

   <div id="subnavbar">
   <ul id="subnav">
   <li><a href="<?php echo get_settings('home'); ?>">Home</a></li>
   <?php wp_list_categories('orderby=name&order=ASC&depth=3&hide_empty=0&title_li=&exclude=1'); ?>
   </ul>
   </div>
   <div style="clear:both;"></div>

3. prosperewebitor
   Member
   Posted 3 years ago #

   Questions:

   Is the CSS code meant to replace my current subnav code? Where does it go?

   The header code: on the bottom of what I currently have?

   Also, where does the HTML go?

   Sorry, not much of a code person.

   Thanks

   C

Topic Closed

This topic has been closed to new replies.