Horzontal Dropdown menu: can it "collapse"?
Moderator: General Moderators
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Horzontal Dropdown menu: can it "collapse"?
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?
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?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Horzontal Dropdown menu: can it "collapse"?
Media query should be able to handle that. Either change up the styles or display a different menu.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Horzontal Dropdown menu: can it "collapse"?
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!
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Horzontal Dropdown menu: can it "collapse"?
https://developer.mozilla.org/en-US/doc ... ia_queries
Surely if you're doing responsive you're familiar with media queries.
Surely if you're doing responsive you're familiar with media queries.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Horzontal Dropdown menu: can it "collapse"?
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.
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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Horzontal Dropdown menu: can it "collapse"?
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.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Horzontal Dropdown menu: can it "collapse"?
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.
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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Horzontal Dropdown menu: can it "collapse"?
What about this:
I couldn't get it to work with the JS in the external file tho. 
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>
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.