I'm reworking a WHMCS menu to be responsive and touch sensitive. Everything is fine except for one thing. I can't get the proper elements to display/toggle properly.
What the jQuery script does is add "open" class to parent element onclick. So
<div id="menu-icon"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu</a></div>
Becomes:
<div id="menu-icon" class="open"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu</a></div>
When the "Menu" link is clicked.
I need the "#nav" to "display:none" by default, and "display:block" when Menu is clicked. I can't quite capture it via CSS.
My HTML
<nav id="nav-wrap">
<div id="menu-icon"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu</a></div>
<ul id="nav">
My CSS
#nav-wrap #nav {
display: none;
}
#nav-wrap #menu-icon.open #nav {
display: block;
}
With the code above, I can hide the #nav by default, but that's it. Any pointers on how to capture #nav?
Boss, there is fundamental mistake you have done.
You have given this code:
<nav id="nav-wrap">
<div id="menu-icon">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu</a>
</div>
<ul id="nav">
See, the #nav doesn't come under #menu-icon. Change the code to:
<nav id="nav-wrap">
<div id="menu-icon">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu</a>
<ul id="nav">
</div>
And it works!
Demo here: http://jsfiddle.net/qqbUY/
Screenshot
Related
I am new to bootstrap and I used a template to help me develop a nav bar for mu website, but I am confused on how to style the nav bar using a seperate CSS doc. Specifically, my toggle for the dropdown won't change color. I tried to set as many elements to color:black but they never actually effected the dropdown toggle text. The only way I could change the color was through the tag in html (I had to use the style:"color:black;") and still it wouldn't change back to white on hover like the other elements. Does anyone know what I'm doing wrong. I also wanted to add an onclick animation if anyone could help me with that as well. This is the template I used
<nav class="navbar navbar-expand-lg navbar-custom">
<a class="navbar-brand" href="#"> <span> Artemis Server Hosting </span> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="homepageNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="features.html">Features
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pricing.html">Pricing
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">idk</a>
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">yet</a>
</div>
</li>
</ul>
<img src="https://cdn4.iconfinder.com/data/icons/shopping-21/64/shopping-01-512.png" style="align:center;" height="3%" width="3%" href="cart.html">
</div>
</nav>
.navbar-brand {
color: white;
}
.navbar-brand:hover {
color: black;
}
.nav-link {
color: black;
}
.nav-link:hover {
background-color: black;
color: white;
border-radius: 8px;
}
So first of all, to make your last li to a cursor:pointer you have two options:
Either put href="#"into the <a> tag, like: <a href="#" class="nav-link dropdown-toggle" ...</a> or you use this property in the css: a:hover { cursor: pointer }
To color your dropdown black try this:
.dropdown-menu > a {
background-color:black;
color:white;
}
About your animation: please be a little more specific what sort of animation you want, like change the whole background color, show or hide something or whatever, but in general, if you use jQuery, you can do the following. The excample code shows an alert box
$(".navbar-toggler").on("click", function() {
alert("Hello");
});
Please note, that this code fires if someone clicks on any navbar-toggler button on your website - if you have multiple ones, all of the will fire it! If you only want to fire it when someone click a specific dropdown toggler, you should give it an id and do $("#your_id"). instead of $(".navbar-toggler").
if you don't use jQuery, the easiest would be to assign an onclick event to your button:
<button class="navbar-toggler" [...] onclick="doSomething()">
and then write your JavaScript function doSomething() that does whatever you want it to do.
If you tell me what animation you want to trigger I might be able to tell you a little bit more. (Also, as a side note: you should ask only one question per post. That's how Stack Overflow works and you'll get answers faster)
My navbar works really well and it is fully responsible, but when I open confirm dialog in background my navbar width goes to 800px even if screen has 1480px making an empty space on the right side like you can notice on the screen.
I really don't have idea how to fix it, this is my navbar:
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" routerLink="">frontend</a>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link menu-item dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Vehicles</a>
<div class=" dropdown dropdown-menu">
<a class="dropdown-item menu-item" routerLink="/topic"> Vehicles list </a>
<a class="dropdown-item menu-item" routerLink="/add-topic"> Add vehicle </a>
</div>
</li>
</ul>
</div>
</nav>
<router-outlet></router-outlet>
I use default confirm dialog from primeNg without any changes:
confirm dialog
Maybe I could somehow make additional css to navbar to make position allways on 100% of screen? Any ideas how could I do that?
You are using bootstrap navbar and primeng so some css are getting conflict. If you write below css in style.css so navbar working normal.
.ui-overflow-hidden {
position: unset !important;
}
Right now my navigation drop down can open on click.
I want it to open upon hover. How do I do this?
simply add following css
.dropdown:hover>.dropdown-menu {
display: block;
}
fiddle
.dropdown:hover>.dropdown-menu {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<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>
</ul>
</nav>
The css from Znaneswar works great but I would add this line as well.
.dropdown-menu {
margin: -0.125rem 0 0;
}
The dropdown is spaced 0.125rem away from the element that spawns the dropdown. So you'll have a hard time navigating from the link to the dropdown without it disappearing when you mouse over that gap.
And if you want the dropdown link to actually be a link as well, just remove this attribute from the a tag
data-toggle="dropdown"
Below css works fine
.dropdown:hover>.dropdown-menu {
display: block;
}
.dropdown>.dropdown-toggle:active {
pointer-events: none; // Add this, to prevent clicking dropdown's default click function
}
<div class="dropdown">
...
</div>
You could try this with jQuery:
$(".dropdown").hover(function(){
$(this).addClass("show");
});
I got this solution using Angular with ng-bootstrap and bootstratp:
CSS:
.dropdown:hover>.dropdown-menu {
display: block;}
HTML:
<li class="nav-item dropdown" ngbDropdown>
<a class="nav-link h5 dropdown-toggle" id="navbarDropdown" ngbDropdownToggle>
Parent</a>
<div ngbDropdownMenu class="dropdown-menu">
<a class="dropdown-item" href="#" ngbDropdownItem>Child1</a>
<a class="dropdown-item" href="#" ngbDropdownItem>Child2</a>
</div>
</li>
So, if don't use the CSS property, the dropdown will happens only when click on parent link.
While I appreciate the answers to this question, the answers given are seemingly not the best. This is because these answers are disregarding accessibility.
Notice that, when using only CSS to make the dropdown show on .nav-link hover, the aria-expanded parameter on the .nav-link element does not change to true.
You must use some JS then in order to have the full range of accessibility functionality.
Below is what I have come up with to combat this.
// header_scripts.js
$('body').on('hover', '.nav-item.dropdown', function() {
$(this).find('.dropdown-toggle').dropdown('toggle');
});
/* header.css */
.dropdown-menu {
margin: 0 0 0 0;
}
The above code should provide the same functionality that you are seeing in the other answers to this question, but with full accessibility concerns.
The CSS I gave is very general and has pretty low specificity so work with that as you see fit.
What i am creating is similar to this. I found this while researching on stackexchange.
However, i want the dropdown to open on mouseover. I am able to create a bootstrap navbar with mouseover dropdowns, but unable to add mouseover action to the example given above. Any ideas?
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<ul class="nav nav-tabs">
<li class="active"><a data-target="#home" data-toggle="tab">Home</a> </li>
<li><a data-target="#profile" data-toggle="tab">Profile</a></li>
<li><a data-target="#messages" data-toggle="tab">Messages</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">HOME asdfasdfsda</div>
<div class="tab-pane" id="profile">PROFILE asdfafas</div>
<div class="tab-pane" id="messages">MESSAGES asdfdas</div>
</div>
</ul>
</div>
http://jsfiddle.net/pv2Lc/7/
How about this?
http://jsfiddle.net/70ytg4yf/
HTML unchanged
No JS
CSS:
.dropdown:hover {
/* so that no mouseout is triggered when moving to the menu */
padding-bottom: 5px;
}
.dropdown-menu {
/* move up since default is lower because of padding */
margin-top: -5px;
}
.dropdown:hover .dropdown-menu {
display: block;
}
I can easily use Bootstrap to create a button dropdown such as the following:
<div class="btn-group">
<button class="btn">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
content goes here
</ul>
</div>
However, this creates a button and block element (?).
Is it possible to use Bootstrap's button dropdwon to create normal text (best to be inline), clicking on which produces a dropdown?
I am not talking about Bootstrap tooltip. I am hoping to use the dropdown to hold a more complex layout.
Thanks for any idea or suggestion!
So you want a link instead of a button to toggle the dropdown? use this markup:
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu">
You can add any content here
</ul>
</div>
You can also add
.dropdown {
display: inline-block;
}
To make it appear inline