Like the title states, I was able to design a nice menu that is responsive when the screen size is below 500px (Mobile viewport). I was also able to make it dropdown and show all available classes.
However, I'm having a hard time trying to make the ".handler" (menu div) go back to its original position on the 2nd click. In other words, I need to close the menu now, and I don't know how to tell jQuery to listen for the 2nd click.
$(document).ready(function(){
$('.location').hover(function(){
$(this).effect("shake");
});
$('.affordable').hover(function(){
$(this).effect("bounce",{times:1},"slow");
});
$('.handler').on('click', function(){
$('.container').css("top", "447px");
$('.nBar').css("height", "300px");
$('.nav').css("height","298px");
$('.navigation').css("display","flex");
});
});* {
margin:0;
font-family: 'Roboto', sans-serif;
}
.topWrapper{
position: fixed;
top:0;
z-index:10;
width: 100%;
box-shadow: 0 0 25px black;
}
.header{
/*border: 1px solid rgb(0,0,0);*/
text-align: left;
width: 100%;
background-color: white;
height:75px;
position: relative;
top:0px;
}
/*#title{
padding-left: 10px;
padding-top: 10px;
font-size: 50px;
}*/
.titleTwo{
height:60px;
padding-top: 10px;
padding-left: 10px;
}
#contactBox{
position:absolute;
right:20px;
top:20px;
width:100px;
height:40px;
background-color: rgb(239,172,166);
color: rgb(80,100,119);
transition: 0.25s;
}
#contactBox:hover{
background-color: rgb(80,100,119);
color: rgb(239,172,166);
box-shadow: 0px 0px 25px rgb(239,172,166);
}
/*CONTACT US BUTTON = FTEXT*/
.fText{
font-size: 15px;
padding: 10px;
}
.nav{
height:50px;
width:100%;
border: 1px solid rgb(200,200,200);
background-color: white;
}
.nBar{
display: flex;
}
li {
display: inline-flex;
padding: 15px 40px 10px 40px;
}
#home{
height:26px;
margin-top: 0px;
/*border: 1px solid black;*/
color: rgb(80,100,119);
transition: 0.10s;
}
#bio{
height:26px;
margin-top: 0px;
/*border: 1px solid black;*/
color: rgb(80,100,119);
transition: 0.10s;
}
#projects{
height:26px;
margin-top: 0px;
/*border: 1px solid black;*/
color: rgb(80,100,119);
transition: 0.10s;
}
#services{
height:26px;
margin-top: 0px;
/*border: 1px solid black;*/
color: rgb(80,100,119);
transition: 0.10s;
}
#contact{
height:26px;
margin-top: 0px;
/*border: 1px solid black;*/
color: rgb(80,100,119);
transition: 0.10s;
}
#home:hover{
background-color: rgb(80,100,119);
color:rgb(239,172,166);
/*transition: 0.25s;*/
box-shadow: 0px 0px 15px rgb(239,172,166);
}
#bio:hover{
/*background-color: black;*/
background-color: rgb(80,100,119);
color:rgb(239,172,166);
/*transition: 0.25s;*/
box-shadow: 0px 0px 15px rgb(239,172,166);
}
#projects:hover{
background-color: rgb(80,100,119);
color:rgb(239,172,166);
/*transition: 0.25s;*/
box-shadow: 0px 0px 15px rgb(239,172,166);
}
#services:hover{
background-color: rgb(80,100,119);
color:rgb(239,172,166);
/*transition: 0.25s;*/
box-shadow: 0px 0px 15px rgb(239,172,166);
}
#contact:hover{
background-color: rgb(80,100,119);
color:rgb(239,172,166);
/*transition: 0.25s;*/
box-shadow: 0px 0px 15px rgb(239,172,166);
}
a{
text-decoration: none;
color:black;
}
/*body starts here*/
.container{
position:absolute;
top:127px;
width:100%;
z-index:1;
}
.content{
display: flex;
width: 100%;
min-width: 960px;
flex-wrap: wrap;
}
.banner{
background-color: white;
width:100%;
height:400px;
order: 1;
overflow: hidden;
}
/*TO MAKE THESE IMAGES WORK, WE USUALLY MAKE THEM QUITE
BIGGER THAN THE SPACE OF THE DIV TO CREATE THAT ZOOM EFFECT
THEN WE ADD THAT MAX WIDTH 100% AND HEIGHT AUTO TO CREATE THE EFFECT*/
/*imgOne is in the banner div*/
.imgOne{
/*min-height: 400px;*/
width: 100%;
height:auto;
}
/*.boxOne is the left quadrant below banner */
.boxOne{
background-color: red;
width:50%;
height:300px;
order:2;
}
/*imgThree is inside boxOne*/
.imgThree{
width:100%;
height:auto;
max-height: 550px;
}
/*div to overlay imgThree which is inside boxOne*/
.slideThree{
/*tentative*/
}
/*boxTwo is the right quadrant below the banner*/
.boxTwo{
/*test disable background-color: orange;*/
height:300px;
width: 50%;
order:2;
}
/*imgFour is the image in boxTwo*/
.imgFour{
width:100%;
height:auto;
max-height: 550px;
}
/*boxThree is 2nd banner*/
.boxThree{
background-color: rgb(200,200,200);
width:100%;
height:250px;
order:3;
overflow: hidden;
}
/*imgTwo is the image inside boxThree*/
.imgTwo{
width:100%;
height:auto;
}
/*boxFour is the 3rd banner on the site*/
.boxFour{
width:100%;
height: 325px;
order:4;
}
.boxFour:hover{
opacity: 0.8;
}
.location{
text-align: center;
padding-top: 30px;
padding-bottom: 30px;
font-size: 50px;
}
.location:hover{
color:rgb(239,172,166);
}
.intro{
text-align: center;
padding:0px;
}
.affordable{
text-align: center;
padding: 30px;
font-size: 30px;
}
.affordable:hover{
color:rgb(239,172,166);
}
.introTwo{
text-align: center;
}
.footer {
width: 100%;
height:65px;
min-height: 50px;
background-color: white;
order:4;
text-align: center;
border-top: 1px solid rgb(200,200,200);
}
.legal{
padding-top: 5px;
font-size: 12px;
}
.legalText{
color:rgb(200,200,200);
}
.legalText:hover{
color:rgb(239,172,166);
}
.handler{
width: 100%;
height:50px;
background-color: rgb(80,100,119);
color:rgb(239,172,166);
text-align: left;
padding: 20px 0 0 42px;
font-size: 25px;
display:none;
cursor:pointer;
}
@media only screen and (max-width:500px){
/*HEADER STUFF*/
.topWrapper{
position:relative;
min-width: 310px;
-webkit-min-width: 310px;
display:flex;
flex-wrap: wrap;
}
.header{
flex-wrap: wrap;
}
/*#title{
font-size: 30px;
}*/
.titleTwo{
height:30px;
padding-left: 20px;
padding-top: 30px;
}
.handler{
display: block;
}
.nBar{
align-content: stretch;
transition: 0.4s;
}
ul{
margin-left: 0;
padding-left: 0;
}
/*inserted .navigation because it will help
differentiate the nav bar links when I add
other "<a> links" along the page*/
.navigation{
width:100%;
border: solid 1px rgb(200,200,200);
/*added navigation display:none*/
display: none;
transition: 0.4s;
}
.nav{
/*changed height from 298 px to 0px*/
/*height:298px;*/
height: 0px;
transition: 0.4s;
}
li{
width:100%;
font-size: 20px;
}
.nBar{
flex-wrap: wrap;
/*changed height from 300 to 0px*/
/*height:300px;*/
height:0px;
}
/*/////////////CONTENT STUFF/////////////////*/
.container{
width: 100%;
min-width: 310px;
position:absolute;
top:147px;
/*this top value of 447px is what should be enabled*/
/*once the menu div is clicked*/
/*top:447px;*/
transition: 0.4s;
}
.content{
min-width: 310px;
-webkit-min-width: 310px;
display:flex;
flex-wrap: wrap;
}
.banner{
overflow: hidden;
order:0;
height:100%;
}
.imgOne{
width:100%;
}
.boxOne{
height:233px;
width:100%;
order:1;
}
.boxTwo{
height:207px;
width:100%;
order:2;
}
.boxThree{
width: 100%;
height:auto;
order:3;
}
.imgTwo{
width: 100%;
height:auto;
}
.boxFour{
width:100%;
order:4;
padding-bottom: 90px;
}
.footer{
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="description" content="Dockmann Web Services">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="author" content="Paul Aranguren">
<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="icon" href="images/faviconR.png" type="image/x-icon" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<!-- <script src="jquery-3.1.1.min.js"></script> -->
<script type="text/javascript" src="js/script.js"></script>
<title>dockmann</title>
</head>
<body>
<div class="topWrapper">
<div class="header">
<!-- <h1 id="title">DOCKMANN</h1> -->
<a href="http://www.dockmann.com"><img class="titleTwo" src="css/images/DockmannH.svg" /></a>
<a href="mailto:info@dockmann.com"><div id="contactBox">
<p class="fText">
Contact Us!
</p>
</div>
</a>
</div>
<div class="nav">
<ul class="nBar">
<!--inserted .navigation because it will help
differentiate the nav bar links when I add
other "<a> links" along the page -->
<a class="navigation" href="http://dockmann.com"><li id="home">
HOME
</li></a>
<a class="navigation" href="bio.html"><li id="bio">
BIO
</li></a>
<a class="navigation" href="projects.html"><li id="projects">
PROJECTS
</li></a>
<a class="navigation" href="services.html"><li id="services">
SERVICES
</li></a>
<a class="navigation" href="contact.html"><li id="contact">
CONTACT
</li>
</a>
</ul>
<div class="handler">
Menu
</div>
</div>
</div>
<div class="bodyWrapper">
<div class="container">
<div class="content">
<div class="banner">
<center>
<img class="imgOne" src="css/images/constructionRX.jpg" />
</center>
</div>
<div class="boxOne">
<img class="imgThree" src="css/images/desk4RXOPT.jpg" />
</div>
<div class="boxTwo">
<img class="imgFour" src="css/images/girls1RXOPT.jpg" />
</div>
<div class="boxThree">
<img class="imgTwo" src="css/images/desk1RXOPT.jpg" />
</div>
<div class="boxFour">
<h2 class="location">We're in Miami!</h2>
<p class="intro">
As of 2016, Dockmann's Web Development Group is offering services based
out of Miami. <br />(US-Eastern Time Zone; for International Projects)
</p>
<h2 class="affordable">Affordable Code</h2>
<p class="introTwo">
Our packages are custom made in order to fit the budgets of our clients.
</p>
</div>
<div class="footer">
<!-- add link here to disclaimer page -->
<p class="legal">
<a class="legalText" href="disclaimer.html">LEGAL</a>
</p>
</div>
</div>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-82779137-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
