Dynamic Menu

Another element in the sidebar of my portfolios new blog design is a menu that changes what it displays depending on which one you click. So when you are on the Archive page the archive link changes state to display where you currently are, and when you are on the News page the subcategories are displayed below the link.

Here’s what I threw together.

This displays the subcategory when in the News category, and highlights the News link.
First I determined that the parent News category was 5, and then told it when the page is category 5 (News) to display the code after the if statement which included the subcategories, a special class for the highlighted link, and the other inactive links.

<?php if ( is_category(5) ) { ?>

<a href="/opinion/"><div class="menu_inactive">Opinion</div></a>
<a href="/archives/"><div class="menu_inactive">Archive</div></a>


I then had to create the same statement for the other links. This is an example of the Archive link being displayed as active when on the archive page. Again I determined what category the Archives were (12) and told it to display the appropriate code when on that page. Notice that elseif is used here rather then if as in the first example. All instances after the first if statement need to be elseif to work properly.

<?php } elseif ( is_page(12) ) { ?>
<a href="/News/"><div class="menu_inactive">News</div></a>
<a href="/opinion/"><div class="menu_inactive">Opinion</div></a>
<a href="/archives/"><div class="menu_active">Archive</div></a>


And finally I ended with the state when none of the links have been selected yet on the homepage. Here we use else for the final statement to close it out.

<?php } else { ?>

<a href="/News/"><div class="menu_inactive">News</div></a>
<a href="/opinion/"><div class="menu_inactive">Opinion</div></a>
<a href="/archives/"><div class="menu_inactive">Archive</div></a>
<?php } ?>


There is a bunch more I didn’t include for the sake of post length like each category and subcategory, but this should at least give you an idea on how to get started with creating a custom dynamic menu.

Written by John Leschinski from Leschinski Design
Posted on April 19th, 2008 and filed under Design & Coding
Do not forget to subscribe to our RSS feed for updates

1