this is the website I'm developing now I have a problem with how to auto navbar expand on mouse hover on this site http://www.kasuncfernando.tk/dls/index.html can you guys inspect it and tell me what to do or what to add, thank you
how to set navbar auto-expand on mouse hover
Here is one item of the menu. Try this:
.dropdown-menu.multi-level {
display: none;
}
.nav.navbar-nav li:hover ul {
display: block
}
<ul class="nav navbar-nav">
<li>
Admission <b class="caret"></b>
<ul class="dropdown-menu multi-level">
<li>B.Tech</li>
<li>M.Tech</li>
<li>Ph.D</li>
</ul>
</li>
</ul>
This will work, check if it helps:
.navbar-nav > li:hover > .dropdown-menu {
display: block;
}
Related
In my case I have menu like this:
<li class="">
Accounts</i>
<ul style="display: none;">
<li class="">Profile</li>
<li class="">Edit </li>
</ul>
</li>
How to add style display block if anchor tag is active?
First of all remove the "i" element closing tag from your "Accounts" link. After that You should not use inline styling when you are changing display value, instead use separate css file. I would move the display : none from inline to separate css file using selector.
ul {
display: none;
}
// use this if you want to hover
a:hover + ul {
display: block;
}
// use this if you want to click
a:focus + ul {
display: block;
}
It is fairly simple to modify the display property of the parent element based upon some property of a child element using Javascript but in this case I'm not sure how the hyperlink will be assigned the active class when it resides within a hidden element (ul)...
const getparent=(n,e)=>{//utility to find ancestor node of particular type
while( n!=document.querySelector(e) )n=n.parentNode;
return n;
}
// find all nodes that match the `active` class criteria and navigate up the DOM
// until the UL element is found - change it's display property
document.querySelectorAll('li a.active').forEach( a => getparent(a,'ul').style.display='block' )
<li class="">
<i>Accounts</i>
<ul style="display: none;">
<li class="">Profile</li>
<li class="">Edit </li>
</ul>
</li>
For Menu Try this will helpfull
.menu ul{
position: absolute;
display: none;
}
.menu >li{
display: inline-block;
vertical-align: top;
position: relative;
}
.menu li a{
display: block;
padding: 0px 10px;
}
.menu li:hover ul{
display: block;
}
<ul class="menu">
<li>Menu 1</li>
<li>Menu 2
<ul>
<li>Drop Down1</li>
<li>Drop Down2</li>
<li>Drop Down3</li>
</ul>
</li>
<li>Menu 3
<ul>
<li>Drop Down1</li>
<li>Drop Down2</li>
<li>Drop Down3</li>
</ul>
</li>
</ul>
I have a top menu with various links. On hover, each should show a dropdown with additional menu items. I have tried attached onmouseover and onmouseleave events to the menu item to hide/show the sub menu; however, when transitioning off of the menu item and into the sub menu, the onmouseleave fires and hides the sub menu and the user doesn't have a chance to actually interact with the sub menu.
<nav>
<div class="container-fluid">
<ul class="">
<li>
<a ui-sref="home.person" ng-init="showPersonSubMenu=false" ng-mouseenter="showPersonSubMenu=true" ng-mouseleave="showPersonSubMenu=false">People</a>
<ul class="person-sub-menu" ng-show="showPersonSubMenu">
<li>Add Person</li>
</ul>
</li>
<li><a ui-sref="home.company">Companies</a></li>
<li><a ui-sref="home.job">Jobs</a></li>
<li><a ui-sref="home.report">Reports</a></li>
</ul>
</div>
</nav>
How can I show the sub menu on hover, and hide it on leaving... whilst still allowing the user to actually access the sub menu so it doesn't hide before they can interact with it.
You were on the right track.
Make sure there is no space between your menu item and your absolute sub-menu. To ensure that there is no space, make the menu item bigger (using height or line-height), or add a padding to it...
Here's a working example:
http://codepen.io/jlowcs/pen/QwJwJZ
HTML:
<ul class="menu">
<li>
<a>People</a>
<ul class="sub-menu">
<li>Add Person</li>
<li>Action 2</li>
</ul>
</li>
<li><a ui-sref="home.company">Companies</a></li>
</ul>
CSS:
ul, li {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu {
background: lightblue;
height: 30px;
padding: 0 10px;
}
.menu > li {
display: inline-block;
width: 100px;
line-height: 30px;
}
.sub-menu {
position: absolute;
display: none;
background-color: lightgreen;
padding: 5px;
}
.sub-menu > li {
display: block;
cursor: pointer;
}
li:hover .sub-menu {
display: block;
}
EDIT: if you want your submenu to float lightly lower, here's a way of doing that:
http://codepen.io/jlowcs/pen/dPQPxW
Just add the following CSS:
.sub-menu {
margin-top: 10px;
}
.menu > li:hover {
padding-bottom: 10px;
}
We created this page: http://www.sandiego.edu/mysandiego/usd_portal/
On that page, there is a navigation bar.
<nav class="alignLeft">
<ul>
<li class="active">
Torero Hub
<ul>
<li class="active">
Welcome
</li>
<li>
My Academics
</li>
<li>
My Financial Aid
</li>
<li>
My Student Account
</li>
<li>
My Torero Services
</li>
<li>
My Gadgets
</li>
<li>
Library
</li>
<li>
Law Library
</li>
</ul>
</li>
<li>
Torero Life
<ul>
<li>
Student Affairs
</li>
<li>
Clubs and Activities
</li>
<li>
Graduate Life
</li>
<li>
Alumni
</li>
</ul>
</li>
</ul>
</nav>
The CSS should start like this:
.navBar nav li ul {
display: none;
background-color: #FFF;
border-radius: 0px 0px 6px 6px;
box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.25);
left: 0px;
padding: 10px 0px;
position: absolute;
top: 60px;
width: 300px;
}
If you hover over the tab, it should pop up a secondary navigation menu. It does this by detecting the hover state and changing display: none to display: block.
.no-touch .navBar nav li:hover ul, .no-js .navBar nav li:hover ul, .navBar nav li ul.active {
display: block;
}
This works for me on every browser and OS I've tested, but one user cannot get it to work in Chrome and Firefox and I really don't know why. It works for him in Internet Explorer.
When the user hovers over the tab in Chrome or Firefox, nothing happens. The user can only get the pop up to show up by clicking the tab, but never by just hovering.
User is using Windows 7 64-bit SP1 and Chrome Version 40.0.2214.85 beta-m (64-bit).
I asked other Windows 7 users to test with Chrome and Firefox and this works for them. What are we missing? Even if we right-click the nav bar element in the Element inspector and force the state to :hover state, this user is not seeing the hover CSS. What gives?
Edit: I found another user with the same issue, so it doesn't look isolated to a user's workstation. Both users are Windows 7 users and both can see the menu fine in Internet Explorer but not on Chrome or Firefox.
Edit 2:
Changing the CSS from this
.no-touch .navBar nav li:hover ul,
.no-js .navBar nav li:hover ul,
.navBar nav li ul.active {
display: block;
}
to this
.navBar nav li:hover ul {
display: block;
}
fixed the issue for all users. However, the same users with issues cannot click any links in the menu. If they right-click > Open Link in new tab, it works fine for them.
This is how you do it properly...
HTML:
<ul>
<li>link 1</li>
<li>link 2</li>
<li class="more">more</li>
<ul>
<li>link 3</li>
<li>link 4</li>
</ul>
</ul>
CSS:
ul ul {
display: none;}
.more:hover + ul {
display: block;}
What you need to make note of, is the use of + in the selector. Anything after your hover state will need this so it knows the immediate siblings need to be affected.
I made a dropdown menu with css but it doesn't close when you click on it. So I added this function to it:
$(".map-button li ul li").on("click", function(){
$(this).parent().hide();
});
It closes when I click on it but it doesn't open anymore when I hover.
This is what I use to open it when I hover on it with CSS:
.map-button li:hover ul{
display: block;
opacity: 1;
visibility: visible;
}
Menu structure:
<ul class="map-button">
<li>Choose item
<ul style="display: none;">
<li data-id="1">Item 1</li>
<li data-id="2">Item 2</li>
</ul>
</li>
</ul>
You need to add another handler:
$(".map-button li").mouseenter(function(){
$(".map-button li ul").show();
});
$(".map-button li").mouseleave(function(){
$(".map-button li ul").hide();
});
jQuery hide() sets display: none, but you need to set visibility: hidden:
$(this).parent().css({ visibility: 'hidden' });
Consider to use all JS implementation (like #Beri suggest to you), but if you want to use CSS :hover to show list:
Add rule in CSS:
.map-button > li ul{
display:none;
}
.map-button > li:hover ul{
display: block;
}
and remove style="display:block" in HTML
<ul class="map-button">
<li>Choose item
<ul>
<li data-id="1">Item 1</li>
<li data-id="2">Item 2</li>
</ul>
</li>
</ul>
JS is ok.
Test it
Is it possible to make Bootstrap change the navbar list from text to icons from the browser re-sizing instead of making it into a collapse drop down?
For example, make example 1 turn into example 2 just from the browser re-sizing.
Example 1:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
Example 2:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-home"></span></li>
<li><span class="glyphicon glyphicon-info-sign"></li>
<li><span class="glyphicon glyphicon-envelope"></li>
</ul>
Sure, add some css like this:
.nav .glyphicon {
display: none;
}
#media screen and (max-width: 300px){
.nav .text {
display: none;
}
.nav .glyphicon {
display: inline;
}
}
Then update your lis to have a span for both text and the icon:
<li>
<span class="text">Home</span><span class="glyphicon glyphicon-home"></span>
</li>
The #media styles specify that when the screen width is 300px or less, then hide the text and show the icon. The icon is hidden by default.
EDIT:
I've updated your fiddle to have the switch working. Here's what I did:
http://jsfiddle.net/cPa6b/
Removed the button in your navbar header
Removed the collapse styles on your navbar div
Added 2 new styles in the media query to counteract bootstrap's style (also changed the max-width to 768 to match bootstrap's default):
.navbar-header, .navbar-nav, .navbar-nav > li { float: left; }
.navbar-nav { margin: 5px; }
You may also consider customizing the #grid-float-breakpoint variable in bootstrap as mentioned here http://getbootstrap.com/components/#navbar