materialize-css
Version:
Builds Materialize distribution packages
138 lines (123 loc) • 5.84 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<title>Parallax Template - Materialize</title>
<!-- CSS -->
<link href="bin/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="extras/noUiSlider/nouislider.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="templates/parallax-template/css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<aside>
<ul id="slide-out" class="side-nav fixed">
<li>
<div class="userView">
<div class="background">
<img src="http://placehold.it/300x200">
</div>
<a class="user-img" href="#!user"><img class="user-img-profile circle" src="http://placehold.it/50x50"></a>
<a class="user-name" href="#!name"><span class="white-text name">John Doe</span></a>
<a class="user-email" href="#!email" data-activates="aside-dropdown" data-constrainwidth="false" data-beloworigin="true" data-induration="150" data-outduration="150"><span class="white-text email">john.doe@gmail.com</span> <i class="material-icons right">arrow_drop_down</i></a>
</div>
</li>
<li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
<li><a href="#!">Second Link</a></li>
</ul>
</aside>
<ul id="aside-dropdown" class="dropdown-content">
<li>
<a href="#!">
<span class="dropdown-icon left"><i class="material-icons">face</i></span>
<span class="dropdown-label left">Account Information</span>
</a>
</li>
<li>
<a href="#!">
<span class="dropdown-icon left"><i class="material-icons">settings</i></span>
<span class="dropdown-label left">Settings</span>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#!">
<span class="dropdown-icon left"><i class="material-icons">power_settings_new</i></span>
<span class="dropdown-label left">Log Out</span>
</a>
</li>
</ul>
<a href="#anchor" class="">Normal Anchor</a>
<a href="#btn-flat" class="btn-flat">btn-flat</a>
<a href="#btn" class="btn">btn</a>
<a href="#btn-large" class="btn-large">btn large</a>
<a href="#btn-floating" class="btn-floating">float</a>
<ul id="slide-out" class="side-nav">
<li><div class="userView">
<img class="background" src="images/office.jpg">
<a href="#!user"><img class="circle" src="images/yuna.jpg"></a>
<a href="#!name"><span class="white-text name">John Doe</span></a>
<a href="#!email"><span class="white-text email">jdandturk@gmail.com</span></a>
</div></li>
<li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
<li><a href="#!">Second Link</a></li>
<li><div class="divider"></div></li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
<li><a href="#">content</a></li>
<li><a href="#">content</a></li>
<li><a href="#">content</a></li>
<li><a href="#">content</a></li>
<li><a href="#">content</a></li>
<li><a href="#">content</a></li>
<li><a href="#">content</a></li>
<li><a href="#">content</a></li>
<li><a href="#">content</a></li>
<li><a href="#">content</a></li>
<li><a href="#">content</a></li>
<li><a href="#">content</a></li>
<li><a href="#">content</a></li>
<li><a href="#">content</a></li>
<li><a href="#">content</a></li>
<li><a href="#">content</a></li>
<li><a href="#">content</a></li>
<li><a href="#">content</a></li>
<li><a href="#">content</a></li>
<li><a href="#">content</a></li>
<li><a href="#">content</a></li>
<li><a href="#">content</a></li>
<!-- <li class="no-padding">
<ul class="collapsible accordion" data-collapsible="accordion">
<li>
<div class="collapsible-header">#1<i class="material-icons right blue-text">arrow_drop_down</i></div>
<div class="collapsible-body"> <a href="#">content</a> <a href="#">content</a> <a href="#">content</a> <a href="#">content</a><ul class="collapsible accordion" data-collapsible="accordion"> <li> <div class="collapsible-header">#2<i class="material-icons right blue-text">arrow_drop_down</i></div> <div class="collapsible-body"> <a href="#">content</a> <a href="#">content</a> <a href="#">content</a> <a href="#">content</a> </div> </li> </ul> </div> </li> <li> <div class="collapsible-header">#3<i class="material-icons right blue-text">arrow_drop_down</i></div> <div class="collapsible-body"> <a href="#">content</a> <a href="#">content</a> <a href="#">content</a> <a href="#">content</a> </div> </li> </ul></li> -->
</ul>
<a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="bin/materialize.js"></script>
<script src="js/init.js"></script>
<script src="http://materializecss.com/extras/noUiSlider/nouislider.js"></script>
<script>
(function($){
$(function(){
$(".user-email").dropdown({
hover: false
});
}); // end of document ready
})(jQuery); // end of jQuery name space
</script>
</body>
</html>