my 2p menu
Sunday, November 23rd, 2008It may not be the ‘correct’ way to add a dropdown menu to Wordpress, but I thought I would see how difficult it would be to manually add a dropdown menu based on http://www.cssplay.co.uk/menus/elegant2.html.
So the ‘my 2p menu’ is now installed across the top of this theme.
All that is required is to take the menu structure from the CSSplay web page and the stylesheet which is saved in the same directory as your web theme.
Add the menu structure to the header.php file in the position you would like it to appear and update the structure to fit your links.
Ensure that the conditional comments are kept in the correct places.
I used the links from my sidebar to populate the dropdowns and added the search form to the right of the menu bar.
The structure of the conditional comment is:
Position 1
<li><a href=”….”>Link Text<!–[if gte IE 7]><!–></a><!–<![endif]–>
<!–[if lte IE 6]><table><tr><td><![endif]–> Position 2
<ul>
<li><a href=”….”>Link Text</a></li>
<li><a href=”….”>Link Text</a></li>
</ul>
<!–[if lte IE 6]></td></tr></table></a><![endif]–> Position 3
</li>
Position 1 : AROUND the closing link tag. NOTE this is a special CSSplay form of the MS conditional comments and does more than at first sight.
Position 2 : BEFORE the opening inner <ul> tag
Position 3 : AFTER the closing </ul> tag