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.
Related
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'm trying to use a dropdown menu and include both signup and signin pages in it, but it doesnt work with me, the dropdown is not dropping down, even if I add a link in the ( <a class="nav-link dropdown-toggle" href="#" ....) it doesnt do anything... I appreciate your help in advance.
<--! Code: -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Sign-in / Sign-up
</a>
<div class="dropdown-menu drop" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="LoginPage.php">Sign-in</a>
<a class="dropdown-item" href="Signup.php">Sign-up</a>
<div class="dropdown-divider"></div>
</div>
</li>
I'm trying to put something like a side menu to my ASP.NET MVC5 application, but the dropdown-menu just doesn't show.
Resuming, I just copy the example from bootstrap page, pasted and nothing shows up:
<div class="dropdown-menu">
<span class="dropdown-item-text">Dropdown item text</span>
<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>
Created this fiddle that have the issue: enter link description here
Maybe the problem is something more that I have to add. I want something just like the image.enter image description here
Make sure you load popper.js before bootstrap.min.js. See below:
<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">
<span class="dropdown-item-text">Dropdown item text</span>
<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>
Then the order for your Javascript should be as follows;
jQuery
popper.js
bootstrap.js
You need to wrap the menu item a div with a class of "dropdown" and include the dropdown button as well.
Here is an example:
<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">
<span class="dropdown-item-text">Dropdown item text</span>
<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>
Here is the link to the Bootstrap docs, if you want to read more about dropdowns: Bootstrap 4 - Dropdowns
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.
This question already has answers here:
Bootstrap 4: Dropdown menu is going off to the right of the screen
(6 answers)
Closed 4 years ago.
is there a way to fix this problem using Bootstrap 4.0.0? I would like the right edge of the opened dropdown menu to be aligned with the right side of the dropdown toggle button. Here is a picture so you can see how it is currently appearing.
Code:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">CS50Net</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<div class="btn-group">
<button type="button" class="btn btn-danger">{{ session.username }}</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</li>
</ul>
</nav>
Try adding .dropdown-menu-right class to <div class="dropdown-menu">