Posts tagged: CSS

Learn how to add Sidenav as main navigation

In the web designing, the majority of the navigation which is used either for a web application or for the websites is the Top Navigation System. Materialize CSS offer varieties of variation for Topbar Navigation System. We at Ampersand Tutorials have deep dived on various Top Navigation Bar if you would like to learn more about it, you can follow the links given below. 

Navbar in Materialize CSS

In general, Navigation bar serves as a guide to a website or a web application. In this tutorial, we will demonstrate how to incorporate a fixed side-navigation for a website or a web application. In order to achieve it, first, you should learn to start with the Materialize CSS project, which you can read from the following link. 

First Step in Materialize CSS

The second step is to visit the Materialize CSS official website and copy-paste the latest CDN version which is 1.0.0. Please note that we have imported CDN in this demo and we haven’t used JQuery, instead we have used JS. Once you have successfully set up the Materialize CSS project, the coding looks like the following image. 

After which, we must visit the Sidenav page in Materialize CSS website, the link is given below

https://materializecss.com/sidenav.html

From the aforementioned link, we must now scroll down and find the section fixed HTML structure and we should copy-paste the HTML, CSS and JS coding to our project. The following screenshots are examples of how the structure will look after the successful implementation of Fixed Side Nav Coding. In the demo, we have used a slightly different HTML script to bring the desired output. The CSS is used to make the fixed sidenav disappear and make it mobile triggered navigation system. The JS part helps in initializing the Side Nav. You can view and download this working code from the link given at the bottom of this article. 

header, main, footer {
             padding-left: 300px;
            }

            @media only screen and (max-width : 992px) {
            header, main, footer {
                padding-left: 0;
                }
        }

<ul id="slide-out" class="sidenav  sidenav-fixed">
    <li><div class="user-view">
      <div class="background">
        <img src="https://png.pngtree.com/thumb_back/fh260/back_pic/00/14/65/3256657136926fa.jpg">
      </div>
      <a href="#user"><img class="circle" src="https://i0.wp.com/www.winhelponline.com/blog/wp-content/uploads/2017/12/user.png?fit=256%2C256&quality=100&ssl=1"></a>
      <a href="#name"><span class="white-text name">John Doe</span></a>
      <a href="#email"><span class="white-text email">jdandturk@gmail.com</span></a>
    </div></li>
    <li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
    <li><a href="#!">Second Link</a></li>
    <li><div class="divider"></div></li>
    <li><a class="subheader">Subheader</a></li>
    <li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
  </ul>
            <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems, {});
  });

Learn about Autoplay Sliders in Materialize CSS

Learn to implement Full width autoplay slider for Materialize CSS

It is a known fact that Materialize CSS offers in-built carousel for fullscreen and full-width image sliders. However, many designers feel that the carousel seems to malfunction several times, especially when the designers used the fullwidth carousel. One of the predominant comment which we can see is that in the mobile screens, the image slider gets cut off. It is desirable to have full-width image sliders with width 100% rather than having cut off images.
We will demonstrate how the existing Materialize CSS code renders Image sliders in the mobile screens. In order to check this, first, let us copypaste the HTML structure from MaterializeCSS website. The version which we use is 1.0.0.
https://materializecss.com/getting-started.html

Next step is to navigate to Javascript components section in the Materialize CSS website. 

https://materializecss.com/carousel.html

Next, you can scroll down and copy the full-width slider HTML and js script to our project. 

The HTML code can be directly pasted in the body, however, the JS should be pasted inside the script tag with the following syntax

<script>
 document.addEventListener('DOMContentLoaded', function() {   
           
 });
</script>

The full-width slider js has to be copy-pasted inside the curly braces. 

var elems = document.querySelectorAll('.carousel');
var instances = M.Carousel.init(elems, {});

Furthermore, to make the slides autoplay is difficult in Materialize CSS. This made us write HTML, CSS and JS to create a mobile responsive slider which auto plays. It is simple to configure this slider in the Materialize CSS. Just copy paste the HTML, CSS and respective JS in your project file. Link the images in the HTML code and you are done. 

This not only helps us build mobile responsive slider but also helps in making it autoplay. Following are the respective codes

<style>.mySlides {display:none;}</style>

<div class="row" style="max-width: 100%">        
        <img class="mySlides" src="https://lorempixel.com/800/400/food/1" style="width:100%">
          <img class="mySlides" src="https://lorempixel.com/800/400/food/2" style="width:100%">
          <img class="mySlides" src="https://lorempixel.com/800/400/food/3" style="width:100%">
            <img class="mySlides" src="https://lorempixel.com/800/400/food/4" style="width:100%">

        </div>

<script>
var myIndex = 0;
carousel();
function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 5000); // Change image every 2 seconds
}
</script>

The time interval at which the slides are changed can be adjusted in the JS code. In this example, we have set it to 5 sec.

Learn how to increase side nav width in Materialize CSS

Learn How to increase navbar height in materialize css

At Ampersand Academy, we have already discussed how to create Navbar and how to change the colour of the navbar, various types of Navbar and how to incorporate mobile collapsible Navbar using Materialize CSS. In order to recap these topics, follow the below-mentioned links 
1. Navbar in Materialize CSS 
2. SideNav in Materialize CSS

Here’s the link to Materialize CSS Navbar.

Having discussed and incorporated the Navbar on your website, know how to increase the default Navbar height. 

When we examine the default Navbar in Materialize CSS, the min-height is approximately 64px. If you are to fix a logo on the navbar, your logo should have a max-height of 64 px, else the logo will not be accommodated fully in the Navbar height. Supposedly, the logo which you would like to integrate with the website has the height which is greater than 64px and if you try to fit it in the Navbar, the visibility is affected. 

In order to fix this, we should be able to increase the navbar height instead of reducing the logo size and make it not visible on the website. This can be achieved by writing a CSS class for the Navbar. 

This simple solution will help you increase navbar height and make your logo visible enough. Learn how to add Feature Discovery on Page Load

Learn Feature discovery on page load

Offer some incentive and support return visits by acquainting clients with new features and usefulness at logically significant minutes. 

Feature discovery prompts have more effect when they are displayed to the correct clients at logically significant minutes. At the point when displayed to the wrong client at the wrong time, they can be meddlesome and irritating.

Feature Discovery can be utilized to intimate users about new functionality or a feature on the website. We can use Feature Discovery to bring in call to action buttons in the website. 

In the Materialize CSS website, the documentation is poorly built and it is tedious to make the Feature Discovery work in your website, especially on the page load. We at Ampersand Academy developed the working script for Feature Discovery. 

In this example, we have enabled Feature Discovery for Call to Action button. Visitors who access the website from their mobiles can contact the Company / Website Owner directly. If a visitor access the website from the Desktops / Laptops they can view the mobile number which they use to contact the Company / Website Owner via the Feature Discovery Feature. 

This is one of the basic examples in which call to action button is used for contacting the company. One may use Feature Discovery creatively for conveying the message uniquely. 

Visit the following link to read the Official Documentation for Feature Discovery. However, you should be using the HTML code and JS code mentioned below to make it work.

phone

    <div class="tap-target" data-target="menu">
        <div class="tap-target-content">
          <h5 class="white-text">Hi there!</h5>
          <p class="white-text">You can call us in +91 9876543210 or click the button while you browse from mobile</p>
        </div>
    </div>

<script>
		 document.addEventListener('DOMContentLoaded', function() {
				var elems = document.querySelectorAll('.sidenav');
				var instances = M.Sidenav.init(elems, {});			 
           var elemsTap = document.querySelector('.tap-target');
    var instancesTap = M.TapTarget.init(elemsTap, {});
             instancesTap.open()
			  });
		</script>

Learn about Mobile Menu with Accordion

Learn Mobile menu with accordion type sub menu items

Materialize CSS is one of the most easy-to-use CSS frameworks for website development. Materialize CSS offers easy to use CSS and JS scripts to enable mobile responsive side navigation. In the previous tutorial, we have discussed how to add responsive mobile side navigation both on the left and right side. If you want to learn how to create mobile responsive side navigation follow the link.

In this tutorial, you will learn how to create accordion-like submenu items on the side navigation. For this, first, we have to create a side navigation menu. Suppose, if there is the main level menu and sub-level menu. For example, take an e-commerce website you have Men and Women Dresses. Under the Men’s section, you will have Trousers, Shirts, Shoes, etc. On the same line, the Women’s section will have Skirts, Trousers, Tops, etc. In order to have a layout that depicts this level, the following things have to be done. Open the collapsible section in materialize CSS website and copy the HTML and JS for accordion and paste in the list item of side nav. 

The HTML code has to be copy-pasted inside li tag of side navigation. The javascript has to be included inside the script tag where we already have a script for side navigation. 

Once you have added the script, you can now rename the Accordion Header and add the list item inside collapsible body check as required. 
In our case, we have created 3 headers Men’s Dresses, Women’s Dresses and Children’s Dresses and each header have their respective sub-items such as Trousers, Shirts, T-Shirts, Shoes, Skirts, etc.

We can also explore having Collapsible type menu level instead of Accordion type based on the requirement. It can be achieved by simply calling the key value accordion: false in the javascript. This will create sub-menu with collapsible type instead of Accordion Type. 

Learn about Opening Side Nav on Right Side in Materialize CSS. For more details about various courses, check out Ampersand Academy.

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