[Solved] CSS to Add images with Menu Items

[ferrdoggsmd]

I am creating a vertical menu with sub menus(this is accordian style, using jquery). For the main menu, not all menu items will have sub menus. For menu items that have sub menus, I would like to add an arrow beside the menu text. The menu items without submenus should just have text.

Here is a marked up fiddle http://jsfiddle.net/bubbasdad/dk4houqn/ I am calling the class “arrow” from the menu with subs, but not sure how to add this class to the css so that it shows up to the left side of the menu text.

[Paulie_D]

not sure how to add this class to the css so that it shows up to the left side of the menu text.

I’m not sure what it is you are asking…the class is already in the HTML in a span.

Are you asking how to make an “image” show up or how to add the class with Jquery?

I made a menu some time ago that uses Jquery to assign classes but the arrows are pure CSS.

http://codepen.io/Paulie-D/pen/emPQoL/

[ferrdoggsmd]

Hi,
No I do not want Jquery to do this, I just what to add an arrow to the left of the text of the menu.

So in the CSS where you see this
#accordion h3 span {
font-size: 16px;
margin-right: 10px;

I want to and an arrow(image) to the left. I have changing the above CSS to the CSS I have pasted below, but it is not working

#accordian h3 span{
font-size: 16px;
margin-right: 10px;
background-image:url(“images/green-arrow.png”);
background-repeat: no-repeat;
background-position: left;
}

Any Ideas?

[Paulie_D]

The span is empty so it will have no height or width…which means that the bg image wont show up.

If you must use a span (and I wouldn’t) you’d have to tell it to display:inline-block and give it a width and height.

Like this – http://jsfiddle.net/yztht5js/

A better option than an unsemantic element would be to add left-padding to the parent h3 and place the background image on that and position it to the left.

[ferrdoggsmd]

Thanks,
Per your suggestion I did away with the empty span and was able to go this route.

#accordian h3:before {
content: url(images/right-menu-arrow.png);
margin-right:10px;
}

[Author]

Posts