in my Angular app I have a header with icons/pics which I want to use as dropdowns. Code snippet looks as follows:
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdownMenuLink"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<img
src="../../assets/images/icon_user_menu.png"
width="18px"
height="18px"
/>
Username
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
So... for a burger-menu I know (and I do) just add a typescript-method in the component.ts which changes the "open-class".
But I really didn't find anything related to the dropdown stuff from bootstrap 5.
Is there a way to just apply a similar solution too? Maybe I over read sth. somewhere but I really cant find a solution for this to work.
Thanks in advance anyone!
This is a way to make dropdowns using pure CSS
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
user-select:none;
background-color: #4CAF50;
color: white;
padding: 1rem;
font-size: 16px;
border: none;
cursor: pointer;
border-radius: .3rem
}
.dropbtn:focus{box-shadow: 0 0 0 .3rem #4CAF50AA;}
.dropbtn:active{
box-shadow: 0 0 0 .4rem #4CAF50aa;
}
.dropdown {
position: relative;
display: inline-block;
border_radius: .3rem;
}
.dropdown-content {
display: none;
position: absolute;
top: 3.5rem;
left: 1rem
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0 0 .1rem 0 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: #f1f1f1}
.dropdown:focus-within .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>
<body>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</body>
</html>
Related
Can anyone help me to Insert the menu button in active-based?
And I need it suitable for my Blogger menu... please... I really need help...
As the image shows above, it actually looks like this.
I have tried many active based by using JavaScript, CSS, but none of it works.
Below is my CSS code, is there any problem?
.dropbtn {
background-color: grey;
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: blue;}
<div class="dropdown active">
Home</button>
</div>
<div class="dropdown">
About</button>
<div class="dropdown-content">
Profile
Introduction
</div>
</div>
<div class="dropdown">
Posts</button>
</div>
<div class="dropdown">
Template</button>
</div>
<div class="dropdown">
<button class="dropbtn">Theme</button>
<div class="dropdown-content">
Ocean
Forest
</div>
</div>
You should not nest a button inside an a tag, that is not valid HTML. You can use styles to get a similar look.
HTML
<nav>
<div class="dropdown active">
<a class="dropbtn" href="#">Home</a>
</div>
<div class="dropdown">
<a class="dropbtn" href="#">About</a>
<div class="dropdown-content">
Profile
Introduction
</div>
</div>
<div class="dropdown">
<a class="dropbtn" href="#">Posts</a>
</div>
<div class="dropdown">
<a class="dropbtn" href="#">Template</a>
</div>
<div class="dropdown">
<button class="dropbtn">Theme</button>
<div class="dropdown-content">
Ocean
Forest
</div>
</div>
</nav>
CSS (for the active class)
/* styles the direct child link of .active */
.active > a {
background-color: red;
}
I am trying to add a dropdown-menu to my navigation bar. But when i click the dropdown it doesn't show me the menu.It the menu doesn't drop down. I have looked for solutions there are other related questions. But those were code-specific problems are not relevant to my code.
If i test the dropdown code taking it outside of the navgar it works. But inside the navbar it doesn't. Can anyone please help me? If you need help regarding reading this whole or need any kind of explanation, please ask.It is i who needs help.Thanks in advance.
So here is my HTML:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><span class="glyphicon glyphicon-home"></span> Home</li>
//This is the part of dropdown//
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
</div>
</div>
</ul>
</div>
</div>
</nav>
And here is the CSS i am applying to it:
<style>
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
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 a:hover {background-color: #ddd}
.show {display:block;}
body{
background-color:#f1f1f1;
}
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
overflow: hidden;
margin-bottom: 0;
border-radius: 0;
width: 100% ;
height: 30px;
}
.navbarw3 {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.main {
margin-top: 40px; Add a top margin to avoid content overlay
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 565px}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
</style>
And here is the javascript:
<script>
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
Based on your css classes that you used in your HTML, I assue you are using bootstrap. In that case, you really don't need to add any javascript for working with dropdown menu. make sure you linked the bootstrap css and js file in your page and then, just change the html to something like this :
<nav class="navbar justify-content-center navbar-expand-lg blackBg">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="home.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="dropdown nav-item">
<a class="dropdown-toggle nav-link" data-toggle="dropdown" href="#">Gallery
<span class="caret"></span>
</a>
<ul class="dropdown-menu blackBg">
<li>
Smiles
</li>
<li>
Cry's
</li>
<li>
Videos
</li>
<li>
Choreography
</li>
<li>
</li>
</ul>
</li>
</ul>
here is an example : https://jsfiddle.net/dmkh8xj1/
I use bootstrap 3 and i have menu. But I have problem with dropdown menu.
I can't use dropdown menu because it disappears so fast. Also it shows on hover very fast without animations
my html
<ul class="nav navbar-nav">
<li class="menu-item dropdown"><a title="Sample Page" href="#">Sample Page <span class="caret"></span></a>
<ul role="menu" class="dropdown-menu">
<li class="menu-item"><a title="Front Page" href="#">Front Page</a></li>
<li class="menu-item"><a title="Front Page" href="#">Front Page</a></li>
</ul>
</li>
</ul>
css:
.nav>li {
float: left;
}
.nav>li>a {
position: relative;
font-size: 17px;
}
.nav li a {
display: block;
}
.nav li.dropdown ul {
margin-top: 20px;
position: absolute;
top: 100%;
display: none;
z-index: 2000;
padding: 5px 0;
border-left: none;
border-right: none;
border-bottom: none;
}
how to solve this problem?
Add class="dropdown-toggle" data-toggle="dropdown" to your Sample Page <a>
.nav>li {
float: left;
}
.nav>li>a {
position: relative;
font-size: 17px;
}
.nav li a {
display: block;
}
.nav li.dropdown ul {
margin-top: 20px;
position: absolute;
top: 100%;
//display: none;
z-index: 2000;
padding: 5px 0;
border-left: none;
border-right: none;
border-bottom: none;
}
<script src="https://code.jquery.com/jquery-3.2.1.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"/>
<ul class="nav navbar-nav">
<li class="menu-item dropdown ">
<a class="dropdown-toggle" data-toggle="dropdown" title="Sample Page" href="#">Sample Page <span class="caret"></span></a>
<ul role="menu" class="dropdown-menu">
<li class="menu-item"><a title="Front Page" href="#">Front Page</a></li>
<li class="menu-item"><a title="Front Page" href="#">Front Page</a></li>
</ul>
</li>
</ul>
I am using twitter bootstrap in order to have a select-option like list.
How can I avoid the small separation lines above (as depicted) and below the list of list items? See screeshot:
In the following is the code visible. It will be the easiest to have a look at the jsfiddle:
https://jsfiddle.net/qqnkc9u3/3/
html:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
D2ropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a class="my2" href="#"><!--data-value="action"--> Action</a></li>
<li><a class="my2" href="#" data-value="another action">Another action</a></li>
<li><a class="my2" href="#" data-value="something else here">Something else here</a></li>
<li><a class="my2" href="#" data-value="separated link">Separated link</a></li>
</ul>
js:
$(".dropdown-menu li a").click(function(){
$(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span ></span>');
$(this).parents(".dropdown").find('.btn').val($(this).data('value'));
});
css:
#charset "UTF-8";
#import url('https://fonts.googleapis.com/css?family=PT+Sans');
#dropdownMenu1 {
/*text-indent: -150px;*/
-webkit-appearance: none;
-moz-appearance: none;
font-family: 'PT Sans', sans-serif;
/*font-style: italic;*/
color: red;
font-size: 18px;
text-align: left;
width: 242px;
height: 42px;
border: 4px;
/*background-color: #e7eaf3;*/
background: url("http://www.adelepham.com/deepthoughts/gray-pattern.jpg") no-repeat 0 0;
/*color: #5B629B;*/
/*padding: 4px;*/
}
.my2 {
text-indent: -7px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
font-style: italic;
font-family: 'PT Sans', sans-serif;
color: red;
font-size: 18px;
-webkit-appearance: none;
-moz-appearance: none;
width: 242px;
height: 42px;
/*border: 4px;*/
/*color: #5B629B;*/
background: url("http://www.adelepham.com/deepthoughts/gray-pattern.jpg") no-repeat 0 0;
}
Just get rid of the padding (updated JSFiddle):
.dropdown-menu {
padding: 0;
}
You can also do this:
.dropdown-menu {
padding: 0;
margin: 0;
}
to get rid of the little 1 or 2 px space between the button and the menu itself.
Add padding: 0; margin: 0; to your #dropdown-menu.
jsFiddle
You can try to remove padding and margin of the ul like:
.dropdown-menu {
padding: 0px;
margin: 0px;
}
Fiddle: https://jsfiddle.net/qqnkc9u3/8/
I have just started playing with twitter bootstrap and am attempting to build a site from scrap with it. I am having trouble creating a horizontal nav bar with vertical dropdowns with each <li> as a new row. (My current dropdown has all <li> in the same row).
Can someone please teach me how?
Navbar HTML:
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="NIS.html">NIS<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</li>
<li><a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="TNU.html">TNU</a></li>
<li><a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="NIC.html">NIC</a></li>
<li><a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="trial.html">trial</a></li>
<li><a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</div><!-- /.navbar -->
CSS:
.navbar .navbar-inner {
padding: 0;
}
.navbar .nav {
margin: 0;
display: table;
width: 100%;
}
.navbar .nav li {
display: table-cell;
width: 1%;
float: none;
}
.navbar .nav li a {
font-weight: bold;
text-align: center;
border-left: 1px solid rgba(255,255,255,.75);
border-right: 1px solid rgba(0,0,0,.1);
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
}
This is the answer I gave that solved a very similar problem for myself and someone else. Maybe it'll work for you.
I had a similar problem. I narrowed it down to the "display: table-cell;" entry. Through looking around and 'playing' I managed to find a fix for my situation
First:
.navbar .nav li .dropdown-menu li { display: block; width: auto; }
to set the list items under the dropdown to display as a block (with max width of the dropdown menu holder).
Secondly:
.dropdown-menu { left:auto; }
to place the dropdown under the correct menu-item.