Having just previously updated my theme to make use of the WordPress navigation menus I decided I wanted to have a indicator to display that there is a drop down menu. This can be done many ways with plugins etc but I wanted to do it without the need of a plugin. So I had a think and came up with this idea which requires very little knowledge to carry out.
Create a Image for your drop-down navigation
To start this tutorial off we need a image. The source files are available to download at the bottom of this post. I used Inkscape which I used for this particular project but you can use any other software. I first created a triangle and then I scaled it down to 15px by 8px. I placed the triangle hard to the left and left some space to the right. This stops the image from being pushed to the edge of the container which improves it’s appearance and prevents us from adding any padding to our CSS which may destroy the look.
Enable Hidden Options
Go to the WordPress admin and click on Appearance and then click on the Menus.
Go to Screen Options and check the CSS Classes checkbox.
Back in the menu section in my case I have Tutorials as a parent and the children are Windows, PHP and Linux.
Expand tutorials by clicking on it and type drop-down into the CSS classes input box. Save your menu!
Add the CSS
We of course now need add a few lines to your stylesheet. Open style.css in your favourite editor and enter the following
|
1 2 3 4 |
li.drop-down a
{
background:url(images/down_arrow_8.png) no-repeat center right;
} |
If you refresh your browser you may see that multiple images are being displayed like so.
To prevent this we add the following to the stylesheet.
|
1 2 3 4 |
#menu-navbar .sub-menu .menu-item a , #menu-navbar .sub-menu .menu-item a:visited
{
background-image: none;
} |
Conclusion
As you can see with the above image the extra images have disappeared. Hope you have enjoyed this simple tutorial and please feel free to contact me if you are experiencing any problems as not all navigation menu’s are the same so there maybe a little tweaking required.
This is great! I have a couple small issues though… I’m using PressWork as the theme, and I suspect it deals with drop downs a lil differently. Even if not, all my sub menus are still showing up with the arrow. And they seem to “animate” when rolled over and rolled out.
http://www.southpeacechiropractic.com/spc/
Any suggestions?
I solved the “non-expandable” menus showing arrows problem. Perhaps not the most time consuming way, as I created a new class “no-drop-down” and that works. However, the arrows still seem to come and go on hovering, and I’ve tried forcing them to show up but I’m not really sure what I’m doing.
The first issue with the icon disappearing on hover is because there is a line in the CSS that prevents the icon from showing. I will email you the solution for easier reading.
Thank you!!!