May
28
2012

WordPress and Drop Down Menus

This is the second layout I've completed with drop down menus for the WordPress generated content.  Since the pages and categories are primary navigation tools for the blog I wanted to move them out of the sidebar and give them a more prominent place. In mapping I used pure CSS drop down menus, they worked great for all computer based browsers, though did not work on the iPhone which has no sensitivity to hovering.  So for adore I chose to use some javascript for the drop down menus, and they now work on the iPhone. The following is a fairly advanced tutorial, if PHP makes you nervous feel free to just copy and paste the code into your files where indicated, and then slowly tweak your colors and styles to get them where you want them to be. The Javascript The suckerFish drop down script is short, clean, and easy to use.  The original example of the code can be found here.  To add this script to your theme, go into the theme's "header.php" file, and paste the following into the <head> section. Then add the CSS to the "style.css" file for your theme. Since I declare a lot of my styles in other classes and IDs, I did cut out some of the class declarations for this tutorial. For the original CSS view source on the suckerFish tutorial. If you are close to being a novice with CSS I recommend grabbing the CSS for the original tutorial. Now we're going to add the PHP and html that adds the drop down menus to your site. The following code creates drop down menus for Pages, Categories and Archives for your WordPress blog. Copy and paste the following code into the "header.php" for your theme in the section of your page wherever in your layout you want the drop down menus to appear. To see and example of this menu in action view source of this article with the Adore theme. Source code of the above menu, notice that the php script has turned into a list of links. Ok, so that's great, you gotta bunch of code in your theme now, but what the hell does it mean? What is going on with that HTML/PHP stuff? WordPress has some handy functions that spit out lists of your pages, categories, and archives. The function will even generate the list in <li> format. This is the heart of the this code, and the beauty of PHP is that you don't need to know a whole a lot about it to get the script to do all the work for you. The entire menu is set up as a group of nested lists. The top level list is the WordPress sections you want drop down menus for, in this example that is Pages, Categories, and Archives. This list is formatted with CSS to be in block format, essentially making a horizontal list. Nested within that list is the function which spits out the list with your pages, categories and archives. Let's take another look at that code:
  <li><a href="#info">info</a>
     <ul>
      <? wp_list_pages('depth=-1&title_li='); ?>     </ul>
  </li>
This is printing out a list of Pages in WordPress, I set it to be set as a list with no title, as I needed to code the rest of the list to the exact specifications of the menu code. Pages, Categories, and Archives all have their own function in PHP, with a slightly different set of arguments(settings). At the end of the tutorial will be links to the info pages for all 3 functions. The CSS and javascript hide the nested list until the mouse is over the label in the top tier list. The CSS is set as follows:
.nav li a, .nav li a:link, .nav li a:active, .nav li a:visited {
  font: normal 20px 'Century Gothic', 'Verdana', 'Helvetica', sans-serif;
  display: block;
  padding-right: 6px;
  text-transform: lowercase;
  text-decoration: none;
}
Above is the style for the top level of the list, essentially the sections of your page that you want drop down menus for. The display style is "block" so the list elements will appear next to each other. The rest of the style is just font formatting. This style could get a lot more complicated and be made to make each section look like a button, or however you wanted it to appear.
.nav-two li a {
   font-family: 'Verdana', 'Helvetica', sans-serif;
    background:rgba(255,255,255,0.50);
    padding: 4px !important;
    font-size: 14px !important;
    text-transform: none !important;
}
This is the style for the drop down menu, to create the background I used rgba so the background of the drop down is transparent. Once again this can get as fancy as you like, I tend to prefer minimalist styles. The rest of the styles that appear in the tutorial set up the positioning and layers of the lists. The drop down menu is actually set to reside beyond the margins of the page, on hover the location of the menu changes to right below the header text. The styles I cut from this tutorial primarily set the styles for the links. My link colors were already defined for this section of my page by #cross, so I did not set them again. However, this should pretty much cover what you need to know to put this concept into your theme. For further reading:

2 thoughts on “WordPress and Drop Down Menus”

    • I looked at a lot of themes, and read a lot of source code. If I saw a theme online doing something I wanted, I’d try and find a similar theme and download it, and see how it was done with the PHP, HTML and CSS.

      My themes all came from a WordPress theme called “Sandbox” which is a completely stripped down theme. It made easier for me to see what was making the theme tick.

      I also started out with html and css that I knew how to write, I didn’t get into anything out of my comfort zone so I could figure out how to make my code work in WordPress. It was the third theme I did that I even started to feel happy with my code.

      The one really annoying thing about WordPress is that the entry headers are coded into each entry related page (categories, archives, index, single, tag and search), and I like most of mine to look the same, I made a hack for that and I’ll be posting a tutorial on it soon.

Leave a Reply

Your email address will not be published. Required fields are marked *


*

CommentLuv badge