How to Mobile Navigation Menu

byChiranjit Roy •১২:৫৯ PM

0

How to Create Navigation Menu Bar on Your Blog or Website with Mobile Friendly

Now a days internet users from mobile or smart phone is too much in vogue , so it's too necessary to make a website with mobile friendly. So you have to create a blog or website which easily to access from any types of mobile or smartphone. But question is "How to Create this types of Websites or Blog". This is too simple just follow this steep below :

After Select a theme click on HTML/Java Script to install HTML/Java Script code

You may watch a video how to create a blog easily

Paste this code as HTML/Java Script Code

<!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;
}
</style>
</head>
<body>

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

<!-- Top Navigation Menu -->
<div class="topnav">
  <a href="#home" class="active">Your Website Name</a>
  <div id="myLinks">
    <a href="#Link">MENU1</a>
    <a href="#LINK">MENU2</a>
    <a href="#LINK">MENU3</a>
    <a href="#Link">Contact Us</a>
    <a href="#Link">About Us</a>
  </div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>
<div style="padding-left:16px">

<!-- 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>

Look like this this type