Clicking to open and close a bootstrap hamburger menu on mobile device without JS

Question

I'm hacking away at a small website project, trying use HTML and CSS only for now, and am pretty happy with the desktop version but when testing on my iPhone I can expand the hamburger menu with a click but it will not collapse upon clicking it a second time or clicking outside the screen. It seems relatively easy to solve with jquery but I'm really curious now to see if I can do it without?

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Website</title>
    <!--fonts-->
        <link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
    <!--//fonts-->
        <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <!-- for-mobile-apps -->
    <meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="keywords" content="Personal Website" />
    <!-- //for-mobile-apps -->
</head>
<body>
    <header>
        <a href="index.html" id="logo"></a>
        <nav>
            <a href="#" id="menu-icon"></a>
            <ul>
                <li><a href="#about">ABOUT</a></li>
                <li><a href="#">WORK</a></li>
                <li><a href="#">BLOG</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </nav>
    </header>

CSS:

@media only screen and (max-width : 640px) {

    header {

        position: absolute;

    }

    #menu-icon {

        display:inline-block;

    }

    nav ul, nav:active ul { 

        display: none;
        position: absolute;
        padding: 20px;
        background: #fff;
        border: 5px solid #444;
        right: 20px;
        top: 60px;
        width: 50%;
        border-radius: 4px 0 4px 4px;

    }

    nav li {

        text-align: center;
        width: 100%;
        padding: 10px 0;
        margin: 0;

    }

    nav:hover ul {

        display: block;

    }

score 0 · Answer 1 · answered Mar 02 '17 at 13:13

For without JS or jQuery solution you have to go for input selectors like checkbox to toggle their siblings on its :checked event.

As shown in snippet below.

Code Snippet

ul {
  display: none;
}

input[type="checkbox"]:checked+ul {
  display: block;
}

<header>
  <a href="index.html" id="logo"></a>
  <nav>
    <input id="menu-icon" type="checkbox" />
    <ul>
      <li><a href="#about">ABOUT</a></li>
      <li><a href="#">WORK</a></li>
      <li><a href="#">BLOG</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
  </nav>
</header>

score 0 · Answer 2 · answered Mar 02 '17 at 13:42

This solution doesn't play nice in iOS Safari, but it seems to work everywhere else.

/* The necessities */
.onclick-menu {
 position: relative;
 display: inline-block;
}
.onclick-menu:before {
 content: "Click me!";
}
.onclick-menu:focus {
 pointer-events: none;
}

.onclick-menu:focus .onclick-menu-content {
 opacity: 1;
 visibility: visible;
}

.onclick-menu-content {
 pointer-events: auto;
 position: absolute;
 z-index: 1;

 opacity: 0;
 visibility: hidden;
 transition: visibility 0.5s;
 -moz-transition: visibility 0.5s;
 -webkit-transition: visibility 0.5s;
 -o-transition: visibility 0.5s;
}

.onclick-menu.no-pointer-events {
 pointer-events: auto !important;
}

.onclick-menu.no-visibility .onclick-menu-content {
 visibility: visible !important;
 display: none;
}

.onclick-menu.no-visibility:focus .onclick-menu-content {
 display: block;
}

.onclick-menu.no-opacity .onclick-menu-content {
 opacity: 1 !important;
}

/*
Eye candy 
( colors courtesy of https://kuler.adobe.com/try-color-theme-3350110 )
*/
.onclick-menu {
 padding: 0;
 margin: 0 0 1em 0;
 outline: 0;
}
.onclick-menu:before {
 padding: 5px 10px;
 background-color: #94a4a5;
}
.onclick-menu-content {
 background-color: #364656;
 width: auto;

 margin-top: 19px;
 margin-left: 0;
 padding: 10px;
}

/* arrow for the expanding part */
.onclick-menu-content:before {
 content: "";
 width: 0;
 height: 0;

 border-bottom: 10px solid #364656;
 border-left: 10px solid transparent;
 border-right: 10px solid transparent;

 position: absolute;
 top: -10px;
}

.onclick-menu-content li {
 color: #f2f5e9;
 list-style-type: none;
 white-space: nowrap;
}

/* style the buttons */
.onclick-menu-content button {
 background: transparent;
 border: none;
 color: inherit;
 cursor: inherit;
 outline: 0;
 cursor: pointer;
}
.onclick-menu-content button:hover {
 color: #ff8c31;
}

<div tabindex="0" class="onclick-menu">
    <ul class="onclick-menu-content">
        <li><button onclick="alert('click 1')">Look, mom</button></li>
        <li><button onclick="alert('click 2')">no JavaScript!</button></li>
        <li><button onclick="alert('click 3')">Pretty nice, right?</button></li>
    </ul>
</div>

This was originally posted by Koen Kivits. Here's a link to his website.

Clicking to open and close a bootstrap hamburger menu on mobile device without JS

2 Answers2

Code Snippet