problem creating/appending menu dynamically

[janeksz]

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");
  });

[admin]

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">...

[janeksz]

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

[admin]

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!

[janeksz]

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

[admin]

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.

[janeksz]

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

Best Regards
Jan

[Author]

Posts