How To: Making a Categories Drop-Down Menu

very nice tutorial. I wrote something like this yesterday on my blog. The difference is i don’t say anything about WP. Just lists

Hi there, How are you?
I’m testing these in the theme of the site, but I don’t know where to put the unobtrusive script, would you so kind in telling me?

We are a nonprofitable organization that helps people with low resources.

There is something more, I’m getting problems with the css, in IE the footer and the bottom line from the part of the top site is showing problems, could you give me some little hand?

thanks you very much!

Hi Enrique, sure I can help you.
For the unobstructive script: in the head section of your header.php file:
<script type=”text/javascript”>
//place the script from the article here
</script>

There’s obviously a problem in your css (I went to your website), I don’t have the required tools right now, but I’ll find how to fix it today, and i’ll post the resultat here for you.

Good luck with your organization!

Enrique, in order to fix the css problem on your site, just add padding-left:0; to #nav li ul

Incredible, you are a genius my friend, you fix it.

A simple solution for a complicatred problem (for me haha)

One more question, Im having a problem in firefox, the green menu appears in the top with some space in white and the other thing is that I added the script in the head section, but now I cant visualice the website in IE.

Thanks man

Thanks for your compliments, even if I’m far from being a Genius

You can fix the green bar problem by adding margin-top:-20px; to #topbar

Have a nice day!

For your ie problem, I guess it’s due to the quotes on the exemple I gave you to insert the javascript in the head section of your header.php file.
You should replace it manually, i’m pretty sure it will solve the problem.

Is there any way you can see what I have done with the script? Because I deleted the quotes and but the menu doesn’t still appear.

I tried to add the -20, but the menu in firefox disappeared.

I don’t know if you can see it in IE, there is a problem with the line bottom of the top, its cuted? can you see it?

There’s stillquotes in the javascript function, you should replace them all.
I’m very surprised that the margin-top:-20px; to #topbar don’t work: I edited the file with FF addon web developper and it worked perfectly…

First off all thank you for you time man, very kind from your part.

I will put the “margin-top:-20px” so you can see it in action. The problem appers in IE 7, IE 6 I dont know how it looks.

Wich ares the quotas?

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);

To solving the IE problem, place this on the head section of header.php:

#topbar: margin-top:-20px;

the quotes is this symbol: “: you need to replace it manually.

Good luck

hahah sorry, I think you are going to kill me, but I dont understand these so good.

1) I think I have delete all the quotes, am I right?
(If this is ok, it stills not working)

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);

2) I think perhaps its my resolution, but when I see the website in IE, there is some space in with under the green footer, but I have a laptop and I see it ok there, how can I fix these problem?

I hope these is the last, I don’t want to disturb you.

Thank you very much, greetings from Argentine

Contact me by email: jeanbaptistejung AT yahoo DOT com

I send you an email but I think your email its wrong: Mail Delivery Subsystem

@ JBJ – Great write up and thanks for supporting it in the comments.

thanks for the great code Jean…
but i want to ask you how to make the drop down category displaying the list child category.??like yours on top…
blogging–>>wordpress tips

Hi Jean,
Very nice tutorial. I use it for my blog and works perfectly. Thanks.
Is it possible to add some more codes, so the sub-categories pop up on the side when the pointer is above the main category? I think it will be neat.

Thanks again

Great article. Perhaps the most useful article when it comes to making dropdown categories list. I’ve bookmarked it and might implement a dropdown categories list in one of my WP themes in development.

wonderful,I now intend to do such a menu

hi guys this is a great guide! I have everything working except for IE6. I created a separate .js file and for some reason it does not work….any thoughts? is there a specific name or a directory this .js file should be in?

any help would be great!

Thanks for the tutorial….

I got 1 question…

In the dropdown menu, can i add subcategories in it…

Hi!

I am having dramas with the menu. When I hover on a Top menu the sub menu will display but hidden under the smooth gallery photos. It there a CSS coding that will overcome this at all.

Please follow this link for a screen shot at what I’m talking about.

http://www.epsilonfoundation.com.au/menu.jpg

Same problem as Shawal and Jake –
Menu hidden behind Featured Content Slider & Want to disply another level of sub-pages. Please help!
(www.twitter.com/iaanvn)

@Jake Adding “z-index:999;” here:

#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 174px;
border-bottom: 1px solid #a9a9a9;
z-index:999;
}

solved it for me.

thanks

Not working in IE7. Please see site and advise.

http://www.pztalks.com/everyday

indeed, not working in IE7 nor in Chrome. works great in FF though.

thanks for the help

Hi,

I want to use the dropdown categories on my blog and it’s working fine in Firefox 3, but its not working in IE.
I’ve put this in header.php:

GeekStuff

cat_ID) != “”) {
echo “”;
wp_list_categories(’orderby=id&show_count=0&title_li=
&use_desc_for_title=1&child_of=’.$this_category->cat_ID);
echo “”;
}
?>

I also put the IE hack code in my menu.js file:

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);

But it’s not working in IE. Can you help me?

previous code for header.php is not printed right to the blogpost.

It should be:

Categories

cat_ID) != “”) {
echo “”;
wp_list_categories(’orderby=id&show_count=0&title_li=
&use_desc_for_title=1&child_of=’.$this_category->cat_ID);
echo “”;
}
?>

The code is still not shown correctly.
If anyone has the solution for the dropdown menu problem in IE, please contact me!

Is there anyway to use images instead of textbased links?
I tried but it does not work properly. When the mouse makes a move inside the menu it dissapears. Kinda hard to explain.

I want only the toplinks to be images, the submenus should be text.

Any help would be great

I am new to css and I spent 2hrs trying to fix my code. It finally dawned on my that I had switched from firefox to IE, and when I went back to firefox everything was working exactly like it should have.

I have written the below code into its own separate php file, and I then include that file at the top of my theme’s index.php file. This fixes all the problems dealing with IE. I would recommend everyone do this and hopefully we can take back the web from a company that thinks its above internet standards.

Get your crappy ass browser off this site. If you want to view this site download or use one of the
below supported web browsers below. I reccomend firefox, the others are still way better then IE.

Download Firefox
Download Opera
Download Safari
Download Chrome

darn, the code didn’t show up, oh well… basically it looks for IE via php and tells them to download better browsers then dies.

Hi jbj

Kindly go here and check ‘About’ in the menu bar.
http://theyoungindia.com/wordpress/

Could you tell me why the last name in the drop down menu does not appear properly? I am unable to understand it.
Would be happy if you could give me some time for this.

Love,
Rachna

Hi there,

This is a very interesting post. I’ve never really tried this option on my theme, but I might just give it a try.

Cheers,
Eddie Gear

How to make to have in drop down menu 2 lines with submeniu, because a have 20 submeniu and one colon looks to long

By you example I need to have:

Categorie 1 Categorie 2 Categorie 3
Apple | iPod/iPhone |MAC | GNU
Scripts| Internet |Vista | XP

2 line by 4 submenu