Horizontal dropdown menu on wordPress categories

One of my readers recently asked how I created my horizontal menu bar: the short answer is by mixing CSS and Javascript.

The first step is to get WordPress to display the menu as a hierarchical list without a title.

&lt;!--?php wp_list_categories('sort_column=name&amp;sort_order=asc&amp;style=list&amp;children=true&amp;hierarchical=true&amp;title_li=0'); ?--&gt;

1	<!--?php wp_list_categories('sort_column=name&sort_order=asc&style=list&children=true&hierarchical=true&title_li=0'); ?-->

We then wrap this WordPress code in the following so we can style it.

&lt;/pre&gt;
&lt;div style=&quot;text-align: center;&quot;&gt;&lt;/div&gt;
&lt;pre&gt;

</pre>

<pre>

I added this to my header.php, but you can add it anywhere you want it to appear.

The CSS is fairly simple and you just need to add it to your theme?s style.css file.

ul#menu {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
font-size:1.2em;
}

ul#menu li {
float: left;
padding: 0;
margin: 0;
border-right:solid 1px #fff;
}

ul#menu ul li {
float: none;
position: relative;
border-bottom: 1px solid #7EAED7; /* fixes gap problem in IE */
border-left: 1px solid #FFF;
z-index:1000;
}

ul#menu li ul {
margin: 0;
padding: 0;
display:none;
list-style: none;
position: absolute;
background: #9CC;
}
ul#menu ul ul{
margin-left: .2em;
position: absolute;
top: 0; /* if using borders, -1px to align top borders */
left: 100%;
}

ul#menu * a:hover, ul#menu li a:active{
background:#7EAED7 !important;
color: #FFFFFF;
}

ul#menu li a:link,
ul#menu li a:visited,
ul#menu li a:hover,
ul#menu  li a:active{
display: block;
padding: .2em .3em;
text-decoration: none;
background: #5587B3;
color: #FFFFFF;
}

ul#menu ul li a:link,
ul#menu ul li a:visited,
ul#menu ul li a:hover,
ul#menu ul li a:active {
width: 8em;
}

ul#menu {

margin: 0;

padding: 0;

list-style: none;

width: 100%;

font-size:1.2em;

}

ul#menu li {

float: left;

padding: 0;

margin: 0;

border-right:solid 1px #fff;

}

ul#menu ul li {

float: none;

position: relative;

border-bottom: 1px solid #7EAED7; /* fixes gap problem in IE */

border-left: 1px solid #FFF;

z-index:1000;

}

ul#menu li ul {

margin: 0;

padding: 0;

display:none;

list-style: none;

position: absolute;

background: #9CC;

}

ul#menu ul ul{

margin-left: .2em;

position: absolute;

top: 0; /* if using borders, -1px to align top borders */

left: 100%;

}

ul#menu * a:hover, ul#menu li a:active{

background:#7EAED7 !important;

color: #FFFFFF;

}

ul#menu li a:link,

ul#menu li a:visited,

ul#menu li a:hover,

ul#menu li a:active{

display: block;

padding: .2em .3em;

text-decoration: none;

background: #5587B3;

color: #FFFFFF;

}

ul#menu ul li a:link,

ul#menu ul li a:visited,

ul#menu ul li a:hover,

ul#menu ul li a:active {

width: 8em;

}

Of course you will need to change the colors and text sizes to ensure it blends with the rest of the theme.

Now the last step is the to make it work as a drop-down list on all browsers. This could be done in Firefox with a simple CSS declaration, but Internet Explorer doesn?t understand the :hover pseudo classes, so we mimic this in Javascript.

&lt;script type=&quot;text/javascript&quot;&gt;// &lt;![CDATA[
/*&lt;![CDATA[*/

var mbA,mbT,mbTf,mbSf;
var mbR = [];

function mbSet(m) {
if (document.getElementById&amp;&amp;document.createElement) {
var m=document.getElementById(m);
mbR[mbR.length] = m;
var i;

e=m.getElementsByTagName('a');
if (!mbTf) mbTf=new Function('mbHT();');
if (!mbSf) mbSf=new Function('mbS(this);');
for (i=0;i&lt;e.length;i++) {
e[i].onmouseout=e[i].onblur=mbTf;
e[i].onmouseover=e[i].onfocus=mbSf;
}

m=m.getElementsByTagName('ul');
for (i=0;i&lt;m.length;i++) {
mbH(mbL(m[i]));
}
}}

function mbHA() {
if (mbA) {
while (mbA) mbH(mbA);
mbHE('block');
}
}

function mbHT() {
if (!mbT) mbT=setTimeout('mbHA();', 0);
}

function mbTC() {
if (mbT) {
clearTimeout(mbT);
mbT=null;
}
}

function mbS(m) {
mbTC();
if (mbA) while (mbA&amp;&amp;m!=mbA&amp;&amp;mbP(m)!=mbA) mbH(mbA);
else mbHE('none');

if (mbM(m)) {
mbSH(m,'block');
mbA=m;
}
}

function mbH(m) {
if (m==mbA) mbA=mbP(m);
mbSH(m,'none');
mbT=null;
}

function mbL(m) {
while (m &amp;&amp; m.tagName != 'A') m = m.previousSibling;
return m;
}

function mbM(l) {
while (l &amp;&amp; l.tagName != 'UL') l = l.nextSibling;
return l;
}

function mbP(m) {
var p = m.parentNode.parentNode;
if (p.tagName == 'UL') {
var i = 0;
while (i &lt; mbR.length) {
if (mbR[i] == p) return null;
i++;
}
} else {
return null;
}
return mbL(p);
}

function mbSH(m,v) {
m.className=v;
mbM(m).style.display=v;
}

function mbHE(v) {
mbHEV(v,document.getElementsByTagName('select'));
}

function mbHEV(v,e) {
for (var i=0;i&lt;e.length;i++) e[i].style.display=v; } /*]]&gt;*/
// ]]&gt;&lt;/script&gt;

/*<![CDATA[*/

var mbA,mbT,mbTf,mbSf;

var mbR = [];

function mbSet(m) {

if (document.getElementById&&document.createElement) {

var m=document.getElementById(m);

mbR[mbR.length] = m;

var i;

e=m.getElementsByTagName('a');

if (!mbTf) mbTf=new Function('mbHT();');

if (!mbSf) mbSf=new Function('mbS(this);');

for (i=0;i<e.length;i++) {

e[i].onmouseout=e[i].onblur=mbTf;

e[i].onmouseover=e[i].onfocus=mbSf;

}

m=m.getElementsByTagName('ul');

for (i=0;i<m.length;i++) {

mbH(mbL(m[i]));

}

}}

function mbHA() {

if (mbA) {

while (mbA) mbH(mbA);

mbHE('block');

}

function mbHT() {

if (!mbT) mbT=setTimeout('mbHA();', 0);

}

function mbTC() {

if (mbT) {

clearTimeout(mbT);

mbT=null;

}

function mbS(m) {

mbTC();

if (mbA) while (mbA&&m!=mbA&&mbP(m)!=mbA) mbH(mbA);

else mbHE('none');

if (mbM(m)) {

mbSH(m,'block');

mbA=m;

}

function mbH(m) {

if (m==mbA) mbA=mbP(m);

mbSH(m,'none');

mbT=null;

}

function mbL(m) {

while (m && m.tagName != 'A') m = m.previousSibling;

return m;

}

function mbM(l) {

while (l && l.tagName != 'UL') l = l.nextSibling;

return l;

}

function mbP(m) {

var p = m.parentNode.parentNode;

if (p.tagName == 'UL') {

var i = 0;

while (i < mbR.length) {

if (mbR[i] == p) return null;

i++;

}

} else {

return null;

}

return mbL(p);

}

function mbSH(m,v) {

m.className=v;

mbM(m).style.display=v;

}

function mbHE(v) {

mbHEV(v,document.getElementsByTagName('select'));

}

function mbHEV(v,e) {

for (var i=0;i<e.length;i++) e[i].style.display=v; } /*]]>*/

// ]]></script>

A couple notes on the previous code.

To activate it, change your theme?stag to
It was not written by me, but I?ve been using it for a long time and don?t remember where I got it.
It can occasionally create a JavaScript error, and I?ve intended to rewrite it for a long time, but it usually works fine.

2 Comments

Adib Rahman

March 23, 2012 at 4:14 AM

Great post. You seem to have a good understanding that how to create a professional drop down menu. When I entering your blog, I felt this. I’m also interested in it!
-Abid

Loading...

Log in to Reply
Md.Abdul Aziz

April 30, 2012 at 12:15 PM

Assalamoalikum,
Sir,How are you?
How to learn web page design and development.

Loading...

Log in to Reply

The Dreamer!

I am the Dreamer! of the world!

2 Comments

Leave a Reply Cancel reply

Share this:

Like this:

Related

2 Comments

Leave a Reply Cancel reply