How to make menu slide nav with html, CSS and JavaScript

https://youtu.be/gfex0Rjm5Y4

Creating slide menu bar is quite easy...... follow or copy and paste the code on your editor

Body:

<body>
   <div id="mySidenav" class="sidenav">
   <ul>
     <li><a href="JavaScript:void(0)" onclick="closeNav()" id="closebttn">&times</a></li>
     <li><a href="#">Home</a></li>
     <li><a href="#">Service</a></li>
     <li><a href="#">Contact</a></li>
     <li><a href="#">Terms</a></li>
</ul>
</div>
   <span onclick="openNav()">&#9776</span>

</body>

Css:

<style>

* {
  margin:0;
  padding:0;
}
    .sidenav {
      height:100%;
      width:0;
      overflow:hidden;
      position:fixed;
      background-color:red;
      z-index:0;
      transition:0.5s;
}
   ul {
     list-style:none;
}
    .sidenav li a {
       text-decoration:none;
       color:white;
}
   #closebttn {
      position: absolute;
      top:0;
      right:25px;
}
  </style>


JavaScript:

<script>
   function openNav() {
  document.getElementById("mySidenav").style.width="100px";
}
function closeNav() {
  document.getElementById("mySidenav").style.width="0";
}
  </script>


Comments

Post a Comment

Popular posts from this blog

How to Borrow Airtime and Data from Glo: A Step-by-Step Guide in Pidgin English

Image
Oya make we yan, I go show you as you go fit borrow airtime from Glo for times wey you no get credit on top your line. E fit be say you wan call pesin wey important to you or you wan buy data but you no get money. Glo fit give you credit to make your life better. First thing wey you go do na to make sure say your Glo sim card get eligibility to borrow airtime. Make you check if you don dey use the line reach 4 months wey be say e go don qualify for Glo borrow me credit. If you no sabi how long wey you don dey use your Glo sim, just dial #124*1# to check your eligibility status. E go show you whether you don qualify or not. If you don qualify, make you follow these simple steps to borrow airtime from Glo: Step 1: Dial *321# from your Glo line Step 2: Select “Borrow Credit” option from the menu wey go show Step 3: Select the amount of airtime wey you wan borrow. You fit borrow as small as N50 or as big as N5,000 depending on your eligibility status. Step 4: Confirm the amount...
Read more

Fiverr Guide: Fiverr Account creation, How to Create Gigs, Low Competitive & High Demanding Gigs and Prevent Account Disabling

Image
Ah, Fiverr! One of the most popular websites wey people dey use make money online. If you neva hear about Fiverr before, no wahala, I go explain everything wey you need know for this post. What is Fiverr? Fiverr na online platform wey allow people wey sabi different kind work make dem connect with people wey need those services. If you sabi write, design, program, sing or do any kind work, you fit take advantage of Fiverr to make money. Fiverr na one of the easiest ways to make money online, and plenty people don make money from am. How to create Fiverr account To create Fiverr account, e dey simple. Just follow these steps: 1. Go to Fiverr.com for your web browser 2. Click "Join" for the top right corner 3. Enter your email address and click "Continue" 4. Enter your username and password 5. Click "Join" 6. Confirm your email address by clicking the link wey dem send you. Once you don complete these steps, you don get Fiverr account. How to cre...
Read more

250$ Everyday with Rapidworker - How to Hammer with Rapidworker: Make Money Online Eazy Eazy

Image
Make money na one tin wey e dey sweet person heart well well. If you wan sabi how you fit make money with Rapidworker, you go love this tori wey I wan yan you for pidgin English. First, make I yan you wetin be Rapidworker. Rapidworker na online platform wey people fit use to do small-small work wey e no go tay to finish. Na different companies dey use the platform to find people wey go do work for dem wey no dey too plenty. For example, some people fit need person wey go help dem write article wey get like 500 words. Some people fit need person wey go help dem take survey or do small research. If you sabi any of these things, you fit take advantage of Rapidworker to make money. So, how you fit make money with Rapidworker? Step 1: Register First tin wey you go do na to register (www.rapidworker.com). You go need to enter your name, email and create password. You fit use your Facebook or Twitter account sef to register. After you don register, you go receive email wey contain...
Read more