Page 1 of 1
Horzontal Dropdown menu: can it "collapse"?
Posted: Thu Jul 09, 2015 5:33 am
by simonmlewis
http://tympanus.net/codrops/2013/03/05/ ... down-menu/
We need to use this menu but so that on a mobile it collapsed down to the "burger button".
It doesn't do it at the moment, but wonder how we could make it do it.
I did look at an extra script that would make it hide or show on a toggle, but i think that's a poor way to do it, and wondered if the existing one could be altered?
Re: Horzontal Dropdown menu: can it "collapse"?
Posted: Thu Jul 09, 2015 5:37 am
by Celauran
Media query should be able to handle that. Either change up the styles or display a different menu.
Re: Horzontal Dropdown menu: can it "collapse"?
Posted: Thu Jul 09, 2015 5:41 am
by simonmlewis
Sorry you've lost me. I'm looking at ways in my knowledge, I Can do it. But I am stumped. I also looked at adding a further <li> like the existing ones, but then it would do that on desktop top. Hence, being stumped!
Re: Horzontal Dropdown menu: can it "collapse"?
Posted: Thu Jul 09, 2015 5:52 am
by Celauran
https://developer.mozilla.org/en-US/doc ... ia_queries
Surely if you're doing responsive you're familiar with media queries.
Re: Horzontal Dropdown menu: can it "collapse"?
Posted: Thu Jul 09, 2015 5:53 am
by simonmlewis
Oh sorry - yes.
But I am trying to find out how to menu it expand and hide/show the "menu" button. Preferablly without further JS, and just CSS but not sure I can.
Re: Horzontal Dropdown menu: can it "collapse"?
Posted: Thu Jul 09, 2015 5:57 am
by Celauran
Use media queries to alter the display of the menu (eg. stacked v. full width). Have a link that toggles its display on mobile and use media queries to show/hide that link as well.
Re: Horzontal Dropdown menu: can it "collapse"?
Posted: Thu Jul 09, 2015 6:04 am
by simonmlewis
How do you do the toggle in media queries tho??
I guess you could add a <li> tag that is for "menu", and that expands them all. But I am not sure how to make it expand "everything", and then to make that one <li> not show on mobile.
Re: Horzontal Dropdown menu: can it "collapse"?
Posted: Thu Jul 09, 2015 6:18 am
by simonmlewis
What about this:
Code: Select all
<script>
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
<div class="mobile-nav">
<a href='#' onClick="toggle_visibility('menu');">Menu</a>
</div>
<div class='outercontainer' style='background-color: #5F5F5F;' id="menu">
menu here
</div>
<style>
@media screen and (max-width: 767px)
{
#menu
{
display: none;
}
}
</style>
I couldn't get it to work with the JS in the external file tho.
