Having updated my theme to make use of the WordPress navigation menus I decided I wanted to have an 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 for 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
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.
#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 menus are the same so there may be a little tweaking required.
Download
Discover more from WorldOWeb
Subscribe to get the latest posts sent to your email.
Hi, i am building a site and want the drop down menus to show images only. I have managed to achieve this with the main navigation menu, but am struggling to achieve it with the drop down menus. i used the following code to add the images to the main nav:
#menu-item-308 a {
display:block;
height:65px;
width:65px;
padding:0px;
margin-left:6px;
outline:none;
text-indent:-9999px;
no-repeat;
background-image:url(‘Image-url’); background-position:0 0;
}
.custom #menu-item-308 a:hover { background-position:0 -24px; }
Can you provide me with a URL?
So you want to build a WP based website like the WIX template?
Hi… Thanks for this information, But i need a image merge with all the three sub-menus (For an eg: if we hover a menu in a dropdown leftside image and right side menus)
Do you have a example I could look at?
Hi there! Great tip, but I have the same problem, the non-expandable menu item stil has the arrow, which is your another solution that you can share with me/us?
Thanks in advance!
Greetings from Chile.
Giovanni
Can you provide a URL so that I can take a look?
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.
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!!!
© 2024 WorldOWeb. All rights reserved