Currently trying to create a simple dropdown sidebar using bootstrap.
Below is my code in html:
<html>
<head>
<title>Sidebar</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="bootstrap.css">
<link type="text/css" rel="stylesheet" href="common.css"/>
</head>
<body>
<div class="col-sm-3">
<ul class="nav nav-sidebar">
<li class="row">Item 1
<ul class="dropdown-menu">
<li>Item 1A</li>
<li>Item 1B</li>
<li>Item 1C</li>
</ul>
</li>
<li class="row">Item 2
<ul class="dropdown-menu">
<li>Item 2A</li>
<li>Item 2B</li>
</ul>
</li>
</ul>
</div>
</body>
Here is my common.css:
.row{
background-color:#ffff99;
border:2px solid black;
}
The sidebar won't drop down when I click Item 1 or Item 2. Any idea what went wrong?
Have a look at the basic template on the Bootstrap site
http://getbootstrap.com/getting-started/#template
At the bottom of the HTML block they have referenced two javascript files which you are missing.
You need to include the jquery.js and bootstrap.js.
The dropdowns work with JavaScript, so you need to include that. Try to add bootstrap.min.js to your application by adding
<script src="bootstrap.min.js" type="text/javascript"></script>
to the head section of your page, or just before the closing </body>-tag of the page.
Additionally, you need to add jQuery, which is done the same way, but make sure you include it before the bootstrap script.
Your dropdowns work with JavaScript
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.row {
background-color: #ffff99;
border: 2px solid black;
}
</style>
</head>
<body>
<div class="col-sm-3">
<ul class="nav nav-sidebar">
<li class="row">
Item 1
<ul class="dropdown-menu">
<li>Item 1A</li>
<li>Item 1B</li>
<li>Item 1C</li>
</ul>
</li>
<li class="row">
Item 2
<ul class="dropdown-menu">
<li>Item 2A</li>
<li>Item 2B</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Related
I have the following test code, but no matter what I do the toggle button always positions itself to the bottom right of the screen.
<!DOCTYPE html>
<html lang="en">
<head>
<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.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">TestWebsite</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>
<script src="https://github.com/Cognigy/WebchatWidget/releases/latest/download/webchat.js"></script>
<script>
initWebchat(
"https://endpoint-trial.cognigy.ai/1344d45dff864bfb0627d205f7f8835026ab24d0d27384ffabd4740a9c1023b2"
)
</script>
</li>
</ul>
</div>
</nav>
</body>
</html>
I need it to be positioned in an <li> after <li>Page 3</li>
I'm doing a drop-down list where, when I hover over a specific element, I should highlight only the selected one, unfortunately the whole list is highlighted in my mind, I know the problem is that in one li there is also a new list to make a drop down menu, Unfortunately, I can not deal with it. It's actual result jsfiddle code
<div class="nav">
<ul>
<li class="parent">
<a class="parent_click">Driving</a>
<ul class="sub_list">
<li class="test">
<a class="sub_click">Type of Car</a>
<ul class="sub_sub_list">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</li>
<li class="test">
<a class="sub_click">Tracks</a>
<ul class="sub_sub_list">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</li>
<li class="teset">Type of driving</li>
</ul>
</li>
</ul>
</div>
</div>
My CSS:
.sub_list, .sub_sub_list {display:none;}
li:hover{
background-color:red;
}
My JS
$(".sub_list").slideUp();
$(".parent_click").click(function() {
$(".parent_click").not(this).next().slideUp()
$(this).closest(".parent").find(".sub_list").slideToggle();
return false;
});
$(".sub_click").click(function() {
var elem = $(this).next()
$(".sub_sub_list").not(elem).slideUp();
$(this).closest(".test").find(".sub_sub_list").slideToggle();
});
Try using anchor for hover instead of li. It will be simplest and easiest solution. While you can play with code if you want complicated solution...
See below snippet.
$(".sub_list").slideUp();
$(".parent_click").click(function() {
$(".parent_click").not(this).next().slideUp()
$(this).closest(".parent").find(".sub_list").slideToggle();
return false;
});
$(".sub_click").click(function() {
var elem = $(this).next()
$(".sub_sub_list").not(elem).slideUp();
$(this).closest(".test").find(".sub_sub_list").slideToggle();
});
.sub_list, .sub_sub_list {display:none;}
a:hover{
background-color:red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8"/>
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<title>Hello, world!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="nav">
<ul>
<li class="parent">
<a class="parent_click">Driving</a>
<ul class="sub_list">
<li class="test">
<a class="sub_click">Type of Car</a>
<ul class="sub_sub_list">
<li><a>List 1</a></li>
<li><a>List 2</a></li>
<li><a>List 3</a></li>
</ul>
</li>
<li class="test">
<a class="sub_click">Tracks</a>
<ul class="sub_sub_list">
<li><a>List 1</a></li>
<li><a>List 2</a></li>
<li><a>List 3</a></li>
</ul>
</li>
<li class="teset"><a>Type of driving</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"
></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
I'm trying to center text vertically within a div bootstrap container. This is my sample HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<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.6/js/bootstrap.min.js"></script>
<style>
.vcenter {
display: inline-block;
vertical-align: middle;
float:none;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default vcenter ">
<ul class="list-inline vcenter" >
<li class="menuFont">Menu 1</li>
<li class="menuFont ">Menu 2</li>
<li class="menuFont ">Menu 3</li>
<li class="menuFont ">Menu 4</li>
<li class="menuFont ">Menu 5</li>
<li class="menuFont ">Menu 6</li>
<li class="menuFont ">Menu 7</li>
</ul>
</nav>
</div>
</body>
</html>
I would like the menu text centered vertically within the container, but they are hugging the top. How would I do this?
I worked on this last night and this is what I came up with:
My goal using Bootstrap, was to have a series of menu links running horizontally across the page. For some reason, doubtless due to my ignorance, this proved rather difficult. I did come up with a solution. At least this seems to work, OK. HOWEVER, in order to make the horizontal menu items appear vertically centered within the container, I had to add margin-top: 3px to the class view. This feels kind of fake to me, but whatever works works, I guess. Any comments are appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TEST</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<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.6/js/bootstrap.min.js"> </script>
<style>
.view {
margin-left: auto;
margin-right: auto;
overflow: hidden;
margin-top: 3px;
}
</style>
</head>
<body>
<div class="container">
<div class="Jumbotron">
<h1 class="text-primary text-center">Using Bookstreap.js</h1>
<hr>
</div>
<nav class="navbar navbar-default view ">
<div class="container-fluid view">
<div class="row">
<div class="col-lg-10 col-lg-offset-10 view" >
<ul class="list-inline view" >
<li class="view">Menu 1</li>
<li class="view">Menu 1</li>
<li class="view">Menu 2</li></li>
<li class="view">Menu 3</li>
<li class="view">Menu 4</li>
<li class="view">Menu 5</li>
<li class="view">Menu 6</li>
</ul>
</div>
</div>
</div>
</nav>
<div>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<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.6/js/bootstrap.min.js"></script>
<style>
{
display: inline-block;
vertical-align: middle;
float:none;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default vcenter " >
<div class="container-fluid vcenter">
<div class="col-lg-5 col-lg-offset-5" >
<ul class="list-inline vcenter" >
<div>
<li class="menuFont">Menu 1</li>
<li class="menuFont ">Menu 2</li>
<li class="menuFont ">Menu 3</li>
<li class="menuFont ">Menu 4</li>
<li class="menuFont ">Menu 5</li>
<li class="menuFont ">Menu 6</li>
<li class="menuFont ">Menu 7</li>
<div>
</ul>
</div>
</div>
</nav>
</div>
</body>
</html>
I'm using zurb foundation's dropdown menu. I need the dropdown lists to display as inline-block. So far, I haven't any foundation rules that do this. I need help
<html>
<head>
<!--foundation styles-->
<style type="text/css">
.custom-menu{
display:inline-block;
}
</style>
</head>
<body>
<div class="row text-center">
<ul class="dropdown menu custom-menu" data-dropdown-menu>
<li>Item One
<ul class="menu">
<!-- I want to display the lists here as inline
block-->
<li>Item One A</li>
<!--more Links-->
</ul>
</li>
<li>Item Two</li>
</ul>
</div>
<!--foundation scripts-->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tabs</h3>
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
</body>
</html>
this is sample code.
Is it possible add icon in bootstrap nav tabs like below picture.
I want to add number icon in nav tabs.
Working demo
You would do this with a badge,
<li class="active">Home<span class="badge">140</span></li>
and a little bit of CSS
.nav-tabs .badge{
position: absolute;
top: -10px;
right: -10px;
background: red;
}
Insert your badge and position is relative to the container like this:
.count-badge {
position: relative;
top: -50px;
right: -50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<div class="container">
<h3>Tabs</h3>
<ul class="nav nav-tabs">
<li class="active">Home
<span class="count-badge badge">140</span>
</li>
<li>Menu 1
</li>
<li>Menu 2
</li>
<li>Menu 3
</li>
</ul>
</div>
Yes, this is possible in multiple ways. Bootstrap has badges that would be an elegant solution.
<span class="badge">140</span>