Responsive navbar using materialize css
|
02:43 |
No Comments |
In this tutorial , we are learning that how to create responsive navbar using materialize css.
Let's see the some class or tag description which is used in the example :
Let's see the code :
File name : index.html
Output :
Download CSS & JS File : Click Here
Let's see the some class or tag description which is used in the example :
- <nav> : it is used for create blank navbar on the top.
- nav-wrapper : it is used to set position of the element in navbar.
- brand-logo center : it is used to set logo of the website on the center of the navbar.
- right : it is used to set element from the right side of the navbar.
Let's see the code :
File name : index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <html> <head> <link rel="stylesheet" href="css/materialize.css" type="text/css"> <script src="js/jquery.js"></script> <script src="js/materialize.min.js" type="text/javascript"></script> </head> <body> <nav> <div class = "nav-wrapper"> <li class="brand-logo center">LOGO</li> <ul class="right"> <li><a href="#">Menu 1 </a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3 </a></li> </ul> </div> </nav> </body> </html> |
Output :
Download CSS & JS File : Click Here