Tutorial : Create Dropdown Menu Using Materialize CSS

-
Image
Download HTML File : Dropdown Menu in Navbar Menu We already learnt how to create mobile friendly menu in Previous Tutorial . But There is no dropdown menu. So in this tutorial we learn to create a dropdown menu. Now you all learnt to adding a CSS, JS and JQuery files. So i start directly to making dropdown menu in NavBar. First Make Navbar Menu. Responsive Navbar Menu  . Create Dropdown menu content using ul tag and you must use id tag.Put it before nav tag. <ul class= "dropdown-content" id= "comp-menu3" > <li><a href= "#" > Sub-Menu1 </a></li> <li><a href= "#" > Sub-Menu2 </a></li> <li><a href= "#" > Sub-Menu3 </a></li> </ul> Use id of Dropdown as data-activates property to menu link which going to display submenu. Apply dropdown-button as a class to menu link. <li><a href= "#" data-activ...
1 comment

Tutorial : Create Materialize CSS Menu(Direct Link) for Webpage

-


In this tutorial we will learn to create navbar menu. We will use materialize css. So to use it we have to download materialize design css framework. You can download it from following links :

Materialize Css from Official Site

Materialize v0.97.6

  1. Extract zip and put css folder in Folder.
  2. Create index.html file in that folder.
  3. In that file
    1. Link CSS file in head tag
      2. <link href="path to materialize.min.css" rel="stylesheet">
    2. Create <nav> tag
      1. The <nav> tag defines a set of navigation links. - w3schools
    3. Create div with nav-wrapper class.
      1. It will wrap all content to navigation bar.
    4. Create <ul> tag and in that create <li> tag which represent our menu.
      5. <ul>
    <li><a href="#">Menu 1<li>
</ul>
    5. To display logo use brand-logo class with li tag within nav-wrapper div.
    6. You can use center, right, left class with ul  or li(for logo) tag to  align it within nav wrapper.
    7. Use different color class like cyan,red etc. to color your nav bar
  4. See Example.
  5. Download HTML File put it in folder.

Comments

Post a Comment

Popular posts from this blog

Tutorial : Material CSS Mobile Responsive Menu (Hamburger Menu)

-
Image
In Previous Tutorial  we create navigation bar menu, but it was not mobile friendly. We make it mobile friendly. We create hamburger menu which use in android application. We required to use following resource : jquery.js materialize.js or materialize.min.js For Hamburger icon use following link as href : https://fonts.googleapis.com/icon?family=Material+Icons Class used :  hide-on-med-and-down : It will hide content on tablet and mobile screen. button-collapse : It will use to display hamburger menu. When buttons will collapse. Attribute : data-activates : It specify side-nav id. So when button will click menu will be display. To activate menu we need to use jquery. $(".button-collapse").sideNav(); Different attribute of sidenav menuWidth : 300 , // Default is 240 edge : 'right' , // Choose the horizontal origin closeOnClick : true , // Closes side-nav on <a> clicks, useful for Angular/Met...
Read more

Tutorial : Create Dropdown Menu Using Materialize CSS

-
Image
Download HTML File : Dropdown Menu in Navbar Menu We already learnt how to create mobile friendly menu in Previous Tutorial . But There is no dropdown menu. So in this tutorial we learn to create a dropdown menu. Now you all learnt to adding a CSS, JS and JQuery files. So i start directly to making dropdown menu in NavBar. First Make Navbar Menu. Responsive Navbar Menu  . Create Dropdown menu content using ul tag and you must use id tag.Put it before nav tag. <ul class= "dropdown-content" id= "comp-menu3" > <li><a href= "#" > Sub-Menu1 </a></li> <li><a href= "#" > Sub-Menu2 </a></li> <li><a href= "#" > Sub-Menu3 </a></li> </ul> Use id of Dropdown as data-activates property to menu link which going to display submenu. Apply dropdown-button as a class to menu link. <li><a href= "#" data-activ...
Read more