<!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?
<?php
// Load scripts (header.php)
function load_materialize_js()
{
if ($GLOBALS['pagenow'] != 'wp-login.php' && !is_admin()) {
wp_register_script('materializejs', get_template_directory_uri() . '/js/materialize.min.js', array('jquery'), '1.0.0'); // Materialize
wp_enqueue_script('materializejs');
wp_register_script('init', get_template_directory_uri() . '/js/init.js', array('jquery'), '1.0.0'); // Custom JS
wp_enqueue_script('init');
}
}
// Load styles
function load_materialize_css()
{
wp_register_style('materialicons', 'https://fonts.googleapis.com/icon?family=Material+Icons');
wp_enqueue_style('materialicons');
wp_register_style('materializecss', get_template_directory_uri() . '/css/materialize.min.css', array(), '1.0.0', 'all');
wp_enqueue_style('materializecss');
wp_register_style('style', get_template_directory_uri() . '/style.css', array(), '1.0', 'all');
wp_enqueue_style('style');
}
// Add Actions
add_action('init', 'load_materialize_js'); // Add Custom Scripts to wp_head
add_action('wp_enqueue_scripts', 'load_materialize_css'); // Add Theme Stylesheet
}
?>
init
here: add_action('init', 'load_materialize_js')
, this takes care of positioning the scripts correctly (by the footer). And the same with wp_enqueue_scripts
, these are placed in the head.
Hi Sean, thanks a lot for your additional help! Really appreciate it! I dug further and found out that my theme uses a template script for the dropdown which is called Select2. I think it may just get too complicated to combine 'Materialize' and Select2
@AlphaX2018 so, just getting back to this - it's really simple:
<?php // Load scripts (header.php) function load_materialize_js() { if ($GLOBALS['pagenow'] != 'wp-login.php' && !is_admin()) { wp_register_script('materializejs', get_template_directory_uri() . '/js/materialize.min.js', array('jquery'), '1.0.0'); // Materialize wp_enqueue_script('materializejs'); wp_register_script('init', get_template_directory_uri() . '/js/init.js', array('jquery'), '1.0.0'); // Custom JS wp_enqueue_script('init'); } } // Load styles function load_materialize_css() { wp_register_style('materialicons', 'https://fonts.googleapis.com/icon?family=Material+Icons'); wp_enqueue_style('materialicons'); wp_register_style('materializecss', get_template_directory_uri() . '/css/materialize.min.css', array(), '1.0.0', 'all'); wp_enqueue_style('materializecss'); wp_register_style('style', get_template_directory_uri() . '/style.css', array(), '1.0', 'all'); wp_enqueue_style('style'); } // Add Actions add_action('init', 'load_materialize_js'); // Add Custom Scripts to wp_head add_action('wp_enqueue_scripts', 'load_materialize_css'); // Add Theme Stylesheet } ?>
$('.chips-initial').material_chip('data') = ''