Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"gull-pro"
Bootstrap 4.0.0 Snippet by
gullgate
4.0.0
jQuery
Preview
HTML
CSS
JS
View Full Screen
Fork
Fork this
727
0 Fav
Post to Facebook
Tweet this
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <html lang="en-US"><head> <!-- Header Base --> <meta charset="utf-8"> <title>Shop Menu - Multi Purpose ecommerce Navigation</title> <meta name="description" content=""> <meta name="author" content=""> <!-- Viewport Meta-Tag --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <!-- Stylesheets --> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/font-awesome.min.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/responsive.css"> <body> <!-- .main-header --> <nav class="navigation"> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-4 col-xs-3"> <div class="mainmenu"> <a href="#" class="menu-trigger"> <i class="dyna fa fa-bars"></i> <span>Categories</span> <i class="fa fa-caret-down"></i> </a> <!-- .menu-trigger --> </div> <!-- .mainenu --> </div> </div> <!-- .row --> </div> <!-- .container --> <div class="menu-wrapper" style="display: none;"> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="menu-box"> <div class="title"> <img src="images/women.png" alt="icon"> Womens Dresses </div> <!-- .title --> <ul class="linklist"> <li><a href="#">Mobile</a></li> <li><a href="#">Tablets</a></li> <li><a href="#">Computer</a></li> <li><a href="#">Pen drives</a></li> <li><a href="#">Headphones</a></li> <li><a href="#">Tablets</a></li> <li><a href="#">Computer</a></li> <li><a href="#">Pen drives</a></li> <li><a href="#">Headphones</a></li> <li><a href="#" class="alt"><strong>View All »</strong></a></li> </ul> <!-- .linklist --> </div> <!-- .menu-box --> </div> <div class="col-md-3 col-sm-6"> <div class="menu-box"> <div class="title"> <img src="images/men.png" alt="icon"> Mens fashion </div> <!-- .title --> <ul class="linklist"> <li><a href="#"> Gift & Lifestyle Gadgets </a></li> <li><a href="#">Gift for Men </a></li> <li><a href="#">Gift for Women </a></li> <li><a href="#">Golf Supplies </a></li> <li><a href="#">Golf Supplies </a></li> <li><a href="#">Latest Jorgious Dressess </a></li> <li><a href="#">Leather Material </a></li> <li><a href="#">Gift for Men </a></li> <li><a href="#">Gift for Women </a></li> <li><a href="#" class="alt"><strong>View All »</strong></a></li> </ul> <!-- .linklist --> </div> <!-- .menu-box --> </div> <div class="col-md-3 col-sm-6"> <div class="menu-box"> <div class="title"> <img src="images/kid.png" alt="icon"> Kids fashion </div> <!-- .title --> <ul class="linklist"> <li><a href="#"> Salon & Spa Equipment </a></li> <li><a href="#">Shaving & Hair Removal </a></li> <li><a href="#">Lighter & Cigar Supplies </a></li> <li><a href="#">RC Cars & PartsGift </a></li> <li><a href="#">Lifestyle Gadgets </a></li> <li><a href="#">Gift for Men </a></li> <li><a href="#">Gift for Women </a></li> <li><a href="#">Shaving & Hair Removal </a></li> <li><a href="#">Lighter & Cigar Supplies </a></li> <li><a href="#" class="alt"><strong>View All »</strong></a></li> </ul> <!-- .linklist --> </div> <!-- .menu-box --> </div> <div class="col-md-3 col-sm-6"> <div class="menu-box"> <div class="title"> <img src="images/gift.png" alt="icon">Gift items </div> <!-- .title --> <ul class="linklist"> <li><a href="#"> Salon & Spa Equipment </a></li> <li><a href="#">Shaving & Hair Removal </a></li> <li><a href="#">Lighter & Cigar Supplies </a></li> <li><a href="#">RC Cars & PartsGift </a></li> <li><a href="#">Lifestyle Gadgets </a></li> <li><a href="#">Gift for Men </a></li> <li><a href="#">Gift for Women </a></li> <li><a href="#">Shaving & Hair Removal </a></li> <li><a href="#">Lighter & Cigar Supplies </a></li> <li><a href="#" class="alt"><strong>View All »</strong></a></li> </ul> <!-- .linklist --> </div> <!-- .menu-box --> </div> <div class="col-md-6 col-sm-12"> <div class="menu-box"> <div class="menu_horizontal_banner"> <img src="images/horizontal-banner-1.png" alt="banner"> </div> <!-- .banner --> </div> <!-- .menu-box --> </div> <div class="col-md-6 col-sm-12"> <div class="menu-box"> <div class="menu_horizontal_banner"> <img src="images/horizontal-banner-2.png" alt="banner"> </div> <!-- .banner --> </div> <!-- .menu-box --> </div> </div> <!-- .row --> </div> </div> <!-- .menu-container --> </nav> <!-- .navigation --> <div class="container-fluid"> <div class="content"> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.3/owl.carousel.js"></script> </body></html>
/* ------------------------------------ Navigation ------------------------------------ */ .navigation { background: #272727; } .mainmenu {} .menu-trigger { display: block; color: #fff; background: #101e6d;; line-height: 55px; font-size: 18px; text-align: center; text-transform: uppercase; transition: all 0.3s; } .menu-trigger span { display: inline-block; margin: 0 5px; } .menu-trigger:hover , .menu-trigger:focus { color: #fff; background: #1f4f50;; text-decoration: none; } .menu-wrapper { display: none; position: absolute; background: #FFFFFF; padding: 20px; width: 100%; z-index: 999; } .menu-wrapper .close-menu { display: block; margin: 0 auto; width: 50px; height: 50px; line-height: 50px; background: #fff; font-size: 30px; text-align: center; cursor: pointer; border: 2px solid #e8e8e8; } .menu-wrapper .close-menu .fa { position: relative; bottom: 4px; } .menu-box { margin: 0 auto; } .menu-box .title { padding: 10px 0 3px 0; border-bottom:#bebebe solid 1px; font-size: 16px; font-weight: normal; color:#272727; text-transform:uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu-box .title img { max-height: 22px; margin-right: 5px; position: relative; bottom: 2px; } .menu-box .linklist { background: #fff; margin: 0; padding:20px 0; list-style: none; height: auto; } .menu-box .linklist li { list-style:circle inside ; } .menu-box .linklist a { display: block; font-size: 12px; padding: 5px 0; border-bottom: 1px dotted #ece6e6; color: #6a6a6a; } .menu-box .linklist a:hover { color: #ed3635; } .menu-box .linklist li:last-child a { border-bottom: 0; color: #F51919; } .menu-box .menu_verticle_banner { padding:10px 0 0 0;} .menu-box .menu_horizontal_banner { padding:10px 0 0 0;} /*Responsiv*/ /* ------------------------------------ Media Queries (Desktop First) ------------------------------------ */ @media only screen and ( max-width: 1200px ) { } @media only screen and ( max-width: 992px ) { .menu-trigger { line-height: 35px; font-size: 16px; margin-top: 10px; } .cart-link { text-align: center; padding: 12px 0; line-height: 1; } .cart-link > a { font-size: 0; } .cart-link > a .fa { font-size: 18px; } .cart-box::before { right: 40px; } .tag-cloud { text-align: center; font-size: 0; } .tag-cloud li { float: none; display: inline-block; font-size: 15px; } .user-links-toggler { display: block; margin-top: -55px; } .user-links { display: none; } .user-links.mobile { border-top: 1px solid #bebebe; text-align: left; } .user-links.mobile .secondary-menu a { display: block; padding: 15px 0px; margin: 0; border-bottom: 1px solid #ececec; } .user-links.mobile .account-links a { display: block; padding: 15px 0; border-bottom: 1px solid #ececec; } .user-links.mobile .social-links { padding: 15px 0; } } @media only screen and ( max-width: 767px ) { .main-header { padding: 15px 0 0; } .logo { padding: 15px 0; line-height: 1; border-bottom: 1px solid #efefef; } .menu-trigger span, .menu-trigger .fa-caret-down { display: none; } .user-links { padding: 15px 0; text-align: center; line-height: 1; } .user-links .social-links { margin-bottom: 15px; float: none; } .user-links .social-links a { margin: 0 5px; } .user-links .account-links { float: none; } .user-links .account-links a { margin: 0 10px; } .cart-link { text-align: center; } .cart-link > a { white-space: nowrap; } .cart-box::before { right: 10%; } /*.menu-wrapper { position: fixed; width: 100%; top: 0; left: 0; height: 100%; overflow: auto; background: rgba(236,236,236,1); }*/ .menu-box .linklist { height: auto; } .menu-box .linklist a { padding: 10px 20px; } .tag-cloud li { margin: 0 8px 8px 0; } .tag-cloud a { padding: 5px 10px; font-size: 13px; } .user-links-toggler { margin-top: -50px; } } @media only screen and ( max-width: 640px ) { .cart-box::before { right: 6%; } } @media only screen and ( max-width: 480px ) { .logo { text-align: left; } .logo img { max-width: 210px; } .searchbar .input { width: 80%; } .searchbar .button { width: 20%; } .cart-box::before { right: 1%; } } @media only screen and ( max-width: 320px ) {
$(document).ready(function(){ /* billboard slider */ $('.billboard .slider').owlCarousel({ 'autoPlay' : true, 'singleItem' : true, }); /* mainmenu */ $('.menu-trigger').click(function(){ $('.menu-wrapper').slideToggle(500); $(this).find('.dyna').toggleClass('fa-bars').toggleClass('fa-times'); return false; }); $('.user-links-toggler').click(function(){ $('.user-links.mobile').slideToggle(); return false; }); $(document).click(function(e){ if( $(e.target).is('.menu-wrapper , .menu-wrapper *') ){ // do nothing } else { $('.menu-wrapper').slideUp(500); $('.dyna').attr('class' , 'dyna fa fa-bars'); } }); $(document).on('click' , '.close-menu' , function(){ $('.menu-wrapper').slideUp(500); }); /* cart box toggle */ $('.cart-link > a').click(function(){ $('.cart-box').fadeToggle(300); return false; }); });
Related:
See More
Free Template
Paper Kit 2
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76
