1

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></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="#"><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>

</html>

And here is the css.

Thank you!

1 Answers1

3

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>
Community
  • 1
  • 1
Robert Wade
  • 4,918
  • 1
  • 16
  • 35
  • PS.. i had to remove your google font imports in the snippet as they were causing issues with jsfiddle when i was playing with this. – Robert Wade Sep 01 '16 at 19:30
  • if you have not yet included jQuery in your project, you'll need to add the script tag for that, you can use a hosted version or download it and store it locally, if you just want to try and use the hosted version, add this just below your closing body tag: `` and then put the script I added above just below that. – Robert Wade Sep 01 '16 at 19:49