Horzontal Dropdown menu: can it "collapse"?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4434
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Horzontal Dropdown menu: can it "collapse"?

Post 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?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6425
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Horzontal Dropdown menu: can it "collapse"?

Post by Celauran »

Media query should be able to handle that. Either change up the styles or display a different menu.
simonmlewis
DevNet Master
Posts: 4434
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Horzontal Dropdown menu: can it "collapse"?

Post 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!
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6425
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Horzontal Dropdown menu: can it "collapse"?

Post by Celauran »

https://developer.mozilla.org/en-US/doc ... ia_queries

Surely if you're doing responsive you're familiar with media queries.
simonmlewis
DevNet Master
Posts: 4434
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Horzontal Dropdown menu: can it "collapse"?

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6425
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Horzontal Dropdown menu: can it "collapse"?

Post 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.
simonmlewis
DevNet Master
Posts: 4434
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Horzontal Dropdown menu: can it "collapse"?

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4434
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Horzontal Dropdown menu: can it "collapse"?

Post 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. :(
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply