Javascript width dropdown dropdown 100%
I want to try and achieve 100% width for my Wordpress menu.
My problem is that my Wordpress menu is structured such that the ul submenu nested in the list for my navbar.
<li><a href="">menu-1</a>
<ul class="sub-menu">
<li>sub 1</li>
<li>sub 2</li>
</ul>
</li>
The dropdown will only work if my submenu is not nested in a top-level navigation list like this.
<li><a href="">menu-1</a> </li>
<ul class="sub-menu">
<li>sub 1</li>
<li>sub 2</li>
</ul>
My fiddle working on menu 1 and not working on menu 2
How can I change my script so that the dropdown will work with the current one (UL submenu html structure inside list tags). I really don't want to edit my Wordpress menu and I'm not sure how to change the html for this as well.
source to share
I have a submenu in this violin
the desired structure can be achieved via JS, all you have to do is grab the submenus nested in .menu-item
and insert them after parent
which .menu-item
, usinginsertAfter
There is, however, another problem that is beyond the scope of the question, which you can always add to the question of the course;) - the menu animation overlaps the next one, not the animation first, but another one animated in.
Also, for UX I would recommend increasing the animation speed of the menu, 350ms
not that fast, it is 50ms
faster than the default animation speed of jQueries.
I would bump that up to about 150ms - but that's just advice;)
EDIT
After reading @ 2pha's comments on your question, this can also be noted.
You could use jQueries hovered.children('.sub-menu')
or hovered.find('.sub-menu')
to get the item you want. Of course, this only works if you don't have overflow: hidden
the main menu li
.
(As a sidenote - jQueries .find()
is a faster method until you start embedding deeply.)
Then you can also cache variables that you might want to take into account.
jQuery is a library that turns a DOM node into a jQuery collection (array of jQuery objects), all loaded functions. every time you call $(selector)
you create a new new object. It's not that hard, but if you do it a lot, your site can easily fall behind the mobile platform.
If you are going to use something more than once, or perhaps twice, put the selector in a variable, as @ 2pha: pointed out var hovered = $(hovered)
.
Then just use hovered.someJQmethod()
- this uses the cached object instead of the new instance which saves a lot of esp resources for phones;).
My point is that this answer got a lot more from typing @ 2pha in the comments. Give him credit if you give me credit;)
Good luck and hope this helps;)
source to share