How do you convert a mobile responsive vertical stack menu to a hamburger style responsive menu?

Question

So I created a navigation menu for a website and it is mobile responsive(CSS Only). However when in responsive mode it converts the menu vertically which is good. I still want the menu to be vertically stacked, however I want it hamburger style for professional reasons. How do I change my responsive menu to be hamburger style? I would like for it to be built with CSS only as well.

I found one example of hamburger style that uses javascript, is it possible to do this with CSS only?

Here is the current responsive menu:

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0 charset = "UTF-8>
<title>Responsive Menu</title>
<style>
nav {
  list-style-type: none;
  margin-left: -9px;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

nav a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size:x-large;
  float:left;
  padding-bottom:10px
}

nav a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}


@media screen and (max-width: 700px) {
  nav a {
    text-align: center;
    float: none;
  }
}




img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>

<nav>

  <a class="navbar-brand" href="/">
    <img src= "logo.png" width="60px" height="50px" class="center" >
    </a>

  <a  href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#example">example</a>
  <a href="#example">example2</a>
  <a href="#example">example</a>

  <a style="float:right" href="#form">Form</a>
  <a style="float:right" href="#registration">Registration</a>
</nav>





</body>
</html>

And here is a hamburger example that I want my responsive version to look like but I am not sure how to convert:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}

.mobile-container {
  max-width: 480px;
  margin: auto;
  background-color: #555;
  height: 500px;
  color: white;
  border-radius: 10px;
}

.topnav {
  overflow: hidden;
  background-color: #333;
  position: relative;
}

.topnav #myLinks {
  display: none;
}

.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #4CAF50;
  color: white;
}
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>

<!-- Simulate a smartphone / tablet -->
<div class="mobile-container">

<!-- Top Navigation Menu -->
<nav class="topnav">
  <a href="#home" ><img src="logo.png" width="60px" height="40px class="center"></a>
  <section id="myLinks">
    <a href="#home">Home</a>
    <a href="#news">News</a>
    <a href="#example">example</a>

  </section>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</nav>

<main style="padding-left:16px">
  <h3>Vertical Mobile Navbar</h3>
  <p>This example demonstrates how a navigation menu on a mobile/smart phone could look like.</p>
  <p>Click on the hamburger menu (three bars) in the top right corner, to toggle the menu.</p>
</main>

<!-- End smartphone / tablet look -->
</div>

<script>
function myFunction() {
  var x = document.getElementById("myLinks");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}
</script>

</body>
</html>

Answer 1

try this

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>


<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Something</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Something</a>
      </li>
    </ul>
  </div>
</nav>

How do you convert a mobile responsive vertical stack menu to a hamburger style responsive menu?

Question

1 answers

solution1
0

How do you convert a mobile responsive vertical stack menu to a hamburger style responsive menu?

Question

1 answers

solution1 0

solution1
0