Posts tagged: SASS

Learn How to open SideNav on the right in Materialize CSS

Mobile responsive navigation is one of the important aspects of a responsive website. It is possible to create beautiful main navigation for desktop/laptop browsers, however, when we design mobile navigation it is a must to make it easily accessible from all mobiles and tablets. There should be a mobile responsive button trigger and when a user clicks it, it should open up a mobile navigation. Follow this link to access the documentation for Sidenav in Materialize CSS.

There are two options when we create a mobile responsive navigation trigger and navigation panel. Either you can have it on the left or on the right. It is possible to create a mobile trigger button on the left and navigation panel, however, some users find the navigation button and panel on the left not that user-friendly. Materialize CSS offers a mobile responsive panel and trigger button on the left. The developers always look forward to having an easy hack to make the mobile responsive menu trigger and panel to the right.

This tutorial helps developers to implement a mobile responsive menu trigger and panel on the right. First, it is a must to incorporate the navigation bar in the website. Materialize CSS offers several variants of the navbar. Know how to create NavBar from this link

The first step you must do is to copy the Mobile Collapsible Navbar from the website along with the JavaScript. The JavaScript code has to be mentioned inside the script tag just above the body close tag.

This will produce a Navbar with collapsible button and navigation pane on the left

If you would like to have the Mobile Menu Trigger button on the right, just add the class “right” next to “sidenav-trigger” class in the mobile menu trigger HTML code. 

<nav>
            <div class="nav-wrapper">
              <a href="#!" class="brand-logo">Logo</a>
              <a href="#" data-target="mobile-demo" class="sidenav-trigger right"><i class="material-icons">menu</i></a>
              <ul class="right hide-on-med-and-down">
                <li><a href="sass.html">Sass</a></li>
                <li><a href="badges.html">Components</a></li>
                <li><a href="collapsible.html">Javascript</a></li>
                <li><a href="mobile.html">Mobile</a></li>
              </ul>
            </div>
          </nav>

          <ul class="sidenav" id="mobile-demo">
            <li><a href="sass.html">Sass</a></li>
            <li><a href="badges.html">Components</a></li>
            <li><a href="collapsible.html">Javascript</a></li>
            <li><a href="mobile.html">Mobile</a></li>
          </ul>

This is will render the mobile collapsible menu on the right and when the user clicks the navigation pane will open on the left side.

If you would like to bring the mobile navigation pane on the right side, add the key-value pair edge:’right’ in the Javascript. The code for which is mentioned below

 <script>
         document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems, {edge:'right'});
  });
</script>

This will render the mobile navigation pane on the right. In the next tutorial, you will learn how to create accordion-type side navigation items. Now that we have seen how to open SideNav on the right in Materialize CSS, Learn about Colors in Materialize CSS.

Learn Working with colors in Materialize CSS

Changing the text and container colour on a website is one of the basic yet frequently performed tasks while designing a website. Usually, changing the colour is done using CSS. A designer can either use in-line CSS or write a class for changing the colour. 
In Materialize CSS, the framework developers have made the process of changing the colour of both the text and container easy. Just by calling the colour name inside the class tag will produce the desired result. For example, if you would like to have red colour text colour, just add the text red-text inside the h1 tag.

Here’s the link to Materialize CSS Color Library.

<div class="row red-text">
<h1>Changing color of text</h1>
</div>

In order to achieve this in CSS, we have to write the code as follows … 

<div class="row" style="color: red">
<h1>Changing color of text</h1>
</div>

Furthermore, in order to achieve the change in background colour in CSS following is the code 

<div class="row" style="background-color: red">
<h1>Changing color of division</h1>
</div>

The same result can be achieved by simply adding the text red in the div class, the following is the code

<div class="row red">
<h1>Changing color of division</h1>
</div>

Materialize CSS has not only eased the process of adding colour to the text and division but also enabled the designers to follow consistency in the design level.

Learn about Mega Menu in Materialize CSS

Learn Mega menu for Materialize CSS Framework and implement where it requires a huge menu

This tutorial briefs how to add a Mega menu in Materializecss.com. As we know, there is no default option in Materializecss Framework for Megamenu, we take the privilege in demonstrating how to add a mega menu using simple CSS classes. 

What is available in MaterializeCSS.com?
MaterializeCSS in default provides navbar components with several variants such as Logo with Right Aligned Links, Logo with Left Aligned Links, Center Logo Option, Fixed Navbar, Navbar with Tabs, Navbar with Dropdown Menu and Search Bar. However, there is no default option to create Megamenu in MaterializeCSS. In the following, we shall discuss how a standard Navbar can be inserted and how to create a Mega menu in the Navbar.

Steps to Create Standard Navbar with a drop-down menu:

1. Download the starter pack of MaterializeCSS Framework from the following link:
http://materializecss.com/getting-started.html

2. Extract to a folder.

3. Create index.html in the same folder using the HTML Setup given in the above-mentioned link.

4. Now that the index file has been set up, add the Navbar with Dropdown Component from the following link:
   http://materializecss.com/navbar.html
   In the above link copy Navbar Dropdown Menu Script and paste it in the body of the index.html

5. In order to activate the drop-down functionality add the following JavaScript just before tag and within the $( document ).ready(function) block as given below:

<script>
$( document ).ready(function(){     
$(".dropdown-button").dropdown(); 
})
</script>  

6. Now a standard navbar with a drop-down menu is created and you will be getting a result as given below.

Steps to Mega Menu from the Standard Navbar with drop-down Menu:

1. Once we have the Navbar with a drop-down menu, we can convert the drop-down menu into a mega menu. In the index.html, you will now find a <ul> element with id=”dropdown1″. Modifications have to be done in this <ul> in order to achieve mega menu. 

2. First, add a class name “mega” next to the “dropdown-content”.

3. Now write CSS property for the .mega class. In order to increase the width of the dropdown, add min-width CSS property in the mega class as below. 
   Note: 
   You can set the min-width value as per your requirement. Here, min-width is set to 610 px. 

<style>
.mega {
min-width: 610px !important;
}
</style>

The style script has to declared just before the </head> tag

4. Now you can see that the width of the drop-down menu has increased. Now we can add columns and rows and create the mega menu. In order to add column and rows, the respective script has to be included within the
tag with “dropdown-content” class. 

5. Here, we have intended to create a Mega menu with three column with respective headers.
   In order to achieve the above, first, we will be creating a ROW inside the <ul> tag

<ul id="dropdown1" class="dropdown-content mega">
<div class="row">            
</div>
</ul>

Second, we will be splitting the row into three columns

<ul id="dropdown1" class="dropdown-content mega">
<div class="row">
<div class="col m4">
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
</div>
<div class="col m4">
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
</div>
<div class="col m4">
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
</div>
</div>
</ul>

Third, now we can add the headers to respective columns

<ul id="dropdown1" class="dropdown-content mega">
<div class="row">
<div class="col m4">
<li>Head 1</li>
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
</div>
<div class="col m4">
<li>Head 2</li>
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
</div>
<div class="col m4">
<li>Head 3</li>
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
</div>
</div>
</ul>

Additional Notes:

What is Megamenu?

Megamenu is one of the recent advancements of a drop-down menu. It is nothing but a drop-down menu where a website developer can group individual menu items under categories. For example, consider an apparel e-commerce website where one will have a general shop button under which you can have group categories for Men’s Apparel Section, Women’s Apparel Section, Kid’s Apparel Section and under each Category Section there will individual items such as Shirts, Trousers, Jeans, etc. 

Learn about adding logo to navbar in Materialize CSS

Learn Adding Logo to the Navbar in Materialize CSS and implement in you website and web applications

In the previous tutorial, we discussed how to create Navbar using Materialize CSS Framework. If we explore the coding involved in the Navbar, there is an individual component named Logo.  The Logo mentioned there is just a text and this can be changed to the image. Most of the Clients will be having their company logo, which can be added in this section. In order to demonstrate, how to add an image logo in the navbar, we have created a dummy logo and added it to the Project Folder. Usually, the logo image can be in the following formats: jpg, jpeg, png, or SVG. 

Now that we have a sample logo in our images, we can change the Logo text to a sample logo image.

Here <img> tag is used to insert the logo file. Furthermore, in order to control the width and height of the logo, width and height classes are used.  The width and height can be adjusted according to the requirement.

Now we have the logo in our Navbar

Learn about Navbar in Materialize CSS

Creating Navigation Bar

A navigation bar is a section of a graphical user interface intended to aid visitors in accessing information. Navigation bars are implemented in file browsers, web browsers and as a design element of some websites. Web Applications also require Navigation Bar in order to ease the access of the application. Materialize CSS provides a wide variety of Navigation bar types. Each Navbar option will be used in different scenarios.

Option 1: Left Aligned Logo and Right Aligned Links

All the components which have to be present on the website have to be added inside the body tag of the HTML file. All the style classes can be added in a separate file named style.css and can be linked to the HTML tag as we linked the Materialize CSS files. The first step in learning Navbar in Materialize CSS is to add Materialize CSS files in your working directory and call both CSS and JS files.

In order to add the Materialize Navbar in the HTML Structure we created, we refer to the Materialize CSS website and call in the Navbar coding and paste it into the body tag. You can get the navbar coding from Materialize CSS Website

The Navbar code will create a navigation bar with left aligned logo slot and right aligned menu links. 

By default, Materialize CSS generates Navbar in Red color which can be changed by overriding the color class. In Materialize CSS it is easy to change the color of any container, just by referring the Materialize CSS Color documentation and adding the required color name we can change the color of any container. In this case, if it is required to change the color of the navbar to blue, just add class=”blue” inside the nav tag.

Option 2: Right-Aligned Logo and Left-Aligned Links

In the above coding, if we change the class at two places we can achieve Right Aligned Logo and Left-Aligned Links. 

First, we should change the alignment inside <ul> from right to left. 

Second, we should add the class right next to the brand-logo class.

Output as follows

Option 3: Centering the Logo

We can align the logo to the center of Navbar easily by simply changing the alignment class right to center in the Option 2

The output will be as follows

Option 4: Active Navbar Items

Active Items in Navbar simply means that the highlighted menu item is the current page. In order to highlight a menu item as active, add class=”active” to the respective menu item <li>

The output will be as follows. Kindly note the darker shade of blue which relates to the active class.

Now that you know Navbar in Materialize CSS, Learn about Materialize CSS Simple Raised Button.