I have found a nested dropdown example for Materialize 0.98 but it's not working for Materialize 1.00. How would I port it over?
Working example with v0.98 -
https://gist.github.com/the0neyouseek/f1a92b9b8f8962a372c23ef415c63144
I tried to follow the upgrade guide but couldn't get it to work.
Dropdown
Removed gutter option
Removed stopPropagation option
Call plugin on .dropdown-content instead of .dropdown-button
Change attribute data-activates to data-target
Rename classes .dropdown-button to .dropdown-trigger
Rename option belowOrigin to coverTrigger
Removed automatic initialization, initialize it manually as shown in documentation
Please replace data-activates attribute with data-target.
<a class='dropdown-button btn' href='#' data-target='dropdown1' data-beloworigin="true">Nested DropDown</a>
<ul id='dropdown1' class='dropdown-content dropdown-nested'>
<li><a class='dropdown-button' href='#' data-target='dropdown2' data-hover="hover" data-alignment="left">one<span class="right-triangle">▸</span></a></li>
<li>two</li>
<li>three</li>
</ul>
<ul id='dropdown2' class='dropdown-content dropdown-nested'>
<li>one</li>
<li><a class='dropdown-button' href="#" data-target="dropdown3" data-hover="hover" data-alignment="left">two<span class="right-triangle">▸</span></a></li>
<li>three</li>
</ul>
<ul id='dropdown3' class='dropdown-content'>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
Materialize changed this attribute in version 1.0 .
Have a look at Materialize Dropdown Doc.
Try this solution.
.dropdown-content > li {
position: relative;
}
.dropdown-content li .dropdown-content {
position: absolute;
left: 0 !important;
top: 0 !important;
}
https://codepen.io/FOOGLES/pen/LYYdQeK i hope this help you or other people with the same problem.
nested dropdown its not supported in mat v1 so we need to do some tricks, you need to activate the nested dropdowns with hover, so in matv1 you have to use {
hover: true } in the dropdown selector with Jquery,later with some CSS you make the second and third dropdown take position to the right with left:-100%; or left:100%; if you want the dropdown take left position, i comment the three common options in the CSS.
HTML:
<a class='dropdown-trigger btn' href='#' data-target='dropdown1' >Menu</a>
<ul id='dropdown1' class='dropdown-content dropdown-nested'>
<li>uno</li>
<li><a class='dropdown-trigger sub' href='#' data-target='dropdown2' >uno*</a></li>
<li>uno</li>
</ul>
<ul id='dropdown2' class='dropdown-content dropdown-nested'>
<li>dos</li>
<li>dos</li>
<li>dos</li>
<li>dos</li>
<li><a class='dropdown-trigger sub' href="#" data-target="dropdown3" >dos*</a></li>
</ul>
<ul id='dropdown3' class='dropdown-content'>
<li>tres</li>
<li>tres</li>
<li>tres</li>
<li>tres</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
.dropdown-nested {
overflow-y: visible;
}
.dropdown-content .dropdown-content {
/* left: 100%;*/ /*drop hacia la izquierda*/
left: -100%; /*drop hacia la derecha*/
/* left: auto;*/ /*drop hacia el centro*/
}
.container {
background: #eee;
padding: 200px 100px;
border-radius: 8px;
}
$('.dropdown-trigger').dropdown();
$('.sub').dropdown(
{
hover:true
}
Related
I was trying to make dropdown menu using only css, however it doesn't work in my case.
It's kinda working when I don't put position:absolute at .dropdown_content in CSS, but even when I do that, dropdown doesn't work.
HTML:
<nav>
<ul>
<div class="dropdown">
<li>Game order</li>
<div class="dropdown_content">
Half-life
Half-life 2
Half-life EP1
</div>
</div>
<li>Portal series</li>
<li>Half Life Alyx</li>
</ul>
</nav>
CSS:
.dropdown {
position:relative;
display:inline-block;
}
.dropdown_content {
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
min-width: 160px;
display:none;
}
.dropdown_content a {
color:white;
text-decoration: none;
display:block;
padding: 12px 16px;
}
}
.dropdown:hover .dropdown_content {
display: block;
}
To keep things simple, I have reduced your code to a bare minimum.
I'm not sure exactly how you want it to look, but here's a possible solution.
When making css only menu's I try to stick to a nested list of <ul> and <li>'s.
This makes it clearer to read, and keeps the semantics in order.
Ther is no need for container divs within. (like the <div class="dropdown_content"> in your code)
The HTML is a nested list. Initially we hide the nested ul, and only show it when it's parent is hovered over. By using .dropDown li:hover>ul you only target the ul that is DIRECTLY under the hovered li. That way you dan nest as deep as you want.
.dropDown ul {
display: none;
position: absolute;
background: white;
border: 1px solid red;
}
.dropDown li:hover>ul{
display: block;
}
<ul class="dropDown">
<li>Game order
<ul>
<li>Half-life</li>
<li>Half-life 2</li>
<li>Half-life EP1</li>
</ul>
</li>
<li>Portal series</li>
<li>Half Life Alyx</li>
<li>deeper nesting
<ul>
<li>level 1</li>
<li>more here
<ul>
<li>level 2</li>
<li>more here
<ul>
<li>level 3</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
I'm relatively new to SCSS and try to improve my skills using a linter. I have this little example, where I want to display a submenu only if the parent menu-item is hovered. While this code is working, the linter gives me a "Class should be nested within its parent Pseudo-class".
.menu-item {
.submenu {
display: none;
}
&:hover .submenu {
display: block;
}
}
<ul>
<li class='menu-item'>
<a href=''>
Menu 1
</a>
<ul class='submenu'>
<li>Submenu 1.1</li>
<li>Submenu 1.2</li>
</ul>
</li>
</ul>
I have no idea how the :hover part could be nested into the .submenu part. Can you help?
I found the solution and it was so simple, I just had to nest the .submenu into the hover part :(
.menu-item {
.submenu {
display: none;
}
&:hover {
.submenu {
display: block;
}
}
}
<ul>
<li class='menu-item'>
<a href=''>
Menu 1
</a>
<ul class='submenu'>
<li>Submenu 1.1</li>
<li>Submenu 1.2</li>
</ul>
</li>
</ul>
Your SASS code will compiled to the below CSS code which is working fine. Just make sure that your SASS code is properly compiling to CSS.
.menu-item .submenu {
display: none;
}
.menu-item:hover .submenu {
display: block;
}
<ul>
<li class='menu-item'>
<a href=''>
Menu 1
</a>
<ul class='submenu'>
<li>Submenu 1.1</li>
<li>Submenu 1.2</li>
</ul>
</li>
</ul>
I have constructed a three-level dropdown using CSS. It works until I add this to the CSS:
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
The HTML is basically just two unordered lists (by the way, the "feelings" list and the "needs" list have the same content -- that will change eventually -- this is just for experimenting!):
<div class="feelings">
<ul class="nav feelings">
<li class="feelings" id="feelings"> FEELINGS
<ul>
<li>AFRAID
<ul>
<li>apprehensive</li>
<li>dread</li>
<li>foreboding</li>
<li>frightened</li>
<li>mistrustful</li>
<li>panicked</li>
<li>petrified</li>
<li>scared</li>
<li>suspicious</li>
<li>terrified</li>
<li>wary</li>
<li>worried</li>
</ul>
</li>
<li>ANNOYED
<ul>
<li>aggravated</li>
<li>dismayed</li>
<li>disgruntled</li>
<li>displeased</li>
<li>exasperated</li>
<li>frustrated</li>
<li>impatient</li>
<li>irritated</li>
<li>irked</li>
</ul>
</li>
<li>ANGRY
<ul>
<li>enraged</li>
<li>furious</li>
<li>incensed</li>
<li>indignant</li>
<li>irate</li>
<li>livid</li>
<li>outraged</li>
<li>resentful</li>
</ul>
</li>
<li>AVERSION
<ul>
<li>animosity</li>
<li>appalled</li>
<li>contempt</li>
<li>disgusted</li>
<li>dislike</li>
<li>hate</li>
<li>horrified</li>
<li>hostile</li>
<li>repulsed</li>
</ul>
</li>
<li>CONFUSED
<ul>
<li>ambivalent</li>
<li>baffled</li>
<li>bewildered</li>
<li>dazed</li>
<li>hesitant</li>
<li>lost</li>
<li>mystified</li>
<li>perplexed</li>
<li>puzzled</li>
<li>torn</li>
</ul>
</li>
<li>DISCONNECTED
<ul>
<li>alienated</li>
<li>aloof</li>
<li>apathetic</li>
<li>bored</li>
<li>cold</li>
<li>detached</li>
<li>distant</li>
<li>distracted</li>
<li>indifferent</li>
<li>numb</li>
<li>removed</li>
<li>uninterested</li>
<li>withdrawn</li>
</ul>
</li>
<li>DISQUIET
<ul>
<li>agitated</li>
<li>alarmed</li>
<li>discombobulated</li>
<li>disconcerted</li>
<li>disturbed</li>
<li>perturbed</li>
<li>rattled</li>
<li>restless</li>
<li>shocked</li>
<li>startled</li>
<li>surprised</li>
<li>troubled</li>
<li>turbulent</li>
<li>turmoil</li>
<li>uncomfortable</li>
<li>uneasy</li>
<li>unnerved</li>
<li>unsettled</li>
<li>upset</li>
</ul>
</li>
<li>EMBARRASSED
<ul>
<li>ashamed</li>
<li>chagrined</li>
<li>flustered</li>
<li>guilty</li>
<li>mortified</li>
<li>self-conscious</li>
</ul>
</li>
<li>FATIGUE
<ul>
<li>beat</li>
<li>burnt out</li>
<li>depleted</li>
<li>exhausted</li>
<li>lethargic</li>
<li>listless</li>
<li>sleepy</li>
<li>tired</li>
<li>weary</li>
<li>worn out</li>
</ul>
</li>
<li>PAIN
<ul>
<li>agony</li>
<li>anguished</li>
<li>bereaved</li>
<li>devastated</li>
<li>grief</li>
<li>heartbroken</li>
<li>hurt</li>
<li>lonely</li>
<li>miserable</li>
<li>regretful</li>
<li>remorseful</li>
</ul>
</li>
<li>SAD
<ul>
<li>depressed</li>
<li>dejected</li>
<li>despair</li>
<li>despondent</li>
<li>disappointed</li>
<li>discouraged</li>
<li>disheartened</li>
<li>forlorn</li>
<li>gloomy</li>
<li>heavy hearted</li>
<li>hopeless</li>
<li>melancholy</li>
<li>unhappy</li>
<li>wretched</li>
</ul>
</li>
<li>TENSE
<ul>
<li>anxious</li>
<li>cranky</li>
<li>distressed</li>
<li>distraught</li>
<li>edgy</li>
<li>fidgety</li>
<li>frazzled</li>
<li>irritable</li>
<li>jittery</li>
<li>nervous</li>
<li>overwhelmed</li>
<li>restless</li>
<li>stressed out</li>
</ul>
</li>
<li>VULNERABLE
<ul>
<li>fragile</li>
<li>guarded</li>
<li>helpless</li>
<li>insecure</li>
<li>leery</li>
<li>reserved</li>
<li>sensitive</li>
<li>shaky</li>
</ul>
</li>
<li>YEARNING
<ul>
<li>envious</li>
<li>jealous</li>
<li>longing</li>
<li>nostalgic</li>
<li>pining</li>
<li>wistful</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="needs">
<ul class="nav needs">
<li class="feelings" id="needs"> NEEDS
<ul>
<li>AFRAID
<ul>
<li>apprehensive</li>
<li>dread</li>
<li>foreboding</li>
<li>frightened</li>
<li>mistrustful</li>
<li>panicked</li>
<li>petrified</li>
<li>scared</li>
<li>suspicious</li>
<li>terrified</li>
<li>wary</li>
<li>worried</li>
</ul>
</li>
<li>ANNOYED
<ul>
<li>aggravated</li>
<li>dismayed</li>
<li>disgruntled</li>
<li>displeased</li>
<li>exasperated</li>
<li>frustrated</li>
<li>impatient</li>
<li>irritated</li>
<li>irked</li>
</ul>
</li>
<li>ANGRY
<ul>
<li>enraged</li>
<li>furious</li>
<li>incensed</li>
<li>indignant</li>
<li>irate</li>
<li>livid</li>
<li>outraged</li>
<li>resentful</li>
</ul>
</li>
<li>AVERSION
<ul>
<li>animosity</li>
<li>appalled</li>
<li>contempt</li>
<li>disgusted</li>
<li>dislike</li>
<li>hate</li>
<li>horrified</li>
<li>hostile</li>
<li>repulsed</li>
</ul>
</li>
<li>CONFUSED
<ul>
<li>ambivalent</li>
<li>baffled</li>
<li>bewildered</li>
<li>dazed</li>
<li>hesitant</li>
<li>lost</li>
<li>mystified</li>
<li>perplexed</li>
<li>puzzled</li>
<li>torn</li>
</ul>
</li>
<li>DISCONNECTED
<ul>
<li>alienated</li>
<li>aloof</li>
<li>apathetic</li>
<li>bored</li>
<li>cold</li>
<li>detached</li>
<li>distant</li>
<li>distracted</li>
<li>indifferent</li>
<li>numb</li>
<li>removed</li>
<li>uninterested</li>
<li>withdrawn</li>
</ul>
</li>
<li>DISQUIET
<ul>
<li>agitated</li>
<li>alarmed</li>
<li>discombobulated</li>
<li>disconcerted</li>
<li>disturbed</li>
<li>perturbed</li>
<li>rattled</li>
<li>restless</li>
<li>shocked</li>
<li>startled</li>
<li>surprised</li>
<li>troubled</li>
<li>turbulent</li>
<li>turmoil</li>
<li>uncomfortable</li>
<li>uneasy</li>
<li>unnerved</li>
<li>unsettled</li>
<li>upset</li>
</ul>
</li>
<li>EMBARRASSED
<ul>
<li>ashamed</li>
<li>chagrined</li>
<li>flustered</li>
<li>guilty</li>
<li>mortified</li>
<li>self-conscious</li>
</ul>
</li>
<li>FATIGUE
<ul>
<li>beat</li>
<li>burnt out</li>
<li>depleted</li>
<li>exhausted</li>
<li>lethargic</li>
<li>listless</li>
<li>sleepy</li>
<li>tired</li>
<li>weary</li>
<li>worn out</li>
</ul>
</li>
<li>PAIN
<ul>
<li>agony</li>
<li>anguished</li>
<li>bereaved</li>
<li>devastated</li>
<li>grief</li>
<li>heartbroken</li>
<li>hurt</li>
<li>lonely</li>
<li>miserable</li>
<li>regretful</li>
<li>remorseful</li>
</ul>
</li>
<li>SAD
<ul>
<li>depressed</li>
<li>dejected</li>
<li>despair</li>
<li>despondent</li>
<li>disappointed</li>
<li>discouraged</li>
<li>disheartened</li>
<li>forlorn</li>
<li>gloomy</li>
<li>heavy hearted</li>
<li>hopeless</li>
<li>melancholy</li>
<li>unhappy</li>
<li>wretched</li>
</ul>
</li>
<li>TENSE
<ul>
<li>anxious</li>
<li>cranky</li>
<li>distressed</li>
<li>distraught</li>
<li>edgy</li>
<li>fidgety</li>
<li>frazzled</li>
<li>irritable</li>
<li>jittery</li>
<li>nervous</li>
<li>overwhelmed</li>
<li>restless</li>
<li>stressed out</li>
</ul>
</li>
<li>VULNERABLE
<ul>
<li>fragile</li>
<li>guarded</li>
<li>helpless</li>
<li>insecure</li>
<li>leery</li>
<li>reserved</li>
<li>sensitive</li>
<li>shaky</li>
</ul>
</li>
<li>YEARNING
<ul>
<li>envious</li>
<li>jealous</li>
<li>longing</li>
<li>nostalgic</li>
<li>pining</li>
<li>wistful</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Here is the CSS:
#charset "UTF-8";
/* CSS Document */
ul ul, ul ul ul {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
.nav feelings needs {
padding-left: 10px;
padding-right: 10px;
width: 200px;
color:#ff0000;
background-color:#ffffff;
}
.nav{
height: 39px;
border-radius: 3px;
min-width:500px;
border:1px solid #ddd;
background-color:#ffffff;
}
.nav li, .nav li li {
list-style: none;
display: block;
float: left;
height: 40px;
position: relative;
background-color:#ffffff;
}
.nav a {
width: 200px;
overflow:hidden;
}
.nav li a{
display: block;
}
.nav ul {
display: none;
visibility:hidden;
position: absolute;
top: 40px;
}
.nav ul ul {
top: 0px;
left:170px;
display: none;
visibility:hidden;
border: 1px solid #DDDDDD;
position: relative;
}
.nav ul li {
display: block;
visibility:visible;
}
.nav li:hover > ul, nav li:hover * {
display: block;
visibility:visible;
z-index:1;
}
If I eliminate the first CSS item (setting the menu to two columns), the last level of the menu appears (the items in small letters as opposed to all caps). With the two-column CSS in place, the third level doesn't appear.
Here is a fiddle:
http://jsfiddle.net/Lq7NK/2/
Interestingly, on the fiddle, the third level does seem to be trying to appear a bit, but it's certainly not working the way I'd like it to, which is the third level appearing in a vertical column to the right of the second level item.
Any thoughts will be appreciated!
/* image below was added after original question, in response to a request for a picture */
The top screenshot in this picture shows what comes up now when I hover over the first feeling, AFRAID -- and it is actually pretty much what I want (though obviously it needs some prettifying): two sets of two-column dropdowns, namely, the one in all caps and the one in all small letters. (This is basically with the code shown above, but with one change, namely, removing ul ul to leave only ul ul ul as suggested by user3369554.) However, when I move the cursor, stuff starts jumping all over the place; the screenshot on the bottom shows one state, but things just jump all over in a very disconcerting way. For instance, I would like to be able to just move the cursor over to where ANGRY is at the top of the second column. But if I try to do that, it jumps to somewhere else. And if I go to that place, it jumps to still another location. If the both sets of emotions (all caps and all small letters) would hold still in the configuration shown at the top, and let me click on them, I'd be happy.
I don't know if I'm understanding well, but you can get the third level in a 2 column format to the right of the second level, if you replace:
ul ul, ul ul ul
for
ul ul ul
Demo: http://jsfiddle.net/QKkg4/
Is that what your're after?
What is the simplest way to fade my 3 images into grayscale when hovered upon. This is for my footer.
Here is my html code:
<ul class="review-icons">
<li><a href="http://www.tripadvisor.ca/Restaurant_Review-g154943-d708757-Reviews-Balilicious-Vancouver_British_Columbia.html" target="_blank"><img class"grayscale" src="http://dev.baliliciousrestaurant.com/wp-content/uploads/2013/12/social-trip-advisor.jpg" alt="Trip Advisor" height="26" width="26">
</a>
</li>
<li><a href="http://www.urbanspoon.com/r/14/181587/restaurant/South-Cambie-Street/Balilicious-Modern-Indonesian-Vancouver" target="_blank"><img class"grayscale" src="http://dev.baliliciousrestaurant.com/wp-content/uploads/2013/12/social-urban-spoon.jpg" alt="Urbanspoon" height="26" width="26">
</a>
</li>
<li><a href=http://www.yelp.ca/biz/balilicious-modern-indonesian-vancouver?nb=1" target="_blank"><img class"grayscale" src="http://dev.baliliciousrestaurant.com/wp-content/uploads/2013/12/social-yelp.jpg" alt="Trip Advisor" height="26" width="26">
</a>
</li>
</ul>
my CSS so far:
ul.review-icons > li {
display: inline;
list-style: none;
margin: 15px;
top: 5px;
position: relative;
}
what it looks like in fiddle:
http://jsfiddle.net/FLBRG/2/
** extra - is it possible for the grayscale to scroll in from bottom to top
Plz n Thx
One easy way (but depends on your background color being white):
ul.review-icons > li:hover {
opacity: 0.5;
}
In the code below, I'm adding a down array (via generated content) to the top level elements that have child menus. And I'm adding a right arrow to the submenu elements that have child menus.
However, I need some help with my css, because it applies the arrows to all child elements if the parent has children. I only need it to be applied to those elements that have children.
<ul id="menu-site-menu">
<li class="hasChild top">About Us
<ul class="sub-menu">
<li>Our Charity Partners</li>
<li>Privacy Policy</li>
</ul>
</li>
<li class="hasChild top">Buy Apparel
<ul class="sub-menu">
<li class="hasChild sub">Benevolent Elephant
<ul class="sub-menu">
<li>Benevolent Elephant Short Sleeve</li>
<li>Benevolent Elephant Long Sleeve</li>
</ul>
</li>
<li class="hasChild sub">Eagle-Spirit
<ul class="sub-menu">
<li>Eagle-Spirit Short Sleeve</li>
<li>Eagle-Spirit Long Sleeve T-Shirts</li>
</ul>
</li>
</ul>
</li>
<li>Customer Service</li>
<li>Contact Us</li>
</ul>
The css is below
.hasChild.top a:after {
content: ' ';
height: 0;
position: absolute;
bottom:-5px;
right:-5px;
width:0;
border: 5px solid transparent;
border-top-color: #ccc;
}
.hasChild.sub a:after {
content: ' ';
height: 0;
position: absolute;
bottom:0;
right:-5px;
width:0;
border: 5px solid transparent;
border-left-color: #ccc;
}
Add the child selector >:
.hasChild.top > a:after {
}
.hasChild.sub > a:after {
}