I have some dropdowns that contain multiple elements that I would like to collapse if open when any other menu item is clicked. Here is what I have so far:
<head>
<meta charset="utf-8">
<title>Test</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Master CSS -->
<link rel="stylesheet" href="master.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="wrapper">
<nav class="sidebar" id="sidebar-id">
<ul class="list-unstyled nav components">
<li class="active"><i class="glyphicon glyphicon-home"></i>Home</li>
<li>
<i class="glyphicon glyphicon-briefcase"></i>About
<ul class="collapse list-unstyled" id="aboutSubmenu">
<li>Pages 1</li>
<li>Pages 2</li>
<li>Pages 3</li>
</ul>
</li>
<li>
<i class="glyphicon glyphicon-duplicate"></i>Pages
<ul class="collapse list-unstyled" id="pagesSubmenu">
<li>Pages 1</li>
<li>Pages 2</li>
<li>Pages 3</li>
</ul>
</li>
<li><i class="glyphicon glyphicon-link"></i> Portfolio</li>
<li><i class="glyphicon glyphicon-send"></i>Contact</li>
</ul>
</nav>
<!-- end sidebar -->
</body>
As you can see when you click on 'About' or 'Pages' their dropdown opens, however they do not close unless you click on the specific heading again. I would like any open dropdown to close, unless you click on the dropdowns heading, in which case all dropdowns will close and then the correct dropdown shall open.
Here you go with a solution
$('a').click(function(){
if(!$(this).next('ul').hasClass('in')) {
$('.collapse').each(function(){
$(this).removeClass('in');
});
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<div class="wrapper">
<nav class="sidebar" id="sidebar-id">
<ul class="list-unstyled nav components">
<li class="active"><i class="glyphicon glyphicon-home"></i>Home</li>
<li>
<i class="glyphicon glyphicon-briefcase"></i>About
<ul class="collapse list-unstyled" id="aboutSubmenu">
<li>Pages 1</li>
<li>Pages 2</li>
<li>Pages 3</li>
</ul>
</li>
<li>
<i class="glyphicon glyphicon-duplicate"></i>Pages
<ul class="collapse list-unstyled" id="pagesSubmenu">
<li>Pages 1</li>
<li>Pages 2</li>
<li>Pages 3</li>
</ul>
</li>
<li><i class="glyphicon glyphicon-link"></i> Portfolio</li>
<li><i class="glyphicon glyphicon-send"></i>Contact</li>
</ul>
</nav>
Hope this will help you.
Related
I'm new to bootstrap and was wondering if anyone could help me.
I want a menu with icons only, but trying to do it won't let me.
My HTML:
<div class="container">
<ul class="nav nav-pills">
<li class="active">Home</li>
<li>Notifications</li>
<li> Discover</li>
<li>Messages</li>
</ul>
</div>
I want to display icons instead of messages.
Thanks for all the help.
You can include bootstrap glyphicons as icons using the below markup. Instead of text, update to <i> tag with respective glyphicon.
<div class="container">
<ul class="nav nav-pills">
<li class="active"><i class="glyphicon glyphicon-home"></i></li>
<li><i class="glyphicon glyphicon-ok"></i></li>
<li> <i class="glyphicon glyphicon-info-sign"></i></li>
<li><i class="glyphicon glyphicon-folder-open"></i></li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container">
<ul class="nav nav-pills">
<li class="active"><i class="glyphicon glyphicon-home"></i></li>
<li><i class="glyphicon glyphicon-ok"></i></li>
<li> <i class="glyphicon glyphicon-info-sign"></i></li>
<li><i class="glyphicon glyphicon-folder-open"></i></li>
</ul>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/full-slider.css" rel="stylesheet">
<link href="css/welcome.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>VMS</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top " role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/">Visitor Mangement System</a>
</div>
<ul class="nav navbar-nav"></ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="{{URL::to('logout')}}">
<span style="color:white"></span>
<span class="glyphicon glyphicon-log-in"></span></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Register</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Visitor<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Login</li>
<li>Register and Check In</li>
<li>Booked Check In</li>
<li>Check In</li>
<li>Check Out</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Employee<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Login</li>
<li>Check In</li>
<li>Check Out</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Administrator<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Login</li>
<li>Check In</li>
<li>Check Out</li>
</ul>
</li>
</ul>
</ul>
#endif
</div>
</nav>
<header id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="fill" style="background-image:url('images/img1.jpg');"></div>
</div>
<div class="item">
<div class="fill" style="background-image:url('images/img2.jpg');"></div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</header>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$('.carousel').carousel({
interval: 3000 //changes the speed
})
</script>
</body>
i have a navigation bar and below goes a carousel.There is a dropdown in the navigation bar buttons.But the drop down in navbar is behind the carousel image.I want the dropdown over the carousel.Any Help is most welcome.
try,
.dropdown-menu{
z-index: 123;
}
give z-index value higher than the carousel.
Set a z-index for the two elements
.navbar {
position: relative;
z-index: 100;
}
.carousel {
position: relative;
z-index: 50;
}
A higher z-index will rise above the other.
I am using Twitter Bootstrap in my web app and have included bootstrap.css/js files. But when I click on menu base it doesn't unfold and nothing happens.
Any idea what is wrong? Here is my code:
<li class="dropdown">
menu base
<ul class="dropdown-menu" aria-labelledby="more-drop">
<li class="dropdown-menuitem">
sub menu1
</li>
<li class="dropdown-menuitem">
sub menu2
</li>
</ul>
</li>
Here is the Working Code:
Working Fiddle: Dropdown Menu Fix
Mistake:
1- Dropdown Menu 'aria-labelledby' is not defined
2- Anchor Tag ID is not set with 'aria-labelledby' value
aria-labelledby: Identifies the element (or elements) that labels the current element.
<li class="dropdown">
<a id="dropdownMenu1" class="dropdown-toggle" data-toggle="dropdown">menu base</a>
<ul class="dropdown-menu" aria-labelledby="more-drop" aria-labelledby="dropdownMenu1">
<li class="dropdown-menuitem">
sub menu1
</li>
<li class="dropdown-menuitem">
sub menu2
</li>
</ul>
</li>
You have missed the following attributes necessary for Bootstrap dropdown to work as toggle dropdown menu.
role="button"
aria-haspopup="true"
aria-expanded="false"
Code Snippet
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/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/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
<ul>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
</ul>
</li>
</ul>
Hope this may helps you
<!DOCTYPE html>
<html>
<head>
<title>dropdown menu of twitter bootstrap doesn't work — doesn't unfold</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<li class="dropdown">
menu base <b class="caret"></b>
<ul class="dropdown-menu">
<li>sub menu1</li>
<li>sub menu2</li>
</ul>
</li>
</body>
</html>
I'm new in asp and I'm having trouble using navbar collapse. It works fine in homepage(AnonymousTemplate), but when I logged in navbar collapsed is not working(not expanding when clicked).
Here's is my code. I'm new here so please be gentle. Sorry for the question.
Thanks for anyone who will answer, it will be greatly appreciated.
In here it works.
In here it doesn't work.
Here are my script and html.
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
<script src="js/jquery.isotope.min.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
<script src="js/wow.min.js" type="text/javascript"></script>
<nav class="navbar navbar-inverse" role="banner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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="Default.aspx"><asp:Image ID="Image1" runat="server" ImageUrl="~/images/service/logo.png"></asp:Image></a>
</div>
<div runat="server" class="collapse navbar-collapse navbar-right">
<asp:LoginView ID="LoginView1" runat="server">
<AnonymousTemplate>
<ul class="nav navbar-nav">
<li>Home</li>
<li><a href="HowItWorks.aspx" >How it works?</a></li>
<li>Contact us</li>
<li class="dropdown">
About us <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Our Customers</li>
<li>Our Truckers</li>
<li>Our Mission</li>
<li>Our Vision</li>
</ul>
</li>
</ul>
</AnonymousTemplate>
<LoggedInTemplate>
<ul class="nav navbar-nav">
<li>My profile</li>
<li><a href="AdvancedBooking.aspx" >Advanced Booking</a></li>
<li>Transaction History</li>
<li class="dropdown">
About us<i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Our Customers</li>
<li>Our Truckers</li>
<li>Our Mission</li>
<li>Our Vision</li>
</ul>
</li>
<li><asp:LoginStatus runat="server" /></li>
</ul>
</LoggedInTemplate>
</asp:LoginView>
</div>
</div>
</nav>
Try to use an unique name to the other dropdown menu and link the other data-toggle to it like this:
<AnonymousTemplate>
<ul class="nav navbar-nav">
<li>Home</li>
<li><a href="HowItWorks.aspx" >How it works?</a></li>
<li>Contact us</li>
<li class="dropdown">
About us <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Our Customers</li>
<li>Our Truckers</li>
<li>Our Mission</li>
<li>Our Vision</li>
</ul>
</li>
</ul>
</AnonymousTemplate>
<LoggedInTemplate>
<ul class="nav navbar-nav">
<li>My profile</li>
<li><a href="AdvancedBooking.aspx" >Advanced Booking</a></li>
<li>Transaction History</li>
<li class="dropdown2">
About us<i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Our Customers</li>
<li>Our Truckers</li>
<li>Our Mission</li>
<li>Our Vision</li>
</ul>
</li>
<li><asp:LoginStatus runat="server" /></li>
</ul>
</LoggedInTemplate>
OK, after many tests I finally got my answer. I changed:
<script src="js/bootstrap.min.js" type="text/javascript"></script>
to:
<script src="/js/bootstrap.min.js" type="text/javascript"></script>
Add "/" at the start to locate it at the root folder. Sorry if this one is a silly mistake. I only started 1 month in asp.net. I am posting this answer for anyone who will face this issue too.
-RobM
my dropdown menu in navbar works fine when the browser is maximized but if i resize the browser to a mobile size then the dropdown menu does not show up as well as the menu button toggled up. here is my navbar code with dropdown. I am using bootstrap 3.when i clicked EBBL the dropdown menu does not show up and the whole navbar menu is toggled up.
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="<?php echo site_url('home/index')?>">BCTF</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse ">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li>
<a class="page-scroll" href="<?php echo site_url('home/index')?>">Home</a>
</li>
<li>
<a class="page-scroll" href="<?php echo site_url('home/show_about')?>">About</a>
</li>
<li>
<a class="page-scroll" href="<?php echo site_url('home/show_open_butterfly_park')?>">Open Butterfly Park</a>
</li>
<li class="dropdown">
</span>
<ul class="dropdown-menu">
<li>About EBBL</li>
<li>Content 1</li>
<li>Content 2</li>
<li>Content 3</li>
<li>Content 4</li>
</ul>
</li>
<li>
<a class="page-scroll" href="<?php echo site_url('home/show_biography')?>">Biography</a>
</li>
<li>
<a class="page-scroll" href="<?php echo site_url('home/show_gallery')?>">Gallery</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>