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 : Material CSS Mobile Responsive Menu (Hamburger Menu)

-

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/Meteor
draggable: true // Choose whether you can drag to open on touch screens

Comments

  1. imran kanjooDecember 9, 2021 at 10:24 PM

    Nice tutorial. I have written a similar tutorial at my site please check it css important

    ReplyDelete

Post a Comment

Popular posts from this blog

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

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

-
Image
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 Extract zip and put css folder in Folder. Create index.html file in that folder. In that file Link CSS file in head tag <link href= "path to materialize.min.css" rel= "stylesheet" > Create <nav> tag The <nav> tag defines a set of navigation links. -   w3schools Create div with nav-wrapper class. It will wrap all content to navigation bar. Create <ul> tag and in that create <li> tag which represent our menu. <ul>     <li><a href= "#" > Menu 1 <li> </ul> To display logo use brand-logo class with li tag within nav-wrapper div. You can use center, right, left class with ul  or li(for logo) tag to  align i...
Read more