Currently, I am in the process of creating a unique responsive menu for my website that I think will need some JavaScript implementation. My skills with JavaScript are not very strong, so I am looking for guidance, code examples, or resources that can assist me in finding solutions.
Essentially, I have two navigation menus with almost identical content. The first menu displays all the links when viewed on a wide browser, while the containing div has overflow:hidden property. As the browser is resized and no longer wide enough to hold all list items in one line, some items become hidden due to overflow. This first menu is styled as a horizontal navigation bar.
The second menu, however, is a dropdown menu triggered by clicking the "More" link. All list items in the second menu are initially set to display:none.
This is what needs to be accomplished: When a list item from the first menu overflows and becomes hidden, the corresponding item in the second menu should change to display:block. For example,
<li id="desktop_tenth">tenth</li>
is hidden because it doesn't fit the containing div anymore, then
<li id="mobile_tenth">tenth</li>
should become visible upon clicking the "More" link. While this can be achieved using CSS3 media queries, I would prefer a JavaScript solution and hope someone can help me out.
<div style="overflow:hidden; width: 100%;">
<ul id="desktop">
<li id="desktop_first">first</li>
<li id="desktop_second">second</li>
...
<li id="desktop_tenth">tenth</li>
</ul>
</div>
<div class="dropdown_menu">
<a id="toggle" href="#">More</a>
<ul id="mobile">
<li id="mobile_first">first</li>
<li id="mobile_second">second</li>
...
<li id="mobile_tenth">tenth</li>
</ul>
</div>
An alternative approach could involve starting with a
<div class="dropdown_menu">
<a id="toggle" href="#">More</a>
<ul id="mobile">
<!--- no li inside this ul by default --->
</ul>
</div>
Any list item from the first menu that gets hidden or wrapped will be added as a new item to the
<ul id="mobile">
</ul>
section.