Formatting sub-arrows

Home Forums Older releases 1.0.x Formatting sub-arrows

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2673
    DanM
    Participant

    In the initialization of my SmartMenus ul, I have the following:

    
    $("#main-menu-mobile").smartmenus({
      subIndicators: true,
      subIndicatorsPos: "append",
      subIndicatorsText: ""
    });
    

    In my CSS, I have:

    
    .main-menu ul li a span.sub-arrow {
      background: url(/Resources/right-arrow-white.png) no-repeat center;
      height: 34px;
      margin-top: -17px;
      position: absolute;
      right: 2px;
      top: 50%;
      width: 20px;
    }
    

    My problem is that the arrow wants to overlap the text of the link, if the text is the full width of the list item. I realize that’s a consequence of absolute positioning. I’ve tried everything I know about CSS to add margin or padding to various parts of the link, but without success. Is there another way to style an image that is used for the sub-arrow span so there is always a gap of some amount between the right edge of the text and the left edge of the image? Thanks!

    #2675
    admin
    Keymaster

    You can target items that have sub menus and add them some right padding to make room for the sub menu indicator like this:

    .main-menu ul li a.has-submenu {
      padding-right:30px;
    }

    Or, alternatively, you could use the subIndicatorsPos: "prepend" option and then use static position for the sub-arrow and float it to the right – something like:

    .main-menu ul li a span.sub-arrow {
      float:right;
      background: url(/Resources/right-arrow-white.png) no-repeat center;
      height: 34px;
      width: 20px;
    }

    Or if this is just for horizontal main menu items, you could use subIndicatorsPos: "append" and something like:

    .main-menu ul li a span.sub-arrow {
      display:inline-block;
      background: url(/Resources/right-arrow-white.png) no-repeat center;
      height: 34px;
      width: 20px;
    }
    #2676
    DanM
    Participant

    Thank you! The first option worked well for me.

    #3125
    jorge
    Participant

    Hi..in my menu like Home… or another submenu are three little points is dectet in the html code span. sub-arrow
    I check all scripts but doesent find. Idont need it because the class caret is ok
    What i can do?

    #3126
    jorge
    Participant

    i found in the iquery.smartmenu.js on
    line 143

    if (this.opts.subIndicators) {
       this.$subArrow = $('<span/>').addClass('sub-arrow');

    when i /* comment this line the points are gone but the menue not work anymore
    so i doesn`t whats happend about this points …
    i works also with bootstrap…
    Have anybody any idea?

    #3130
    admin
    Keymaster

    You don’t need to modify the script core. You can disable the automatically created sub indicators by using the subIndicators: false option.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?