PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Fri Aug 14, 2020 3:02 am

All times are UTC - 5 hours




Post new topic Reply to topic  [ 8 posts ] 
Author Message
PostPosted: Thu Jul 09, 2015 5:33 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom

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.


Top
 Profile  
 
PostPosted: Thu Jul 09, 2015 5:37 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6425
Location: Montreal, Canada
Media query should be able to handle that. Either change up the styles or display a different menu.

_________________


Top
 Profile  
 
PostPosted: Thu Jul 09, 2015 5:41 am 
Offline
DevNet Master

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


Top
 Profile  
 
PostPosted: Thu Jul 09, 2015 5:52 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6425
Location: Montreal, Canada
https://developer.mozilla.org/en-US/doc ... ia_queries

Surely if you're doing responsive you're familiar with media queries.

_________________


Top
 Profile  
 
PostPosted: Thu Jul 09, 2015 5:53 am 
Offline
DevNet Master

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


Top
 Profile  
 
PostPosted: Thu Jul 09, 2015 5:57 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6425
Location: Montreal, Canada
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.

_________________


Top
 Profile  
 
PostPosted: Thu Jul 09, 2015 6:04 am 
Offline
DevNet Master

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


Top
 Profile  
 
PostPosted: Thu Jul 09, 2015 6:18 am 
Offline
DevNet Master

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

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 8 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 14 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group