I have been trying to make an HTML page that contains a dropdown element that can also go whithin another dropdown, like at this page: https://coda.io/d/_dIXWo7SiwOb/Untitled_su1WJ
I do not want a dropdown list.
I tried a few things, but they either couldn't stack, or they were just dropdown lists.
There are a lot of examples/tutorials out there on how to do something like this with Bootstrap and jquery. I hacked out a quick example that seems to do what you want using an example from W3 schools and it seems to be working reasonably well. Credit to W3 schools for providing the base example I worked from to come up with the end result you wanted. I will leave it to you to look at the code and modifying formatting (e.g. where carets go) and such, but the basic logic and functionality seem to be what you are looking for.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
</style>
</head>
<body>
<div class="container">
<h2>Untitled</h2>
<div class="dropdown">
<span class="dropdown-toggle" type="button" data-toggle="dropdown">Level 1
<span class="caret"></span></span>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Sublevel 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Sublevel 3</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Sublevel 2 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Sublevel 4</a></li>
</ul>
</li>
</ul>
</div>
</div>
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
</body>
</html>
Related
In my multilevel dropdown, I am facing problem in sub menus, If i click on 'products' it works nice, but when i click on 'products2' it ovelapps the products menu, I want products menu to disappear and products2 menu to be only visible menu. Thanks in advance
One sub-menu must close before other opens
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
</style>
</head>
<body>
<div class="container">
<h2>Multi-Level Dropdowns</h2>
<p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p>
<p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">HTML</a></li>
<li><a tabindex="-1" href="#">CSS</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Products <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Products 2<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">1nd level dropdown</a></li>
</ul>
</li>
</ul>
</div>
</div>
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
</body>
</html>
Try with this $('.dropdown-submenu ul').hide();
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
</style>
</head>
<body>
<div class="container">
<h2>Multi-Level Dropdowns</h2>
<p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p>
<p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">HTML</a></li>
<li><a tabindex="-1" href="#">CSS</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Products <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Products 2<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">1nd level dropdown</a></li>
</ul>
</li>
</ul>
</div>
</div>
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$('.dropdown-submenu ul').hide();
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
</body>
</html>
I have single page app where user should be able to select the value from the main menu and display container on the screen. If they select different value then everything but that container should not be visible. Here is example of my html.
$("#mainpg-menu li a").on('click', function(){
$(this).parent().addClass('active').siblings().removeClass('active');
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hearing Application</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta id="keep-alive-config" content="<cfoutput>#Application.sessionMinutes#</cfoutput>"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="Bootstrap/Bootstrap_Confirmation/bootstrap-confirmation.js"></script>
<link rel="stylesheet" href="CSS/Main.css">
</head>
<body>
<div class="container" style="background-color:red; height:600px;">
<nav class="navbar navbar-default">
<div class="container-fluid">
<p class="navbar-text"><b>Welcome to My Application!</b></p>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu<span class="caret"></span></a>
<ul class="dropdown-menu" id="mainpg-menu">
<li>Container 1</li>
<li>Container 2</li>
<li>Container 3</li>
<li>Container 4</li>
</ul>
</li>
<li>
<a href="#" data-toggle="popover">
<span class="glyphicon glyphicon-user"></span> jcrew</a>
</li>
<li>
<a href="#" data-toggle="confirmation">
<span class="glyphicon glyphicon-log-in"></span> Logout</a>
</li>
</ul>
</div>
</nav>
<div id="container1"></div>
<div id="container2"></div>
<div id="container3"></div>
<div id="container4"></div>
</div>
</body>
</html>
Each container should use the entire space of the main container and show the content. Every time user selects different container all other containers should be invisible. I have used this method:
$('.container > div[id=' + id + ']').show();
$('.container > div:not([id=' + id + '])').hide();
Where id should have currently selected element id. This works in majority of the browsers but I found some issues in Safari. For some reason previous container is not set to display:none. Since I'm using Bootstrap-twitter and JQuery I'm wondering if there is better way to handle this situation? I need something reliable and compatible in cross browsers. If anyone knows the best way to do this please let me know. Thank you.
You are using id's multiple times, an id should be used only once since it has to be unique. So I removed the id's from the navigation items!
I added the classname testclass to the divs that should be shown/hidden based on the decision made in the navigation, when an navigation item is clicked it will hide all elements with the class testclass.
Then I added the attribute data-target-id to the navigation items, this attribute will contain the id of the element (div) that should be shown again.
Still don't understand? Take a look at: https://codepen.io/joostm020/pen/YeRwJG
Example code:
$("#mainpg-menu li a").on('click', function(){
$(this).parent().addClass('active').siblings().removeClass('active');
$(".testclass").hide();
$("#" + $(this).attr("data-target-id")).show();
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hearing Application</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta id="keep-alive-config" content="<cfoutput>#Application.sessionMinutes#</cfoutput>"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="Bootstrap/Bootstrap_Confirmation/bootstrap-confirmation.js"></script>
<link rel="stylesheet" href="CSS/Main.css">
</head>
<body>
<div class="container" style="background-color:red; height:600px;">
<nav class="navbar navbar-default">
<div class="container-fluid">
<p class="navbar-text"><b>Welcome to My Application!</b></p>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu<span class="caret"></span></a>
<ul class="dropdown-menu" id="mainpg-menu">
<li>Container 1</li>
<li>Container 2</li>
<li>Container 3</li>
<li>Container 4</li>
</ul>
</li>
<li>
<a href="#" data-toggle="popover">
<span class="glyphicon glyphicon-user"></span> jcrew</a>
</li>
<li>
<a href="#" data-toggle="confirmation">
<span class="glyphicon glyphicon-log-in"></span> Logout</a>
</li>
</ul>
</div>
</nav>
<div class="testclass" id="container1">Test container1</div>
<div class="testclass" id="container2">Test container2</div>
<div class="testclass" id="container3">Test container3</div>
<div class="testclass" id="container4">Test container4</div>
</div>
</body>
</html>
You could simply put another identifier on all of the containers to reliably match them.
<div id="container1" container></div>
<div id="container2" container></div>
<div id="container3" container></div>
<div id="container4" container></div>
Then you can hide every container and only show the ID accordingly.
$('[container]').hide();
$('#' + id).show();
That should work in all but the most ancient browsers. If you need support for ancient browsers, instead of the custom attribute, you could use a custom class on those containers and select via that.
(Also note that, if you want to select by ID, you do not need to be unnecessarily specific. IDs are required to be unique)
I am making a website for which I have to make the page active attributes on different lines for different pages. Now I put the whole common script inside a file header and include it in every script. Now how can I change the content of a line when including it on different pages?
The header is as follows:
<!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">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="islamic.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Lato:400,300italic' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
html,body
{
height: 1500px;
}
.grey
{
background-color: #ccc;
padding: 20px;
}
</style>
</head>
<body>
<!-- We are going to make this page for navigation purpose -->
<nav class="navbar navbar-inverse navbar-fixed-top" role = "navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
</button>
<a class="navbar-brand" href="index.php">ILM</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li >Home</li>
<li >Discuss</li>
<li >About Us</li>
<li >Contact</li>
<li class="dropdown">
Social <b class="caret"> </b>
<ul class="dropdown-menu">
<li> Facebook</li>
<li> Twitter</li>
<li> Linked IN</li>
<li> You Tube</li>
</ul>
</li>
</ul>
</div>
</nav>
I want to change the line
<li ><a href="index.php" >Home</a></li>
to
<li class="active">Home</li>
for home page.
Now I want to change the line
<li ><a href="aboutus.php" >About Us</a></li>
to
<li class="active">Home</li>
for about us page.
Is it possible in php?
you can try somethign like this
http://jsfiddle.net/habo/arjw2q6b/
Place this code at the end of your </body> tag.
Guessing your page Urls will have the anchor tags hrefs. one each page load after full document id read your script will check if the URL contains "index.php" or all other hrefs and if it does then it will call the function resetActiveTab that function will remove active class for all the list items (li) and add class=active for the current page
$(function(){
if(window.location.href.contains("index.php")){
resetActiveTab("index.php");
}
else if(window.location.href.contains("why.php")){
resetActiveTab("why.php");
}
else if(window.location.href.contains("aboutus.php")){
resetActiveTab("aboutus.php");
}
}
function resetActiveTab(mySelector){
$(".navbar-nav li").each(function( key, value ) {
//alert($(value).attr("class"));
$(value).removeClass("active");
if( $(value).find("a").attr("href") == mySelector){
$(value).addClass("active");
}
});
}
I am having some trouble making the dropdown menus in twitter bootstrap work. Here is what I have for the navbar code.
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<a class="brand">Title of website</a>
<li class="divider-vertical"></li>
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Link 1<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Sub-Link 1</li>
<li>Sub-Link 2</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Link 2<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Sub-Link 1</li>
<li>Sub-Link 2</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
I have seen many different tutorials/examples on this, and I am not to sure what I am doing wrong, I have included jquery and the bootstrap-dropdown.js files at the end of the document.
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap-dropdown.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
Any help on this matter would be greatly appreciated.
Thanks in advance,
try this
//use bootstrap css
//latest jquery
//add bootstrap.js
//and paste your html
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Styles/bootstrap.css" rel="stylesheet" type="text/css" />
<style>
.box
{
border: 1px solid red;
height: 100%;
}
</style>
<script src="Scripts/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="Scripts/bootstrap.js" type="text/javascript"></script>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<a class="brand">Title of website</a>
<li class="divider-vertical"></li>
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Link 1<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Sub-Link 1</li>
<li>Sub-Link 2</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Link 2<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Sub-Link 1</li>
<li>Sub-Link 2</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
I've just tested the code and it should work. See this DEMO with your code
One minor update. The .brand element should be the child of navbar and not of ul, since that is invalid:
<div class="navbar">
<a class="brand">Title of website</a>
<div class="navbar-inner">
<ul class="nav">
<li class="divider-vertical"></li>
You don't event have to call $('.dropdown-toggle').dropdown(); - as you can see the demo above
I don't find any error in your code, seems like you are
missing or not being loaded bootstrap-dropdown.js file
moreover please add bootstrap.js core file (as added in jsfiddle in below link)
check this jsfiddle, http://jsfiddle.net/mastermindw/kbzxV/
Your code seems to run.
Check out this example: http://jsfiddle.net/vZQ7S/
You could try to check the developer console for any error messages there.
Maybe you are not linking the javascript libraries to the correct file path?
Also try to run
$('.dropdown-toggle').dropdown()
in the developer console and watch for error messages.
Bootstrap dropdown isn't working for me. I did everything correctly as you can see it there:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Test site | Jony</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Testing website coded by Jony - rapture-gfx" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen"/>
<link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'><link rel="stylesheet" href="css/flexslider.css" type="text/css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script src="js/jquery.flexslider.js"></script><!-- Place in the <head>, after the three links --> <script type="text/javascript" charset="utf-8">$(window).load(function() { $('.flexslider').flexslider({ animation: "slide" });});</script>
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp-1.4.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$('.dropdown-toggle').dropdown()
</script>
</head>
<header>
<div class="header">
<div class="container">
<ul class="menu">
<li class="current"><span style="color: #bde2e1;">Home</li>
<li class="dropdown"><a class="dropdown-toggle" href="#">Servers</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li class="hovering">Portfolio</li>
<li class="hovering">Releases</li>
<li class="hovering">Contact</li>
</ul>
</li>
<li class="hovering">Portfolio</li>
<li class="hovering">Releases</li>
<li class="hovering">Contact</li>
</ul>
Bootstrap is a ready framework with features like grid system, rows, ready js menus and more.
There's an explanation of how it works:
http://twitter.github.com/bootstrap/javascript.html#dropdowns
It doesn't work for me.
Yes, my src links correctly to the JS files.
your missing the body in your html.
put your script at the bottom of the page or after ready:
<script type="text/javascript">
$(function(){
$('.dropdown-toggle').dropdown();
});
</script>
demo: http://jsfiddle.net/rLL75/
EDIT:
use a newer version of jquery.
<header>
<div class="navbar navbar-static header">
<div class="navbar-inner container">
<ul class="nav" role="navigation">
<li class="brand"><span style="color: #bde2e1;">Home</span></li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
<li class="hovering">Portfolio</li>
<li class="hovering">Releases</li>
<li class="hovering">Contact</li>
</ul>
<div id="logo"><img src="img/logo.png" /></div>
</div>
</div>
</header>
<script type="text/javascript">
$(function(){
$('.dropdown-toggle').dropdown();
});
</script>