toggle show/hide for hidden menu buttons (responsive)


Tags: javascript,jquery,html,css

Problem :

I'm still not too good with CSS or Javascript (and rusty from being out of coding work for some months now) but here's my problem: I'm working on what I hope will be a very simple model for a a responsive website. When the browser window is large enough, all the main menu buttons are visible/lined up along the top of the page, but if the window narrows to say less than 640px, the menu buttons disappear (are hidden by "display:none";) and a button appears marked "MENU" to toggle the display of those same hidden buttons.

How do I do a Javascript to set display:inline-block for the buttons in class "MVisitorButton" (which become display:none; when browser is <640px wide) upon clicking the MENU button (which should also close them when clicked again) ie. toggle between showing and hiding these buttons?

<!doctype html>

<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="initial-scale=1">
    <title>test</title>
    <script type="text/javascript">//show live dimensions of page in dimensions div
   window.onresize = displayWindowSize;
   window.onload = displayWindowSize;
   function displayWindowSize() {
       myWidth = window.innerWidth;
       myHeight = window.innerHeight;
       document.getElementById("dimensions").innerHTML = myWidth + "x" + myHeight;
   };

   function hideshow() {
        if (document.getElementById("MAINMENU").style.visibility = "hidden") {
        document.getElementById("MAINMENU").style.visibility = "visible" }
        else {
        document.getElementById("MAINMENU").style.visibility = "hidden"
        }
    }
    </script>


    <style>
    body {background-color: black; color: white; margin:0px; padding: 0px; }    
    .Mforms{display: inline;padding:0px;}
    .AllContent{display: block; max-width:1280px; margin-left:auto; margin-right:auto; background-color: white; color: black; padding:0px;} /*padding-right:-12px;*/
    .Mbutton{display: inline-block; width:16.5%; text-align: center;}  /* margin-right:-4px; padding-right:-4px; padding:-2px;  margin:0; float:left; height:330px;*/
    .MvisitorButton { /* a fancy button that lights up */
    display: inline-block; width:16.666666666667%; text-align: center;
    font-family: "DIN Condensed","Arial Narrow",arial,helvetica,sans-serif;
    font-weight: bold;
    font-size:10pt;
    margin: 0px;
    line-height: 25px;
    vertical-align: middle;
    border-style: solid;
    border-width: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    border-color:#030402;
    color:#F5ECCB; /*font tan*/
    background-image: radial-gradient(#425a36, #030402);
    }
    .MvisitorButton:hover {background-image: radial-gradient(#638851, #030402);}

    #MenuButton{
    display: none;
    width: 100%; text-align: center;
    font-family: "DIN Condensed","Arial Narrow",arial,helvetica,sans-serif;
    font-weight: bold;
    font-size:10pt;
    margin: 0px;
    line-height: 25px;
    vertical-align: middle;
    border-style: solid;
    border-width: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    border-color:#030402;
    color:#F5ECCB; /*font tan*/
    background-image: radial-gradient(#425a36, #030402);
    }

    @media all and (max-width: 639px)  { /*when display goes to phone width*/
/*    .AllContent{max-width:100%;} .MvisitorButton {width:100%; display:none;} /*display:none;should hide but snap button to full width*/ #MenuButton {width:100%; display:inline-block;}*/
    .AllContent{max-width:100%;} #MAINMENU {display:none;} /*display:none;should hide but snap button to full width*/ #MenuButton {width:100%; display:inline-block;}
    } 

    #dimensions{display: inline-block; width:100%; text-align: center;}
    .fullwide-center {display: inline-block; width:100%; text-align: center;}
    .fullwide {display: inline-block; width:100%; text-align: left;}
    .fullwide-right {display: inline-block; width:100%; text-align: right;}

    .logowrap{display: inline-block;max-width:350px;width:100%;}
        </style>

</head>

<body>
    <div class="AllContent"> <!--everything in a box centered on the page-->
    <!--<div class="fullwide-right">Testing: 1, 2, 3...</div>-->

<div id="MAINMENU"><form class="Mforms"><input class="MvisitorButton" type=submit value='One' /></form><form class="Mforms"><input class="MvisitorButton" type=submit value='Two' /></form><form class="Mforms"><input class="MvisitorButton" type=submit value='Three' /></form><form class="Mforms"><input class="MvisitorButton" type=submit value='Four' /></form><form class="Mforms"><input class="MvisitorButton" type=submit value='Five' /></form><form class="Mforms"><input class="MvisitorButton" type=submit value='Six' /></form></div><form class="Mforms"><input type=submit onclick="hideshow()" id="MenuButton" value="MENU" /></form>    <div class="fullwide-center"><!--<img src="../logos/LogoWeb5.png" class="logowrap">-->website logo goes here</div>
    <div class="fullwide">
        <p>Lorem ipsum blah blah blah...</p>
    </div>

    <div class="fullwide"><!--show some current content from the database-->
            </div>

        <div id="dimensions"><noscript>JavaScript must be enabled to utilize all functions on this page.</noscript></div>
    </div> <!--end of AllContent-->
</body>
</html>

[SECOND TRY] (Note: something in the edit above messed up the nice tight button layout I had...it is restored in this code)

<!doctype html>

<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="initial-scale=1">
    <title>test</title>
    <script type="text/javascript">//show live dimensions of page in dimensions div
   window.onresize = displayWindowSize;
   window.onload = displayWindowSize;
   function displayWindowSize() {
       myWidth = window.innerWidth;
       myHeight = window.innerHeight;
       document.getElementById("dimensions").innerHTML = myWidth + "x" + myHeight;
   };

   function hideshow(id) {
        if (document.getElementById(id).style.display = "none") {
        document.getElementById(id).style.display = "block"}
        else {
        document.getElementById(id).style.display = "none"
        }
    }
    </script>


    <style>
    body {background-color: black; color: white; margin:0px; padding: 0px; }    
    .Mforms{display: inline;padding:0px;}
    .AllContent{display: block; max-width:1280px; margin-left:auto; margin-right:auto; background-color: white; color: black; padding:0px;} /*padding-right:-12px;*/
    #PHONEMENU {display:none;}
    .Mbutton{display: inline-block; width:16.5%; text-align: center;}  /* margin-right:-4px; padding-right:-4px; padding:-2px;  margin:0; float:left; height:330px;*/
    .MvisitorButton { /* a fancy button that lights up */
    display: inline-block; width:16.666666666667%; text-align: center;
    font-family: "DIN Condensed","Arial Narrow",arial,helvetica,sans-serif;
    font-weight: bold;
    font-size:10pt;
    margin: 0px;
    line-height: 25px;
    vertical-align: middle;
    border-style: solid;
    border-width: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    border-color:#030402;
    color:#F5ECCB; /*font tan*/
    background-image: radial-gradient(#425a36, #030402);
    }
    .MvisitorButton:hover {background-image: radial-gradient(#638851, #030402);}


    .PhoneButton{
    display: inline-block;
    width: 100%; text-align: center;
    font-family: "DIN Condensed","Arial Narrow",arial,helvetica,sans-serif;
    font-weight: bold;
    font-size:10pt;
    margin: 0px;
    line-height: 25px;
    vertical-align: middle;
    border-style: solid;
    border-width: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    border-color:#030402;
    color:yellow; /*font tan*/
    background-image: radial-gradient(#425a36, #030402);
    }


    #MenuButton{
    display: none;
    width: 100%; text-align: center;
    font-family: "DIN Condensed","Arial Narrow",arial,helvetica,sans-serif;
    font-weight: bold;
    font-size:10pt;
    margin: 0px;
    line-height: 25px;
    vertical-align: middle;
    border-style: solid;
    border-width: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    border-color:#030402;
    color:#F5ECCB; /*font tan*/
    background-image: radial-gradient(#425a36, #030402);
    }

    @media all and (max-width: 639px)  { /*when display goes to phone width*/
/*    .AllContent{max-width:100%;} .MvisitorButton {width:100%; display:none;} /*display:none;should hide but snap button to full width*/ #MenuButton {width:100%; display:inline-block;}*/
    .AllContent{max-width:100%;} #PHONEMENU {display:none;} #MAINMENU {display:none;} /*display:none;should hide but snap button to full width*/ #MenuButton {width:100%; display:inline-block;}
    } 

    #dimensions{display: inline-block; width:100%; text-align: center;}
    .fullwide-center {display: inline-block; width:100%; text-align: center;}
    .fullwide {display: inline-block; width:100%; text-align: left;}
    .fullwide-right {display: inline-block; width:100%; text-align: right;}

    .logowrap{display: inline-block;max-width:350px;width:100%;}
        </style>

</head>

<body>
    <div class="AllContent"> <!--everything in a box centered on the page-->
    <!--<div class="fullwide-right">Testing: 1, 2, 3...</div>-->

<div id="MAINMENU"><form class="Mforms"><input class="MvisitorButton" type=submit value='One' /></form><form class="Mforms"><input class="MvisitorButton" type=submit value='Two' /></form><form class="Mforms"><input class="MvisitorButton" type=submit value='Three' /></form><form class="Mforms"><input class="MvisitorButton" type=submit value='Four' /></form><form class="Mforms"><input class="MvisitorButton" type=submit value='Five' /></form><form class="Mforms"><input class="MvisitorButton" type=submit value='Six' /></form></div><form class="Mforms"><input type=submit onclick="hideshow('PHONEMENU')" id="MenuButton" value="MENU" /></form><div id="PHONEMENU"><form class="Mforms"><input class="PhoneButton" type=submit value='One' /></form><form class="Mforms"><input class="PhoneButton" type=submit value='Two' /></form><form class="Mforms"><input class="PhoneButton" type=submit value='Three' /></form><form class="Mforms"><input class="PhoneButton" type=submit value='Four' /></form><form class="Mforms"><input class="PhoneButton" type=submit value='Five' /></form><form class="Mforms"><input class="PhoneButton" type=submit value='Six' /></form></div>    <div class="fullwide-center"><!--<img src="../logos/LogoWeb5.png" class="logowrap">-->website logo goes here</div>
    <div class="fullwide">
        <p>Lorem ipsum blah blah blah...</p>
    </div>

    <div class="fullwide"><!--show some current content from the database-->
            </div>

        <div id="dimensions"><noscript>JavaScript must be enabled to utilize all functions on this page.</noscript></div>
    </div> <!--end of AllContent-->
</body>
</html>


Solution :

Thanks for everyone's efforts, but I'm still in a complete muddle with javascript and threw in the towel: but I DID figure out a pure CSS method that appears to work perfectly:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="initial-scale=1">
<meta charset=utf-8 />
<title>DEMO</title>
<script type="text/javascript">//show live dimensions of page in dimensions div
window.onresize = displayWindowSize;
window.onload = displayWindowSize;
function displayWindowSize() {
   myWidth = window.innerWidth;
   myHeight = window.innerHeight;
   document.getElementById("dimensions").innerHTML = myWidth + "x" + myHeight;
};
</script>

<?php
$buttons=array("One", "Two", "Three", "Four", "Five", "Six", "Seven"); //test array
$buttoncount=count($buttons);
$buttonwidth=(100/$buttoncount);
?>

<style>
body {background-color: black; color: white; margin:0px; padding: 0px; }    
.Mforms{display: inline;padding:0px;}
    .MvisitorButton { /* a fancy button that lights up */
    display: inline-block; width:<?php echo $buttonwidth;?>%; text-align: center;
    font-family: "DIN Condensed","Arial Narrow",arial,helvetica,sans-serif;
    font-weight: bold;
    font-size:10pt;
    margin: 0px;
    line-height: 25px;
    vertical-align: middle;
    border-style: solid;
    border-width: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    border-color:#030402;
    color:#F5ECCB; /*font tan*/
    background-image: radial-gradient(#425a36, #030402);
    }
    .MvisitorButton:hover {background-image: radial-gradient(#638851, #030402);}

.PhoneButton{
display: inline-block;
width: 100%; text-align: center;
font-family: "DIN Condensed","Arial Narrow",arial,helvetica,sans-serif;
font-weight: bold;
font-size:10pt;
margin: 0px;
line-height: 25px;
vertical-align: middle;
border-style: solid;
border-width: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
border-color:#030402;
color:yellow; /*font tan*/
background-image: radial-gradient(#425a36, #030402);
}
.PhoneButton:hover {background-image: radial-gradient(#638851, #030402);}

.PhoneButton + input{
  display:none;
}
.PhoneButton + input + *{
  display:none;
}
.PhoneButton+ input:checked + *{
  display:block;
}

.PMU{display:none; width: 100%;}

.AllContent{display: block; max-width:1280px; margin-left:auto; margin-right:auto; background-color: white; color: black; padding:0px;
.showme{display: inline-block;} .PMU{display:none;}
} /*padding-right:-12px;*/
@media all and (max-width: 639px) {.PMU{display: inline-block;} .showme{display: none;}}

</style>

</head>
<body>
<?php    
foreach($buttons as $buttonface) {
$btnsA.= "<form class=\"Mforms\"><input class=\"MvisitorButton\" type=submit value='".$buttonface."' /></form>";
$btnsB.= "<form class=\"Mforms\"><input class=\"PhoneButton\" type=submit value='".$buttonface."' /></form>";
}   
?>  

<div class="AllContent">
<div class="showme"><?php echo $btnsA; ?></div>
 <div class="PMU">   
<label class="PhoneButton" for="phonemenu" >MENU</label>
<input id="phonemenu" class="PhoneButton" type="checkbox">
<div><?php echo $btnsB; ?></div>
</div>
<p>Blah...</p>
</div>

</body>
</html>

    CSS Howto..

    How to put image tiles properly without colum gap or row gap in between using only CSS?

    How to adjust font awesome down arrow via css

    How to select “label for=list[]” in CSS?

    How to make this CSS layout

    How to remove scroll bar using overflow CSS HTML (Possible Positioning Conflict)

    How to build native C++ apps with HTML/CSS UI?

    How to grab the element with certain CSS property value inline

    How do you tell a browser, “if you need to wrap, wrap here first”?

    How to make footer responsive through CSS?

    How can I get drop-down functionality working with CSS?

    how to set part of circle as background in css

    How to improve the rendering of my HTML/CSS button?

    Css Tricks - How to align 4 div's

    How to overlay a div upon other div while scrolling using css

    How to extend this navigation bar off the page?

    How to color path elements in SVG?

    show hover by default using CSS

    How to draw arrows in CSS [closed]

    how to get a rounded corner table with a body in different color with CSS?

    How do I make the class 'path' show up at higher zoom levels using carto CSS in MapBox Studio?

    How to get full height of webpage with CSS?

    How to align

    and tags side-by-side?

    CSS: How does youtube change its appearance based on screen size?

    how to replace a link name text

    HTML/CSS - how to position an image in the above the right and left corner of a panel

    How to match an index of a CSS class with JavaScript?

    How to customize Subscribe2 button appearance in WordPress?

    How to select element, enclose it in a div and add a class to it, in pure javascript?

    How to give sentence case to sentences through CSS or javascript? [closed]

    How to add CSS to CKEDITOR?