replace + indicator with images

[Dylan]

How I could replace the +-indicator with an image? Where will be added the images? In the demo (sm-clean horizontal) are two arrows (main and subs), in the CSS I can’t find any image.

I find the +-indicator in the jquery.smartmenus.js:
subIndicatorsText: ‘+’,

It would be great if I can do two different images, one down-arrow for the horizontal menu, and one right-arrow for the vertical menus.

How does it work?

[admin]

Hi,

You need to edit the following CSS:

/* Sub menu indicators
===================*/

	.sm-clean a span.sub-arrow {
		position:absolute;
		right:12px;
		top:50%;
		margin-top:-3px;
		/* we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too */
		width:0;
		height:0;
		overflow:hidden;
		border-width:4px; /* tweak size of the arrow */
		border-style:solid dashed dashed dashed;
		border-color:#555 transparent transparent transparent;
	}
	.sm-clean-vertical a span.sub-arrow,
	.sm-clean ul a span.sub-arrow {
		right:15px;
		top:50%;
		margin-top:-5px;
		border-width:5px;
		border-style:dashed dashed dashed solid;
		border-color:transparent transparent transparent #555;
	}

to something like this:

/* Sub menu indicators
===================*/

	.sm-clean a span.sub-arrow {
		position:absolute;
		right:12px;
		top:50%;
		margin-top:-5px;
		width:10px;
		height:10px;
		overflow:hidden;
		background:url('___YOUR_BG_IMAGE___');
	}
	.sm-clean-vertical a span.sub-arrow,
	.sm-clean ul a span.sub-arrow {
		right:15px;
		top:50%;
		margin-top:-5px;
	}

And also you may want to check/tweak the following options:

subIndicators:         true,
subIndicatorsPos:     'prepend',
subIndicatorsText:    '+',

Cheers!

[Author]

Posts