bootstrap drop down menu transparent button - html

$(document).ready(function(){
$('.dropdown > button').mousedown(function(){
$(this).addClass('redClass');
$('.dropdown').addClass('redClass');
});
$('.dropdown > button').mouseup(function(){
$(this).removeClass('redClass');
$('.dropdown').removeClass('redClass');
});
$('.dropdown > button').click(function(){
$(this).addClass('redClass');
$('.dropdown').addClass('redClass');
});
$('.dropdown > button').mouseleave(function(){
$(this).addClass('redClass');
$('.dropdown').addClass('redClass');
});
})
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.redClass {
background: transparent;
border: 1px solid transparent;
}
.transparentClass{
background: transparent;
border: 1px solid transparent;
}
<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.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Home
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>About us</li>
</ul>
</div>
</div>
I want to design a bootstrap drop down for my angular2 application.I am running into issues.I want a single drop down menu when the user clicks the caret only.But even if I click outside the caret the dropdown menu shows.Another issue is I want both the menu and sub menu to have transparent color whether hovered or clicked.I tried the below css for hover and active,it didn't work.
.dropdown > button {
background-color: transparent;
}
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Home
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>About us</li>
</ul>
</div>

I think there is no way to select parent of an element with css. You can use jQuery to do that:
$(document).ready(function(){
$('.dropdown > button').mousedown(function(){
$(this).addClass('redClass');
$('.dropdown').addClass('redClass');
});
$('.dropdown > button').mouseup(function(){
$(this).removeClass('redClass');
$('.dropdown').removeClass('redClass');
});
})
.redClass {
background: #f00;
}
.transparentClass{
background: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Home
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>About us</li>
</ul>
</div>

Related

Hide menu on click of button

I have a bootstrap drop-down. What I'm trying to achieve is once you click on the button the menu appears but when you click on the button again the menu doesn't hide. I want the menu to hide on click of the button. The method I tried didn't work and I think there should be a more suitable way to hide the menu on click of the button. How can I achieve this? Thanks in advance.
$('.dropdown button').on('click', function() {
if ($(this).attr('class').split(" ").pop() == 'show') {
//not working menu is getting hidden before showen
$(this).parents('.dropdown').find('ul').hide()
}
});
.dropdown {
margin-left: 40%;
}
.dropdown-menu {
transform: translate(calc(-50% + 20px), 40px) !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" integrity="sha384-3B6NwesSXE7YJlcLI9RpRqGf2p/EgVH8BgoKTaUrmKNDkHPStTQ3EyoYjCGXaOTS" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="dropdown">
<button class="btn btn-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa-solid fa-bell"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item">option 1</a></li>
<li><a class="dropdown-item">option 2</a></li>
<li><a class="dropdown-item">option 3</a></li>
</ul>
</div>
Would you prefer using the "toggle" instead?
$(function () {
$("button").click(function () {
$(".dropdown-menu").toggle();
});
});

Is there a way to create a website pop-up menu using only html and css no javascript?

Is it possible to create pop-up menus that include checkboxes and other widgets using only html/css?
Can this be done by using bootstrap?
.popupmenu{list-style:none; margin:0; padding:0;}
.popupmenu li{width:100%; text-align:center; font-size:26px; padding:10px;}
.popupmenu li:hover{background:blue; color:#fff;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open Menu
</button>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<ul class="popupmenu">
<li>Logo</li>
<li>Home</li>
<li>Profile</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
If you want to use the dropdowns of bootstrap you should pass by Js because they use jquery and their library made with js you find here more examples bootstrap dropdowns, you can test the snippet down:
<head>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</body>
However, if you don't want to pass by js, from Example from w3schools
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>

How to add a dropdown menu to a button in HTML/CSS using Bootstrap?

How can I add a dropdown to a button in my HTML code . I have used the following code to generate a button and attached a dropdown to it , but it does not work .
The menu button is generated and it even highlights when clicked , but it does not display the dropdown , when clicked .
.jumbotron {
text-align: center;
color: white;
background-color: black;
height: 120px;
font-size: 50px;
}
body {
background-color: #ededed;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="col-lg-1">
<div class="container">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu <span class="glyphicon glyphicon-menu-hamburger"></span></button>
<ul class="dropdown-menu">
<li>Home</li>
<li>About</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-10">
<div class="container">
<div class="jumbotron container"><strong>FEEDBACK</strong></div>
</div>
</div>
</div>
You have to include the jQuery library and bootstrap.js for this.
And why are you using container class inside your col classes...its not good practice.
Read This: Bootstrap Grid Structure
Stack Snippet
.jumbotron {
text-align: center;
color: white;
background-color: black;
height: 120px;
font-size: 50px;
}
body {
background-color: #ededed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu <span class="glyphicon glyphicon-menu-hamburger"></span></button>
<ul class="dropdown-menu">
<li>Home</li>
<li>About</li>
</ul>
</div>
</div>
<div class="container">
<div class="jumbotron container"><strong>FEEDBACK</strong></div>
</div>

Cant change the button color in bootstrap

I have cretaed this button in Bootstrap.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-3">
<div class="dropdown2">
<button class="btn btn-default dropdown-toggle glyphicon glyphicon-shopping-cart" type="button" data-toggle="dropdown">Carello (99)
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li class="dropdown-header">Dropdown header 1</li>
</ul>
</div>
</div>
I have used some Bootstrap classes for buttons but when I try to change the color of this button in css nothing seems to happen.. How is it possible to change the color of this button in Bootstrap?
Here is my css :
.dropdown-menu{
background: #ff6600;
}
Thanks!
You need to override the css. And I suggest you not to use glyphicon classes on button directly instead use a <i></i> inside the button and set the class on it like in this answer. This way you will get proper alignment. Yours was having some alignment problem
.btn.btn-default,
.btn.btn-default:focus{
background-color:#0066ff;
color:#fff;
}
.btn.btn-default:active,
.btn.btn-default.dropdown-toggle:active,
.btn.btn-default:hover{
background-color:#0099ff;
color:#fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-3">
<div class="dropdown2">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"><i class="glyphicon glyphicon-shopping-cart""></i> Carello (99)
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li class="dropdown-header">Dropdown header 1</li>
</ul>
</div>
</div>
You are currently using .btn-default. Now you could make use of any of the other default Bootstrap button colors: .btn-primary, .btn-info, .btn-success, .btn-warning, .btn-danger.
Alternatively, you can modify the color of this button to a color of your choosing by writing a style for:
.dropdown2 .btn-default {
background: YOURCOLORHERE;
color: YOURCOLORHERE;
}
Add the required styles like below.
button.btn {
background-color: coral;
color: white;
border-color: red;
}
button.btn:hover {
background-color: darkviolet;
color: white;
border-color: darkviolet;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-3">
<div class="dropdown2">
<button class="btn btn-default dropdown-toggle glyphicon glyphicon-shopping-cart" type="button" data-toggle="dropdown"> Carello (99)
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li class="dropdown-header">Dropdown header 1</li>
</ul>
</div>
</div>

Bootstrap horizontal dropdown-menu?

I'd like a bootstrap dropdown menu where the links are horizontal. Unfortunately, I'm having trouble with getting the width correct. The only way I can seem to make it happen is set the min-width to some arbitrary number. I'd like to do this responsively.
http://jsfiddle.net/3CwzH/
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.dropdown-menu>li>a {
display: inline;
}
.dropdown-menu {
min-width: 500px;
}
<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"></script>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Drop it
</button>
<ul class="dropdown-menu" role="menu">
<li>
Google
Facebook
</li>
</ul>
</div>
I have solved your problem. View this JSFiddle for demonstration.
HTML
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Drop it</button>
<ul class="dropdown-menu" role="menu">
<li> Google
</li>
<li> Facebook
</li>
</ul>
</div>
CSS
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
.dropdown-menu > li {
display: inline-block;
float:left;
}
.open > ul {
display: inline-flex !important;
}