I maked one html site using bootstrap. That sites have one menu but i think problem is my javascript i maked it that auto open when mouseover it menu but not closed automatic.
(function($){
$(document).ready(function(){
$('ul.nav [data-toggle=dropdown]').on('mouseover', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);
.navbar-brand {display:none;}
.fullwidth {width:100%; background:#1e537f;}
.navbar {
position: relative;
min-height: 40px;
margin-bottom: 0;
border: 1px solid transparent;
width:100%;
text-align:center;
}
.navbar-header {}
.navbar-inverse .navbar-nav>li>a {color:#FFFFFF;}
.navbar-inverse
{background:#1e537f; text-align:center;}
.navbar-nav>li {text-align:center;}
.navbar-inverse .navbar-brand {color:#FFFFFF;}
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {background:#143957;}
.navbar-inverse .navbar-toggle {background:#143957; border:none;}
.navbar-nav>a:hover {background:#1b4b72;}
.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover {background:#1b4b72;}
.navbar ul{text-align:center; padding:0 0 0 30%; }
.navbar ul li {text-align:left;}
.navbar ul li ul {padding:0;}
.navbar-nav>li>.dropdown-menu {background:#1b4b72; }
.navbar-inverse .navbar-nav>li>a:hover {background:#1b4b72;}
.dropdown-menu {border:none; }
.dropdown-menu>li>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #FFFFFF;
white-space: nowrap;
}
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {background:#143957;
color:#FFFFFF; }
.dropdown-menu>li>a:hover {
display: block;
background:#143957;
color:#FFFFFF;
border-radius:4px;
}
.dropdown-submenu>.dropdown-menu {background:#1b4b72;}
.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:0;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#555;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
.carousel-indicators li {width:40px; height:40px;border-radius:50%; background:#FFFFFF;}
.carousel-indicators .active {width:40px; height:40px;border-radius:50%; background:#1e537f; border:none;}
.carousel-caption {margin-bottom:80px;}
.carousel-caption h2{ font-size:46px;}
.carousel-control.right, .carousel-control.left {background:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<nav class="navbar navbar-inverse navbar-static-top marginBottom-0" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<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="#" target="_blank">Menu</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li> Anasayfa </li>
<li class="dropdown"> Kurumsal <b class="caret"></b>
<ul class="dropdown-menu">
<li>Hakkımızda </li>
<li>Çözüm Ortaklarımız </li>
<li>Sosyal Sorumluluk </li>
<li>Basın Odası </li>
</ul></li>
<li class="dropdown">Hizmetler <b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu">Araç Sigortaları
<ul class="dropdown-menu">
<li>Tam Kasko Paket Poliçesi </li>
<li>Trafik Sigortası </li>
<li>Yeşil Kart Sigortası </li>
</ul></li>
<li class="dropdown dropdown-submenu">İşyeri ve Konut Sigortaları
<ul class="dropdown-menu">
<li>İşyeri Paket Sigortaları </li>
<li>Konut Paket Sigortaları </li>
<li>Dask Sigortası </li>
</ul></li>
<li class="dropdown dropdown-submenu">Sorumluluk Sigortaları
<ul class="dropdown-menu">
<li>Üçüncü Şahıs Mali Sorumluluk </li>
<li>Asansör Sorumluluk</li>
<li>İşveren Sorumluluk</li>
<li>Mesleki Sorumluluk</li>
<li>Zorunlu Hekim Sigortası</li>
<li>Ferdi Kaza Sigortası</li>
<li>Taşınan Para Sigortası</li>
<li>Emniyeti Suistimal Sigortası</li>
<li>Ürün Mali Sorumluluk Sigortası</li>
<li>Seyahat Sigortası</li>
</ul></li>
<li class="dropdown dropdown-submenu">Nakliyat Sigortaları
<ul class="dropdown-menu">
<li>Mal Nakli Sigortaları </li>
<li>Nakliyat Sorumluluk Sigortaları</li>
<li>Deniz Araçları Sigortası </li>
</ul></li>
<li class="dropdown dropdown-submenu">Mühendislik Sigortaları
<ul class="dropdown-menu">
<li>Elektronik Cihaz Sigortası </li>
<li>Makina Kırılması Sigortası</li>
<li>İnşaat Sigortası</li>
</ul></li>
<li class="dropdown dropdown-submenu">Sağlık Sigortaları
<ul class="dropdown-menu">
<li>Sağlık Sigortası </li>
<li>Tamamlayıcı Sağlık Sigortası</li>
</ul></li>
</ul>
</li>
<li> Servisler </li>
<li> Kariyer </li>
<li> İletişim </li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
You can test my code it is on up.
You will want to create a mouseenter function for the dropdown toggle and then a mouseleave function for the dropdown and dropdown-submenu. If im understanding your problem correctly. So your code should look something like this I think.
$('ul.nav [data-toggle=dropdown').on({
mouseenter: function(event) {
if (!$(this).hasClass("open")) {
$(this).parent().toggleClass('open');
}
}
});
$('ul.nav .dropdown, .dropdown-submenu').on({
mouseleave: function(event) {
if ($(this).hasClass("open")) {
$(this).toggleClass('open');
}
}
});
Here is a link to a fiddle with it working Fiddle.
Just to let you know you may run into some problems with your menu being too long because when the mouse leaves the dropdown menu and submenus the menu will close so they will not be able to scroll down to see all of the links but if I understand your problem correctly I think this should solve your problem.
P.S I left the event in there in case you need an event to be executed but if not you can take it out.
Related
I am well aware that this is kinda of an idiot question,but I am rather new to JS and JQuery and how to link it to HTML code, but none of the similar threads lead to a solution.
By some miracle, I found and modified some JSFiddle code into this: https://jsfiddle.net/z7L2re8j/
Now, I'm trying to load JQuery from a CDN, and I also have a JS file with the functions to make the HTML (and CSS) work properly.
HTML's file head:
<html>
<head>
<meta charset="UTF-8">
<link rel="icon" href="images/icon.webp">
<link rel="stylesheet" href="./new.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"> </script>
<script type="text/javascript" src="./old.js"></script>
</head>
<body>
<!-- Html body -->
</body>
</html>
The files old.js and new.css are essentially the code that is written on the corresponding tabs in the JSFiddle link.
However, when I run the HTML code with the links as you see, it's not the same as the preview in JSFiddle. And I don't know what I am doing wrong.
So, am I doing the linking of the files correctly, and if not, what are my mistakes?
Thank you in advance
If your question is how to link to old.js and new.css, look in the network tab and see where the browser is looking for them
To use CDN for jQuery and Bootstrap and get that information from a JSFiddle you can do this:
Click on resources in JSFiddle
Right click on the links and open in new tab, you will see they are Bootstrap v3.3.7
Go to https://getbootstrap.com/docs/5.0/getting-started/introduction/ and get the latest or search google first for bootstrap CDN: I found for example https://www.bootstrapcdn.com/ and from there you can take the versions you want/need
Alternative since I can see your JSFiddle is not bootstrap 5 compatible:
https://blog.getbootstrap.com/2016/07/25/bootstrap-3-3-7-released/
$('ul.nav li.dropdown').hover(function() {
var first = $(this).find('.dropdown-menu')[0];
$(first).stop(true, true).delay(20).fadeIn();
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(20).fadeOut();
});
$('ul.nav li#secondary').hover(function() {
console.log("reached sub here 1");
$(this).find('.sub-menu').stop(true, true).delay(20).fadeIn();
console.log($(this).find('.sub-menu'));
}, function() {
$(this).find('.sub-menu').stop(true, true).delay(20).fadeOut();
});
$('ul.nav li#third').hover(function() {
console.log("reached sub here 1");
$(this).find('.sub-menu').stop(true, true).delay(20).fadeIn();
console.log($(this).find('.sub-menu'));
}, function() {
$(this).find('.sub-menu').stop(true, true).delay(20).fadeOut();
});
$('ul.nav li#fourth').hover(function() {
console.log("reached sub here 1");
$(this).find('.sub-menu').stop(true, true).delay(20).fadeIn();
console.log($(this).find('.sub-menu'));
}, function() {
$(this).find('.sub-menu').stop(true, true).delay(20).fadeOut();
});
.navbar .sub-menu: before {
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .sub-menu: after {
border-top: 6px solid transparent;
border-left: none;
border-right: 6px solid #fff;
border-bottom: 6px solid transparent;
left: 10px;
top: 11px;
}
.navbar-toggle {
z-index: 3;
}
nav.navbar i.fa {
padding-left: 5px;
padding-right: 5px;
}
ul.nav li:hover>ul.dropdown-menu {
display: block;
}
#navbar {
text-align: center;
}
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
display: none;
margin-top: -1px;
}
#navbar-collapse-new.navbar-collapse {
padding-top: 0px;
padding-right: 38px;
}
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
</script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation" aria-label="Main Menu">
<div class="container-fluid">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-new">
<ul class="nav navbar-nav navbar-left" role="menu">
<li class="dropdown">
Villas <b class="caret"></b>
<ul class="dropdown-menu" id="secondaryMenu" role="menu" aria-expanded="false">
<li id="secondary" role="menuitem">1 Bedroom Villas
<ul class="dropdown-menu sub-menu" role="menu">
<li id="tertiary" role="menuitem">
<a title="Fig Tree Villa" class="tertiary-link" href="/geonext/myhome.geo">Fig Tree Villa</a>
</li>
<li role="menuitem">
<a title="Mulberry Villa" class="tertiary-link" href="/geonext/myhome.geo">Mulberry Villa</a>
</li>
<li role="menuitem">
<a title="Grapevine Villa" class="tertiary-link" href="/geonext/myhome.geo">Grapevine Villa</a>
</li>
</ul>
</li>
<li id="third" role="menuitem">2 Bedroom Villas
<ul class="dropdown-menu sub-menu" role="menu">
<li role="menuitem">
<a title="Bougainvillea Villa" class="tertiary-link" href="/geonext/myhome.geo">Bougainvillea Villa</a>
</li>
<li role="menuitem">
<a title="Margarita Villa" class="tertiary-link" href="/geonext/myhome.geo">Margarita Villa</a>
</li>
<li role="menuitem">
<a title="Oleander Villa" class="tertiary-link" href="/geonext/myhome.geo">Oleander Villa</a>
</li>
<li role="menuitem">
<a title="Violeta Villa" class="tertiary-link" href="/geonext/myhome.geo">Violeta Villa</a>
</li>
</ul>
</li>
<li id="fourth" role="menuitem">3 Bedroom Villas
<ul class="dropdown-menu sub-menu" role="menu">
<li role="menuitem">
<a title="Jasmin Villa" class="tertiary-link" href="/geonext/myhome.geo">Jasmin Villa</a>
</li>
<li role="menuitem">
<a title="Lemoni Villa" class="tertiary-link" href="/geonext/myhome.geo">Lemoni Villa</a>
</li>
<li role="menuitem">
<a title="Mandarin Villa" class="tertiary-link" href="/geonext/myhome.geo">Mandarin Villa</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Contact Us
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</body>
</html>
Using Bootstrap 3.
I'm trying to keep my site's navigation working using hover on the desktop but when using mobile navigation I want the navigation to open on click. I can't seem to get my options to work with what I've got. I don't have a great grasp on CSS so I may be screwing this up with something small... or large...
Right now the site works fine on the desktop version with the navigation open on click then hover opens the remaining sub links. The problem is when I reduce the page width to the mobile version the navigation does not work as I want. What I am getting is the navigation opening up on hover but I want each link to open on click only.
I've created a bootply as an example: http://www.bootply.com/tjL1FPgPT4
HTML:
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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">SiteName</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="menu-item dropdown">
LinkHere<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-header">Names</li>
<li class="menu-item dropdown dropdown-submenu">
Level1
<ul class="dropdown-menu">
<li class="menu-item ">
</li><li class="menu-item dropdown dropdown-submenu">
Level2.1
<ul class="dropdown-menu">
<li>
Level3-Link1
Level3-Link2
</li>
</ul>
</li>
<li class="menu-item ">
</li><li class="menu-item dropdown dropdown-submenu">
Level2.2
<ul class="dropdown-menu">
<li>
Level3.1
Level3.2
</li>
</ul>
</li>
</ul>
</li><li class="menu-item dropdown dropdown-submenu">
OtherLink
<ul class="dropdown-menu">
<li class="menu-item ">
Link1
Link2
</li>
</ul>
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Email</li>
<li class="menu-item ">
Yahoo
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Phone</li>
<li class="menu-item ">
CallNow
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="menu-item dropdown">
Drop Down<b class="caret"></b>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
Level 1
<ul class="dropdown-menu">
<li class="menu-item ">
Link 1
</li>
<li class="menu-item dropdown dropdown-submenu">
Level 2
<ul class="dropdown-menu">
<li>
Link 3
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="menu-item dropdown">
Drop Down<b class="caret"></b>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
Level 1
<ul class="dropdown-menu">
<li class="menu-item ">
Link 1
</li>
<li class="menu-item dropdown dropdown-submenu">
Level 2
<ul class="dropdown-menu">
<li>
Link 3
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!--/.nav-collapse -->
and CSS:
/*custom for submenu here*/
.dropdown-submenu {
position:relative;
}
.dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:-6px;
margin-left:-1px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display:block;
}
.dropdown-submenu>a:after {
display:block;
content:" ";
float:right;
width:0;
height:0;
border-color:transparent;
border-style:solid;
border-width:5px 0 5px 5px;
border-left-color:#cccccc;
margin-top:5px;
margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
border-left-color:#ffffff;
}
.dropdown-submenu.pull-left {
float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left:-100%;
margin-left:10px;
-webkit-border-radius:6px 0 6px 6px;
-moz-border-radius:6px 0 6px 6px;
border-radius:6px 0 6px 6px;
}
#media only screen and (max-width:767px){
.dropdown-submenu{
display: block;
position: static;
background-color:transparent;
border:0 none;
box-shadow:none;
margin-top:0;
width:100%;
}
.navbar-nav .dropdown-menu > li > a,
.navbar-nav .dropdown-menu .dropdown-header {
padding:5px 15px 5px 25px;
}
.navbar-nav .dropdown-menu > li > a{
line-height:20px;
}
.navbar-default .navbar-nav .dropdown-menu > li > a{
color:#777;
}
.navbar-nav .dropdown-menu .dropdown-submenu > a{
display:block;
margin-top: 0;
}
}
Change your css to this
#media only screen and (min-width:768px){
.dropdown-submenu:hover>.dropdown-menu {
display:block;
}
}
also add this script to page.
$(document).ready(function(){
$('.dropdown-submenu a').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
Here is updated bootply. Hope this helps you.
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;
}
I've navbar with 9 elements inside, when viewport width is less than 768px everything is ok, but when viewport is larger than 768px it looks like this:
Image that show navbar http://imageshack.com/a/img537/967/vOZFCK.jpg
My goal is to make navbar-nav scrollable horizontally, and the sixth, the seventh and eighth element must appear in line with the other and and everything must be scrollable.
The effect is similar to that visible here, so I tried to implement Smooth Touch Scroll Jquery plugin, adding <div id="TouchScroller"></div> before navbar-nav div,but nothing happens.
Please help me!
Here Navbar Html code
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-inner">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-lezard">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">
<a class="page-scroll" href="#page-top">
<h1>Lezard <span class="orange">Climb</span></h1>
</a>
</div>
</div>
<div class="collapse navbar-collapse" id="navbar-lezard">
<div id="TouchScroller">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about"><span class="yellow">Chi siamo</span></a>
</li>
<li>
<a class="page-scroll" href="#dove"><span class="blu">Dove siamo</span></a>
</li>
<li>
<a class="page-scroll" href="#contatti"><span class="green">Contattaci</span></a>
</li>
<li>
<a class="page-scroll" href="#attivita"><span class="orange">Attività</span></a>
</li>
<li>
<a class="page-scroll" href="#orari"><span class="violet">Orari</span></a>
</li>
<li>
<a class="page-scroll" href="#corsi"><span class="light-blu">Corsi di arrampicata</span></a>
</li>
<li>
<a class="page-scroll" href="#abbonamenti"><span class="red">Abbonamenti</span></a>
</li>
<li>
<a class="page-scroll" href="#staff"><span class="brown">Staff Lezard</span></a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</div>
</nav>
CSS
.navbar{
border-bottom: none !important;
font-family: 'Amatic SC', cursive,helvetica,sans-serif;
background-color: #000;
padding: 0.5em;
font-size: 2em;
}
#media screen and (min-width: 480px ) {
.form-panel-width{
width: 100%;
}
}
.navbar-brand{
margin-top: -1.6em;
margin-left: -0.7em;
}
.navbar-toggle{
margin-top: 0.4em;
margin-right: 0;
background-color: #ff9900;
border-color: transparent !important;
}
.navbar-toggle:active{
background-color: #ff9900;
border-color: transparent;
}
.icon-bar {
background-color: #000 !important;
}
.navbar-nav > li{
text-align: center;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
background-color: transparent;
}
/*Fix Navbar element when height is too low */
#media screen and (max-height: 380px) and (max-width: 767px){
.navbar-nav > li{
margin-bottom: -0.4em;
}
}
#media screen and (min-width: 768px) and (min-height: 1024px){
.navbar-nav{
margin-top: 1.5em;
}
.navbar-brand{
margin-left: 0;
}
.navbar-brand h1{
font-size: 3em;
}
.navbar-nav a{
font-size: 1.3em;
}
}