I wanted to let my "Kuantan" menu to stay highlighted after i hover to their child menu which is "kiosk no.35". But i try to change few way to let it stay active but i had failed to do so. Anything i miss out on my code? Please point my wrong. Thanks
Here is the html code:
<ul class="treeview-menu">
<li class="dropdown"><i class="fa fa-angle-double-right"></i> Kuantan
<ul class="nav dropdown-menu" style="width:100px;height:30px">
<li><a href="chooseOption.php?kiosk=35" style="margin-left:-20px;margin-top:-13px;" >Kiosk No.35</a></li>
</ul>
</li>
<li class="dropdown"><i class="fa fa-angle-double-right"></i> UTC Kuantan
<ul class="nav dropdown-menu" style="width:100px;height:30px">
<li><a href="chooseOption.php?kiosk=36" style="margin-left:-20px;margin-top:-13px;" >Kiosk No.36</a></li>
</ul>
</li>
<li class="dropdown"><i class="fa fa-angle-double-right"></i> Temerloh
<ul class="nav dropdown-menu" style="width:100px;height:30px">
<li><a href="chooseOption.php?kiosk=37" style="margin-left:-20px;margin-top:-13px;" >Kiosk No.37</a></li>
</ul>
</li>
<li class="dropdown"><i class="fa fa-angle-double-right"></i> Bentong
<ul class="nav dropdown-menu" style="width:100px;height:30px">
<li><a href="chooseOption.php?kiosk=6" style="margin-left:-20px;margin-top:-13px;" >Kiosk No.6</a></li>
</ul>
</li>
<hr/>
</ul>
Here is the css where i hover the dropdown then the dropdown-menu will came out:
/*3rd level sidebar menu */
.dropdown:hover .dropdown-menu {
display: block;
left:220px;
top:0;
}
What i want is that after i hover the dropdown and went to dropdown-menu, the dropdwn will stay highlighted. Is there possible? Sorry i'm still new to this css skill.
As explained in my comment - .dropdown should still be "highlighted" on :hover, because .dropdown-menu is nested inside it and therefore you are still hovering over .dropdown.
/* Assuming you are making nested lists display:none */
ul{
list-style: none;
}
.dropdown-menu{
display: none;
}
.dropdown:hover{
background: yellow;
}
.dropdown:hover .dropdown-menu {
display: block;
left:220px;
top:0;
}
DEMO HERE
By using jQuery this is one option with your current code (fiddle here: https://jsfiddle.net/j0wLj6z9/)
<script type="text/javascript">
$(document).ready(function(){
$('.dropdown').hover(function(){
$(this).toggleClass('highlighted');
});
});
</script>
and your css is whatever you'd like:
.highlighted
{
background: yellow;
}
Also include jQuery in your project:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Related
So I have multiple LI's like below as it's a menu and I am trying to create a drop-down but for some reason, my jQuery code is not working. Can someone help me?
FYI I can't change HTML as it's dynamically generating in Shopify. I can only change jQuery and CSS
<li class="grid__item lvl-1 ">
<a class="site-nav lvl-1 light-body">Furry Artist</a>
<ul class="subLinks inactive">
<li class="lvl-2">
Erdbeer Joghurt
</li>
<li class="lvl-2">
Jeson RC
</li>
</ul>
</li>
$( document ).ready(function() {
$("ul.subLinks").addClass("inactive");
});
$('a.site-nav.lvl-1').click(function() {
$(this).find("ul.subLinks").toggleClass('active-drop-down');
});
.inactive {
display:none;
}
.active-drop-down {
display:block !important;
}
Your issue is $(this).find... in the a click handler - at this point, this is the a.
.find() looks at the selectors children - but the menu is not a child of the a, it's a sibling.
Change to
$(this).closest("li").find("ul.subLinks"...
(maybe $(this).next().toggleClass... with a caveat on .this() that it's always the very next element).
Updated snippet:
$('a.site-nav.lvl-1').click(function() {
$(this).closest("li").find("ul.subLinks").toggleClass('active-drop-down');
});
.inactive {
display:none;
}
.active-drop-down {
display:block !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol>
<li class="grid__item lvl-1 ">
<a class="site-nav lvl-1 light-body">Furry Artist</a>
<ul class="subLinks inactive">
<li class="lvl-2">
Erdbeer Joghurt
</li>
<li class="lvl-2">
Jeson RC
</li>
</ul>
</li>
</ol>
I am trying to have a submenu dropdown inside a dropdown, using MaterializeCSS framework. I tried with the following code, but it didn't work.
<!-- this the main dropdown -->
<ul id="MainDropDown" class="dropdown-content">
<li>Dropdown1<span class="right caret">►</span></li>
<li>Dropdown2<span class="right caret">►</span></li>
<li>Dropdown3<span class="right scaret">►</span></li>
</ul>
<ul id="drop1" class="dropdown-content">
<li>Create</li>
</ul>
<ul id="drop2" class="dropdown-content">
<li>Create</li>
<li>Update</li>
</ul>
<ul id="drop3" class="dropdown-content">
<li>Create</li>
</ul>
I was having the same issue myself.
Turns out it's as simple as nesting another dropdown link,
setting an appropriate gutter, and making sure the overflow of
dropdown-content is set to visible.
Here is a link to the modified jsfiddle linked in Nested dropdowns in materialize
https://jsfiddle.net/fb0c6b5b/
$('.dropdown-button2').dropdown({
inDuration: 300,
outDuration: 225,
constrain_width: false, // Does not change width of dropdown to that of the activator
hover: true, // Activate on hover
gutter: ($('.dropdown-content').width()*3)/2.5 + 5, // Spacing from edge
belowOrigin: false, // Displays dropdown below the button
alignment: 'left' // Displays dropdown with edge aligned to the left of button
}
);
.dropdown-content{
overflow: visible !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class='dropdown-button btn' href='#' data-activates='dropdown1' data-beloworigin="true">Drop Me!</a>
<ul id='dropdown1' class='dropdown-content'>
<li>two</li>
<li class="divider"></li>
<li>three</li>
<li><a class='dropdown-button2 d' href='#' data-activates='dropdown2' data-hover="hover" data-alignment="left">Drop Me!</a></li>
</ul>
<ul id='dropdown2' class='dropdown-content'>
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
I tried it here but my was aligned on the same line from the dropdown, then did it and it worked:
.dropdown-content {
overflow-y: visible;
}
.dropdown-content .dropdown-content {
margin-left: 100%;
}
Based on the answer from #LibanH and updated for version v1.0.0, you need some change.
constrain_width must be replaced by constrainWidth and gutter is no longer an option.
In order to display the nested dropdown at the good position, we need to get the height of the selected item in first dropdown and set position with CSS
$('.dropdown-button').dropdown({
onOpenStart: function() {
var selectedItem = $(this).find('.selected');
$('#dropdown2').css('top', selectedItem.outerHeight() + "px");
}
});
$('.dropdown-button2').dropdown({
constrainWidth: false //change
hover: true,
alignment: 'left'
}
);
and add some CSS
#dropdown2 {
position: absolute;
left: 100%;
}
I want to hide following nav-stacked list ios class contained <li> element. I used this code for it. But it doesn't work at all. but background-color is apply for that element. Why is that. I use Bootstrap 3
.ios {
dispaly : none;
}
here is my html code:
<ul class="nav nav-sidebar nav-pills nav-stacked">
<li id="ios-parent">
<b class="fa fa-forumbee"></b> iOS
</li>
<li class="sub-menu">
<b class="fa fa-forumbee"></b> iOS1
</li>
<li class="sub-menu ios">
<b class="fa fa-forumbee"></b> iOS2
</li>
<li class="sub-menu">
<b class="fa fa-forumbee"></b> iOS3
</li>
<li class="sub-menu">
<b class="fa fa-forumbee"></b> iOS4
</li>
</ul>
you have a typo:
.ios {
display : none;
}
instead of dispaly
EDIT
Assuming that the spelling in your CSS is correct, it is probably a matter of your selector being overriden.
In Bootstrap:
.nav > li {
display: block;
}
this is more specific than your .ios selector, try replacing your one with:
.nav > .ios {
display: none;
}
which will make it specific enough to override Bootstrap styling. You can easily see what is being applied using the web inspector in your browser
I'm building my website here and I would like my left menu to be shifted down when the dropdown menu opens so that they don't overlap. Here's the HTML code:
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav nav-pills nav-stacked">
<li class="dropdown">
PROJECTS
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li>NAPOLI</li>
<li>PORTRAITS</li>
</ul>
</li>
<li>BIO</li>
<li>CONTACT</li>
<li>BLABLABLA</li>
</ul>
</div>
Anyone could help?
Thanks!
Javascript problem with fadein fadeout
$(document).ready(function(){
$(".nav > li > a").bind("click", function(){
$('.dropdown-menu').fadeOut();
$(this).parent().find('.dropdown-menu').fadeIn();
});
});
What you could do is override the css for the class dropdown-menu.
What I did in the inspector was under .dropdown-menu remove the styles
position:absolute;
float:left;
.dropdown-menu {
position:relative !important; <-- or static
float:none !important;
}
This will make the drop down menu have its own space and not hover over the rest of your menu. But something is also wrong with your toggle. It seems to be broken. The markup looks fine. Did you tamper with the javascript or something?
So for your javascript problem, it is a little hard to test it but try this:
Revised: Based On http://getbootstrap.com/javascript/
$(document).ready(function() {
$('.dropdown').on('show.bs.dropdown', function () {
$('.dropdown-menu',this).fadeIn();
});
$('.dropdown').on('hide.bs.dropdown', function () {
$('.dropdown-menu',this).fadeOut();
});
}
You can achieve this by overriding the bootstrap defaults for absolute positioning and dropdown toggling:
.dropdown.open .dropdown-menu {
display: block;
position: static;
float: none;
width: 200px;
}
And then to keep the menu open, a little bit of JS:
$('#myTabDrop1').on('click', function(e) {
// Remove active tab
$('#myNavbar').find('nav > li.active').removeClass('active');
$(this).parent().addClass('active').addClass('open');
});
New HTML
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav nav-pills nav-stacked">
<li class="dropdown">
PROJECTS
<ul class="dropdown-menu" role="menu">
<li>NAPOLI</li>
<li>PORTRAITS</li>
</ul>
</li>
<li>BIO</li>
<li>CONTACT</li>
<li>BLABLABLA</li>
</ul>
</div>
JSFiddle
I'm making a navbar that consists of icons followed by the title of their page (e.g. Icon of a home followed by the text 'Home'). Let's say I want to change the color of only(!) the icon from black (default) to blue when hovering over either the text or the icon itself using the :hover selector. How can I do that? (I don't want to use jQuery, just CSS)
The markup is now something like this:
<ul id="navbar">
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-home"></i></li>
<li class="navname">Home</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-info"></i></li>
<li class="navname">Information</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-contact"></i></li>
<li class="navname">Contact</li>
</ul>
</li>
</ul>
Of course everything is {display:inline}
Set the hover to the ul inside the navgroups. CSS below does that, you can add whatever styling you like to it.
http://jsfiddle.net/PQShS/9/
CSS:
.navgroup ul:hover .navicon{
color:#FFF;
}
Your Code
<ul id="navbar">
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-home"></i></li>
<li class="navname">Home</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-info"></i></li>
<li class="navname">Information</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-contact"></i></li>
<li class="navname">Contact</li>
</ul>
</li>
</ul>
Since it boils down to changing the look of the icon when the cursor hovers anywhere above the ul element, you can do this:
.navgroup ul:hover .navIcon .icon-home
{
/*hover style for the icon*/
}
.navgroup ul .navIcon .icon-home
{
/*non-hover style for the icon*/
}
You should use the following css:
.navgroup:hover .navicon {
background-color: blue;
}
It will modify just the navicon anytime you hover anywhere within the navgroup
See this jsFiddle
you should use anchor tag
css:
.testing:hover {
color: red;
}
html:
<a class="testing" href="">
<span>hello1</span>
<span style="color:black;">hell2</span>
</a>
Give the whole styling to <a> tag and give the inline styling to other element inside <a> tag that you don't want to change.