<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="nav-side-menu" id="slide_menu2" style="display:none;"> <div class="brand">Menu</div> <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i> <div class="menu-list"> <ul id="menu-content" class="menu-content collapse out"> <li> <a href="index.php"> <i class="fa fa-dashboard fa-lg"></i> Home </a> </li> <li data-toggle="collapse" data-target="#products" class="collapsed active"> <a href="#"><i class="fa fa-gift fa-lg"></i> Services<span class="arrow"></span></a> </li> <ul class="sub-menu collapse" id="products"> <li class="active"><a href="web-developement.php">Web Development</a></li> <li><a href="web-designing.php">Web Designing</a> </li> <li> <a href="android-developemnt.php">Apps Development</a> </li> <li><a href="crm-erp.php">CRM & ERP</a> </li> <li><a href="digital-marketing.php">Digital Marketing</a> </li> <li><a href="ui-ux.php">UI/UX Design</a> </li> <li><a href="ecommerce-development.php">Ecommerce Development</a></li> </ul> <li data-toggle="collapse" data-target="#service" class="collapsed"> <a href="#"><i class="fa fa-globe fa-lg"></i> Solution <span class="arrow"></span></a> </li> <ul class="sub-menu collapse" id="service"> <li class="active"><a href="http://www.travelbusinessportal.com/">Travel Portal</a></li> <li><a href="school-mangement.php">School Management</a> </li> <li><a href="portal-accounting.php">Accounting</a> </li> </ul> <li data-toggle="collapse" data-target="#service" class="collapsed"> <a href="#"><i class="fa fa-globe fa-lg"></i> Product <span class="arrow"></span></a> </li> <ul class="sub-menu collapse" id="service"> <li><a href="food-order-app.php">Food Delhivery App</a> </li> <li><a href="grocery-shop.php">Grocery Shop</a> </li> <li><a href="portal-recharge.php">Recharge Portal</a> </li> <li><a href="portal-lms.php">Learning Management</a> </li> <li><a href="portal-loan.php">Loan Management</a> </li> <li><a href="portal-health.php">Healthcare Management</a> </li> <li><a href="portal-mlm.php">MLM Software</a> </li> <li><a href="portal-video.php">Video Portal</a> </li> <li><a href="portal-realestate.php">Realestate</a> </li> <li><a href="portal-ola.ph">OLA/Uber Clone</a> </li> </ul> <li data-toggle="collapse" data-target="#about" class="collapsed"> <a href="#"><i class="fa fa-globe fa-lg"></i> Industry<span class="arrow"></span></a> </li> <ul class="sub-menu collapse" id="about"> <li><a href="why-us.php">Why Us</a> </li> <li><a href="our-company.php">Company</a> </li> <li><a href="career.php">Career</a> </li> <li><a href="#">Infrastructure</a> </li> <li><a href="#">Team</a> </li> <li><a href="industry-media.php">Media</a> </li> </ul> <li data-toggle="collapse" data-target="#about" class="collapsed"> <a href="#"><i class="fa fa-globe fa-lg"></i> About Us <span class="arrow"></span></a> </li> <ul class="sub-menu collapse" id="about"> <li><a href="why-us.php">Why Us</a> </li> <li><a href="our-company.php">Company</a> </li> <li><a href="career.php">Career</a> </li> <li><a href="#">Infrastructure</a> </li> <li><a href="#">Team</a> </li> <li><a href="#">Our Case Study</a> </li> </ul> <!-- <li> <a href="about.php"> <i class="fa fa-user fa-lg"></i> About Us </a> </li>--> <!-- vb <li> <a href="our-company.php"> <i class="fa fa-user fa-lg"></i> Company </a> </li> --> <li> <a href="contact.php"> <i class="fa fa-users fa-lg"></i> Contact us </a> </li> </ul> </div> <ul class="list-unstyled list-inline social text-center"> <li class="list-inline-item"><a href="#"><i class="fab fa-facebook-f"></i></a></li> <li class="list-inline-item"><a href=""><i class="fab fa-whatsapp"></i></a></li> <li class="list-inline-item"><a href=""><i class="fab fa-twitter"></i></a></li> <li class="list-inline-item"><a href=""><i class="fab fa-skype"></i></a></li> <li class="list-inline-item"><a href="" target="_blank"><i class="fa fa-envelope"></i></a></li> </ul> </div>

/*===menu for side menu mobile=*/ .menu_button{ position:fixed; bottom:0; left:0; } .nav-side-menu { overflow: auto; font-family: verdana; font-size: 12px; font-weight: 200; background-color: #2e353d; position: fixed; bottom: -1px; width: 200px; height: 100%; color: #e1ffff; z-index: 999; } .nav-side-menu .brand { background-color: #23282e; line-height: 50px; display: block; text-align: center; font-size: 14px; } .nav-side-menu .toggle-btn { display: none; } .nav-side-menu ul, .nav-side-menu li { list-style: none; padding: 0px; margin: 0px; line-height: 35px; cursor: pointer; } .nav-side-menu ul :not(collapsed) .arrow:before, .nav-side-menu li :not(collapsed) .arrow:before { font-family: FontAwesome; content: "\f101"; display: inline-block; padding-left: 10px; padding-right: 10px; vertical-align: middle; float: right; } .nav-side-menu ul .active, .nav-side-menu li .active { border-left: 3px solid #d19b3d; background-color: #4f5b69; } .nav-side-menu ul .sub-menu li.active, .nav-side-menu li .sub-menu li.active { color: #d19b3d; } .nav-side-menu ul .sub-menu li.active a, .nav-side-menu li .sub-menu li.active a { color: #d19b3d; } .nav-side-menu ul .sub-menu li, .nav-side-menu li .sub-menu li { background-color: #181c20; border: none; line-height: 28px; border-bottom: 1px solid #23282e; margin-left: 0px; } .nav-side-menu ul .sub-menu li:hover, .nav-side-menu li .sub-menu li:hover { background-color: #020203; } .nav-side-menu ul .sub-menu li:before, .nav-side-menu li .sub-menu li:before { font-family: FontAwesome; content: "\f078"; display: inline-block; padding-left: 10px; padding-right: 10px; vertical-align: middle; } .nav-side-menu li { padding-left: 0px; border-left: 3px solid #2e353d; border-bottom: 1px solid #23282e; } .nav-side-menu li a { text-decoration: none; color: #e1ffff; } .nav-side-menu li a i { padding-left: 10px; width: 20px; padding-right: 20px; } .nav-side-menu li:hover { border-left: 3px solid #d19b3d; background-color: #4f5b69; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } @media (max-width: 654px) { .nav-side-menu .menu-list .menu-content { display: block; } } /*===end menu for side menu mobile=*/