acburst on gh-pages
Patreon may (compare)
menu
button, or sometimes randomly
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Example nested dropdown</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<style>
.container {
background: #eee;
border-radius: 8px;
}
.dropdown-content .dropdown-content {
left: -100%;
}
.dropdown-nested {
overflow-y: visible;
}
.dropdown-nested {
overflow-y: visible;
}
</style>
</head>
<body>
<div class="container">
<a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Menu</a>
<ul id='dropdown1' class='dropdown-content dropdown-nested'>
<li><a href="#!">uno</a></li>
<li><a class='dropdown-trigger sub' href='#' data-target='dropdown2'>uno</a></li>
<li><a href="#!">uno</a></li>
</ul>
<ul id='dropdown2' class='dropdown-content dropdown-nested'>
<li><a href="#!">dos</a></li>
<li><a href="#!">dos</a></li>
<li><a href="#!">dos</a></li>
<li><a href="#!">dos</a></li>
<li><a class='dropdown-trigger sub' href="#" data-target="dropdown3">dos</a></li>
</ul>
<ul id='dropdown3' class='dropdown-content'>
<li><a href="#!">tres</a></li>
<li><a href="#!">tres</a></li>
<li><a href="#!">tres</a></li>
<li><a href="#!">tres</a></li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$(function ()
{
$('.dropdown-trigger').dropdown();
$('.sub').dropdown({
hover: true
}
);
});
</script>
</body>
</html>
== External: SassError: Invalid CSS after ".blue": expected selector, was ".#007bff"
== External: on line 14 of node_modules/materialize-css/sass/components/_color-classes.scss
== External: from line 5 of node_modules/materialize-css/sass/materialize.scss
== External: from line 9 of assets/stylesheets/_materialize_custom.scss
== External: from line 4 of /Users/vzelenko/work/Docker/rdadvisors/assets/stylesheets/index.scss
== External: >>
== External: ------^
After Materialize you should link to your own custom js file. Call it init.js maybe - and put it in a folder called js. In this script you need a single document.ready (see the docs page for each component) and then inside this you put the line or lines for each initialisation as stated in the docs. Word of warning - if using the vanilla Js init, take out the options variable if you are not setting any options.
Sean was so kind to help with the above. as I'll be trying to add the collapsable into an existing wordpress theme, I'm sure there will be already a file that runs document ready. 1) what would the best way to find it? should I perhaps just add the document ready initialisiation into my child theme functions.php? 2) how do i need to amend the initialisation if i dont use any options?
by the way, initializing without jquery is recommended
Does this mean to use the PHP initilisation by copying it into the document ready of my theme?