I have this code:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle buttonForProfile" type="button" id="dropdownMenuButton" data-bs-toggle='dropdown' aria-haspopup="true" aria-expanded="false">
<?php echo $_SESSION['username']; ?>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Profile</a>
<a class="dropdown-item" href="#">Subscriptions</a>
<a class="dropdown-item" href="./php/signout.php">Sign out</a>
</div>
</div>
I added some css and now it looks like this:
When I click on it, the background changes back to default:
How do I change that gray background when the dropdown is toggled?
#dropdownMenuButton:focus {
background-color: //color;
}
PS: btn-secondary gives it the grey color, you don't need it if you're customizing the color.
Related
example photo sidebar
I looking for solution for create sidebar like on above photo.
photo2
After click icon sidebar then display menu.
I have somelike this but I need to add extra menu after click like first screen:
https://www.codeply.com/p/yRugA2FB3I
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu">
<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>
</li>
Put this as dropdown list, try to edit css of the dropdown item.
or use this as well:
<!-- Default dropright button -->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropright
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
it is the element of bootstrap 4 that do dropdown on the right.
I'm currently using bootstrap 4.0. The dropdown menu is at the top right corner of the screen. When the user clicks on the drop down menu, The menu makes the page expand slightly to the right so it shows white space right next to the nav bar.
This is what it looks like:
This is the code that I'm using:
<div class="dropdown dropdown-left">
<button class="btn btn-secondary dropdown-toggle bg-dark" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu bg-dark" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item text-light" href="#">Action</a>
<a class="dropdown-item text-light" href="#">Another action</a>
</div>
</div>
Use this code:
<!-- Default dropright button -->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-
toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropright
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
This is how you do that in BS 4:
Documentation
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropleft
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
You need to add the alignment class to the .dropdown-menu instead of the container .dropdown element. And the class to add to right align a menu should be .dropdown-menu-right as mentioned in the docs.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle bg-dark" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu dropdown-menu-right bg-dark" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item text-light" href="#">Action</a>
<a class="dropdown-item text-light" href="#">Another action</a>
</div>
</div>
I have the following some clickable sub list of a button which is in the navbar of the website having some modals in different urls such as url.com/mystock#modal-batch-stock-add.
Navbar button list
<div class="btn">
<a class="btn btn-success dropdown-toggle" data-toggle="tooltip" title="Hooray!" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-plus"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink" style="">
<a class="dropdown-item" href="#">First Link</a>
<a class="dropdown-item" href="#">Second Link</a>
<a class="dropdown-item" href="#">Third Link</a>
</div>
</div>
A modal example which is in mystock.razor (think of it as just as html typically).
<button type="button" class="btn btn-success" data-toggle="modal" data-backdrop="static" data-target="#modal-batch-stock-add"><!--!--><i class="fas fa-plus"></i> ABCDE-DeMO-MODAL</button>
I wish I open the modals which are in different sub-html files and place them in dropdown-items' hrefs. I thought I would write like a class="dropdown-item" href="url.com/mystock#modal-batch-stock-add" but on the address bar when I enter url.com/mystock#modal-batch-stock-add doesn't retrieve the modal.
I am working on a website in which I want to create a dropdown submenu on hover in Bootstrap 4.1
The HTML code which I have used in order to create a dropdown menu on hover are:
<div class="navbar-collapse text-center" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
main menu
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">P</a>
<a class="dropdown-item" href="#">Q</a>
<a class="dropdown-item" href="#">R</a>
<a class="dropdown-item" href="#">S</a>
</div>
</li>
<button type="submit" onclick="location.href='/M';" class="btn btn-default">R</button>
</ul>
</div>
The above HTML code is the working code which displays P, Q, R, and S on hover.
Problem Statement:
I am wondering what changes I should make in the code above now so that on hover of S; dropdown items T, U, V, and W are shown.
You could just apply the inception concept and put back another dropdown-toggle element inside the menu.
To open the sub-menu on hover you have to wrap the content inside a container to apply the :hover css styling display:block on the .dropdown-menu child element that contains the submenu links.
/* makes main-menu open on hover */
.menu-item:hover > .dropdown-menu {
display: block;
}
/* makes sub-menu S open on hover */
.submenu-item:hover > .dropdown-menu {
display: block;
}
<link href="https://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<div class="navbar-collapse text-center" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="menu-item nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
main menu
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">P</a>
<a class="dropdown-item" href="#">Q</a>
<a class="dropdown-item" href="#">R</a>
<div class="submenu-item">
<a class="dropdown-item dropdown-toggle dropright" href="#" id="navbarDropdownSubMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
S
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownSubMenuLink">
<a class="dropdown-item" href="#">T</a>
<a class="dropdown-item" href="#">U</a>
<a class="dropdown-item" href="#">V</a>
<a class="dropdown-item" href="#">W</a>
</div>
</div>
</div>
</li>
<button type="submit" onclick="location.href='/M';" class="btn btn-default">R</button>
</ul>
</div>
Well, I think you've already figured out that isn't possible with the default bootstrap 4.1 classes.
You can achieve the desired effect using some jQuery and CSS.
First, create a div with a custom class and a list with the items you need, TUVW in your case.
After in CSS, you can hide your list container and handle its position.
In jQuery you can track mouse hover event('mouseenter mouseleave') puting your logic to show/hide the list container.
I'm trying to use bootstrap 4 dropdown and animate.css but it doesn't work correctly together. Dropdown opens different area. What's wrong ?
Note: We solved problem.
<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 dropdown-menu-right bounceIn animated" 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>
Fiddle !
Solution
.dropdown-menu.animated{ top:initial!important;}
.dropdown-menu-right.animated{ left: initial!important; right: 0; }
.dropdown{ display: inline-block; }
Working Fiddle