Jump to content

<li> Tabs With Pointer


Recommended Posts

Hi everyone,

 

 

In my wordpress webpage I have a header with tabs. See the code below :

 

><div id="tabbladen">

	<ul>
	<li class="aan"><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	</ul>

</div>

 

I just copied this from the html file I had, so I know this isnt with wordpress tags.

 

With the class="aan" the tab will be pointed, so you can see on what page you currently are.

 

But how can I make this work in wordpress? That the page you are on will be "pointed" at the tabs.

 

Thanks for helping!

 

Regards,

 

John

Link to post
Share on other sites

This would work fine on static pages, I'm not sure how you would accomplish this with dynamic content like WP produces. You have only one sidebar (or two) include which contains what ever dynamic links you have within your blog.

Link to post
Share on other sites

ok, I already fixed the problem myself. For the people interested, here's the solution:

 

 

>[b]header.php[/b]
<ul>
<li style="background-color:#FFFFFF"><a href="<?php echo get_settings('home'); ?>">home</a></li>
<?php wp_list_pages('exclude=2,3,4,5,8,9,14,15,16,13&sort_column=menu_order&title_li='); ?>
</ul>

 

tabs of the pages you are not one are gray.

 

because there is a difference between pages and posts, this will cover the front page (home).

 

now add for the page.php:

 

><ul>
<li><a href="<?php echo get_settings('home'); ?>">home</a></li>
<?php wp_list_pages('exclude=2,3,4,5,8,9,14,15,16,13&sort_column=menu_order&title_li='); ?>
</ul>

 

this means you cannot include the header page in your page.php template, so you'll just have to copy/paste the header source into your page.php and make the adjustments.

 

this will cover the problem :(

Edited by Johnns
Link to post
Share on other sites

John,

 

Do you only want the tab for the home page to change when it's active, or are you looking for whichever page you are on to change when it's active? I recall writing something for this awhile back.

 

If you post a link to what you've got so far I'd be happy to take a look and offer my thoughts.

Link to post
Share on other sites

We can take both of John's menus and combine them into one somewhat dynamic menu so he doesn't need to keep track of two different header includes.

 

Here's the relevant code that he will have in header.php (the menu runs across the top, not in the sidebar, and I took out the page sort stuff for clarity):

><ul>
<?php 
if ( is_home() || is_single()) {				
$homeClass = " class=\"current_page_item\"";
} ?>

<li<?php echo $homeClass; ?>><a href="<?php echo get_settings('home'); ?>">Home</a></li>

<?php wp_list_pages(); ?>
</ul>

Now I will attempt to explain.

 

The wp_list_pages() function will generate a list of any Wordpress pages you've made. When you click on a page in the menu, the "li" for that item is given a class of current_page_item. Your CSS might say to make the current_page_item bold, or give it a white background in John's case. The question is how to make the "Home" link fit into that dynamic menu.

 

Luckily, WP has a bunch of built-in Conditional Tags. In our case, we use is_home() and is_single() to determine if we are on the Home page or a single post page. If we are we set the homeClass variable.

 

When the li for the Home link is generated, the homeClass variable is echoed. If we are on the Home page or a single post page, that variable will have a value that sets the li class to current_page_item and the link will be rendered accordingly. If we are on some other page, the variable is empty, nothing is echoed, and the menu item is rendered like any other li in the list.

 

Hope that makes sense.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...