Materialise CSS导航栏 _MaterializeCSS

导航栏用于创建简单的导航栏。 Materialize CSS提供了各种CSS类来创建导航栏。
导航栏在建议的容器div中使用。导航栏有两个主要部分：

徽标或品牌链接
导航链接(你可以将这些链接向左或向右对齐)

你可以通过以下方式使用导航栏：

右对齐链接
左对齐链接
中心徽标
活动链接
导航栏下拉菜单
导航栏带有链接和图标
导航栏图标与文本

例子让我们以Materialize CSS示例为例, 演示上述所有属性：

< html> < head> < title> The Materialize NavBar Example< /title> < meta name = "viewport" content = "width = device-width, initial-scale = 1"> < link rel = "stylesheet"href = "https://fonts.googleapis.com/icon?family=Material+Icons"> < link rel = "stylesheet"href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> < script type = "text/javascript"src = "https://code.jquery.com/jquery-2.1.1.min.js"> < /script> < script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> < /script> < script> $( document ).ready(function()) {$(".dropdown-button").dropdown(); }); < /script> < /head> < body class = "container"> < div class = "row" style = "width:560px; "> < div class = "col s12 m12 l12" > < h5> Right Aligned Nav Bar< /h5> < nav> < div class="nav-wrapper"> < a href="http://www.srcmini.com/#" class="brand-logo left"> Logo< /a> < ul id="nav-mobile" class="right"> < li> < a href="http://www.srcmini.com/sass.html"> Sass< /a> < /li> < li> < a href="http://www.srcmini.com/badges.html"> Components< /a> < /li> < li> < a href="http://www.srcmini.com/collapsible.html"> JavaScript< /a> < /li> < /ul> < /div> < /nav> < /div> < /div> < div class = "row" style = "width:560px; "> < div class = "col s12 m12 l12"> < h5> Left Aligned Nav Bar< /h5> < nav> < div class="nav-wrapper"> < a href="http://www.srcmini.com/#" class="brand-logo right"> Logo< /a> < ul id="nav-mobile" class="left"> < li> < a href="http://www.srcmini.com/sass.html"> Sass< /a> < /li> < li> < a href="http://www.srcmini.com/badges.html"> Components< /a> < /li> < li> < a href="http://www.srcmini.com/collapsible.html"> JavaScript< /a> < /li> < /ul> < /div> < /nav> < /div> < /div> < div class = "row" style = "width:560px; "> < div class = "col s12 m12 l12"> < h5> Center Aligned Nav Bar< /h5> < nav> < div class = "nav-wrapper"> < a href = "http://www.srcmini.com/#" class = "brand-logo center"> Logo< /a> < ul id = "nav-mobile" class = "right hide-on-med-and-down"> < li> < a href = "http://www.srcmini.com/#"> Java< /a> < /li> < /ul> < /div> < /nav> < /div> < /div> < div class = "row" style = "width:560px; "> < div class = "col s12 m12 l12"> < h5> Nav Bar with Active link< /h5> < nav> < div class="nav-wrapper"> < a href="http://www.srcmini.com/#!" class="brand-logo right"> Logo< /a> < ul class="left"> < li> < a href="http://www.srcmini.com/sass.html"> Sass< /a> < /li> < li> < a href="http://www.srcmini.com/badges.html"> Components< /a> < /li> < li class="active"> < a href="http://www.srcmini.com/collapsible.html"> JavaScript< /a> < /li> < /ul> < /div> < /nav> < /div> < /div> < div class = "row" style = "width:560px; "> < div class = "col s12 m12 l12"> < h5> Nav Bar with dropdown menu< /h5> < ul id="dropdown1" class="dropdown-content"> < li> < a href="http://www.srcmini.com/#!"> one< /a> < /li> < li> < a href="http://www.srcmini.com/#!"> two< /a> < /li> < li class="divider"> < /li> < li> < a href="http://www.srcmini.com/#!"> three< /a> < /li> < /ul> < nav> < div class="nav-wrapper"> < a href="http://www.srcmini.com/#!" class="brand-logo left"> Logo< /a> < ul class="right"> < li> < a href="http://www.srcmini.com/sass.html"> Sass< /a> < /li> < li> < a href="http://www.srcmini.com/badges.html"> Components< /a> < /li> < !-- Dropdown Trigger --> < li> < a class="dropdown-button" href="http://www.srcmini.com/#!" data-activates="dropdown1"> Dropdown< i class="material-icons right"> arrow_drop_down< /i> < /a> < /li> < /ul> < /div> < /nav> < /div> < /div> < div class = "row" style = "width:560px; "> < div class = "col s12 m12 l12"> < h5> Nav Bar with Links and Icons< /h5> < nav> < div class="nav-wrapper"> < a href="http://www.srcmini.com/#!" class="brand-logo left"> < i class="material-icons"> cloud< /i> Logo< /a> < ul class="right"> < li> < a href="http://www.srcmini.com/sass.html"> < i class="material-icons"> search< /i> < /a> < /li> < li> < a href="http://www.srcmini.com/badges.html"> < i class="material-icons"> view_module< /i> < /a> < /li> < li> < a href="http://www.srcmini.com/collapsible.html"> < i class="material-icons"> refresh< /i> < /a> < /li> < li> < a href="http://www.srcmini.com/mobile.html"> < i class="material-icons"> more_vert< /i> < /a> < /li> < /ul> < /div> < /nav> < /div> < /div> < div class = "row" style = "width:560px; "> < div class = "col s12 m12 l12"> < h5> Nav Bar Icon with Text< /h5> < nav> < div class="nav-wrapper"> < a href="http://www.srcmini.com/#!" class="brand-logo left"> Logo< /a> < ul class="right"> < li> < a href="http://www.srcmini.com/sass.html"> < i class="material-icons left"> search< /i> Link with Left Icon< /a> < /li> < li> < a href="http://www.srcmini.com/badges.html"> < i class="material-icons right"> view_module< /i> Link with Right Icon< /a> < /li> < /ul> < /div> < /div> < /nav> < /div> < /body> < /html>

立即测试
【Materialise CSS导航栏】输出