آموزش طراحی متریال با Materialize (جلسه 19) - Navbar و منو

<nav>

<div class="nav-wrapper">

<a href="#" class="brand-logo">TutorialsPoint</a>

<ul id="nav-mobile" class="right hide-on-med-and-down">

<li><a href="#">HTML5</a></li>

<li><a href="#">CSS</a></li>

<li><a href="#">JavaScript</a></li>

</ul>

</div>

</nav>

<nav>

<div class="nav-wrapper">

<a href="#" class="brand-logo right">TutorialsPoint</a>

<ul id="nav-mobile" class="left hide-on-med-and-down">

<li><a href="#">HTML5</a></li>

<li><a href="#">CSS</a></li>

<li><a href="#">JavaScript</a></li>

</ul>

</div>

</nav>

<nav>

<div class="nav-wrapper">

<a href="#" class="brand-logo center">TutorialsPoint</a>

<ul id="nav-mobile" class="right hide-on-med-and-down">

<li><a href="#">Java</a></li>

</ul>

</div>

</nav>

<nav>

<div class="nav-wrapper">

<a href="#" class="brand-logo right">TutorialsPoint</a>

<ul id="nav-mobile" class="left hide-on-med-and-down">

<li><a href="#">HTML5</a></li>

<li><a href="#">CSS</a></li>

<li class="active"><a href="#">JavaScript</a></li>

</ul>

</div>

</nav>

<div class="col s12 m12 l12">

<h5>Nav Bar with dropdown menu</h5>

<ul id="javaDropDown" class="dropdown-content">

<li><a href="#!">JSF</a></li>

<li><a href="#!">JSP</a></li>

<li class="divider"></li>

<li><a href="#!">Servlets</a></li>

</ul>

<nav>

<div class="nav-wrapper">

<a href="#" class="brand-logo center">TutorialsPoint</a>

<ul id="nav-mobile" class="right hide-on-med-and-down">

<!-- Dropdown Trigger -->

<li><a class="dropdown-button" href="#!" data-activates="javaDropDown">Java<i class="material-icons right">arrow_drop_down</i></a></li>

</ul>

</div>

</nav>

</div>

$( document ).ready(function){

$(".dropdown-button").dropdown();

});

<nav>

<div class="nav-wrapper">

<a href="#" class="brand-logo right">TutorialsPoint</a>

<ul id="nav-mobile" class="left hide-on-med-and-down">

<li><a href="#"><i class="material-icons left">search</i>HTML5</a></li>

<li><a href="#"><i class="material-icons right">view_module</i>CSS</a></li>

<li><a href="#">JavaScript</a></li>

</ul>

</div>

</nav>