My last article was about creating a Pure CSS Flyout Menu. In this article I want to teach you how you can integrate that concept into your WordPress Theme so that when ever you create Pages or Sub Pages the menu structure will automatically be created. It really is SIMPLE to do.

If you haven’t read the previous article on How To Create the CSS Flyout Navigation Menu then I suggest you read that one first as I am not going to go over how to set it up from scratch.

Ok, so you have a horizontal navigation structure in your WordPress theme and you want to take advantage of the pages and sub pages facility built into WordPress and create a navigation structure to suite that facilitates the sub pages as well as the main pages in a drop down menu format. Here is how we can achieve that using PURE CSS!

First we need to find where in your WordPress Theme the navigation is located. You will usually find it in the header.php or index.php files depending on your theme. In this example mine was in the header.php file. Look for a line of PHP code that looks something like this:

<?php wp_list_pages('sort_column=menu_order&title_li='); ?>

It may not be exactly the same but it will have wp_list_pages in the line of code. This WordPress Template Tag lists all the WordPress Pages and displays them as links. If you would like to read more about this template tag, you can do so here.

All I did next was copy the CSS Code that I created for the CSS Flyout Menu (see article here.) and paste it at the end of the style.css file of the WordPress Theme and to make it easier on yourself at a later date add some commenting so that you know what that section is all about.

Now for the adjustment to the WordPress Template file (in this case the header.php file). All I did here was use the same (X)HTML code as the previous article and pasted it into the correct location. YOu need to make sure that the line of PHP code that has wp_list_pages in it goes in between the list elements like the code below.

<div class="cssfly">
<ul>
<li>
<?php wp_list_pages('title_li='); ?>
</li>
</ul>
</div>

Now straight away this will not work because the CSS Code Example that I used was for a Vertical Navigation structure. In this example I want to create a horizontal navigation structure. So the lines of code in the css that we need to adjust here are as follows.

.cssfly ul li:hover ul - You will need to change the sections that relate to the position eg: top:0; and left:105px;. If you delete the entry left:105px and change the top:0 entry then the menu will change from flying out to the right to a simple drop down menu.

The other part you may need to change is the width property of the .cssfly class. All i did there was comment out that property. You will probably need to tinker with the line heights and font sizes to make it fit in with your current theme. But apart from that it should work.

I hope that has made your life easier and now you can implement a fully functional css menu structure in your WordPress Theme.

If you need a hand to implement this solution or anything else that you have seen here at Dreamweaver Spot then be sure to Contact Me. I would be more than happy to offer my services.

Social Media:

You can follow any responses to this entry through the RSS feed. You can leave a response, or trackback from your own site.