WordPress.org

Ready to get started?Download WordPress

Forums

tabbed navigation (3 posts)

  1. balkanboy82
    Member
    Posted 7 years ago #

    I want to use tabbed navigation(for pages) which looks like this:

    <ul id="navigation">
    <li><a href="#"><span>Home</span></a></li>
    </ul>

    I know I should edit this part: <?php wp_list_pages('title_li='); ?>, but not sure how.

  2. Joni
    Member
    Posted 7 years ago #

    Why span? Our theme Zen Minimalist uses tabbed navigation that hooks into the WP Pages list.

    The template code looks like this:

    <div id="pagetab">
    	<ul>
    	<?php wp_list_pages('title_li=','title_li= '); ?>
    	</ul>
    </div><!-- end PAGETAB -->

    And this is the stylesheet code (which you can alter to suit):

    /* tabbed navigation code */
    
    #pagetab {
    	padding: 5px 0 3px 0;
    	margin: 10px 0 0 1px;
    	font-weight: bold;
    	font-size: 10px;
    	font-family: arial, "Trebuchet MS", sans-serif;
    }
    
    #pagetab ul {
    	list-style: none;
    	margin: 0;
    	display: inline;
    }
    
    #pagetab li {
    	list-style: none;
    	margin: 0;
    	display: inline;
    }
    
    #pagetab li a {
    	padding: 3px 0.5em;
    	margin-left: 1px;
    	border: 1px solid #777;
    	border-bottom: none;
    	background: #eee;
    	text-decoration: none;
    }
    
    #pagetab li a:link { color: #444; }
    
    #pagetab li a:visited { color: #666; }
    
    #pagetab li a:hover {
    	color: #c00;
    	background: #fff;
    	border-top: 1px solid #222;
    	border-right: 1px solid #222;
    	border-bottom:1px solid #fff;
    	border-left: 1px solid #222;
    }
    
    #pagetab li a#current {
    	background: #fff;
    	border-bottom: 1px solid #fff;
    }
  3. skw
    Member
    Posted 7 years ago #

    balkanboy:

    I built tabbed navigation that uses a span for containing a background image. The wp_list_pages doesn't allow a way to create a span (that I could see) so I ended up adding each page link to the list individually. More info here:
    http://codex.wordpress.org/Dynamic_Menu_Highlighting

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags