Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple Materialize css template menu for wordpress
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php bloginfo('name') ?></title>
<link type="text/css" rel="stylesheet" href="<?= get_template_directory_uri(); ?>/css/materialize.min.css" media="screen,projection">
<link type="text/css" rel="stylesheet" href="<?= get_template_directory_uri(); ?>/style.css">
<style>
nav .sub-menu {
position: absolute;
min-width: 115px;
display: none;
transition: all .3s;
background-color: #ee6e73;
z-index: 1;
}
nav .sub-menu li {
white-space: nowrap;
float: none;
}
li.menu-item-has-children:hover > .sub-menu {
display: block;
}
</style>
</head>
<header>
<nav id="site-navigation" class="main-navigation" role="navigation">
<div class="nav-wrapper">
<div class="container">
<a href="#" class="brand-logo">Logo</a>
<a href="#" data-activates="mobile-nav" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
<?php
$menu = [ // mobile side menu array
'menu_class' => 'menu side-nav',
'menu_id' => 'mobile-nav',
'items_wrap' => '<ul id="%1$s" class="%2$s"><li class="mobile-header"><p>Menu</p></li>%3$s</ul><div class="clear"></div>',
];
wp_nav_menu( $menu ); // mobile side menu
$menu = [ // desktop menu array
'menu_class' => 'right hide-on-med-and-down'
];
wp_nav_menu( $menu ); // desktop menu
?>
</div>
</div>
</nav><!-- #site-navigation -->
<div class="clear"></div>
</header>
<br>
<br>
<body>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="<?= get_template_directory_uri(); ?>/js/materialize.min.js"></script>
<script>
$(document).ready(function () {
$(".button-collapse").sideNav();
});
</script>
</body>
</html>
@sveloo

This comment has been minimized.

Copy link

commented Oct 3, 2017

Does this work?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.