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;}
}
Related
I made a tree with child elements and for hide and show them on user click, I use the .show('fast') and .hide('fast') jquery functions.
But I noticed that on firefox the transition between the two state are slowing down but on Chrome it works like a charm.
I have the latest version of firefox.
You should also know that I use different libraries into my website such as bootstrap , datatable.js . I tell you because I see that the slowdown is less pronounced on codepen.io that on my site.
this is the codepen.io with my tree
And that's my javascript code :
$('.tree li.parent_li > span').on('click', function(e) {
var child = $(this).parent('li.parent_li').find(' > ul > li');
if (child.is(":visible")) {
child.hide('fast');
$(this).find('>i').addClass('glyphicon-chevron-right').removeClass('glyphicon-chevron-down');
} else {
child.show('fast');
$(this).find('>i').addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-right');
}
e.preventDefault();
e.stopPropagation();
});
Thanks.
This was my attempt:
$(function(){
$('.tree li.parent_li > span').on('click', function(e) {
var parent = $(this).closest('li.parent_li');
parent.toggleClass("open");
e.preventDefault();
e.stopPropagation();
});
});
.administrationRowTab {
background-color: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.tab-pane,
.active {
color: inherit;
}
/*TREE STYLE*/
.tree ul {
list-style: none;
}
.tree .parent_li > span {
cursor: pointer;
}
.tree i {
margin-right: 5px;
}
.parent_li .glyphicon-chevron-down,
.parent_li.open .glyphicon-chevron-right {
display: none;
}
.parent_li.open .glyphicon-chevron-down {
display: inline-block;
}
.parent_li ul {
height: 0;
overflow: hidden;
-webkit-transition: all 500ms linear;
-moz-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
}
.parent_li.open ul {
height: 60px;
overflow: auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div class="row m-t-25">
<div class="container">
<div class="row administrationRowTab">
<ul id="tabUl" class="nav nav-tabs">
<li class="active">Test</li>
</ul>
<div class="tab-content">
<div class="tab-pane active m-t-25" id="tabBuildsConfiguration" style="padding:15px;">
<div class="row pad-10">
<div class="tree">
<ul>
<li class="parent_li">
<span><i class="glyphicon glyphicon-chevron-down"></i><i class="glyphicon glyphicon-chevron-right"></i>Parent 1</span>
<ul>
<li><i class="glyphicon glyphicon-file"></i>Child 1</li>
<li><i class="glyphicon glyphicon-file"></i>Child 2</li>
<li><i class="glyphicon glyphicon-file"></i>Child 3</li>
</ul>
</li>
<li class="parent_li">
<span><i class="glyphicon glyphicon-chevron-down"></i><i class="glyphicon glyphicon-chevron-right"></i>Parent 2</span>
<ul>
<li><i class="glyphicon glyphicon-file"></i>Child 1</li>
<li><i class="glyphicon glyphicon-file"></i>Child 2</li>
<li><i class="glyphicon glyphicon-file"></i>Child 3</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This is pure CSS.
I added two classes: .chiled-hide and .chiled-show to the css, and updated your js script:
Here is a link to codepen example
$(function(){
$('.tree li.parent_li > span').on('click', function(e){
var test = $(this).parent('li.parent_li').hasClass('chiled-hide');
if(test)
{
$(this).parent('li.parent_li').removeClass('chiled-hide').addClass('chiled-show');
$(this).find('>i').addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-right');
}
else
{
$(this).parent('li.parent_li').removeClass('chiled-show').addClass('chiled-hide');
$(this).find('>i').addClass('glyphicon-chevron-right').removeClass('glyphicon-chevron-down');
}
e.preventDefault();
e.stopPropagation();
});
});
.administrationRowTab{
background-color: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.tab-pane, .active{
color : inherit;
}
/*TREE STYLE*/
.tree ul{
list-style: none;
}
.tree .parent_li > span { cursor: pointer;}
.tree i {margin-right: 5px;}
.chiled-hide > ul {
display:none;
opacity:0;
transition:opacity 0.5s linear;
}
.chiled-show > ul {
display:block;
opacity:1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row m-t-25">
<div class="container">
<div class="row administrationRowTab">
<ul id="tabUl" class="nav nav-tabs">
<li class="active">Test</li>
</ul>
<div class="tab-content">
<div class="tab-pane active m-t-25" id="tabBuildsConfiguration" style="padding:15px;">
<div class="row pad-10">
<div class="tree">
<ul>
<li class="parent_li">
<span><i class="glyphicon glyphicon-chevron-down"></i>Parent 1</span>
<ul>
<li><i class="glyphicon glyphicon-file"></i>Child 1</li>
<li><i class="glyphicon glyphicon-file"></i>Child 2</li>
<li><i class="glyphicon glyphicon-file"></i>Child 3</li>
</ul>
</li>
<li class="parent_li">
<span><i class="glyphicon glyphicon-chevron-down"></i>Parent 2</span>
<ul>
<li><i class="glyphicon glyphicon-file"></i>Child 1</li>
<li><i class="glyphicon glyphicon-file"></i>Child 2</li>
<li><i class="glyphicon glyphicon-file"></i>Child 3</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
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.
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;
}
}
Any idea how I can hide this dropdown when any item is clicked on? return it to its resting state? I want it to be hidden mainly for mobile users. It works fine as is right now, but on mobiles it stays open until another element of the page "happens" to be clicked on.
HTML
<div class="menubar">
<ul class="menu">
<li class="menu"><div onClick="loadPage('home.html');">HOME</div></li>
<li class="menu"><div onClick="">PRODUCTS <img src="images/darrow.gif" border=0></div>
<ul class="menu">
<li class="menu"><div onClick="loadPage('products.html');">View All Products</div></li>
<li class="menu"><div onClick="loadPage('cargolite.html');">Car-Go Lite</div></li>
<li class="menu"><div onClick="loadPage('cargolitextreme.html');">Car-Go Lite Xtreme</div></li>
<li class="menu"><div onClick="loadPage('pup.html');">P'Up</div></li>
<li class="menu"><div onClick="loadPage('twist.html');">Twist</div></li>
<li class="menu"><div onClick="loadPage('wazat.html');">Wazat</div></li>
</ul>
</li>
<li class="menu"><div onClick="">DOWNLOADS <img src="images/darrow.gif" border=0></div>
<ul class="menu">
<li class="menu"><div onClick="loadPage('brochures.html');">Brochures</div></li>
<li class="menu"><div onClick="loadPage('manuals.html');">Manuals</div></li>
</ul>
</li>
<li class="menu"><div onClick="">DEALERS <img src="images/darrow.gif" border=0></div>
<ul class="menu">
<li class="menu"><div onClick="loadPage('dealers_us.html');">United States</div></li>
<li class="menu"><div onClick="loadPage('dealers_ww.html');">Worldwide</div></li>
</ul>
</li>
<li class="menu"><div onClick="loadPage('about.html');">ABOUT</div></li>
<li class="menu"><div onClick="loadPage('contact.html');">CONTACT US</div></li>
</ul>
</div>
CSS
ul.menu {z-index: 1000; text-align: center; margin: 0; padding: 0px; list-style: none; display: inline; color: #FFFFFF;}
ul.menu li.menu {z-index: 1000; color: #FFFFFF; line-height: 40px; padding-left: 15px; padding-right: 15px; font-family: Arial,
Helvetica, sans-serif; font-weight: bold; position: relative; background: #000000; cursor: pointer; display: inline-block;}
ul.menu li.menu:hover{z-index: 1000; background: #505050; color: #FFFFFF;}
ul.menu li.menu ul.menu{z-index: 1000; color: #FFFFFF; left: 0; padding:0; position: absolute; width: 160px; visibility: hidden;
display: none; border: 1px #000000 solid; border-bottom: none;}
ul.menu li.menu ul.menu li.menu{z-index: 1000; font-size: 12pt; padding: 4px; text-align: left; background: #F97300; display:
block; color: #FFFFFF; border-bottom: 1px #000000 solid; line-height: 30px;}
ul.menu li.menu ul.menu li.menu:hover{z-index: 1000; background: #E0E0E0; color: #000000;}
ul.menu li.menu:hover ul.menu{z-index: 1000; display: block; visibility: visible; opacity: .8;}
jsfiddle http://jsfiddle.net/omvvL5z5/1/
Use the JQuery $(".menubar").toggle() function inside a function you call when you click on a item.
http://api.jquery.com/toggle/
This is the code I tried on jsfiddle: Try three
<div class="menubar">
<ul class="menu">
<li class="menu"><div onClick="loadPage('home.html');">HOME</div></li>
<li class="menu"><div onClick="" class = "button">PRODUCTS <img src="images/darrow.gif" border=0></div>
<ul class="menu">
<li class="menu"><div onClick="loadPage('products.html');">View All Products</div></li>
<li class="menu"><div onClick="loadPage('cargolite.html');">Car-Go Lite</div></li>
<li class="menu"><div onClick="loadPage('cargolitextreme.html');">Car-Go Lite Xtreme</div></li>
<li class="menu"><div onClick="loadPage('pup.html');">P'Up</div></li>
<li class="menu"><div onClick="loadPage('twist.html');">Twist</div></li>
<li class="menu"><div onClick="loadPage('wazat.html');">Wazat</div></li>
</ul>
</li>
<li class="menu"><div onClick="" class = "button">DOWNLOADS <img src="images/darrow.gif" border=0></div>
<ul class="menu">
<li class="menu"><div onClick="loadPage('brochures.html');">Brochures</div></li>
<li class="menu"><div onClick="loadPage('manuals.html');">Manuals</div></li>
</ul>
</li>
<li class="menu"><div onClick="" class = "button">DEALERS <img src="images/darrow.gif" border=0></div>
<ul class="menu">
<li class="menu"><div onClick="loadPage('dealers_us.html');">United States</div></li>
<li class="menu"><div onClick="loadPage('dealers_ww.html');">Worldwide</div></li>
</ul>
</li>
<li class="menu"><div onClick="loadPage('about.html');" class = "button">ABOUT</div></li>
<li class="menu"><div onClick="loadPage('contact.html');" class = "button">CONTACT US</div></li>
</ul>
</div>
Then just put in your other jquery
instead of what I did try
$('.menu > ul > li').click(function() {
$('.menu > ul.menu').toggle();
});
$('.button').hover(function(){$('.menu > ul.menu').show();});
You may also use something like bootstrap: http://getbootstrap.com/components/#navbar
Please give this CSS for mobile css
.menubar{
display:none;
}