PHP Developers Network
http://forums.devnetwork.net/

Horzontal Dropdown menu: can it "collapse"?
http://forums.devnetwork.net/viewtopic.php?f=68&t=141525
Page 1 of 1

Author:  simonmlewis [ Thu Jul 09, 2015 5:33 am ]
Post subject:  Horzontal Dropdown menu: can it "collapse"?


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?

Author:  Celauran [ Thu Jul 09, 2015 5:37 am ]
Post subject:  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.

Author:  simonmlewis [ Thu Jul 09, 2015 5:41 am ]
Post subject:  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!

Author:  Celauran [ Thu Jul 09, 2015 5:52 am ]
Post subject:  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.

Author:  simonmlewis [ Thu Jul 09, 2015 5:53 am ]
Post subject:  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.

Author:  Celauran [ Thu Jul 09, 2015 5:57 am ]
Post subject:  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.

Author:  simonmlewis [ Thu Jul 09, 2015 6:04 am ]
Post subject:  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.

Author:  simonmlewis [ Thu Jul 09, 2015 6:18 am ]
Post subject:  Re: Horzontal Dropdown menu: can it "collapse"?

What about this:

Syntax: [ Download ] [ Hide ]
<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. :(

Page 1 of 1 All times are UTC - 5 hours
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/