Create a stylish slide-in menu using CSS, triggered by an onclick event. No JavaScript required!

I implemented a hamburger menu that slides in when clicked. However, I'm facing an issue where the slide-in menu disappears after a second. How can I make sure the menu stays visible?

#navigationWrap {
        position: fixed;
        top: 0;
        left: -1000px; /* left: 0; */
        width: 710px;
        height: 100vh;
        background: grey;


*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body{
    background: #FCF7F0;
}

header{
    display: flex;
    width: 90%;
    margin: auto;
    height: 10vh;
}

.navbar{
    flex: 1;
    text-align: left;
    padding-top: 60px;
    color: black;
    cursor: pointer;
}

.close{
    flex: 1;
    /* background: lightsalmon; */
    text-align: right;
    padding-top: 60px;
    color: black;
}

.fa {
    font-size:  68px !important; /*size of fa icons*/
}

.presentation{
    display: flex;
    margin: auto;
}

#navigationWrap {
        position: fixed;
        top: 0;
        left: -1000px; /* left: 0; */
        width: 710px;
        height: 100vh;
        background: grey;
        transition: .5s;
        padding: 20px;
        text-align: center;
        box-sizing: border-box;
        z-index: 10;
}

.navbar:active ~ #navigationWrap {
        left: 0;
        transition: .1s;
}

.close_container{
    display: block;
    text-align: left;
    position: absolute;
    top: 60px;
    left: 60px;
    color: white;
    z-index: 15;
    cursor: pointer;
}

.nav-links{
        justify-content: space-around;
        list-style: none;
        padding: 150px 0px 100px 0px;
}

.nav-link{
        text-decoration: none;
        color: white;
        font-size: 50px; 
        line-height: 80pt;

}
<head>
        <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    </head>
<body>
        <header>
            <div class="navbar" title="menu">
                <i class="fa fa-bars" aria-hidden="true"></i>
            </div>
            <div class="close">
                <i class="fa fa-times" aria-hidden="true"></i>
            </div>

            <div id="navigationWrap" class="navigationWrap">
                <div class="container">
                    <div class="close_container">
                        <i class="fa fa-times" aria-hidden="true"></i>
                    </div>
                   <nav>
                    <ul class="nav-links">
                        <li><a href="#" class="nav-link">Home</a></li>
                        <li><a href="#" class="nav-link">Services</a></li>
                        <li><a href="#" class="nav-link">About</a></li>
                        <li><a href="#" class="nav-link">Contact</a></li>
                    </ul>
                   </nav>
                </div>
             </div>
        </header>
        <main>
            <section class="presentation">
                
            </section>
        </main>
    </body>

        transition: .5s;
        padding: 20px;
        text-align: center;
        box-sizing: border-box;
        z-index: 10;
}

.navbar:active ~ #navigationWrap {
        left: 0;
        transition: .1s;
}

Could someone assist me in resolving this issue? Any help would be greatly appreciated.

htmlcss

Answer №1

To implement a navigation menu with a hamburger button, you can utilize the <input type="checkbox"> element that will expand the menu when checked.

It is important to ensure that the hamburger button is a sibling to the navigation and placed after it for the functionality to work correctly.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* To hide the checkbox */

#hamburger-checkbox {
  display: none;
}


/* Using label instead of directly modifying checkbox */

.hamburger {
  font-size: 30px;
  position: absolute;
  z-index: 99;
}


/* Implementing :checked state to show when checkbox is checked */

#hamburger-checkbox:checked~.nav {
  transition: 2s ease;
  transform: translateX(0px);
}

.nav {
  width: 200px;
  height: 100vh;
  background: orange;
  transform: translateX(-200px);
  transition: 2s ease;
  padding: 40px 10px;
}

.nav a {
  display: block;
  text-align: center;
  padding: 10px;
}
<header>
  <input type="checkbox" id="hamburger-checkbox">
  <label class="hamburger" for="hamburger-checkbox">☰</label>

  <nav class="nav">
   <a href="#">Home</a>
   <a href="#">About</a>
   <a href="#">Contact</a>
   <a href="#">Projects</a>
  </nav>
</header>

In some cases, this process can be complex and time-consuming. It may be more efficient to use JavaScript to toggle classes on the navigation when clicking a button.

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

Issue with submitting forms in modal using Bootstrap

In the model box below, I am using it for login. When I click on either button, the page just reloads itself. Upon checking in Firebug, I found something like this: localhost\index.php?submit=Login <div class="modal fade" id="loginModal" tabindex= ...

javascriptphpjqueryhtmltwitter-bootstrap

What is the best way to allow wider list items to overflow their absolutely positioned container?

My challenge involves a list that is dynamically populated, and I require it to be wider than its absolutely-positioned parent (specifically a custom <select> element implementation). #wrapper { position: relative; border: 1px ...

htmlcssinternet-explorer-11

The button's background color remains the same even after clicking on it

In my exploration of Vue.js, I decided to create a simple project to grasp the concept of class binding. I wanted to add functionality to each button component, so that when a button is clicked, it would change its color or background color to something ot ...

javascripthtmlcssvue.jsbutton

Excess padding in Internet Explorer 7 when a table is nested within a div tag

I have exhausted all potential solutions found on the internet and still cannot seem to solve this issue. Here is an example page that highlights the problem: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/l ...

htmlcssinternet-explorer-7

Maximizing the number of divs arranged horizontally in HTML while utilizing the full line width

My website consists of several fixed-width div elements that are styled to flow inline using the display type inline-block. This layout creates empty space at the end of the line where subsequent div elements cannot be accommodated and have to wrap to the ...

htmlcss

What is the best way to incorporate (+/-) buttons to increase or decrease numbers in this code snippet?

Hey everyone, I hope you're all doing well! I need some assistance in transforming this quantity picker from a dropdown to have buttons like the one shown here with plus and minus symbols: https://i.stack.imgur.com/O0uUa.png I would like to impleme ...

javascripthtmljquerybootstrap-4

ShadCn UI ResizablePanelGroup effortlessly grows within the available area without the need to set a specific height

I'm facing a CSS challenge with the ResizablePanelGroup component. My layout includes a header and a ResizablePanelGroup with 4 panels. The page should take up 100% of the viewport height, and I want other components to be placed within it. Once the H ...

cssnext.jstailwind-cssshadcnui

Instructions for adding a Key every time a user clicks the space Key within an Input field

I built a Movie Search Page with the OMDB API. My current issue is that the API returns an error when searching for a movie with more than one word because the API URL requires a + key between each word. I am looking for a way to automatically add the + ke ...

javascripthtmlapiinput

The CSS design morphs as I adjust the browser size. Despite my limited coding experience of just a few weeks, I've encountered a challenging obstacle

Hi there, I've been searching on W3 and various other sources but haven't found a solution to my problem. I have managed to create the layout I want, however, it starts falling apart when I resize the browser window. I'm relatively new to co ...

htmlcss

Using ngIf in Angular and eliminating components in Angular 6

Currently, I am faced with the challenge of removing the header and footer components in one specific component, but I'm unsure about how to proceed. In my approach, I consider the app component as the index.html component. Whenever I create a new com ...

htmlangular

How can I rename attribute values in a dropdown menu and ensure they work properly?

I'm facing an issue with my code. How can I store the option values in a database when they have numbering like value="1" or value="2"? Can I change it to something like value="1000" and have the other select box change to value="250" when selected? ...

javascriptjqueryhtml

Revamp every single hyperlink that ends in .html

I am looking to customize the URLs on my website to appear like this: www.example.html/1 www.example.html/2 www.example.html/3 instead of their current format: www.example.html/1.html www.example.html/2.html www.example.html/3.html Can anyone provide a ...

htmlapache.htaccessweb

What is the best way to align the logo image to the left side of the Material UI app bar without any gaps?

Currently, I am working on a material UI app bar to serve as my navigation bar. The issue I am encountering involves the logo image on the left side of the page having excessive spacing from the edge, as shown in the image below. I've tried adjusting ...

cssreactjsmaterial-ui

retrieve the Jquery progress bar's current value

Having trouble determining the value of the progress bar in order to increase it by a percentage with each step. No matter what I attempt, I keep getting errors such as 'undefined' or 'method cannot be called before object instantiation.&apo ...

jqueryhtml

Using jQuery to target adjacent elements excluding those that are separated by other text

I have been attempting to locate and combine adjacent em tags within paragraphs, but it has proven to be a more challenging task than I initially anticipated. Let's explore some examples to illustrate this issue: <p><em>Hello</em>&l ...

javascriptjqueryhtmltraversal

Within an HTML document, select one checkbox out of two checkboxes without utilizing JQuery

Is there a way to select only one checkbox out of two? I know it can be done easily using Jquery, but is there a default option in HTML for this as well? I have exactly 2 checkboxes. Thank you. code: <input type="checkbox" value="1" name="foo" /> ...

jquerycsshtmlcheckbox

Unexpected symbols appearing in image tag after AJAX response

I'm currently grappling with an issue related to an AJAX request I am working on (I am quite new to the world of AJAX). I have set up an API and my goal is to fetch a PNG image using an Authorization header that requires a token supplied by me (which ...

javascriptjqueryhtmlcssajax

Strategies for patiently waiting for an object to appear before loading the HTML

After logging into my service, I download data from a REST API, and based on that data, I display certain tabs. However, I am experiencing issues with loading the HTML content once the data has been retrieved. The ngif directive at the beginning of the H ...

htmlangulartypescript

Combine the elements within the HEAD tag into a group

I am currently developing a dynamic page system using AJAX. Whenever a link is clicked, an AJAX call is made to retrieve data from the requested page. However, I have encountered an issue where certain data in the page file needs to be placed within the h ...

javascriptphpjqueryhtmlajax

Press the Concealed Button Enclosed in a div Using Selenium with Python

Currently, I am in the process of automating the login on the Workday portal by utilizing Chrome WebDriver in Selenium. My main challenge lies in figuring out how to click on a hidden sign-in button with the following properties: <div class="css-1s ...

pythonhtmlselenium-webdriverwai-ariahidden-field