Geek Answers Handbook

Zurb Foundation Off Canvas submenu not working with Angular

I have the following copy from Foundation to get the Off Canvas submenu:

<li class="has-submenu"> <a href="#">Foo</a> <ul class="left-submenu"> <li class="back"><a href="#">Back</a></li> <li><label>Level 1</label></li> <li><a href="#">Link 1</a></li> </ul> </li>

When I press "Foo", the submenu does not appear, I go to my home page. I believe because the link is # , and that is used by Angular. Is there a way to change the use of Foundation # in this case to make the submenu work?

+7
angularjs zurb-foundation
source share
1 answer

I believe because the link is # and that is used by Angular.

Yes you are right. The first option for this is to enable html5mode , but this is not always possible (for example, due to the configuration of your server).

Another solution is to keep href empty - if you don't need hash tags for bindings, but only for opening a submenu, the functionality is the same:

 <li class="has-submenu"> <a href="">Foo</a> <ul class="left-submenu"> <li class="back"><a href="">Back</a></li> <li><label>Level 1</label></li> <li><a href="">Link 1</a></li> </ul> </li>
+1
source share

More articles:


All Articles