Simen Musaus Simen Musaus - 3 months ago 13
CSS Question

Nav bar animation

so my problem is that i have a checkbox as a button to make a nav bar pop up. When you press on this button the page gets dimmed, the nav bar pops up and the foucus is on the menu. Anyway. I have made it so when you press on Play (a button on the nav bar) it goes to the specific point of the website. When you are at the point of the website, the menu doesn't go away. So you cant click anywhere. I want it so you click on something on the menu, the menu disappears and takes you to where you are leaded.

Here is the HTML doucument.

<!DOCTYPE html>
<html>
<head>
<link rel=stylesheet href="css.css" type="text/css" />
<link rel="icon" href="favicon.ico" type="image/icon"/>
<title>Das Krankenhaus</title>
</head>

<body>
<!-- start header -->
<header id="head">
<div class="something">
<nav id="menu">
<input type="checkbox" id="toggle-nav"/>
<label id="toggle-nav-label" for="toggle-nav"><i class="icon-reorder"></i></label>
<div class="box">
<ul>
<li><a href="#play"><i class="icon-home"></i> Play</a></li>
<li><a href="#"><i class="icon-file-alt"></i> about</a></li>
<li><a href="#"><i class="icon-copy"></i> XXXXXX</a></li>
<li><a href="#"><i class="icon-envelope"></i> contacts</a></li>
</ul>
</div>

</nav>
</div>



</header>
<!-- end header -->


</div>
</section>
<!-- end content -->

<div class="jumbotron text-center">
<div class="container">

<h1>Das Krankenhuas</h1>
<p style="color:#888;">A game you will never escape</p>

</div>
</div>
<div class="container">

</div>



<div id="h1">
<center>
<h3> About The Game </h3>

</div>





<div id="text">
<center>
<p> "Daz Krankenhaus" is a text based adventure game set in WW2, you have been captured by the enemie and need to find your way out. <br> It is currently in developement, so its not a full game. It is 100% made in Html,Javascript and CSS. </p>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
</div>

<div id="h1">
<center>
<h3> Update log</h3>

</div>

<div id="text">
<center>
<p> Update 1: Where it all started.
<br> <br>
Update 2: Bunker hallways, bug fixes. timer for getting killed. office. important man. uniform. form. kill with gun.
<br> <br>

Update 3: fix search guard and some bugs. Interrgatoin room. </p>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
</div>







<a id="play"></a>
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-6"> <a href="http://www.musaus.no/simen/Krankenhausen/index.html" class="btn btn-sm animated-button thar-one">Play</a> </div>
</div>
</div>
<footer class="jumbotron text-center">
<div class="container">
<p style="color:#888">Copy righted <a href="http://2good4you.no">2good4you</a></p>
</div>
</footer>


</body>

</html>


And here is the css.

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css);
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

body {
font-family: 'Lato', sans-serif;
background: #353535;
color: #FFF;
}
#text {
color: #888;


}

.jumbotron h1 {
color: #353535;
}
/* under play */
footer {
margin-bottom: 0 !important;
margin-top: 80px;
}
footer p {
margin: 0;
padding: 0;
}
span.icon {
margin: 0 5px;
color: #D64541;
}
h2 {
color: #BDC3C7;
text-transform: uppercase;
letter-spacing: 1px;
}
.mrng-60-top {
margin-top: 60px;
}

a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size:14px;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
border-radius: 0;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;

}
a.animated-button.thar-one {
color: white;
cursor: pointer;
display: block;
position: relative;
width: 100%;
margin-left: 170%;
border: 2px solid white;
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
margin-bottom: 0 !important;
margin-top: 80px;


}
a.animated-button.thar-one:hover {
color: white !important;
background-color: black;
text-shadow: none;

}
a.animated-button.thar-one:hover:before {
bottom: 0%;
top: auto;
height: 100%;
margin: 0 auto;
}
a.animated-button.thar-one:before {
display: white;
position: absolute;
left: 0px;
top: 0px;
height: 0px;
width: 100%;
z-index: -1;
content: '';
color: black !important;
background: black;
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;

}

@import url('http://fonts.googleapis.com/css?family=Merriweather+Sans:700,300');
@import url('http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css');

* { padding: 0px; margin: 0px; border: 0px; outline: 0px; } /* fast reset */

body {
font-family: 'Merriweather Sans', Arial, sans-serif;
font-size: 12px;
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }

li { list-style: none; }

.something { margin: 0px 20% 0px 20%; }

#head { margin-top: 20px; }

#menu .box {
position: fixed;
text-align: center;
overflow: hidden;
z-index: -1;
opacity: 0;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
background: rgba(0,0,0,0.8);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;

}

#menu ul {
position: relative;
top: 20%;
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

#menu li {
display: inline-block;
margin: 20px;
}

#menu li a {
border-radius: 3px;
padding: 15px;
border: 1px solid transparent;
text-decoration: none;
font-size: 18px;
color: #fff;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

#menu li a:hover { border-color: #fff; }

#menu li a i {
margin-right: 5px;
font-size: 24px;
}
/* Box */
#toggle-nav-label {
color: rgba(0,0,0,0.5);
background: white;
text-align: center;
line-height: 30px;
font-size: 16px;
display: block;
cursor: pointer;
position: relative;
z-index: 500;
width: 30px;
height: 30px;
border-radius: 10px;
}

#toggle-nav { display: none; }

#toggle-nav:checked ~ .box {
opacity: 1;
z-index: 400;
}

#toggle-nav:checked ~ .box ul {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}

#toggle-nav:checked ~ #toggle-nav-label {
background: #fff;
color: rgba(0,0,0,0.8);
}

#content { margin: 20px 0px 20px 0px; }

#content h1 {
margin-bottom: 20px;
font-size: 30px;
}

#content p {
font-size: 14px;
line-height: 150%;
margin-bottom: 20px;
}


Thank you!

Answer

You have your styling for that menu overlay tied to the checkbox's checked property in the css. So when you click the checkbox, it changes some properties on the menu (z-index and opacity) to show it. In order for it to fall back to the default state of not showing the menu, you have to have that checkbox unchecked (if you want to use your css as-is). To do this, you can use Javascript. I used jQuery in the snippet below to set the checked property of your checkbox to false whenever you click on a link inside the menu, and magically your menu goes away! cheers!

(I should add that this solution would require jQuery 1.6 or newer. That's when prop was introduced. If that's an issue, there is great write up by user @Xian on modifying the checked property in different ways here: Setting "checked" for a checkbox with jQuery? )

$(function() {
    $(".box a").on("click",function() {
	    $("#toggle-nav").prop('checked', false)
    });
});
@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css);

body {
    font-family: 'Lato', sans-serif;
    background: #353535;
    color: #FFF;
}
#text {
color: #888;


}

.jumbotron h1 {
    color: #353535;
}
/* under play */
footer {
  margin-bottom: 0 !important;
  margin-top: 80px;
}
footer p {
  margin: 0;
  padding: 0;
}
span.icon {
    margin: 0 5px;
    color: #D64541;
}
h2 {
    color: #BDC3C7;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.mrng-60-top {
    margin-top: 60px;
}

a.animated-button:link, a.animated-button:visited {
    position: relative;
    display: block;
    margin: 30px auto 0;
    padding: 14px 15px;
    color: #fff;
    font-size:14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    overflow: hidden;
    letter-spacing: .08em;
    border-radius: 0;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;

}
a.animated-button.thar-one {
    color: white;
    cursor: pointer;
    display: block;
    position: relative;
    width: 100%;
    margin-left: 170%;
    border: 2px solid white;
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
     margin-bottom: 0 !important;
  margin-top: 80px;


}
a.animated-button.thar-one:hover {
    color: white !important;
    background-color: black;
    text-shadow: none;

}
a.animated-button.thar-one:hover:before {
    bottom: 0%;
    top: auto;
    height: 100%;
    margin: 0 auto;
}
a.animated-button.thar-one:before {
    display: white;
    position: absolute;
    left: 0px;
    top: 0px;
    height: 0px;
    width: 100%;
    z-index: -1;
    content: '';
    color: black !important;
    background: black;
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;

}

  @import url('http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css');

  * { padding: 0px; margin: 0px; border: 0px; outline: 0px; }       /* fast reset */

  body { 
    font-family: 'Merriweather Sans', Arial, sans-serif;
    font-size: 12px; 
  }

  a { text-decoration: none; }
  a:hover { text-decoration: underline; }

  li { list-style: none; }

  .something { margin: 0px 20% 0px 20%; }

  #head { margin-top: 20px; }

  #menu .box {
    position: fixed;
    text-align: center;
    overflow: hidden;
    z-index: -1;
    opacity: 0;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background: rgba(0,0,0,0.8);
    -webkit-transition: all 0.3s ease-in-out; 
    -moz-transition: all 0.3s ease-in-out; 
    -o-transition: all 0.3s ease-in-out; 
    transition: all 0.3s ease-in-out;

  }

  #menu ul {
    position: relative;
    top: 20%;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
    -webkit-transition: all 0.3s ease-in-out; 
    -moz-transition: all 0.3s ease-in-out; 
    -o-transition: all 0.3s ease-in-out; 
    transition: all 0.3s ease-in-out;
  }

  #menu li { 
    display: inline-block; 
    margin: 20px;
  }

  #menu li a {
    border-radius: 3px;
    padding: 15px;
    border: 1px solid transparent;
    text-decoration: none;
    font-size: 18px;
    color: #fff;
    -webkit-transition: all 0.2s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out;
  }

  #menu li a:hover { border-color: #fff; }

  #menu li a i { 
    margin-right: 5px; 
    font-size: 24px;
  }
/* Box */
  #toggle-nav-label {
    color: rgba(0,0,0,0.5);
    background: white;
    text-align: center;
    line-height: 30px;
    font-size: 16px;
    display: block;
    cursor: pointer;
    position: relative;
    z-index: 500;
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  #toggle-nav { display: none; }

  #toggle-nav:checked ~ .box { 
    opacity: 1;
    z-index: 400;
  }

  #toggle-nav:checked ~ .box ul {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  #toggle-nav:checked ~ #toggle-nav-label { 
    background: #fff; 
    color: rgba(0,0,0,0.8);
  }

  #content { margin: 20px 0px 20px 0px; }

  #content h1 {
    margin-bottom: 20px;
    font-size: 30px;
  }

  #content p {
    font-size: 14px;
    line-height: 150%;
    margin-bottom: 20px;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section>
  <div>
<!-- start header -->
<header id="head">
  <div class="something">
      <nav id="menu">
        <input type="checkbox" id="toggle-nav"/>
        <label id="toggle-nav-label" for="toggle-nav"><i class="icon-reorder"></i></label>
        <div class="box">
          <ul>
            <li><a href="#play"><i class="icon-home"></i> Play</a></li>
            <li><a href="#"><i class="icon-file-alt"></i> about</a></li>
            <li><a href="#"><i class="icon-copy"></i> XXXXXX</a></li>
            <li><a href="#"><i class="icon-envelope"></i> contacts</a></li>
          </ul>
        </div>

      </nav>
  </div>



  </header>
<!-- end header -->


  </div>
</section>
<!-- end content -->

<div class="jumbotron text-center">
  <div class="container"> 

    <h1>Das Krankenhuas</h1>
    <p style="color:#888;">A game you will never escape</p>

  </div>
</div>
<div class="container"> 

</div>



<div id="h1">
<center>
<h3> About The Game </h3>

</div>





  <div id="text">
<center>
<p> "Daz Krankenhaus" is a text based adventure game set in WW2, you have been captured by the enemie and need to find your way out. <br> It is currently in developement, so its not a full game. It is 100% made in Html,Javascript and CSS.   </p>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
</div>

<div id="h1">
<center>
<h3> Update log</h3>

</div>

  <div id="text">
<center>
<p> Update 1: Where it all started.
<br> <br>
Update 2: Bunker hallways, bug fixes. timer for getting killed. office. important man. uniform. form. kill with gun.
<br> <br>

Update 3: fix search guard and some bugs. Interrgatoin room.    </p>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
</div>







 <a id="play"></a>
  <div class="row">
    <div class="col-md-3 col-sm-3 col-xs-6"> <a href="http://www.musaus.no/simen/Krankenhausen/index.html" class="btn btn-sm animated-button thar-one">Play</a> </div>
  </div>
</div>
  <footer class="jumbotron text-center">
  <div class="container">
    <p style="color:#888">Copy righted <a href="http://2good4you.no">2good4you</a></p>
    </div>
  </footer>