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

Looking for subsequence in dropdown choices with no assigned values

I need assistance with searching for a specific substring within text that is fetched from options generated by MySQL. How can I retrieve the selected option's text value in order to search for my desired substring? $(document).ready(function() { ...

javascriptphphtml

Leveraging node.js and express for incorporating custom stylesheets and scripts

I recently designed a webpage with the following elements at the beginning: <link href="./css/font-awesome.min.css" rel="stylesheet"> <link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600" rel="stylesheet ...

htmlcssnode.jsexpress

Is there a way to reverse the animation playback in Angular?

I am working on an animation that involves a box fading from its original color to yellow. However, I would like to achieve the opposite effect: when the page loads, I want the box to start off as yellow and then fade back to its original color. The challe ...

javascriptcssangularanimation

I am having trouble aligning the element perfectly in the center

I'm working on a radio input design featuring a circle in the middle, achieved via the pseudo element ::before However, I've noticed that when the input size is an odd number, the centering isn't quite perfect This issue seems more promine ...

htmlcsspseudo-element

The styles are not being successfully applied to the Material UI Menu component within a React application

I recently started working with material-UI. I have a menu component that looks like this: <Menu classes={{ paper: css.paperMenu }} className={classNames({ [css.menuMarginTop]: true })} > .menuMarginTop { margin-top: 14px; } In ...

cssreactjsmaterial-ui

Checking the alignment of a label or element in the center of a webpage using javascript

I am new to JavaScript and was attempting to determine if an element is centered aligned by accessing its CSS properties/values. Can someone help me retrieve the CSS property to verify text alignment using JavaScript? ...

javascriptcsscoded-ui-tests

The unexpected blank space appearing beneath my website as a result of images and videos placed on the

There seems to be some random white space on my website between the main body elements and the footer. Interestingly, removing the cat image and videoplayer eliminates this white space. However, I don't want to remove them completely, so I'm tryi ...

javascripthtmlcss

Transform the styles from a React component into Cascading Style Sheets

I have been tasked with transitioning all the styles from the JavaScript file to the CSS file while ensuring the design remains intact. I am facing an issue where using the CSS styles breaks the search field design. The original design can be seen here: S ...

javascriptcssreactjs

Structured chat interface with unchanging top and bottom sections

I'm currently trying to come up with a way to structure my chatbox so that it has a fixed header at the top and a fixed footer at the bottom, while allowing the chatbox body to scroll within those constraints. I've experimented with various appro ...

htmlcss

Custom AngularJS directive for ensuring the selection of a required HTML element

Today brings another question as I continue working on my web application. I've encountered an issue with the 'required' attribute not being widely supported in major browsers. The attribute only works if the first option value is empty, whi ...

javascriptjqueryhtmlangularjs

Disappearing input field in DateTimePicker Bootstrap when blurred

Currently, I am utilizing the Bootstrap DateTimePicker plugin to enable users to select a specific date and time. The plugin functions well with one minor issue - whenever the user clicks outside or loses focus on the calendar box, both the box itself and ...

javascriptjqueryhtmlcsstwitter-bootstrap

Interested in learning how to code games using JavaScript?

Hi everyone, I'm currently exploring the world of Javascript and have been tasked with completing a game for a class project. The game involves a truck that must catch falling kiwis while only being able to move left or right. A timer is set for two m ...

javascripthtml

Resetting CSS animations using animation-delay

My aim is to animate a series of images on my landing page using Next.js and SCSS. The issue arises when I try to add dynamic animations that reset after each cycle. The delay in the animation causes the reset to also be delayed, which disrupts the flow. I ...

cssanimationnext.jssasscss-animations

The footer refuses to adhere to the bottom of the page

On the Contact Page of our client's website, there seems to be an issue with the footer not sticking to the bottom of the page and hiding the submit button. https://i.stack.imgur.com/txqAS.png We attempted to fix this using CSS, but it either sticks ...

htmlcsswordpresscontact-form-7elementor

Utilize jQuery to dynamically add a CSS class to a button

When using jQuery to create dynamic buttons, is there a way to add a CSS class to the button during creation without needing an extra line of JavaScript to add the class afterwards? Below is a example code snippet: $.each(data, function (index, value) { ...

jqueryhtmlcss

Comparison of HTML's equivalent to LaTeX's label and ef functionality

I have a Frequently Asked Questions page coded in HTML (example) where the questions often refer to one another. This results in the numbering changing whenever we add, delete, or rearrange the questions. LaTeX provides an elegant solution to this problem ...

htmldocumentationlatexdocumentation-generation

What is the best way to open the index.html file in electron?

I'm currently developing a cross-platform app using electron and Angular. As of now, the code I have for loading my index.html file looks like this: exports.window = function window() { this.createWindow = (theBrowserWindow) => { // Create ...

javascripthtmlelectronload

Interact with HTML Radio Buttons to Trigger Input Opening

I need to have a message saying "We're sorry..." and a "black box" displayed only when the radio button is set to YES, otherwise keep it hidden. Can I achieve this using JavaScript only, or is there a way to do it with HTML alone? <h3 >Did you ...

javascripthtmlcssradio-button

Developing a transparent "cutout" within a colored container using CSS in React Native (Layout design for a QR code scanner)

I'm currently utilizing react-native-camera for QR scanning, which is functioning properly. However, I want to implement a white screen with opacity above the camera, with a blank square in the middle to indicate where the user should scan the QR code ...

javascripthtmlcssreactjsreact-native

Press the "Print All" button to instantly print out all of the images in one go

I have successfully implemented a feature where multiple images are displayed as thumbnails from a specified folder. Now, I am looking to add a "Print All" button that will allow users to print all the images in one go. Is it possible to print all images ...

phphtml