Hide the overlay fullscreen menu upon clicking an anchor link

I'm having trouble with Javascript, but some of you might find this easy. I found a fullscreen overlay menu on Codepen and I'm trying to figure out how to close it when clicking an anchor link.

Looking for assistance with adding javascript to close the overlay fullscreen menu:

@import "http://webfonts.ru/import/notcourier.css";
body {
  background: url('http://cs625217.vk.me/v625217712/1a11c/0QgZ5V0MWEo.jpg');
}

.lower {
  width: 340px;
  margin: 10% auto;
  padding: 50px;
  background: white;
  opacity: 0.8;
  color: black;
  box-shadow: inset 0 0 0 1px black;
  border: 30px solid white;
}

lower:hover {
  background: black;
  color: white;
  box-shadow: inset 0 0 0 1px white;
  border: 30px solid black;
}

input {
  display: none;
}

.lower label {
  font-family: 'NotCourierSans';
  text-transform: uppercase;
  font-size: 40px;
  text-align: center;
}

.lower label:hover {
  cursor: pointer;
}

.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.9);
}

.overlay label {
  width: 58px;
  height: 58px;
  position: absolute;
  right: 20px;
  top: 20px;
  background: url('https://tympanus.net/Development/FullscreenOverlayStyles/img/cross.png');
  z-index: 100;
  cursor: pointer;
}

overlay nav {
  text-align: center;
  position: relative;
  top: 50%;
  height: 60%;
  font-size: 54px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  height: 100%;
  position: relative;
}

overlay ul li {
  display: block;
  height: 20%;
  height: calc(100% / 5);
  min-height: 54px;
}

overlay ul li a {
  font-weight: 300;
  display: block;
  color: white;
  text-decoration: none;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
  font-family: 'NotCourierSans';
  text-transform: uppercase;
}

overlay ul li a:hover,
overlay ul li a:focus {
  color: #849368;
}

.lower~.overlay-hugeinc {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
  transition: opacity 0.5s, visibility 0s 0.5s;
}

#op:checked~.overlay-hugeinc {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

.overlay-hugeinc nav {
  -moz-perspective: 300px;
}

overlay-hugeinc nav ul {
  opacity: 0.4;
-webkit-transform: translateY(-25%) rotateX(35deg);
transform: translateY(-25%) rotateX(35deg);
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
transition: transform 0.5s, opacity 0.5s;
}

#op:checked~.overlay-hugeinc nav ul {
opacity: 1;
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}

#op:not(:checked)~.overlay-hugeinc nav ul {
-webkit-transform: translateY(25%) rotateX(-35deg);
transform: translateY(25%) rotateX(-35deg);
}
<input type="checkbox" id="op"></input>
<div class="lower">
  <label for="op">click the text</label>
</div>
<div class="overlay overlay-hugeinc">
  <label for="op"></label>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</div>

Would appreciate any help or guidance on closing the overlay fullscreen menu using JavaScript.

Answer №1

$( ".target" ).click(function() {
  $("#op").prop('checked', false);
});
body {
  background: url('http://cs625217.vk.me/v625217712/1a11c/0QgZ5V0MWEo.jpg');
}

.lower {
  width: 340px;
  margin: 10% auto;
  padding: 50px;
  background: white;
  opacity: 0.8;
  color: black;
  box-shadow: inset 0 0 0 1px black;
  border: 30px solid white;
}

.lower:hover {
  background: black;
  color: white;
  box-shadow: inset 0 0 0 1px white;
  border: 30px solid black;
}

input {
  display: none;
}

.lower label {
  font-family: 'NotCourierSans';
  text-transform: uppercase;
  font-size: 40px;
  text-align: center;
}

.lower label:hover {
  cursor: pointer;
}

.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.9);
}

.overlay label {
  width: 58px;
  height: 58px;
  position: absolute;
  right: 20px;
  top: 20px;
  background: url('https://tympanus.net/Development/FullscreenOverlayStyles/img/cross.png');
  z-index: 100;
  cursor: pointer;
}

.overlay nav {
  text-align: center;
  position: relative;
  top: 50%;
  height: 60%;
  font-size: 54px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  height: 100%;
  position: relative;
}

.overlay ul li {
  display: block;
  height: 20%;
  height: calc(100% / 5);
  min-height: 54px;
}

.overlay ul li a {
  font-weight: 300;
  display: block;
  color: white;
  text-decoration: none;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
  font-family: 'NotCourierSans';
  text-transform: uppercase;
}

.overlay ul li a:hover,
.overlay ul li a:focus {
  color: #849368;
}

.lower~.overlay-hugeinc {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
  transition: opacity 0.5s, visibility 0s 0.5s;
}

#op:checked~.overlay-hugeinc {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

.overlay-hugeinc nav {
  -moz-perspective: 300px;
}

.overlay-hugeinc nav ul {
  opacity: 0.4;
  -webkit-transform: translateY(-25%) rotateX(35deg);
  transform: translateY(-25%) rotateX(35deg);
  -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
  transition: transform 0.5s, opacity 0.5s;
}

#op:checked~.overlay-hugeinc nav ul {
  opacity: 1;
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
}

#op:not(:checked)~.overlay-hugeinc nav ul {
  -webkit-transform: translateY(25%) rotateX(-35deg);
  transform: translateY(25%) rotateX(-35deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="op"></input>
<div class="lower">
  <label for="op">click the text</label>
</div>
<div class="overlay overlay-hugeinc">
  <label for="op"></label>
  <nav>
    <ul>
      <li><a class="target" href="#">Home</a></li>
      <li><a class="target" href="#">About</a></li>
      <li><a class="target" href="#">Work</a></li>
      <li><a class="target" href="#">Clients</a></li>
      <li><a class="target" href="#">Contact</a></li>
    </ul>
  </nav>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

adjusting dimensions of swf file within html code

I am trying to insert a small speaker icon from the following url: . However, when the flash is loaded, the dimensions of the swf file exceed those specified in the html tag. How can this issue be resolved? <div style="display: inline;float:center;"& ...

To display the user's input value in the console log upon clicking

Having trouble displaying the user's input value in the console when the button is clicked. function submit(){ var userInput = document.getElementById('input_text').value; console.log(userInput); } ...

Is it necessary to implement the useCallback hook along with React.memo for rendering optimization in React components?

As I delved into understanding how useCallback and useMemo function in React to optimize app performance, I decided to create a simple app for experimentation. What I observed was that the callback function (OnBlurHandler) passed to my child component trig ...

What is the optimal method for invoking a Javascript function via a hyperlink?

I'm looking to include links on my website that will activate a javascript function when clicked, and I do not want these links to be underlined. Additionally, I want the cursor to change to a standard pointer. What is the most effective way to achiev ...

ReactJS creating trouble with incorporation of CSS in Table

I've noticed some strange behavior with the alignment of my table data. It seems to be all over the place. How can I fix this issue? Is there a way to specify column widths and ensure the text starts from the same position? Take a look at the table b ...

Looking to extract latitude and longitude data using an Autocomplete Address Form

I am currently attempting to utilize Google Maps autocomplete feature in order to save latitude and longitude. Unfortunately, I am encountering difficulties in making this functionality work as intended. Given that I am unfamiliar with the Google Maps API, ...

Building relational meteor databases for hierarchical structures

Hey there, I'm diving into the world of Meteor and Mongo and I've got some basic questions on designing databases. Imagine I'm creating a turn-based strategy game similar to Advance Wars. I'm stuck on how to structure my data efficient ...

menu with dropdown options within dropdown options

I am experiencing an issue with creating a nested menu within my navigation header. Specifically, under the "Reports" section, I want to have two submenu items named "Global Shop" and "Ndustrios". When hovering over either of these submenus, additional men ...

JavaScript issue causing unexpected behavior in top and left positions

I've been experiencing an issue with my JavaScript code on an HTML file. Despite changing the top or left values, the image does not move as expected. I've spent hours searching for a solution and even tried copying tons of different code snippet ...

Is it possible to eliminate a style that was applied using the .css() method?

Currently, I am using jQuery to modify the CSS and would like to know how to remove the styling that is being applied based on the input value provided: If the color is not '000000', then change the background-color of the body element to the sp ...

Tips for displaying a prompt in the browser window using a blob response from the server

I am facing an issue with the exportChallenges button on a kendo grid in my web application. The button is supposed to export grid data to excel by using an AngularJs factory. However, when I receive the rest service response as a Blob from the server side ...

What are the steps to switch the dropdown values?

I am facing an issue with swapping values in two dropdowns. The scenario is that I have a dropdown with minimal values and another one with maximum values. If a value selected in the first dropdown is greater than the value in the second dropdown, they nee ...

What steps can be taken to create a curved bottom for the header section?

While I've seen this question asked before, I'm not satisfied with how the design has been implemented. Here is my desired look for the curved header I've experimented with border radius left and right, but the edges are excessively rounde ...

The issue with the CSS combination of :after and :hover:after across different HTML elements

Encountering an issue while attempting to create a rollover effect using CSS :after and :hover pseudo-elements. Check out the clock and facebook icons on the right side by visiting: See below for the CSS code: .icon { background: url('. ...

Is it possible to have a div automatically scroll when hovered over, while also hiding the scroll bar specifically for that div?

Is there a way to autoscroll a specific element onmouseover or via an image map while also hiding the scrollbars for that div? I seem to be struggling with this task despite weeks of learning javascript and not being able to find the right solution online. ...

Using a combination of radio buttons and JavaScript to adjust the color of a div element

Currently, I am experimenting with radio buttons to modify the background color of my div tag. My goal is to incorporate more than one condition. For example, if button A and button B are both clicked, then change the color to green. This is what I have im ...

Navigating to JSON input in Express correctly

I have successfully created a basic Express-based API to serve JSON data, but now I want to enhance its functionality. The JSON file follows this structure: (some sections are excluded) [{ "ID": "1", "NAME": "George Washington", "PAGE": "http://en.w ...

Having trouble displaying the API response data on the screen in Next.js

I am currently experiencing an issue with my OCR API that is supposed to return text from a given image. The data is being received on the client side and can be seen in the console. However, for some reason, the element is not updating with the data. Bel ...

Ajax polling ceases the polling process when an internet connection is lost

My current setup involves a continuous ajax polling cycle where messages are pulled, processed, a wait period occurs, and then the process is repeated. Everything runs smoothly until a user disconnects from the internet, whether it be due to a simple actio ...

Creating a Dropdown Selection Menu Dynamically with jQuery and SQL Query结果

I have a website that provides information from a database based on user-set parameters. Currently, the SQL Statement is loaded from a file to populate a dropdown menu with options. The HTML code used for this process is displayed below: while($rec = $con ...