I have these 3 row of tabs. First row has options Construction and Interior. On clicking construction it should open the row of tabs with id as construction and make interiors disappear and on clicking Interior Tab it should be able to open the row with id as interiors. Kindly help if this is possible only with CSS, or should we use Javascript? Have tried many ways with CSS, but unable to do so.
<ul class="nav nav-tabs nav-justified" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#construction">Construction</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="interior">Interiors</a>
</li>
</ul>
<br>
<br>
<div id="construction">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#home">Basic</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Standard</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Premium</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Luxury</a>
</li>
</ul>
</div>
<div id="interior">
<ul class="nav nav-tabs nav-justified" role="tablist" id="interior">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#home">Basic Interiors</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Standard Interiors</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Premium Interiors</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Luxury Interiors</a>
</li>
</ul>
</div>
an example of a trick to use :check pseudo with hidden radio input
.tabs {
position: relative;
min-height: 200px; /* This part sucks */
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 45px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab One</label>
<div class="content">
<p>Stuff for Tab One</p>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Tab Two</label>
<div class="content">
<p>Stuff for Tab Two</p>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Tab Three</label>
<div class="content">
<p>Stuff for Tab Three</p>
</div>
</div>
</div>
Related
I am quite new to BOOTSTRAP and web development in general. So I was once again hoping someone could help me as I can't find the solution. I've started making a simple website to practice and it looks fine in my browser size; however, when I switch to mobile my created divs seem to be smaller or not keeping the specified size; this also appears to be in turn, breaking my nav bar while in mobile mode. Any help would be grand!
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<style type="text/css">
#logo-space {
background-color: #0f2471;
width: auto;
height: auto;
}
#logo {
width: 300px;
height: 110px;
padding: 15px;
margin-left: 5rem;
}
#FMS-BTN {
width: 12rem;
position: relative;
top: 2rem;
left: 20rem;
}
#nav-bar{
background-color: #16377e;
height: auto;
}
#nav-bar a{
color: white;
font-weight: bold;
font-size: 20px;
padding: 5px;
position: relative;
top: 5px;
}
.navbar-text{
text-align: right !important;
position: relative;
font-size: 20px;
bottom: 5px;
padding: 5px;
right: 5rem;
}
.nav-move{
position: relative;
left: 5rem;
}
.navbar {
height: 55px !important; /*i assume your navbar size 100px*/
}
</style>
</head>
<body>
<div class=".container-fluid">
<div id="logo-space" class="row">
<div class="col">
<img id="logo" src="img/logo.png" alt="">
</div>
<div class="col">
</div>
<div class="col">
<a id="FMS-BTN" href="#" class="btn btn-primary" tabindex="-1" role="button" aria-disabled="true">
<img src="" alt="">Head to FMS</a>
</div>
</div>
<div id="nav-area">
<nav id="nav-bar" class="navbar navbar-expand-lg">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-xs-0">
<li class="nav-item">
<a class="nav-link active nav-move" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link nav-move" href="#">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link nav-move" href="#">DIVISIONS</a>
</li>
<li class="nav-item">
<a class="nav-link nav-move" href="#">APPEALS</a>
</li>
<li class="nav-item">
<a class="nav-link nav-move" href="#">FEED</a>
</li>
</ul>
<span class="navbar-text">
<a id="apply-link" class="nav-link" href="#">APPLY NOW</a>
</span>
</div>
</div>
</nav>
</div>
</div>
</body>
</html>
I am using Bootstrap 4 to make a tab slider and I want to handle the tabs from the top, bottom, left & right clicks. I wrote codes in jquery to do the same. But getting the RangeError like above as mentioned in the question title.
When I comment the jquery code related to Lower Tabs, it works perfectly for the top, left & right click, but the lower tabs don't work in the way as I want. Please find out the solution for me. Thanks in Advance...
HTML is as below:-
<body>
<h1 class="my-5 text-center">Tab Slider</h1>
<div class="col-sm-6 offset-sm-3">
<ul class="nav nav-tabs my-tab upper">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tab1">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab2">Tab 2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab3">Tab 3</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab4">Tab 4</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab5">Tab 5</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<h1>This is Tab 1</h1>
<p>This is the paragraph for Tab 1</p>
</div>
<div class="tab-pane fade" id="tab2">
<h1>This is Tab 2</h1>
<p>This is the paragraph for Tab 2</p>
</div>
<div class="tab-pane fade" id="tab3">
<h1>This is Tab 3</h1>
<p>This is the paragraph for Tab 3</p>
</div>
<div class="tab-pane fade" id="tab4">
<h1>This is Tab 4</h1>
<p>This is the paragraph for Tab 4</p>
</div>
<div class="tab-pane fade" id="tab5">
<h1>This is Tab 5</h1>
<p>This is the paragraph for Tab 5</p>
</div>
<button class="tab-navigate tab-prev"><i class="fas fa-chevron-left"></i></button>
<button class="tab-navigate tab-next"><i class="fas fa-chevron-right"></i></button>
</div>
<ul class="nav nav-tabs my-tab lower">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tab1">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab2">Tab 2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab3">Tab 3</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab4">Tab 4</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab5">Tab 5</a>
</li>
</ul>
</div>
</body>
CSS code is:-
.my-tab.upper {
margin-top: 15px;
border-bottom: 3px solid blue;
}
.my-tab.upper .nav-link {
border-bottom: 5px solid transparent;
}
.my-tab.upper .nav-item.show .nav-link, .my-tab.upper .nav-link.active {
border-bottom: 5px solid blue;
}
.my-tab.lower {
border-top: 3px solid blue;
border-bottom: 0;
}
.my-tab.lower .nav-item.show .nav-link, .my-tab.lower .nav-link.active {
border-top: 5px solid blue;
}
.my-tab .nav-item.show .nav-link, .my-tab .nav-link.active {
color: blue;
background-color: #fff;
padding-left: 30px;
padding-right: 30px;
margin: 0 10px;
}
.my-tab .nav-link {
border: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
color: #000;
font-family: 'GothamProNarrow-Bold';
font-size: 16px;
}
.tab-prev {
left: -75px;
}
.tab-navigate {
outline: 0;
width: 45px;
height: 45px;
text-align: center;
line-height: 42px;
border-radius: 50%;
border: 2px solid blue;
color: blue;
background-color: white;
position: absolute;
top: 50%;
}
.tab-next {
right: -75px;
}
Jquery code is:-
$(document).ready(function(){
var tabsUpper = $(".my-tab.upper");
var tabsLower = $(".my-tab.lower");
var $tabsUpperLinks = $(".my-tab.upper").find(".nav-link");
var $tabsLowerLinks = $(".my-tab.lower").find(".nav-link");
//When click on Upper Tabs
for(let i = 0; i < $tabsUpperLinks.length; i++){
let clickedUpperLink = $($tabsUpperLinks[i]);
clickedUpperLink.on("click", function(e){
let clickedLowerLink = $($tabsLowerLinks[i])
clickedLowerLink.click();
return;
});
}
//When click on Lower Tabs
for(let j = 0; j < $tabsLowerLinks.length; j++){
let lowerLink = $($tabsLowerLinks[j]);
lowerLink.on("click", function(){
let upperLink = $($tabsUpperLinks[j])
upperLink.click();
return;
});
}
//When click for next tab
$(".tab-next").on("click", function(){
$.each(tabsUpper, function(index, value){
let $navItems = $(this).find(".nav-link");
let navItemsLength = $navItems.length;
for(let i = 0; i < navItemsLength; i++){
let activeTabLink = $($navItems[i]);
if(activeTabLink.hasClass("active")){
nextTabLink = $($navItems[i+1]);
if(i == navItemsLength-1){
nextTabLink = $($navItems[0]);
}
activeTabLink.removeClass("active");
nextTabLink.click();
return;
}
}
});
});
//When click for previous tab
$(".tab-prev").on("click", function(){
$.each(tabsUpper, function(index, value){
let $navItems = $(this).find(".nav-link");
let navItemsLength = $navItems.length;
for(let i = navItemsLength-1; i >= 0; i--){
let activeTabLink = $($navItems[i]);
if(activeTabLink.hasClass("active")){
prevTabLink = $($navItems[i-1]);
if(i == 0){
prevTabLink = $($navItems[navItemsLength-1]);
}
activeTabLink.removeClass("active");
prevTabLink.click();
return;
}
}
});
});
});
in my code i want every tab-content should be hidden then when i click on the menu then the menu wise contents will open,I've done all these so far.now i want when i click the menu it should slideDown the content slowly and again if i click on that menu the content should be closed with slideUp .
$(document).on('click','.nav-link.active', function(){
var href = $(this).attr('href').substring(1);
$(this).removeClass('active');
// $('.tab-content').slideDown('slow');
$('.tab-pane[id="'+ href +'"]').removeClass('active');
$('.tab-content').hide().slideDown(600);
});
I want when like this but not happening actually. DEMO
$(document).ready(function() {
$('.tabs .col-3 a').click(function(e) { // Or bind to any other event you like, or call manually
e.preventDefault();
var hrefid = $(this).attr("href");
var tabid = ($(this).attr("href")).replace('#', ''); // remove #
var getContent = $(hrefid).html();
$('#maintabcontent').hide().html(getContent).stop().fadeIn(1400);
$('span.plus').text("+");
var $t = $('.tab-container');
if ($(this).parent().hasClass('active')) {
$(this).find('span').text("+");
$t.slideUp(function() {
$('#maintabcontent').html('');
});
$(this).parent().removeClass('active');
} else {
$(this).find('span').text("-");
$t.slideDown(600, function() {
});
if ($t.is(':visible')) {
$('.col-3').removeClass('active');
$(this).parent().addClass('active');
}
}
});
});
.container {
margin: 0 auto;
max-width: 1280px;
overflow: hidden;
position: relative;
}
.full-width {
background: #dfdedb none repeat scroll 0 0;
width: 100%;
}
.main-container {
margin: 0 auto;
max-width: 1220px;
}
.padding-top-bottom-small {
padding-bottom: 1rem;
padding-top: 1rem;
}
.text-center {
text-align: center;
}
.col-3 {
display: inline-block;
max-width: 403px;
overflow: hidden;
position: relative;
vertical-align: top;
width: 32.5%;
}
.tabs .col-3 {
border-right: 2px solid #ffffff;
cursor: pointer;
}
.tab-container {
background: #505050 none repeat scroll 0 0;
display: none;
position: relative;
}
.main-container {
margin: 0 auto;
max-width: 1220px;
}
.padding-top-bottom-big {
padding-bottom: 2rem;
padding-top: 2rem;
}
.tab-content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="full-width container tabs">
<div class="main-container">
<div class="col-3 first text-center padding-top-bottom-small"> <h3 class="lato-reg mediumfontx4 orange">How to Sell <span class="deep-grey padding-left-tiny plus" data-tab="tab-1">+</span></h3>
</div>
<div class="col-3 second text-center padding-top-bottom-small"> <h3 class="lato-reg mediumfontx4 orange">Finance <span class="deep-grey padding-left-tiny plus" data-tab="tab-1">+</span></h3>
</div>
<div class="col-3 text-center padding-top-bottom-small"> <h3 class="lato-reg mediumfontx4 orange">Market Intelligence <span class="deep-grey padding-left-tiny plus" data-tab="tab-1">+</span></h3>
</div>
</div>
</div>
<div class="tab-container">
<div class="main-container padding-top-bottom-big" id="maintabcontent"></div>
</div>
<div id="tab-1" class="tab-content">Tab Content 1</div>
<div id="tab-2" class="tab-content">Tab Content 2</div>
<div id="tab-3" class="tab-content">Tab Content 3</div>
Here you go with a solution http://jsfiddle.net/otpq2c5j/38/
$(document).on('click','.nav-link', function(){
$('.tab-pane').slideUp('fast');
$($(this).attr('href')).slideDown('slow');
});
.tab-pane{
background-color:red;
padding-top:50px;
padding-bottom:50px;
}
.tab-content{
background-color:#ccc;
padding-top:10px;
padding-bottom:10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<ul class="nav" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Settings</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="home" role="tabpanel">Good</div>
<div class="tab-pane" id="profile" role="tabpanel">Best</div>
<div class="tab-pane" id="messages" role="tabpanel">Poor</div>
<div class="tab-pane" id="settings" role="tabpanel">Ugly</div>
</div>
Hope this is what you are looking for:
$('.tab-content').hide();
$(document).on('click','.nav-link:not(.active)', function(){
$('.tab-content').slideDown("slow");
});
$(document).on('click','.nav-link.active', function(){
$('.tab-content').slideToggle("slow");
});
.tab-pane{
background-color:red;
padding-top:50px;
padding-bottom:50px;
}
.tab-content{
background-color:#ccc;
padding-top:10px;
padding-bottom:10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<ul class="nav" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Settings</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="home" role="tabpanel">Good</div>
<div class="tab-pane" id="profile" role="tabpanel">Best</div>
<div class="tab-pane" id="messages" role="tabpanel">Poor</div>
<div class="tab-pane" id="settings" role="tabpanel">Ugly</div>
</div>
You can do it with simple CSS. Instead of the code $('.tab-content').hide().slideDown(600);
use transition: height 1s; in your active class in css.
What this does is, smoothly transitions from the previous class to the active class. There are many customizations that you can do to the transition effect. Take a look at the transition attributes here for reference.
Add active class to first tab-content div
<div class="tab-pane active" id="home" role="tabpanel">Good</div>
Update css like this
.tab-content{
background-color:#ccc;
}
.tab-pane.active{
display:block;
}
Update js file like this
$(document).on('click','.nav-link', function(){
var href = $(this).attr('href').substring(1);
//$(this).removeClass('active');
// $('.tab-content').slideDown('slow');
$('.tab-pane[id="'+ href +'"]').slideToggle(600);
});
I'm trying to create a football website and I need someone to help me . I want to add a drop-down menu that lists columns of football competitions .Exactly in "competitions " just like this drop-down menu that lists columns.
#Mostafa Baezid Here is the code:
<!-- outer-wrapper start -->
<body>
<nav class='navbar navbar-default'>
<div class='navbar-header'>
<button class='navbar-toggle' data-target='.js-navbar-collapse' data-toggle='collapse' type='button'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'/>
<span class='icon-bar'/>
<span class='icon-bar'/>
</button>
<a class='navbar-brand' href='#'>LOGO</a>
</div>
<div class='collapse navbar-collapse js-navbar-collapse'>
<ul class='nav navbar-nav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>News</a></li>
<li><a href='#'>EUROPE</a></li>
<li><a href='#'>AFRICA</a></li>
<li><a href='#'>WORLDWIDE</a></li>
<li class='dropdown mega-dropdown'>
<a class='dropdown-toggle arrow' data-toggle='dropdown' href='#'>Competitions <span class='glyphicon glyphicon-chevron-down '/></a>
<ul class='dropdown-menu mega-dropdown-menu'><!--megaMenu Wih 3 column start-->
<li class='col-sm-4 nopadding'>
<ul>
<li class='dropdown-header'>France</li>
<li><a href='#'>Demo Link</a></li>
<li><a href='#'>Demo Link</a></li>
<li><a href='#'>Demo Link</a></li>
<li class='divider'/>
</ul>
</li>
<li class='col-sm-4 nopadding'>
<ul>
<li class='dropdown-header'>Europe</li>
<li><a href='#'>Demo Link</a></li>
<li><a href='#'>Demo Link</a></li>
<li><a href='#'>Demo Link</a></li>
<li class='divider'/>
</ul>
</li>
<li class='col-sm-4 nopadding'>
<ul>
<li class='dropdown-header'>INTERNATIONAL</li>
<li><a href='#'>Demo Link</a></li>
<li><a href='#'>Demo Link</a></li>
<li><a href='#'>Demo Link</a></li>
<li class='divider'/>
</ul>
</li>
</ul><!--megaMenu Wih 3 column End-->
</li>
<li><a href='#'>Live Matches</a></li>
<li><a href='#'>Mercato</a></li>
<li><a href='#'>Videos</a></li>
</ul>
</div>
<!-- /.nav-collapse -->
</nav>
<h1 class='c-text'> Mega Menu Demo </h1>
<script type='text/javascript'>$(function () { $('.arrow').click(function () { $('.glyphicon-chevron-down').toggle(); }); }); </script>
</body>
<div id='searchformfix'>
<form action='/search' id='searchform'>
<input name='q' onblur='if (this.value == "") {this.value = "Text to Search...";}' onfocus='if (this.value == "Text to Search...") {this.value = "";}' type='text' value='Text to Search...'/>
</form>
</div>
<div class='clear'/>
<!-- secondary navigation menu end -->
<!-- content wrapper start -->
You can easily do this in bootstrap framework. Demo. This is just an example. You can follow this. If you Have Any question ask me in comment. I will explain for you. Good Luck.
[N.B: Don't use !important on css if you have custom css file for your project. I use !important here because overwrite the css in same page.]
/* CSS used here will be applied after bootstrap.css */
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: 'Open Sans', 'sans-serif';
background: #f0f0f0;
background: white;
}
nav.navbar-default{
background: #35c353;
}
.navbar-nav>li>.dropdown-menu {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.navbar-default .navbar-nav>li>a {
color:white !important;
font-weight: bold;
}
.navbar-default .navbar-nav>li>a:hover{
color:black !important;
}
.mega-dropdown {
position: static !important;
}
.mega-dropdown-menu {
padding: 20px 0px;
width: 100%;
box-shadow: none;
-webkit-box-shadow: none;
border-color:#35c353;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
color: black !important;
background-color:#35c353 !important;
}
.mega-dropdown-menu:before {
content: "";
border-bottom: 15px solid #20ff4f;
border-right: 17px solid transparent;
border-left: 17px solid transparent;
position: absolute;
top: -15px;
left: 550px;
z-index: 10;
}
.mega-dropdown-menu:after {
content: "";
border-bottom: 17px solid #20ff4f;
border-right: 19px solid transparent;
border-left: 19px solid transparent;
position: absolute;
top: -17px;
left: 548px;
z-index: 8;
}
.mega-dropdown-menu > li > ul {
padding: 0;
margin: 0;
}
.mega-dropdown-menu > li > ul > li {
list-style: none;
}
.mega-dropdown-menu > li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #999;
white-space: normal;
}
.mega-dropdown-menu > li ul > li > a:hover,
.mega-dropdown-menu > li ul > li > a:focus {
text-decoration: none;
color: #444;
background-color: #f5f5f5;
}
.mega-dropdown-menu .dropdown-header {
color: #428bca;
font-size: 18px;
font-weight: bold;
background:#777;
}
h1.c-text{
text-align:center;}
/*Usefull class*/
.nopadding {
padding-left:0 !important;
padding-right:0 !important;
}
.nomargin{
margin-left:0;
margin-right:0;
}
#media (max-width:947px) and (min-width:769px) {
.navbar-nav {
display: inline-flex;
margin: 0;
}
.mega-dropdown-menu:before {
left: 495px !important;
}
.mega-dropdown-menu:after {
left: 495px !important;
}
}
<!DOCTYPE html>
<html>
<head>
<!-- All links cdn's Before Body tag end -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet" />
<head>
<body>
<nav class="navbar navbar-default">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">LOGO</a>
</div>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>News</li>
<li>EUROPE</li>
<li>AFRICA</li>
<li>WORLDWIDE</li>
<li class="dropdown mega-dropdown">
Competitions <span class="glyphicon glyphicon-chevron-down "></span>
<ul class="dropdown-menu mega-dropdown-menu"><!--megaMenu Wih 3 column start-->
<li class="col-sm-4 nopadding">
<ul>
<li class="dropdown-header">France</li>
<li>Demo Link</li>
<li>Demo Link</li>
<li>Demo Link</li>
<li class="divider"></li>
</ul>
</li>
<li class="col-sm-4 nopadding">
<ul>
<li class="dropdown-header">Europe</li>
<li>Demo Link</li>
<li>Demo Link</li>
<li>Demo Link</li>
<li class="divider"></li>
</ul>
</li>
<li class="col-sm-4 nopadding">
<ul>
<li class="dropdown-header">INTERNATIONAL</li>
<li>Demo Link</li>
<li>Demo Link</li>
<li>Demo Link</li>
<li class="divider"></li>
</ul>
</li>
</ul><!--megaMenu Wih 3 column End-->
</li>
<li>Live Matches</li>
<li>Mercato</li>
<li>Videos</li>
</ul>
</div>
<!-- /.nav-collapse -->
</nav><!-- /.nav-End -->
<h1 class="c-text"> Mega Menu Demo </h1>
<!-- All Scripts Before Body tag end -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
$('.arrow').click(function () {
$('.glyphicon-chevron-down').toggle();
});
});
</script>
</body>
Add this query this will display the navbar after click on the burger menu on mobile view(media screen 768)
#media only screen and (max-width:768px)
{
.navbar-nav{
display: block !important;
z-index: 1000;
position: absolute !important;
width: 100% ;
border: green !important;
background: #35c353 !important;}
}
I have some question:
How to make navbar text is in the left in Bootstrap?
I'd already make the dropdown menu with bootstrap and jquery-menu-aim. But my dropdown submenu is piled up. This what my goal is.
And this is what I've done..
Can you help me? Thanks in advance. I'm using bootstrap 3.3.4.
HTML file
<header>
<div class="branding">Logo
<h3>Brand</h3>
<!--<div style="clear: both;"></div>--></div>
</header>
<nav role="navigation" class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left"> Product
<ul class="dropdown-menu" role="menu">
<li class="search row-sm-3">
<input type="text" class="form-control" placeholder="Search" />
</li>
<li role="separator" class="divider"></li>
<li data-submenu-id="submenu-mobile"> Mobile Devices
<div id="submenu-mobile" class="popover">
<h3 class="popover-title">Mobile Devices</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Smartphones
</li>
<li>Tablets
</li>
<li>Other Phones
</li>
<li>Accessoris
</li>
</ul>
</div>
</div>
</li>
<li data-submenu-id="submenu-audio"> TV / Audio / Video
<div id="submenu-audio" class="popover">
<h3 class="popover-title">TV / Audio / Video</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Televisions
</li>
<li>Audio and Video
</li>
<li>Accessoris
</li>
</ul>
</div>
</div>
</li>
<li data-submenu-id="submenu-track-trace"> Cameras and Camcorders
<div id="submenu-track-trace" class="popover">
<h3 class="popover-title">Cameras and Camcorders</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Cameras
</li>
<li>Camcorders
</li>
</ul>
</div>
</div>
</li>
<li data-submenu-id="submenu-it"> IT
<div id="submenu-it" class="popover">
<h3 class="popover-title">IT</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Monitor
</li>
<li>Printers
</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li class="navbar-left">Apps
</li>
<li class="navbar-left">Support
</li>
</ul>
<ul class="nav navbar-nav navbar-right setting">
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Setting
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#"><span class="glyphicon glyphicon-user"></span>
My Profile</a>
</li>
<li><a href="#"><span class="glyphicon glyphicon-inbox"></span>
Messages</a>
</li>
<li role="separator" class="divider"></li>
<li><a href="#"><span class="glyphicon glyphicon-log-out"></span>
Logout</a>
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container -->
CSS file
.branding h3 {
position: fixed;
float: left;
left: 25%;
top: -5px;
font-weight: bold;
font-size: 18px;
color: #595959;
}
nav {
height: 30px;
float: left;
}
.navbar-fixed-top {
top: 40px;
/*font-size: 13px;*/
font-weight: bold;
background: #D9D9D9;
color: #727272;
}
.nav li a {
text-decoration: none;
color: #727272;
}
.nav li a:hover {
color: blue;
}
.disabled {
top: 15px;
}
.divider {
background: #000;
}
.dropdown-menu {
top: 50px;
border-top-color: #eee;
background: #eee;
/*width: 300px;*/
}
.popover {
background: #eee;
width: 250px;
}
.popover-title {
font-weight: bold;
}
.popover-content {
border: 0;
list-style-type: none;
}
.popover-content ul li a {
list-style-type: none;
color: #727272;
}
.popover-content ul li a:hover {
text-decoration: none;
color: blue;
}
.search {
margin: 10px;
}