WordPress.org

1. hlynnt
   Member
   Posted 2 years ago #

   I am trying to get the suckerfish navigation to work. Here is the code that I'm using.

   XHTML/PHP
   

   <ul id="nav">
   <li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
   <?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_pages('echo=0&title_li=&depth=2')); ?>
   </ul>
   <!--/nav--></div>

   The reason for
   '@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2><span>$3</span>'
   is to make the sliding door effect work in WP, it doesn't have anything to do with the suckerfish.

   JavaScript
   

   <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>

   CSS
   

   #nav ul { /* all lists */
   	padding:0 15px;
   	margin: 0;
   	list-style: none;
   	display:block;
   	margin:0 10px;
   }
   
   #nav li { /* all list items */ /*transform the first-level list into a horizontal menu bar by floaing them to the left. The position has been set to relative because we want the position of the second-level, nested lists to be relative to the first-level list items and the width has been set to space it out a bit. The dropdown menu is coming together.*/
   	float: left;
   	position: relative;
   	width: 10em;
   	list-style: none;
   	}
   
   #nav li a {
   			display:block;
   			float:left;
   			color:#FFFFFF;
   			line-height:48px;
   			padding:0 0 0 12px;
   			text-decoration:none;
   			cursor:pointer;
   			}
   		#nav li a span{
   			display:block;
   			float:left;
   			color:#FFFFFF;
   			line-height:48px;
   			padding:0 24px 0 10px;
   			}
   		#nav li a:hover {
   			display:block;
   			float:left;
   			background:url(images/nav/nav_h_l.png) no-repeat left center;
   			}
   		#nav li a:hover span{
   			display:block;
   			float:left;
   			background:url(images/nav/nav_h_r.png) no-repeat right center;
   			color:#FFFFFF;
   			height:48px;
   			}
   		#nav li a.current{
   			display:block;
   			float:left;
   			color:#FFFFFF;
   			background:url(images/nav/nav_h_l.png) no-repeat left center;
   			line-height:28px;
   			padding:0 0 0 12px;
   			text-decoration:none;
   			}
   		#nav li a.current span{
   			display:block;
   			float:left;
   			background:url(images/nav/nav_h_r.png) no-repeat right center;
   			color:#FFFFFF;
   			line-height:48px;
   			padding:0 24px 0 10px;
   			}
   
   #nav li ul { /* second-level lists */ /*This positions the second-level lists absolutely (pulling them out of the flow of HTML into a world all of their own) and sets their initial state to not be displayed.*/
   	display: none;
   	position: absolute;
   	background:  url(images/nav/subnav_bg.png) ;
   }
   
   #nav li > ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
   	top: auto;
   	left: auto;
   }
   
   	#nav li ul a{
   				list-style:none;
   				display:block;
   				font-weight:bold;
   				text-decoration:none;
   				color: #504f48;
   				padding: 0px/*top*/ 10px/*right*/ 0px/*bottom*/10px/*left*/;
   				}
   					#nav li ul a:hover{
   						background: url(images/sub_nav_over.png);
   						color: #504f48;
   						text-decoration:underline;
   					}
   				#nav li ul .current{
   					list-style:none;
   					display:block;
   					background: url(images/sub_nav_down.png) repeat-x left;
   					color:#000;
   					text-decoration:none;
   
   				}
   					#nav li ul a.current, #nav li a:hover.current{
   						background: url(images/sub_nav_down.png) repeat-x left;
   						color: #504f48;
   						text-decoration:none;
   					}		
   
   #nav li:hover ul, li.over ul { /* lists nested under hovered list items */
   	display: block;
   /*	position:absolute;*/
   	top:50px;
   }

   It works in straight HTML using
   

   <ul id="nav">
   		<li><a href="#" class="current"><span>Home</span></a>
           <ul>
           		<li><a href="" class="sub">subnavigation</a></li>
   				<li><a href="" class="sub">subnavigation</a></li>
   				<li><a href="" class="sub">subnavigation</a></li>
           </ul>
           </li>
   		<li><a href="#"><span>About us</span></a></li>
   		<li><a href="#"><span>Services</span></a></li>
   		<li><a href="#"><span>Solutions</span></a></li>
   		<li><a href="#"><span>Contact us</span></a></li>
   	</ul>

   So I think that I just need the proper php to call the subpages.

   Any help would be super appreciated!

2. Out2LunchPro
   Member
   Posted 2 years ago #

   If your php call is wrong, why not try the one that I included in the tutorial? Does this not work?
   

   <ul id="nav">
               <li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
               <?php wp_list_pages('title_li=&sort_column=menu_order&depth=2'); ?>
   </ul>

   Can you post the HTML that your php call is generating?

Topic Closed

This topic has been closed to new replies.