WordPress.org

Ready to get started?Download WordPress

Forums

suckerfish dropdown menus (2 posts)

  1. hlynnt
    Member
    Posted 4 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. Carter
    Member
    Posted 4 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.

About this Topic