How To Create a Mobile Navigation Menu – Mobile Navigation

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