| 1 | <!DOCTYPE html>
|
| 2 | <html lang="en">
|
| 3 | <head>
|
| 4 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1">
|
| 6 | <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
| 7 | <meta name="msapplication-tap-highlight" content="no">
|
| 8 | <meta name="description" content="Materialize is a modern responsive CSS framework based on Material Design by Google. ">
|
| 9 | <title>Navbar - Materialize</title>
|
| 10 |
|
| 11 | <link rel="apple-touch-icon-precomposed" href="images/favicon/apple-touch-icon-152x152.png">
|
| 12 | <meta name="msapplication-TileColor" content="#FFFFFF">
|
| 13 | <meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png">
|
| 14 | <link rel="icon" href="images/favicon/favicon-32x32.png" sizes="32x32">
|
| 15 |
|
| 16 | <meta name="theme-color" content="#EE6E73">
|
| 17 |
|
| 18 | <link href="css/prism.css" rel="stylesheet">
|
| 19 | <link href="css/ghpages-materialize.css" type="text/css" rel="stylesheet" media="screen,projection">
|
| 20 | <link href="http://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css">
|
| 21 | <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
| 22 | <script>
|
| 23 | window.liveSettings = {
|
| 24 | api_key: "a0b49b34b93844c38eaee15690d86413",
|
| 25 | picker: "bottom-right",
|
| 26 | detectlang: true,
|
| 27 | dynamic: true,
|
| 28 | autocollect: true
|
| 29 | };
|
| 30 | </script>
|
| 31 | <script src="//cdn.transifex.com/live.js"></script>
|
| 32 | </head>
|
| 33 | <body>
|
| 34 | <header>
|
| 35 | <nav class="top-nav">
|
| 36 | <div class="container">
|
| 37 | <div class="nav-wrapper"><a class="page-title">Navbar</a></div>
|
| 38 | </div>
|
| 39 | </nav>
|
| 40 | <div class="container"><a href="#" data-activates="nav-mobile" class="button-collapse top-nav full hide-on-large-only"><i class="material-icons">menu</i></a></div>
|
| 41 | <ul id="nav-mobile" class="side-nav fixed">
|
| 42 | <li class="logo"><a id="logo-container" href="http://materializecss.com/" class="brand-logo">
|
| 43 | <object id="front-page-logo" type="image/svg+xml" data="res/materialize.svg">Your browser does not support SVG</object></a></li>
|
| 44 | <li class="search">
|
| 45 | <div class="search-wrapper card">
|
| 46 | <input id="search"><i class="material-icons">search</i>
|
| 47 | <div class="search-results"></div>
|
| 48 | </div>
|
| 49 | </li>
|
| 50 | <li class="bold"><a href="about.html" class="waves-effect waves-teal">About</a></li>
|
| 51 | <li class="bold"><a href="getting-started.html" class="waves-effect waves-teal">Getting Started</a></li>
|
| 52 | <li class="no-padding">
|
| 53 | <ul class="collapsible collapsible-accordion">
|
| 54 | <li class="bold"><a class="collapsible-header waves-effect waves-teal">CSS</a>
|
| 55 | <div class="collapsible-body">
|
| 56 | <ul>
|
| 57 | <li><a href="color.html">Color</a></li>
|
| 58 | <li><a href="grid.html">Grid</a></li>
|
| 59 | <li><a href="helpers.html">Helpers</a></li>
|
| 60 | <li><a href="media-css.html">Media</a></li>
|
| 61 | <li><a href="sass.html">Sass</a></li>
|
| 62 | <li><a href="shadow.html">Shadow</a></li>
|
| 63 | <li><a href="table.html">Table</a></li>
|
| 64 | <li><a href="css-transitions.html">Transitions</a></li>
|
| 65 | <li><a href="typography.html">Typography</a></li>
|
| 66 | </ul>
|
| 67 | </div>
|
| 68 | </li>
|
| 69 | <li class="bold"><a class="collapsible-header active waves-effect waves-teal">Components</a>
|
| 70 | <div class="collapsible-body">
|
| 71 | <ul>
|
| 72 | <li><a href="badges.html">Badges</a></li>
|
| 73 | <li><a href="buttons.html">Buttons</a></li>
|
| 74 | <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
|
| 75 | <li><a href="cards.html">Cards</a></li>
|
| 76 | <li><a href="chips.html">Chips</a></li>
|
| 77 | <li><a href="collections.html">Collections</a></li>
|
| 78 | <li><a href="footer.html">Footer</a></li>
|
| 79 | <li><a href="forms.html">Forms</a></li>
|
| 80 | <li><a href="icons.html">Icons</a></li>
|
| 81 | <li class="active"><a href="navbar.html">Navbar</a></li>
|
| 82 | <li><a href="pagination.html">Pagination</a></li>
|
| 83 | <li><a href="preloader.html">Preloader</a></li>
|
| 84 | </ul>
|
| 85 | </div>
|
| 86 | </li>
|
| 87 | <li class="bold"><a class="collapsible-header waves-effect waves-teal">JavaScript</a>
|
| 88 | <div class="collapsible-body">
|
| 89 | <ul>
|
| 90 | <li><a href="carousel.html">Carousel</a></li>
|
| 91 | <li><a href="collapsible.html">Collapsible</a></li>
|
| 92 | <li><a href="dialogs.html">Dialogs</a></li>
|
| 93 | <li><a href="dropdown.html">Dropdown</a></li>
|
| 94 | <li><a href="media.html">Media</a></li>
|
| 95 | <li><a href="modals.html">Modals</a></li>
|
| 96 | <li><a href="parallax.html">Parallax</a></li>
|
| 97 | <li><a href="pushpin.html">Pushpin</a></li>
|
| 98 | <li><a href="scrollfire.html">ScrollFire</a></li>
|
| 99 | <li><a href="scrollspy.html">Scrollspy</a></li>
|
| 100 | <li><a href="side-nav.html">SideNav</a></li>
|
| 101 | <li><a href="tabs.html">Tabs</a></li>
|
| 102 | <li><a href="transitions.html">Transitions</a></li>
|
| 103 | <li><a href="waves.html">Waves</a></li>
|
| 104 | </ul>
|
| 105 | </div>
|
| 106 | </li>
|
| 107 | </ul>
|
| 108 | </li>
|
| 109 | <li class="bold"><a href="http://materializecss.com/mobile.html" class="waves-effect waves-teal">Mobile</a></li>
|
| 110 | <li class="bold"><a href="showcase.html" class="waves-effect waves-teal">Showcase</a></li>
|
| 111 | </ul>
|
| 112 | </header>
|
| 113 | <main><div class="container">
|
| 114 | <div class="row">
|
| 115 |
|
| 116 | <div class="col s12 m9 l10">
|
| 117 |
|
| 118 | <div id="right" class="section scrollspy">
|
| 119 |
|
| 120 | <p class="caption">The navbar is fully contained by an HTML5 Nav tag. Inside a recommended container div, there are 2 main parts of the navbar. A logo or brand link, and the navigations links. You can align these links to the left or right.
|
| 121 | </p>
|
| 122 | <h2 class="header">Right Aligned Links</h2>
|
| 123 | <p>To right align your navbar links, just add a <code class="language-markup">right</code> class to your <code class="language-markup"><ul></code> that contains them.</p>
|
| 124 | <nav>
|
| 125 | <div class="nav-wrapper">
|
| 126 | <div class="col s12">
|
| 127 | <a href="#!" class="brand-logo">Logo</a>
|
| 128 | <ul class="right hide-on-med-and-down">
|
| 129 | <li><a href="sass.html">Sass</a></li>
|
| 130 | <li><a href="badges.html">Components</a></li>
|
| 131 | <li><a href="collapsible.html">JavaScript</a></li>
|
| 132 | </ul>
|
| 133 | </div>
|
| 134 | </div>
|
| 135 | </nav><br>
|
| 136 | <pre><code class="language-markup">
|
| 137 | <nav>
|
| 138 | <div class="nav-wrapper">
|
| 139 | <a href="#" class="brand-logo">Logo</a>
|
| 140 | <ul id="nav-mobile" class="right hide-on-med-and-down">
|
| 141 | <li><a href="sass.html">Sass</a></li>
|
| 142 | <li><a href="badges.html">Components</a></li>
|
| 143 | <li><a href="collapsible.html">JavaScript</a></li>
|
| 144 | </ul>
|
| 145 | </div>
|
| 146 | </nav>
|
| 147 | </code></pre>
|
| 148 | </div>
|
| 149 |
|
| 150 | <div id="left" class="section scrollspy">
|
| 151 | <h2 class="header">Left Aligned Links</h2>
|
| 152 | <p>To left align your navbar links, just add a <code class="language-markup">left</code> class to your <code class="language-markup"><ul></code> that contains them.</p>
|
| 153 | <nav>
|
| 154 | <div class="nav-wrapper">
|
| 155 | <div class="col s12">
|
| 156 | <a href="#!" class="brand-logo right">Logo</a>
|
| 157 | <ul class="left hide-on-med-and-down">
|
| 158 | <li><a href="sass.html">Sass</a></li>
|
| 159 | <li><a href="badges.html">Components</a></li>
|
| 160 | <li><a href="collapsible.html">JavaScript</a></li>
|
| 161 | </ul>
|
| 162 | </div>
|
| 163 | </div>
|
| 164 | </nav><br>
|
| 165 | <pre><code class="language-markup">
|
| 166 | <nav>
|
| 167 | <div class="nav-wrapper">
|
| 168 | <a href="#" class="brand-logo right">Logo</a>
|
| 169 | <ul id="nav-mobile" class="left hide-on-med-and-down">
|
| 170 | <li><a href="sass.html">Sass</a></li>
|
| 171 | <li><a href="badges.html">Components</a></li>
|
| 172 | <li><a href="collapsible.html">JavaScript</a></li>
|
| 173 | </ul>
|
| 174 | </div>
|
| 175 | </nav>
|
| 176 | </code></pre>
|
| 177 | </div>
|
| 178 |
|
| 179 | <div id="center" class="section scrollspy">
|
| 180 | <h2 class="header">Centering the logo</h2>
|
| 181 | <p>The logo will center itself on medium and down screens, but if you want the logo to always be centered, add the <code class="language-markup">center</code> class to your <code class="language-markup"><a class="brand-logo"></code>. You will have to make sure yourself that links do not overlap if you use this.</p>
|
| 182 | <nav>
|
| 183 | <div class="nav-wrapper">
|
| 184 | <a href="#!" class="brand-logo center">Logo</a>
|
| 185 | <ul class="left hide-on-med-and-down">
|
| 186 | <li><a href="sass.html">Sass</a></li>
|
| 187 | <li><a href="badges.html">Components</a></li>
|
| 188 | </ul>
|
| 189 | </div>
|
| 190 | </nav><br>
|
| 191 | <pre><code class="language-markup">
|
| 192 | <nav>
|
| 193 | <div class="nav-wrapper">
|
| 194 | <a href="#" class="brand-logo center">Logo</a>
|
| 195 | <ul id="nav-mobile" class="left hide-on-med-and-down">
|
| 196 | <li><a href="sass.html">Sass</a></li>
|
| 197 | <li><a href="badges.html">Components</a></li>
|
| 198 | <li><a href="collapsible.html">JavaScript</a></li>
|
| 199 | </ul>
|
| 200 | </div>
|
| 201 | </nav>
|
| 202 | </code></pre>
|
| 203 | </div>
|
| 204 |
|
| 205 | <div id="active-label" class="section scrollspy">
|
| 206 |
|
| 207 | <h2 class="header">Active Items</h2>
|
| 208 | <p>
|
| 209 | Add active class to your li tags to denote the current page.
|
| 210 | </p>
|
| 211 |
|
| 212 | <nav>
|
| 213 | <div class="nav-wrapper">
|
| 214 | <a href="#!" class="brand-logo center">Logo</a>
|
| 215 | <ul class="left hide-on-med-and-down">
|
| 216 | <li><a href="sass.html">Sass</a></li>
|
| 217 | <li><a href="badges.html">Components</a></li>
|
| 218 | <li class="active"><a href="collapsible.html">JavaScript</a></li>
|
| 219 | </ul>
|
| 220 | </div>
|
| 221 | </nav><br>
|
| 222 |
|
| 223 | <pre><code class="language-markup">
|
| 224 | <nav>
|
| 225 | <div class="nav-wrapper">
|
| 226 | <a href="#!" class="brand-logo center">Logo</a>
|
| 227 | <ul class="left hide-on-med-and-down">
|
| 228 | <li><a href="sass.html">Sass</a></li>
|
| 229 | <li><a href="badges.html">Components</a></li>
|
| 230 | <li class="active"><a href="collapsible.html">JavaScript</a></li>
|
| 231 | </ul>
|
| 232 | </div>
|
| 233 | </nav>
|
| 234 | </code></pre>
|
| 235 | </div>
|
| 236 |
|
| 237 | <div id="navbar-tabs" class="section scrollspy">
|
| 238 |
|
| 239 | <h2 class="header">Extended Navbar with Tabs</h2>
|
| 240 | <p>
|
| 241 | To add extended components to the navbar, add the class <code class="language-markup">extended-nav</code> to the outer <span class="language-markup">nav</span> tag. This will allow your navbar height to be variable. Then you can just include a tabs component inside the <span class="language-markup">nav-wrapper</span>.
|
| 242 | </p>
|
| 243 |
|
| 244 | <nav class="nav-extended">
|
| 245 | <div class="nav-wrapper">
|
| 246 | <a href="#" class="brand-logo">Logo</a>
|
| 247 | <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
|
| 248 | <ul id="nav-mobile" class="right hide-on-med-and-down">
|
| 249 | <li><a href="sass.html">Sass</a></li>
|
| 250 | <li><a href="badges.html">Components</a></li>
|
| 251 | <li><a href="collapsible.html">JavaScript</a></li>
|
| 252 | </ul>
|
| 253 | <ul class="side-nav" id="mobile-demo">
|
| 254 | <li><a href="sass.html">Sass</a></li>
|
| 255 | <li><a href="badges.html">Components</a></li>
|
| 256 | <li><a href="collapsible.html">JavaScript</a></li>
|
| 257 | </ul>
|
| 258 | </div>
|
| 259 | <div class="nav-content">
|
| 260 | <ul class="tabs tabs-transparent">
|
| 261 | <li class="tab"><a href="#test1">Test 1</a></li>
|
| 262 | <li class="tab"><a class="active" href="#test2">Test 2</a></li>
|
| 263 | <li class="tab disabled"><a href="#test3">Disabled Tab</a></li>
|
| 264 | <li class="tab"><a href="#test4">Test 4</a></li>
|
| 265 | </ul>
|
| 266 | </div>
|
| 267 | </nav>
|
| 268 | <br>
|
| 269 | <div id="test1" class="col s12">Test 1</div>
|
| 270 | <div id="test2" class="col s12">Test 2</div>
|
| 271 | <div id="test3" class="col s12">Test 3</div>
|
| 272 | <div id="test4" class="col s12">Test 4</div>
|
| 273 | <br>
|
| 274 | <pre><code class="language-markup">
|
| 275 | <nav class="nav-extended">
|
| 276 | <div class="nav-wrapper">
|
| 277 | <a href="#" class="brand-logo">Logo</a>
|
| 278 | <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
|
| 279 | <ul id="nav-mobile" class="right hide-on-med-and-down">
|
| 280 | <li><a href="sass.html">Sass</a></li>
|
| 281 | <li><a href="badges.html">Components</a></li>
|
| 282 | <li><a href="collapsible.html">JavaScript</a></li>
|
| 283 | </ul>
|
| 284 | <ul class="side-nav" id="mobile-demo">
|
| 285 | <li><a href="sass.html">Sass</a></li>
|
| 286 | <li><a href="badges.html">Components</a></li>
|
| 287 | <li><a href="collapsible.html">JavaScript</a></li>
|
| 288 | </ul>
|
| 289 | </div>
|
| 290 | <div class="nav-content">
|
| 291 | <ul class="tabs tabs-transparent">
|
| 292 | <li class="tab"><a href="#test1">Test 1</a></li>
|
| 293 | <li class="tab"><a class="active" href="#test2">Test 2</a></li>
|
| 294 | <li class="tab disabled"><a href="#test3">Disabled Tab</a></li>
|
| 295 | <li class="tab"><a href="#test4">Test 4</a></li>
|
| 296 | </ul>
|
| 297 | </div>
|
| 298 | </nav>
|
| 299 | <div id="test1" class="col s12">Test 1</div>
|
| 300 | <div id="test2" class="col s12">Test 2</div>
|
| 301 | <div id="test3" class="col s12">Test 3</div>
|
| 302 | <div id="test4" class="col s12">Test 4</div>
|
| 303 | </code></pre>
|
| 304 | </div>
|
| 305 |
|
| 306 | <div id="navbar-fixed" class="section scrollspy">
|
| 307 |
|
| 308 | <h2 class="header">Fixed Navbar</h2>
|
| 309 | <p>
|
| 310 | To make the navbar fixed, you have to add an outer wrapping div with the class <code class="language-markup">navbar-fixed</code>. This will offset your other content while making your nav fixed. You can adjust the height of this outer div to change how much offset is on your content.
|
| 311 | </p>
|
| 312 |
|
| 313 | <pre><code class="language-markup">
|
| 314 | <div class="navbar-fixed">
|
| 315 | <nav>
|
| 316 | <div class="nav-wrapper">
|
| 317 | <a href="#!" class="brand-logo">Logo</a>
|
| 318 | <ul class="right hide-on-med-and-down">
|
| 319 | <li><a href="sass.html">Sass</a></li>
|
| 320 | <li><a href="badges.html">Components</a></li>
|
| 321 | </ul>
|
| 322 | </div>
|
| 323 | </nav>
|
| 324 | </div>
|
| 325 | </code></pre>
|
| 326 | </div>
|
| 327 |
|
| 328 | <div id="navbar-dropdown" class="section scrollspy">
|
| 329 |
|
| 330 | <h2 class="header">Navbar Dropdown Menu</h2>
|
| 331 | <p>
|
| 332 | To add a navbar dropdown menu, add the <code class="language-markup">ul</code> dropdown structure into the page.
|
| 333 | Then, add an element to trigger the dropdown menu. Make sure to supply the id of the dropdown structure to the
|
| 334 | <code class="language-markup">data-activates</code> attribute of the dropdown trigger.
|
| 335 | </p>
|
| 336 |
|
| 337 |
|
| 338 | <ul id="dropdown1" class="dropdown-content">
|
| 339 | <li><a href="#!">one</a></li>
|
| 340 | <li><a href="#!">two</a></li>
|
| 341 | <li class="divider"></li>
|
| 342 | <li><a href="#!">three</a></li>
|
| 343 | </ul>
|
| 344 | <nav>
|
| 345 | <div class="nav-wrapper">
|
| 346 | <a href="#!" class="brand-logo">Logo</a>
|
| 347 | <ul class="right hide-on-med-and-down">
|
| 348 | <li><a href="sass.html">Sass</a></li>
|
| 349 | <li><a href="badges.html">Components</a></li>
|
| 350 |
|
| 351 | <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
|
| 352 | </ul>
|
| 353 | </div>
|
| 354 | </nav><br>
|
| 355 | <pre><code class="language-markup">
|
| 356 | <!-- Dropdown Structure -->
|
| 357 | <ul id="dropdown1" class="dropdown-content">
|
| 358 | <li><a href="#!">one</a></li>
|
| 359 | <li><a href="#!">two</a></li>
|
| 360 | <li class="divider"></li>
|
| 361 | <li><a href="#!">three</a></li>
|
| 362 | </ul>
|
| 363 | <nav>
|
| 364 | <div class="nav-wrapper">
|
| 365 | <a href="#!" class="brand-logo">Logo</a>
|
| 366 | <ul class="right hide-on-med-and-down">
|
| 367 | <li><a href="sass.html">Sass</a></li>
|
| 368 | <li><a href="badges.html">Components</a></li>
|
| 369 | <!-- Dropdown Trigger -->
|
| 370 | <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></i></a></li>
|
| 371 | </ul>
|
| 372 | </div>
|
| 373 | </nav>
|
| 374 | </code></pre>
|
| 375 | <p>To activate the dropdown menu, insert this line of code into your JavaScript file, within the <code class="language-javascript">$( document ).ready(function)</code> block</p>
|
| 376 | <pre><code class="language-javascript">
|
| 377 | $(".dropdown-button").dropdown();
|
| 378 | </code></pre>
|
| 379 | <h5>Trigger dropdown menu on click</h5>
|
| 380 | <p>
|
| 381 | By default, the dropdown menu is activated by hovering over the dropdown trigger.
|
| 382 | To activate the dropdown menu on click, pass <code class="language-javascript">{ hover: false }</code>
|
| 383 | into the above <code class="language-javascript">dropdown()</code> function
|
| 384 | </p>
|
| 385 | </div>
|
| 386 |
|
| 387 | <div id="icons" class="section scrollspy">
|
| 388 | <h2 class="header">Icon Links</h2>
|
| 389 |
|
| 390 | <nav>
|
| 391 | <div class="nav-wrapper">
|
| 392 | <a href="#!" class="brand-logo"><i class="material-icons">cloud</i>Logo</a>
|
| 393 | <ul class="right hide-on-med-and-down">
|
| 394 | <li><a href="sass.html"><i class="material-icons">search</i></a></li>
|
| 395 | <li><a href="badges.html"><i class="material-icons">view_module</i></a></li>
|
| 396 | <li><a href="collapsible.html"><i class="material-icons">refresh</i></a></li>
|
| 397 | <li><a href="mobile.html"><i class="material-icons">more_vert</i></a></li>
|
| 398 | </ul>
|
| 399 | </div>
|
| 400 | </nav>
|
| 401 |
|
| 402 | <br>
|
| 403 |
|
| 404 | <p>You can add icons into links. For icon only links you don't need any additional class. Just pop the <code class="language-markup">i</code> tag in and it will work.</p>
|
| 405 | <pre><code class="language-markup">
|
| 406 | <nav>
|
| 407 | <div class="nav-wrapper">
|
| 408 | <a href="#!" class="brand-logo"><i class="material-icons">cloud</i>Logo</a>
|
| 409 | <ul class="right hide-on-med-and-down">
|
| 410 | <li><a href="sass.html"><i class="material-icons">search</i></a></li>
|
| 411 | <li><a href="badges.html"><i class="material-icons">view_module</i></a></li>
|
| 412 | <li><a href="collapsible.html"><i class="material-icons">refresh</i></a></li>
|
| 413 | <li><a href="mobile.html"><i class="material-icons">more_vert</i></a></li>
|
| 414 | </ul>
|
| 415 | </div>
|
| 416 | </nav></code></pre>
|
| 417 | <br>
|
| 418 |
|
| 419 | <nav>
|
| 420 | <div class="nav-wrapper">
|
| 421 | <a href="#!" class="brand-logo">Logo</a>
|
| 422 | <ul class="right hide-on-med-and-down">
|
| 423 | <li><a href="sass.html"><i class="material-icons left">search</i>Link with Left Icon</a></li>
|
| 424 | <li><a href="badges.html"><i class="material-icons right">view_module</i></i>Link with Right Icon</a></li>
|
| 425 | </ul>
|
| 426 | </div>
|
| 427 | </nav>
|
| 428 |
|
| 429 | <br>
|
| 430 |
|
| 431 | <p>For adding an icon to a text link you need to add either a <code class="language-markup">left</code> or <code class="language-markup">right</code> class to the icon depending on where you want the icon to be.</p>
|
| 432 | <pre><code class="language-markup">
|
| 433 | <nav>
|
| 434 | <div class="nav-wrapper">
|
| 435 | <a href="#!" class="brand-logo">Logo</a>
|
| 436 | <ul class="right hide-on-med-and-down">
|
| 437 | <li><a href="sass.html"><i class="material-icons left">search</i>Link with Left Icon</a></li>
|
| 438 | <li><a href="badges.html"><i class="material-icons right">view_module</i></i>Link with Right Icon</a></li>
|
| 439 | </ul>
|
| 440 | </div>
|
| 441 | </nav></code></pre>
|
| 442 | <br>
|
| 443 | </div>
|
| 444 |
|
| 445 | <div id="buttons" class="section scrollspy">
|
| 446 | <h2 class="header">Buttons</h2>
|
| 447 |
|
| 448 | <nav>
|
| 449 | <div class="nav-wrapper">
|
| 450 | <a href="#!" class="brand-logo">Logo</a>
|
| 451 | <ul class="right hide-on-med-and-down">
|
| 452 | <li><a class="waves-effect waves-light btn">Button</a></li>
|
| 453 | <li><a class="waves-effect waves-light btn">Button <i class="material-icons right">cloud</i></a></li>
|
| 454 | <li><a class="waves-effect waves-light btn-large">Large Button</a></li>
|
| 455 | </ul>
|
| 456 | </div>
|
| 457 | </nav>
|
| 458 |
|
| 459 | <br>
|
| 460 |
|
| 461 | <p>You can add buttons into links. For buttons you don't need any additional class. Just pop the <code class="language-markup">.btn</code> class on the <code class="language-markup">a</code> tag.</p>
|
| 462 | <pre><code class="language-markup">
|
| 463 | <nav>
|
| 464 | <div class="nav-wrapper">
|
| 465 | <a href="#!" class="brand-logo">Logo</a>
|
| 466 | <ul class="right hide-on-med-and-down">
|
| 467 | <li><a class="waves-effect waves-light btn">Button</a></li>
|
| 468 | <li><a class="waves-effect waves-light btn">Button <i class="material-icons right">cloud</i></a></li>
|
| 469 | <li><a class="waves-effect waves-light btn-large">Large Button</a></li>
|
| 470 | </ul>
|
| 471 | </div>
|
| 472 | </nav></code></pre>
|
| 473 | <br>
|
| 474 |
|
| 475 | <h5>Halfway FAB in Extended Navbar</h5>
|
| 476 | <p>Add a halfway FAB to your extended navbar.</p>
|
| 477 |
|
| 478 | <nav class="nav-extended">
|
| 479 | <div class="nav-wrapper">
|
| 480 | <a href="#!" class="brand-logo">Logo</a>
|
| 481 | <ul class="right hide-on-med-and-down">
|
| 482 | <li><a>A link</a></li>
|
| 483 | <li><a>A second link</a></li>
|
| 484 | <li><a>A third link</a></li>
|
| 485 | </ul>
|
| 486 | </div>
|
| 487 | <div class="nav-content">
|
| 488 | <span class="nav-title">Title</span>
|
| 489 | <a class="btn-floating btn-large halfway-fab waves-effect waves-light teal">
|
| 490 | <i class="material-icons">add</i>
|
| 491 | </a>
|
| 492 | </div>
|
| 493 | </nav>
|
| 494 | <br><br>
|
| 495 | <pre><code class="language-markup">
|
| 496 | <nav class="nav-extended">
|
| 497 | <div class="nav-wrapper">
|
| 498 | <a href="#!" class="brand-logo">Logo</a>
|
| 499 | <ul class="right hide-on-med-and-down">
|
| 500 | <li><a>A link</a></li>
|
| 501 | <li><a>A second link</a></li>
|
| 502 | <li><a>A third link</a></li>
|
| 503 | </ul>
|
| 504 | </div>
|
| 505 | <div class="nav-content">
|
| 506 | <span class="nav-title">Title</span>
|
| 507 | <a class="btn-floating btn-large halfway-fab waves-effect waves-light teal">
|
| 508 | <i class="material-icons">add</i>
|
| 509 | </a>
|
| 510 | </div>
|
| 511 | </nav></code></pre>
|
| 512 | <br>
|
| 513 | </div>
|
| 514 |
|
| 515 | <div id="search-docs" class="section scrollspy">
|
| 516 | <h2 class="header">Search Bar</h2>
|
| 517 |
|
| 518 | <nav>
|
| 519 | <div class="nav-wrapper">
|
| 520 | <form>
|
| 521 | <div class="input-field">
|
| 522 | <input id="search-example" type="search" required>
|
| 523 | <label class="label-icon" for="search"><i class="material-icons">search</i></label>
|
| 524 | <i class="material-icons">close</i>
|
| 525 | </div>
|
| 526 | </form>
|
| 527 | </div>
|
| 528 | </nav>
|
| 529 |
|
| 530 | <br>
|
| 531 |
|
| 532 | <p>You can add a search form in the navbar.</p>
|
| 533 | <pre><code class="language-markup">
|
| 534 | <nav>
|
| 535 | <div class="nav-wrapper">
|
| 536 | <form>
|
| 537 | <div class="input-field">
|
| 538 | <input id="search" type="search" required>
|
| 539 | <label class="label-icon" for="search"><i class="material-icons">search</i></label>
|
| 540 | <i class="material-icons">close</i>
|
| 541 | </div>
|
| 542 | </form>
|
| 543 | </div>
|
| 544 | </nav></code></pre>
|
| 545 | <br>
|
| 546 |
|
| 547 | </div>
|
| 548 |
|
| 549 | <div id="mobile-collapse" class="section scrollspy">
|
| 550 | <h2 class="header">Mobile Collapse Button</h2>
|
| 551 |
|
| 552 | <nav>
|
| 553 | <div class="nav-wrapper">
|
| 554 | <a href="#!" class="brand-logo">Logo</a>
|
| 555 | <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
|
| 556 | <ul class="right hide-on-med-and-down">
|
| 557 | <li><a href="sass.html">Sass</a></li>
|
| 558 | <li><a href="badges.html">Components</a></li>
|
| 559 | <li><a href="collapsible.html">Javascript</a></li>
|
| 560 | <li><a href="mobile.html">Mobile</a></li>
|
| 561 | <li><a class="btn waves-effect waves-light" href="buttons.html">Buttons</a></li>
|
| 562 | </ul>
|
| 563 | <ul class="side-nav" id="mobile-demo">
|
| 564 | <li><a href="sass.html">Sass</a></li>
|
| 565 | <li><a href="badges.html">Components</a></li>
|
| 566 | <li><a href="collapsible.html">Javascript</a></li>
|
| 567 | <li><a href="mobile.html">Mobile</a></li>
|
| 568 | <li><a class="btn waves-effect waves-light" href="buttons.html">Buttons</a></li>
|
| 569 | </ul>
|
| 570 | </div>
|
| 571 | </nav>
|
| 572 |
|
| 573 | <br>
|
| 574 |
|
| 575 | <p>When your nav bar is resized, you will see that the links on the right turn into a hamburger icon <i class="material-icons">menu</i>. Take a look at the example below to get this functionality. Add the entire <code class="language-markup">button-collapse</code> line to your <code class="language-markup">nav</code>.</p>
|
| 576 | <pre><code class="language-markup">
|
| 577 | <nav>
|
| 578 | <div class="nav-wrapper">
|
| 579 | <a href="#!" class="brand-logo">Logo</a>
|
| 580 | <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></i></a>
|
| 581 | <ul class="right hide-on-med-and-down">
|
| 582 | <li><a href="sass.html">Sass</a></li>
|
| 583 | <li><a href="badges.html">Components</a></li>
|
| 584 | <li><a href="collapsible.html">Javascript</a></li>
|
| 585 | <li><a href="mobile.html">Mobile</a></li>
|
| 586 | </ul>
|
| 587 | <ul class="side-nav" id="mobile-demo">
|
| 588 | <li><a href="sass.html">Sass</a></li>
|
| 589 | <li><a href="badges.html">Components</a></li>
|
| 590 | <li><a href="collapsible.html">Javascript</a></li>
|
| 591 | <li><a href="mobile.html">Mobile</a></li>
|
| 592 | </ul>
|
| 593 | </div>
|
| 594 | </nav>
|
| 595 | </code></pre>
|
| 596 |
|
| 597 | <br>
|
| 598 | <h4>Initialization</h4>
|
| 599 | <p>After including the button-collapse line into your navbar, all you have to do now is place this code in your page's <code class="language-javascript">$( document ).ready(function(){})</code> code. This example below assumes you have not modified the classes in the above example. In the case that you have, just change the jQuery selector in the line below to match it.</p>
|
| 600 | <pre><code class="language-javascript">
|
| 601 | $(".button-collapse").sideNav();
|
| 602 | </code></pre>
|
| 603 | </div>
|
| 604 |
|
| 605 | </div>
|
| 606 |
|
| 607 | <div class="col hide-on-small-only m3 l2">
|
| 608 | <div class="toc-wrapper">
|
| 609 | <div class="buysellads hide-on-small-only">
|
| 610 |
|
| 611 | <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script>
|
| 612 | </div>
|
| 613 | <div style="height: 1px;">
|
| 614 | <ul class="section table-of-contents">
|
| 615 | <li><a href="#right">Right Aligned</a></li>
|
| 616 | <li><a href="#left">Left Aligned</a></li>
|
| 617 | <li><a href="#center">Center Logo</a></li>
|
| 618 | <li><a href="#active-label">Active Items</a></li>
|
| 619 | <li><a href="#navbar-tabs">Navbar with Tabs</a></li>
|
| 620 | <li><a href="#navbar-fixed">Fixed Navbar</a></li>
|
| 621 | <li><a href="#navbar-dropdown">Dropdown Menu</a></li>
|
| 622 | <li><a href="#icons">Icon Links</a></li>
|
| 623 | <li><a href="#buttons">Buttons</a></li>
|
| 624 | <li><a href="#search-docs">Search Bar</a></li>
|
| 625 | <li><a href="#mobile-collapse">Mobile Collapse</a></li>
|
| 626 | </ul>
|
| 627 | </div>
|
| 628 | </div>
|
| 629 | </div>
|
| 630 |
|
| 631 | </div>
|
| 632 | </div>
|
| 633 |
|
| 634 | </main> <footer class="page-footer">
|
| 635 | <div class="container">
|
| 636 | <div class="row">
|
| 637 | <div class="col l4 s12">
|
| 638 | <h5 class="white-text">Help Materialize Grow</h5>
|
| 639 | <p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>
|
| 640 | <form id="paypal-donate" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
|
| 641 | <input type="hidden" name="cmd" value="_s-xclick">
|
| 642 | <input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
|
| 643 | ">
|
| 644 | <button class="btn waves-effect waves-light red lighten-3" type="submit" name="action" alt="PayPal - The safer, easier way to pay online!">Donate Now
|
| 645 | </button>
|
| 646 | </form>
|
| 647 |
|
| 648 | </div>
|
| 649 | <div class="col l4 s12">
|
| 650 | <h5 class="white-text">Join the Discussion</h5>
|
| 651 | <p class="grey-text text-lighten-4">We have a Gitter chat room set up where you can talk directly with us. Come in and discuss new features, future goals, general problems or questions, or anything else you can think of.</p>
|
| 652 | <a class="btn waves-effect waves-light red lighten-3" target="_blank" href="https://gitter.im/Dogfalo/materialize">Chat</a>
|
| 653 | </div>
|
| 654 | <div class="col l4 s12" style="overflow: hidden;">
|
| 655 | <h5 class="white-text">Connect</h5>
|
| 656 | <iframe src="http://ghbtns.com/github-btn.html?user=dogfalo&repo=materialize&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
|
| 657 | <br>
|
| 658 | <a href="https://twitter.com/MaterializeCSS" class="twitter-follow-button" data-show-count="true" data-size="large" data-dnt="true">Follow @MaterializeCSS</a>
|
| 659 | <br>
|
| 660 | <div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/108619793845925798422" data-rel="publisher"></div>
|
| 661 | </div>
|
| 662 | </div>
|
| 663 | </div>
|
| 664 | <div class="footer-copyright">
|
| 665 | <div class="container">
|
| 666 | © 2014-2017 Materialize, All rights reserved.
|
| 667 | <a class="grey-text text-lighten-4 right" href="https://github.com/Dogfalo/materialize/blob/master/LICENSE">MIT License</a>
|
| 668 | </div>
|
| 669 | </div>
|
| 670 | </footer>
|
| 671 |
|
| 672 |
|
| 673 | <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
|
| 674 | <script>if (!window.jQuery) { document.write('<script src="bin/jquery-2.1.1.min.js"><\/script>'); }
|
| 675 | </script>
|
| 676 | <script src="js/jquery.timeago.min.js"></script>
|
| 677 | <script src="js/prism.js"></script>
|
| 678 | <script src="jade/lunr.min.js"></script>
|
| 679 | <script src="jade/search.js"></script>
|
| 680 | <script src="bin/materialize.js"></script>
|
| 681 | <script src="js/init.js"></script>
|
| 682 |
|
| 683 | <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
|
| 684 |
|
| 685 |
|
| 686 | <script src="https://apis.google.com/js/platform.js" async defer></script>
|
| 687 |
|
| 688 |
|
| 689 | <script>
|
| 690 | (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
| 691 | (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
| 692 | m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
| 693 | })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
| 694 |
|
| 695 | ga('create', 'UA-56218128-1', 'auto');
|
| 696 | ga('require', 'displayfeatures');
|
| 697 | ga('send', 'pageview');
|
| 698 | </script>
|
| 699 |
|
| 700 | </body>
|
| 701 | </html> |
| \ | No newline at end of file |