CSS dropdown menu with Wordpress
Monday, December 12th, 2005
The Suckerfish menus we originally used had problems with Safari/Opera support so we used a variant based on Suckerfish called Son of Suckerfish. From there we had to make some Wordpress modifications.
1. Open sidebar.php and remove (or comment out) wp_list_pages(); line
2. Open your header.php and put this code wherever you want the menus to start
<div id=”toolbar”>
<?php wp_list_pages(); ?>
</div>
3. In your header.php paste the following.
<script language=”javascript”>
sfHover = function() {
var sfEls = document.getElementById(”nav”).getElementsByTagName(”LI”);
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=” sfhover”;
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(” sfhover\b”), “”);
}
}
}
if (window.attachEvent) window.attachEvent(”onload”, sfHover);
</script>
4. style.css
We wanted to go horizontal so we used the following in our style.css file.
/*menu */
#nav {
margin-left: 295px;
list-style: none;
background: #900;
padding: 0;
border: 1px solid #fff;
border-width: 0px 0px 0px 1px;
}
#nav ul {
margin: 0;
padding: 0;
height: 1em;
}
#toolbar form {
margin: 0;
padding: 0.1em 2em 0.1em 0em;
height: 1em;
}
#toolbar input {
margin: 1px;
}
#nav a {
display: block;
color: #fff;
text-decoration: none;
padding: 0.1em 2em;
}
#nav li {
float: left;
padding: 0;
background: #900;
border: 1px solid #fff;
border-width: 1px 0;
}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 14.4em;
w\idth: 12.9em;
font-weight: normal;
border: 1px solid #fff;
margin: 0;
list-style: none;
}
#nav li li {
padding-right: 1em;
width: 13.4em;
border: 0px;
}
#nav li ul a {
width: 12em;
w\idth: 9em;
}
#nav li ul ul {
margin: -1.75em 0 0 14em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
background: #F20000;
}
/* end menu */
5. You should be good to go. Best of luck!
6. Edit wp-includes/template-functions-post.php
around line 326 comment out or replace
$output .= ‘<li class=”pagenav”>’ . $r['title_li'] . ‘<ul>’;
with
$output .= ‘<ul id=”nav”>’;
Thanks to htmldog for Son of Suckerfish tutorial.
March 29th, 2007 at 6:40 am
[...] Suckerfish for jQuery code can be found on Myles Angell page, instructions on how to get it (easily) working on Wordpress can be found at invokemedia’s site. Just replace the Javascript code on the latter, with the code found on the former [...]
October 5th, 2007 at 12:10 pm
[...] Other examples of the Suckerfish menu used with WordPress can be found at Invoke Media and RockinThemes. [...]
March 10th, 2008 at 6:41 am
[...] Drop down property for top menu (Thanks to invoke media ) [...]
March 21st, 2008 at 12:56 am
[...] Drop down CSS (http://www.invokemedia.com/css-dropdown-menu-with-wordpress.html) [...]