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

Header Ads

How to Mobile Navigation Menu

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

Facebook

Farming Business

Recent

Muri Vaja Machine

বৈশিষ্ট্যযুক্ত পোস্ট

মাল বিক্রি নিয়ে আর কান্নাকাটি করতে হবে না | Buyer Seller Hub From RoyAdvisory | Small Business Ideas

Subscribe Us

Online Business

Tags

Start Up Business

Paper cup Making Machine

Muri Vaja Machine