Start a new discussion

To start a new discussion please visit the discussions section of the GitHub home page of the project.

Discussions on GitHub

You can also search our old self-hosted forums for any useful information below but please note that posting new content here is not possible any more.

replace + indicator with images

Home Forums Older releases 0.9.x replace + indicator with images

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1292
    Dylan
    Participant

    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?

    #1504
    admin
    Keymaster

    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!

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘0.9.x’ is closed to new topics and replies.