problem creating/appending menu dynamically

Home Forums Older releases 0.9.x problem creating/appending menu dynamically

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #2310
    janeksz
    Participant

    Hi,
    I need to create a submenu dynamically, based on incoming data/event.
    The simple example below works when created statically, but not when created dynamically (with jquery .append()). with the

      element it works, with wrong styling, but wit <ul class=”dropdown-menu” everything dissappears.
      Can anyone suggest a solution, please?

      Jan

      // test 05/03/2015
       $('#Action').click(function(){
        //alert("Action");
        $("#wsnmotes > ul").append(
          '<li id="wsnnode"><a href="#"><i class="fa fa-plus-square"></i> mote name: L1</a>'+
            '<ul id="sub1">'+
              '<li><a href="#"><i class="fa fa-question-circle"></i> Discover</a> </li>'+
              '<li><a href="#"><i class="fa fa-info-circle"></i> Mote Config</a></li>'+
            '</ul>'+
            '</li>'
        );
      
        //$("#sub1").addClass("dropdown-menu");
        });
    #2312
    admin
    Keymaster

    Yep, just call the refresh API method:

    http://www.smartmenus.org/docs/#refreshInstance

    after you append the sub menu and it should work – e.g. try this:

    $('#Action').click(function() {
    
    	// append sub menu
    	$("#wsnmotes > ul").append(
    	  '<li id="wsnnode"><a href="#"><i class="fa fa-plus-square"></i> mote name: L1</a>'+
    	    '<ul id="sub1" class="dropdown-menu">'+
    	      '<li><a href="#"><i class="fa fa-question-circle"></i> Discover</a> </li>'+
    	      '<li><a href="#"><i class="fa fa-info-circle"></i> Mote Config</a></li>'+
    	    '</ul>'+
    	    '</li>'
    	);
    
    	// refresh menu tree after the DOM change
    	$("#my-nav").smartmenus('refresh');
    });

    Also just make sure you set the “my-nav” id to your nav so that you can reference it in your script:

    <ul id="my-nav" class="nav navbar-nav">...
    #2313
    janeksz
    Participant

    Thanks,

    That works great with SmartMenus.
    I couldn’t make it work however with SmartMenus Bootstrap Addon example from here: http://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar-fixed-top.html
    Can you suggest the fix for that one as well?

    Much appreciate your help and sharing with community.

    Regards

    Jan

    #2314
    admin
    Keymaster

    I tested exactly with the Bootstrap add-on. I guess you are missing something so here is a complete sample on Codepen:

    http://codepen.io/vadikom/pen/RNYmyv?editors=101

    Cheers!

    #2318
    janeksz
    Participant

    Thanks again,

    It was my mistake, corrected and now works.
    I have another quick question (hopefully the last one). I want to do some extra styling to achieve something like here https://www.sparkfun.com/ . With their vertical menu when hover over the ‘+’ sign (see the right to Arduino item) it changes color, while hover over menu item changes color for that item plus the ‘+’ sign. Can I do it with css and if yes what is the class selector for corresponding items in your Bootstrap add-on menus? Or should I modify the .Hover function in js?

    Cheers,

    Jan

    #2323
    admin
    Keymaster

    The styles for the arrows are at the top of “jquery.smartmenus.bootstrap.css” (the “.sub-arrow” class). Though you will need to play with them quite a bit to achieve something like that.

    Plus in the current version of the Bootstrap add-on the default Bootstrap behavior is honored and it doesn’t allow to separate the behaviour of the arrow from the rest of the menu item – i.e. use the rest of the item for link and the arrow always for sub menu toggle. The default Bootstrap behaviour is to use the whole item just as a sub menu toggle. This will probably be changed in the next SmartMenus release and what you gave as an example will then be the default behaviour for the SmartMenus Bootstrap add-on but at least for now, it’s not.

    #2329
    janeksz
    Participant

    Ok, thanks for that update.
    Now I have a clear picture.

    Best Regards
    Jan

Viewing 7 posts - 1 through 7 (of 7 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?