In this tutorial I’ll not only show you how to make a WordPress Vertical Menu, but also how to do so on any website. It is cross browser as well.
I also show you how to do all kinds of neat things with JQuery! All of the following functions are covered : has(), mouseover(), mouseout(), offset(), closest(), attr(), find(), and much more.
I hope you like it and of course all of the code follows the video.
Leave any comments or tutorial requests below. If you like this video share it with others [nttfblike]
Code From the Video
IE Conditional Stylesheets
I also received a request on how to perform styling just for those using Internet Explorer. You use what is called a Conditional Style Sheet. This is the code you would use to use special CSS code on IE only browsers.
Till Next Time
Hi, nice video again!
Did u miss u to attach the images besides the code or weren’t they supposed to available?
greets
Christoph
Thank you. I’m glad you liked it. I’m not sure what images you mean? There aren’t any images in the vertical menu. You can use the code in anyway you’d like. All my stuff is 100% free under the gnu license.
Derek,
Christof ment:
horzmenuitem.png and horzmenuhover.png
for my 2cts
greets
Derek, thanks as always for a great tutorial!!
I didn’t know it was this easy to have dynamic vertical menus in wp 3.0
however after putting the navigation inside a locked layout, where the pagewrapper has auto margin on left and right, i encountered a slight problem… basically the third level sub menus were offset differently depending on the size of my browser window on the screen..
this is what i originally wanted to ask about, but after some research on the jquery site i found that while .offset is global, the .position operator in jquery is relative to it’s parent… so i replaced all the .offset in your code with .position and after tweaking the second offset number to add +180 px instead of -10, it worked perfect again..
i guess what i’m asking is: would you reckon this is a good way of doing it? or am I causing other problems that I can’t see at the moment?
thanks again! cheers. david
It sounds like you found a fabulous solution 🙂 Thank you for sharing it. The only thing I could add is to make sure the site looks the same on every browser and then change the style sheets to get a consistent result
cool thanks! actually what I just discovered which i can’t seem to figure out is that the the hover states now aren’t supported on iPhone/iPad..
this took me a bit by surprise as I’m using the exact same way to register the menu in WP as you use in your Horizontal WP menu tutorial, and also haven’t done any changes to the css which you used in the vertical menu.
what’s happening in the vertical menu is that once you click on a top level menu-item the page reloads instead of showing submenu-items. in your horizontal menu the submenu-items pop out when top level is clicked first time, without any tweaks to your code.
i’ve been looking through the horizontal menu css to try to find what makes it work there, but not really sure what’s going on. i thought WP would take care of that :s
would it be the jQuery in the vertical menu being the culprit? any pointers?
sorry for the long-winded questions… thanks!! david
Yes iDevices seem to conflict with JQuery in some ways. Buttons don’t always work, sometimes scrolling works, etc. I hope the JQuery people find a work around for this, but the answer you get from the touch interface people is to create a website specifically for their devices. Hopefully WordPress will find a work around as well?
That’s the reason why programmers can never stop learning. I’ll provide a work around if I can find a simple one
Can you give a link for button background image downloading? I mean /’horzmenuitem.png”/ like is in your tutorial.
Many thanks.
Those images don’t really exist. I just put that code in there so people would know how to place an image if they wanted to use one. I normally don’t use images in a menu
Hi Derek, I loved your tutorial, I just have a question, is there a way this menu could work with the menus you create in WordPress? So if my clients want to add one page on their site, this link would be added to my vertical menu authomaticaly?
Thank you 🙂 WordPress makes you create the custom menu and hence anytime you add a new page you have to update that menu. I can’t think of an easy way around that just now. I’ll look into it
I was trying to find the code for your myinvestmentservices.com site. I would like to use that as my template for my real estate agent site. Are you allowing that to be downloaded?
Sure you can have it. It is a little odd because it wasn’t really made to be a normal theme, but instead was made to show how to make a bunch of things like plugins and other stuff. The code is in this tutorial WordPress Theme Tutorial If everything isn’t there, tell me and I’ll pull everything together. Everything is in one zipped archive as far as I can remember
Dear Mr Derek Banas,
i really liked your video…and found it useful…
Although i tried using it in twentyeleven WP theme and didn’t work…
I made a vertical menu using custom menus functionality of WP and then applied CSS and JS. As this didn’t work I wrote the code for the menu by myself just like in your video.
Any help would be welcome,
Ioanna
What are you seeing on your screen? You should at the very least be seeing a table with the links in it. Give me a bit more info on that and errors and I’ll see if I can figure it out
Dear Mr. Banas,
sorry for not replying sooner..
the problem was solved by replacing “$” with “jQuery”. 🙂
In case someone needs it…in wp_nav_menu i used the paremeter $container_class with the value “art-blockcontent-body”…also when you name your menu e.g. sidebar-menu, the ul the surrounds the whole menu gets an id with the prefix menu e.g. menu-sidebar-menu…
Thanks again for the tutorial, it really helped a lot!
Thank you for posting the fix 🙂 I’m glad you got it to work
Hi Derek,
Great job.Also the way you speak makes the thing understand more like a friendly chat where you concentrate .
I was up to give up to learn making website but after your Youtube tutorial i changed my mind and i uploaded the Blank Theme 1 created by chris coyie.
Can you please tell me where is that file of wp.content you selected from the wp folder i can’t find that file there,can you please help me to find out and go further.
A big Bravo what you are doing.
Thanks
Polyxan
Hi Derek,
Great job.Also the way you speak makes the thing understand more like a friendly chat where you concentrate .
I was up to give up to learn making website but after your Youtube tutorial i changed my mind and i uploaded the Blank Theme 1 created by chris coyie.
Can you please tell me where is that file of wp.content you selected from the wp folder i can’t find that file there,can you please help me to find out and go further.
A big Bravo what you are doing.
Thanks
Polyxan
Thank you very much 🙂 I’m glad to have been of help to you. The wp-content folder is in the main WordPress installation. It is in the same folder as wp-admin. If you don’t see it you may need to reinstall wordpress. Maybe something went wrong with the installation. If I’m missing anything please tell me and I’ll see if there is anything else I can do
will u plz tell me how to add that menu in wordpress theme
Have you tried to input the menu in the widget area? I have a ton of WP tutorials here WordPress How To. I hope they help
hi. i am a beginer. where do i have to write the jquery code? in what document?
I have a JQuery video tutorial that will answer many of the questions you’ll come across. I hope it helps
Hi I’ve tried this repeatedly. I cant get the fly out to work?? Any assistance would be great. I’ve done it step by step then given up and I’ve just copied your code directly and it still won’t work ?? What can I be missing.. thanks
What is happening? With some more information I may be able to help. There is probably a typo some place
Hey Derek
I have covered HTML and CSS in depth and had originally ignored the wordpress tutorials but looking at this page (linked in a comment from a CSS tutorial) it looks very nice.
How do you suggest I proceed? I think HTML, CSS, Javascript, jQuery, WordPress?
Thanks
Hey Laurence,
Yes I love WordPress. You need a great understanding of HTML and CSS. Most of the PHP is just cut and paste codes, so you don’t have to be a PHP genius by any stretch. JavaScript is nice, but not required for the most part unless you want to make animated slide shows and such.
After you learn WordPress putting together a secure site is a one day versus a one month project.
I really appreciate the responses. The story about your security system was really neat. I’ll get to work 😉