By Tracy Ridge
Having 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.
Image may be NSFW.
Clik here to view.
Go to Screen Options and check the CSS Classes checkbox.
Image may be NSFW.
Clik here to view.
Back in the menu section in my case I have Tutorials as a parent and the children are Windows, PHP and Linux.
Image may be NSFW.
Clik here to view.
Expand tutorials by clicking on it and type drop-down into the CSS classes input box. Save your menu!
Image may be NSFW.
Clik here to view.
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
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.
Image may be NSFW.
Clik here to view.
To prevent this we add the following to the stylesheet.
#menu-navbar .sub-menu .menu-item a , #menu-navbar .sub-menu .menu-item a:visited
{
background-image: none;
}Conclusion
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
The post WordPress Navigation- Dropdown Menu Image appeared first on WorldOWeb.