How To Create a Mobile Navigation Menu – Mobile Navigation

w3learnpoint.com
<textarea class="html_box">

  <!DOCTYPE html>
<html lang="en">
<head>
  <title> How To Create a Mobile Navigation Menu - Mobile Navigation </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
  <style type="text/css">
    .mob_navi{  background-color:#000; }
    .mob-logo{   }
    .right-navi span{  float:right; color:#fff; font-size:30px; cursor:pointer; }
   .mob-bg{   display:none;  right: 0px;
    top: 45px; background-color:#dcdcdc; width:250px; position:absolute; z-index:100;  }
   .mob_top_navi{   }
   .mob_top_navi ul{ margin-top:10px; padding-left:10px; }
   .mob_top_navi ul li{     margin-right: 28px; display:inline-block; margin-right:50px; }
   .mob_top_navi ul li i{ color:#000; }
   .mob_top_navi ul li.lang-dropdown{    }
   .mob_top_navi ul li.lang-dropdown select{ border-radius:8px; }
   .mob_top_navi ul li:last-child i{ float:right; cursor:pointer;  }
   .mob_top_navi ul li:last-child{ margin-right:0px; }
   .mob-bg .navi_list{ padding-left:10px; list-style:none;  }
   .mob-bg .navi_list li{  margin-bottom:10px; }
   .mob-bg .navi_list a{     text-transform: uppercase; color:#000; font-size:16px; }
   .drop_menu{  padding-left:10px; list-style:none; display:none;  }
   .drop_menu li{ position:relative; margin-bottom:5px; }
   .mob-bg .navi_list li.has_drop:hover .drop_menu{  display:block; }
   .mob-bg .navi_list li.has_drop i{ margin-left:30px;   }
   .socil_list{  }
   .socil_list ul{  border-top:solid 2px #fff; border-bottom:solid 2px #fff; list-style:none; padding-left:10px; list-style:none; }
   .socil_list ul li{ display:inline-block; }
   .socil_list ul li a{ padding:4px 5px; display:block; }
   .socil_list ul li a i{ background-color:#fff;     width: 30px;
    padding-top: 7px;
    font-size: 18px;
    text-align: center;
    height: 30px;
    border-radius: 50px; }
   .socil_list ul li:nth-child(1) a i{ color:#3e6ca8; }
   .socil_list ul li:nth-child(2) a i{ color:#53afe2; }
   .socil_list ul li:nth-child(3) a i{ color:#e04e03; }
   .socil_list ul li:nth-child(4) a i{ color:#ac5ca1; }
   .socil_list ul li:nth-child(5) a i{ color:#ba0005; }
   .mob-logo h1{ color:#fff;  }
   .mob-logo h1 span{ color:red; }
  </style>
  <script> 
$(document).ready(function(){
  $("#navi").click(function(){
    $(".mob-bg").slideDown("slow");
  });
  $("#close_navi").click(function(){
    $(".mob-bg").slideUp("slow");
  });
});
</script>
</head>
<body>

<nav class="mob_navi">
  <div class="container-fluid">
   <div class="row">
    <div class="col-sm-5 col-9"> 
     <div class="mob-logo">  
       <h1> <span>W3</span>learnpoint.com </h1> 
     </div>
   </div>

    <div class="col-sm-7 col-3"> 
     <div class="right-navi">  
       <span id="navi"> ☰ </span>
       
       <div class="mob-bg">
        <div class="mob_top_navi">
          <ul>
              <li><i class="fa fa-search"></i></li>
              <li class="lang-dropdown"> 
                <select>
                  <option> English </option>
                  <option> Hindi </option>
                  <option> Gujarati </option>
                  <option> Marathi </option>
                  <option> Bengali </option>
                </select>
              </li>
              <li>
                <i id="close_navi" class="fa fa-times"></i>
              </li>
          </ul>
        </div>
          <ul class="navi_list">
           <li> <a href="#"> Home </a></li>
           <li> <a href="#"> Latest News </a></li>
           <li> <a href="#"> WC19 </a></li>
           <li> <a href="#"> IPL12 </a></li>
           <li> <a href="#"> Live Blog </a></li>
           <li> <a href="#"> Photo News </a></li>
           <li class="has_drop"> <a href="#"> Series 
            <i class="fa fa-angle-down"></i> </a>
             <ul class="drop_menu">
                <li> <a href="#"> England tour of West Indies, 2019 </a> 
                </li>
                <li> <a href="#"> Load More Series </a> 
                </li>
             </ul>
           </li>

           <li> <a href="#"> Live Score </a></li>
          </ul>

      <div class="socil_list">
         <ul>
           <li><a href="#"> <i class="fa fa-facebook"></i> </a></li>
           <li><a href="#"> <i class="fa fa-twitter"></i> </a></li>
           <li><a href="#"> <i class="fa fa-google-plus"></i> </a></li>
           <li><a href="#"> <i class="fa fa-instagram"></i> </a></li>
           <li><a href="#"> <i class="fa fa-rss"></i> </a></li>
         </ul>
      </div>

       </div>

     </div>
   </div>

   </div>
  </div>
</nav>
 


</body>
</html>



</textarea>

Leave a Reply

Your email address will not be published. Required fields are marked *