W3CSS Modal

With the advancements in visual elements in web development, several of the shelf components have become available that can readily be used to develop amazing websites. A modal is one such component. A modal or also known as a modal window is a window that appears on certain user action. A modal window is partially transparent. Usually modal has a closing button as well which when clicked closes a modal.In this article and the one after this one, we are going to study Modal. Bear in mind that a modal window can help you save lots of space on your website. A modal is used to create pop up forms, built email list or display some special offer.

A basic W3CSS Modal

There are three basic components of a Modal. A source that when interacted fires an event that opens a Modal. This source can be a button or link or whatever you want. Next thing is a div or element with class “w3-modal” this div is the container for the modal. The source is linked with this div. Inside this div there is another element or div with class “w3-modal-content” class. This class contains the actual modal content.

Now we have to devise a mechanism to connect the source that fires the event and the modal. Let’s do it with the help of an example.In the following example, we have div. The onclick event of the div executes a function which displays the modal with id “Modal1” as block level element. Similarly, the next div is the modal div with id “Modal1”. Inside the modal div, there is a cross button which when clicked closes the model window by setting its display property to none. Take a look at the following code snippet to see a modal in action.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-container">
  <h2>W3.CSS Modal</h2>
  <div onclick="document.getElementById('Modal1').style.display='block'" class="w3-blue w3-xlarge">Click to open Modal</div>
</div>

  <div id="Modal1" class="w3-modal">
    <div class="w3-modal-content">
      <div class="w3-container">
        <span onclick="document.getElementById('Modal1').style.display='none'" class="w3-button w3-display-topright">&times;</span>
        <p>Welcome to knowledgehills.com</p>
        <p>Best programming tutorials on internet.</p>
      </div>
    </div>
  </div>

    

</body>
    
</html>

Download the code Try the code

In the next article, we shall have a look at modal with header and footer, modal in the form of card and image modal. Keep visiting the site.

W3CSS Progressbar

Progress bars are used to show progress of an activity on a website. For instance when you download or upload some file from the internet, you often see a progress bar displaying the percentage of data downloaded or uploaded. Creating W3CSS progressbar is very simple. You do not need to learn anything new, rather you can create progress bars using concepts you already know. So lets create a basic W3CSS progressbar.

Basic W3CSS Progressbar

To create basic progress bar, you need to create two divs. An outer div with the background color. And an inner div with some height and width property set. Set the width in percentage, this is the progress that has been made by progress bar. For instance in the following example, we create an outer div with class w3-grey. This will be the background color of the progress bar. Inside that, we create another div with background w3-green. We set its height to 30px and width to 60%. This will create a progress bar with green fore color, 30 pixels high and 60% completion. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>


<div class="w3-grey">
  <div class="w3-green" style="height:30px;width:60%"></div>
</div>
    

</body>
    
</html>

Download the code Try the code

Show Progress Using Number

In the previous example, we did not display any number on the progress bar. You can display progress percentage by mentioning it in between the opening and closing tags of the inner div.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-yellow">
  <div class="w3-container w3-blue w3-center" style="width:25%">40%</div>
</div>
    

</body>
    
</html>

Download the code Try the code

Progressbar Sizes

You can also change size of the progress bar via size classes e.g w3-small, w3-xlarge, w3-jumbo etc. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-yellow w3-xlarge">
  <div class="w3-container w3-blue w3-center" style="width:25%">40%</div>
</div>
    

</body>
    
</html>

Download the code Try the code

Rounded Progressbar

You can also create rounded progress bar via w3-round class. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-yellow w3-xlarge w3-round">
  <div class="w3-container w3-blue w3-center" style="width:25%">40%</div>
</div>
    

</body>
    
</html>

Download the code Try the code

W3CSS Advanced Pagination

In the previous article we studied basic W3CSS pagination. We covered how to create highlighted pagination. We also studied how to create pagination with hover color. Finally, we saw how to create pagination with left and right buttons. In this article we shall study some advanced pagination concepts. We shall start with pagination size followed by centered navigation. Next we shall see bordered pagination and rounded pagination.

Pagination Sizes

Like all the other elements. You can also change size of the pagination element. You can use w3-small, w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo. Simply add one of these classes in the div with class w3-bar. Take a look at the following example to see pagination size in action.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>


<div class="w3-bar w3-xxlarge">
  <a href="#" class="w3-button">&laquo;</a>
  <a href="#" class="w3-button w3-red">1</a>
  <a href="#" class="w3-button w3-hover-yellow">2</a>
  <a href="#" class="w3-button">3</a>
  <a href="#" class="w3-button">4</a>
  <a href="#" class="w3-button">5</a>
  <a href="#" class="w3-button">&raquo;</a>
</div>
    

</body>
    
</html>

Download the code Try the code

Centered Pagination

Like all the other elements. You can also create centered navigation. You can use w3-center class to the opening tag of the div. div with class w3-bar. Take a look at the following example to see centered pagination size in action.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>


<div class="w3-bar w3-center">
  <a href="#" class="w3-button">&laquo;</a>
  <a href="#" class="w3-button w3-red">1</a>
  <a href="#" class="w3-button w3-hover-yellow">2</a>
  <a href="#" class="w3-button">3</a>
  <a href="#" class="w3-button">4</a>
  <a href="#" class="w3-button">5</a>
  <a href="#" class="w3-button">&raquo;</a>
</div>
    

</body>
    
</html>

Download the code Try the code

Bordered Pagination

You can also create bordered pagination using w3-border class. To do so add this class to the navigation bar div. This will create bordered navigation in action. Take a look at the following example to see bordered navigation in action.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>


<div class="w3-bar w3-border">
  <a href="#" class="w3-button">&laquo;</a>
  <a href="#" class="w3-button w3-red">1</a>
  <a href="#" class="w3-button w3-hover-yellow">2</a>
  <a href="#" class="w3-button">3</a>
  <a href="#" class="w3-button">4</a>
  <a href="#" class="w3-button">5</a>
  <a href="#" class="w3-button">&raquo;</a>
</div>
    

</body>
    
</html>

Download the code Try the code

Rounded Pagination

You can also create rounded pagination using w3-round class. To do so add this class to the navigation bar div. This will create rounded navigation. Take a look at the following example to see bordered navigation in action.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>



<div class="w3-bar w3-border w3-round">
  <a href="#" class="w3-button">&#10094; Previous</a>
  <a href="#" class="w3-button w3-right">Next &#10095;</a>
</div>
    

</body>
    
</html>

Download the code Try the code

Open the above page in the browser, you should see pagination with next and previous links. You should also see the corners of the pagination, they are rounded since we have used w3-round class with pagination.

W3CSS Pagination

We have covered most of the important concepts of W3CSS. In this article we shall study another very important element of a website i.e. pagination. Pagination allows user to display large amount of data on multiple pages. Pagination consists of links to different pages of the data. Pagination usually starts from page 1 to page n. Sometimes, pagination is also implemented in the form of previous and next button.

Basic W3CSS Pagination

To implement basic W3CSS pagination, simply use W3CSS navigation bar with class w3-bar. Inside the bar, add links of type w3-buttons.
Name each button as 1,2,3 etc. Take a look at the following example to see W3CSS pagination in action.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>


    <div class="w3-bar">
  <a href="#" class="w3-button">1</a>
  <a href="#" class="w3-button">2</a>
  <a href="#" class="w3-button">3</a>
  <a href="#" class="w3-button">4</a>
  <a href="#" class="w3-button">5</a>
</div>
    

</body>
    
</html>

Download the code Try the code

Pagination with Previous and Next Button

To implement basic pagination with W3CSS, simply use W3CSS navigation bar with class w3-bar. Inside the bar, add links of type w3-buttons.Name each button as 1,2,3 etc. The first button should have value “«” and last button should have value “»” Take a look at the following example to see W3CSS pagination in action.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>


<div class="w3-bar">
  <a href="#" class="w3-button">&laquo;</a>
  <a href="#" class="w3-button">1</a>
  <a href="#" class="w3-button">2</a>
  <a href="#" class="w3-button">3</a>
  <a href="#" class="w3-button">4</a>
  <a href="#" class="w3-button">5</a>
  <a href="#" class="w3-button">&raquo;</a>
</div>
    

</body>
    
</html>

Download the code Try the code

Pagination with Highlighted Link

You can also highlight links by simply adding “w3-color” class to the link. This is useful when you want to highlight the current page. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>


<div class="w3-bar">
  <a href="#" class="w3-button">&laquo;</a>
  <a href="#" class="w3-button w3-red">1</a>
  <a href="#" class="w3-button">2</a>
  <a href="#" class="w3-button">3</a>
  <a href="#" class="w3-button">4</a>
  <a href="#" class="w3-button">5</a>
  <a href="#" class="w3-button">&raquo;</a>
</div>
    

</body>
    
</html>

Download the code Try the code

Pagination with Hover Colors

You can also add hover color to any link in the pagination list. To do so, add w3-hover-color class to the button on which you want to add hover color functionality. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>


<div class="w3-bar">
  <a href="#" class="w3-button">&laquo;</a>
  <a href="#" class="w3-button w3-red">1</a>
  <a href="#" class="w3-button w3-hover-yellow">2</a>
  <a href="#" class="w3-button">3</a>
  <a href="#" class="w3-button">4</a>
  <a href="#" class="w3-button">5</a>
  <a href="#" class="w3-button">&raquo;</a>
</div>
    

</body>
    
</html>

Download the code Try the code

In the above code, w3-hover-yellow class is added to the second button. If you open the above page in browser, and hover your mouse over second button its color will change to yellow.

W3CSS Tabs

Tabs are basically menus, that when clicked open detail area related to that tab. For instance, tabbed menus are commonly used in websites where clicking upon tab item hides previously displayed information and loads new information. In this article we shall study W3CSS tabs.

Basic W3CSS Tabs

To create basic tabs. Create a horizontal navigation bar. Inside the bar, add each item in the form of button. On clicking each item from the list of items, open the function “openMenu”. Pass the name of the item as parameter to the openMenu function. Now below this navigation bar add individual detailed div for each tab in the navigation bar. The id name of the detailed div should be similar to that of the item name in navigation bar. When the item in the navigation bar is clicked, all the display property of all the divs with class menu is set to none. Then the display property of the element passed in the openMenu function is set to block which displays the detail.
The code sample is as follows:

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-bar w3-blue">
  <button class="w3-bar-item w3-button" onclick="openMenu('Home')">Home</button>
  <button class="w3-bar-item w3-button" onclick="openMenu('About')">About</button>
  <button class="w3-bar-item w3-button" onclick="openMenu('Contact')">Contact</button>
</div>

<div id="Home" class="w3-container menu">
  <h2>Home</h2>
  <p>Welcome to Knowledge Hills</p>
</div>

<div id="About" class="w3-container menu" style="display:none">
  <h2>About</h2>
  <p>Knowledge hills provide free of cost tutorials.</p> 
</div>

<div id="Contact" class="w3-container menu" style="display:none">
  <h2>Contact</h2>
  <p>Contact us at xyz.com</p>
</div>

<script>
function openMenu(menuName) {
    var i;
    var x = document.getElementsByClassName("menu");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    document.getElementById(menuName).style.display = "block";  
}
</script>

</body>
    
</html>

Download the code Try the code

W3CSS Colored Tabs

It is very simple to create colored W3CSS tabs. To do so, you need to add “w3-color” class to the item that is active. When you change the active item, the javascript function replaces the w3-color class with “”. Next, it selects the currently selected element and add w3-color class to it. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-bar w3-blue">
  <button class="w3-bar-item w3-button w3-red menulink" onclick="openMenu(event,'Home')">Home</button>
  <button class="w3-bar-item w3-button menulink" onclick="openMenu(event,'About')">About</button>
  <button class="w3-bar-item w3-button menulink" onclick="openMenu(event,'Contact')">Contact</button>
</div>

<div id="Home" class="w3-container menu">
  <h2>Home</h2>
  <p>Welcome to Knowledge Hills</p>
</div>

<div id="About" class="w3-container menu" style="display:none">
  <h2>About</h2>
  <p>Knowledge hills provide free of cost tutorials.</p> 
</div>

<div id="Contact" class="w3-container menu" style="display:none">
  <h2>Contact</h2>
  <p>Contact us at xyz.com</p>
</div>

<script>
function openMenu(event, menuName) {
    var i;
    var x = document.getElementsByClassName("menu");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    
    menulinks = document.getElementsByClassName("menulink");
     for (i = 0; i < x.length; i++) {
      menulinks[i].className = menulinks[i].className.replace(" w3-red", "");
  }
    
    document.getElementById(menuName).style.display = "block"; 
    event.currentTarget.className += " w3-red";
}
</script>

</body>
    
</html>

Download the code Try the code

Tabs with side navigation

You can also create tabs inside the side navigation. Remember the last article. Create a side navigation by adding w3-sidebar and w3-bar-block class to the navigation div. Also set its width to 250 pixels. Then set left-margin of the main div to 250 pixels. This way main div will float 250 pixels to left. Take a look at the following code:

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-sidebar w3-bar-block w3-blue " style="width:250px">
  <button class="w3-bar-item w3-button w3-red menulink" onclick="openMenu(event,'Home')">Home</button>
  <button class="w3-bar-item w3-button menulink" onclick="openMenu(event,'About')">About</button>
  <button class="w3-bar-item w3-button menulink" onclick="openMenu(event,'Contact')">Contact</button>
</div>

    
<div style="margin-left:250px">
    <div id="Home" class="w3-container menu">
      <h2>Home</h2>
      <p>Welcome to Knowledge Hills</p>
    </div>

    <div id="About" class="w3-container menu" style="display:none">
      <h2>About</h2>
      <p>Knowledge hills provide free of cost tutorials.</p> 
    </div>

    <div id="Contact" class="w3-container menu" style="display:none">
      <h2>Contact</h2>
      <p>Contact us at xyz.com</p>
    </div>
</div>

<script>
function openMenu(event, menuName) {
    var i;
    var x = document.getElementsByClassName("menu");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    
    menulinks = document.getElementsByClassName("menulink");
     for (i = 0; i < x.length; i++) {
      menulinks[i].className = menulinks[i].className.replace(" w3-red", "");
  }
    
    document.getElementById(menuName).style.display = "block"; 
    event.currentTarget.className += " w3-red";
}
</script>

</body>
    
</html>

Download the code Try the code

W3CSS Sidebar

In the previous article, we studied navigation. We already know that navigation can be in the form of top menu bar or on in the form side navigation. In this article we shall study how to create W3CSS sidebar navigation. Take a look at it.

Basic W3CSS Sidebar

To create a basic sidebar creating a div with class w3-bar-block and w3-sidebar. Give this div a width of 25%.
This way this div will occupy 25% of the width. Inside the div add some anchors tags and give them class of w3-bar-item and w3-button. Similarly, to create page content. Create another div and style it so that it has left margin of 25%. This way this div will not override the sidebar. Add some random heading to the div. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<!-- Sidebar -->
<div class="w3-sidebar w3-blue w3-bar-block" style="width:25%">
  <h3 class="w3-bar-item">Menu</h3>
  <a href="#" class="w3-bar-item w3-button">Home</a>
  <a href="#" class="w3-bar-item w3-button">About</a>
  <a href="#" class="w3-bar-item w3-button">Contact</a>
</div>


<div style="margin-left:25%">

<div class="w3-container w3-orange">
  <h1>Welcome to Knowledge Hills</h1>
</div>

</div>

</body>
    
</html>

Download the code Try the code

Collapsible Sidebar Over Main Content

It is very easy to create a collapsible side bar that overlays the main content. To do so create a sidebar as we did in the last example. Give it an id of “Sidebar1”. Create a menu button inside the main content div. By default the sidebar is not displayed. On the button click, execute javascript function that displays the sidebar. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>



<div class="w3-sidebar w3-bar-block w3-blue" style="display:none" id="Sidebar1">
  <button onclick="close_sidebar()" class="w3-bar-item w3-large">Menu &times;</button>
  <a href="#" class="w3-bar-item w3-button">Home</a>
  <a href="#" class="w3-bar-item w3-button">About</a>
  <a href="#" class="w3-bar-item w3-button">Contact</a>
</div>

    
<div class="w3-orange">
  <button class="w3-button w3-orange" onclick="open_sidebar()">☰</button>
  <div class="w3-container">
    <h1>Welcome  to Knowledgehills.com</h1>
  </div>
</div>
    
<script>
function open_sidebar() {
    document.getElementById("Sidebar1").style.display = "block";
}
function close_sidebar() {
    document.getElementById("Sidebar1").style.display = "none";
}
</script>

</body>
    
</html>

Download the code Try the code

Collapsible Sidebar covering whole width

It is very easy to create a collapsible side bar that covers full width of the screen. To do so create a sidebar as we did in the last example. Give it an id of “Sidebar1”. Create a menu button inside the main content div. By default the sidebar is not displayed. On the button click, execute javascript function that displays the sidebar and sets it’s width to 100%. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>



<div class="w3-sidebar w3-bar-block w3-blue" style="display:none" id="Sidebar1">
  <button onclick="close_sidebar()" class="w3-bar-item w3-large">Menu &times;</button>
  <a href="#" class="w3-bar-item w3-button">Home</a>
  <a href="#" class="w3-bar-item w3-button">About</a>
  <a href="#" class="w3-bar-item w3-button">Contact</a>
</div>

    
<div class="w3-orange">
  <button class="w3-button w3-orange" onclick="open_sidebar()">☰</button>
  <div class="w3-container">
    <h1>Welcome  to Knowledgehills.com</h1>
  </div>
</div>
    
<script>
function open_sidebar() {

    document.getElementById("Sidebar1").style.display = "block";
        ocument.getElementById("Sidebar1").style.width = "100%";
}
function close_sidebar() {
    document.getElementById("Sidebar1").style.display = "none";
}
</script>

</body>
    
</html>

Download the code Try the code

Collapsible Responsive Sidebar

In the same way, you can also create collapsible sidebar that pushes the content towards the right. The following example demonstrates this concept.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>


<div class="w3-sidebar w3-bar-block w3-blue " style="display:none" id="Sidebar1">
  <button class="w3-bar-item w3-button w3-large"
  onclick="close_sidebar()">Menu &times;</button>
  <a href="#" class="w3-bar-item w3-button">Home</a>
  <a href="#" class="w3-bar-item w3-button">About</a>
  <a href="#" class="w3-bar-item w3-button">Contact</a>
</div>

<div zclass="w3-main" id="main-content">

<div class="w3-orange">
  <button class="w3-button w3-orange w3-xlarge" onclick="open_sidebar()">&#9776;</button>
  <div class="w3-container">
    <h1>Welcome to knowledge hills</h1>
  </div>
</div>

    
    
<script>
function open_sidebar() {
  document.getElementById("main-content").style.marginLeft = "25%";
  document.getElementById("Sidebar1").style.width = "25%";
  document.getElementById("Sidebar1").style.display = "block";
  document.getElementById("openNav").style.display = 'none';
}
function close_sidebar() {
  document.getElementById("main-content").style.marginLeft = "0%";
  document.getElementById("Sidebar1").style.display = "none";
  document.getElementById("openNav").style.display = "inline-block";
}
</script>

</body>
    
</html>

Download the code Try the code

W3CSS Navigation

Navigation is one of the basic building block of a website. Your website may consists of hundreds of pages. It is extremely important that user can conveniently navigate through your website and easily finds whatever he/she wants. This is where navigation comes into play. Navigation is nothing but a menu that allow user to reach different parts of your website. Usually top navigation menus and side navigation menus are used for navigation purposes. It is very simple to create W3CSS navigation using horizontal and vertical bars we studied in a recent article.

Basic Horizontal W3CSS Navigation

It is very easy to create horizontal navigation W3CSS. You have to create an outer div with class “w3-bar”. For each item in the bar you have to create a div inside the outer div and give it a class of w3-bar-item. You can also add w3-color class to the outer div to give color to a bar. Default is black. Take a look at the following example to see horizontal bars in action.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-bar w3-teal">
  <a href="#" class="w3-bar-item">Home</a>
 <a href="#" class="w3-bar-item">About</a>
     <a href="#" class="w3-bar-item">Contact</a>
     <a href="#" class="w3-bar-item">Projects</a>
    
</div>


</body>
    
</html>

Download the code Try the code

Responsive Navigation

To create responsive W3CSS navigation, simply add w3-mobile class to each individual item in the navigation. This way on mobile screen, the individual items will take full width of the screen. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-bar w3-teal">
  <a href="#" class="w3-bar-item w3-mobile">Home</a>
 <a href="#" class="w3-bar-item w3-mobile">About</a>
     <a href="#" class="w3-bar-item w3-mobile">Contact</a>
     <a href="#" class="w3-bar-item  w3-mobile">Projects</a>
    
</div>


</body>
    
</html>

Download the code Try the code

Navigation with Borders

You can also create navigation with all the items having borders between them. To do, simply add w3-border-right to all the individual elements. Take a look at the following example:

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-bar w3-teal">
  <a href="#" class="w3-bar-item w3-border-right">Home</a>
 <a href="#" class="w3-bar-item w3-border-right">About</a>
     <a href="#" class="w3-bar-item w3-border-right">Contact</a>
     <a href="#" class="w3-bar-item w3-border-right">Projects</a>
    
</div>


</body>
    
</html>

Download the code Try the code

Navigation with Different Sizes

You can create navigation with different sizes. In the parent div use classes w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge and w3-jumbo classes to create navigation of the size you want. The following example demonstrates this concept.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-bar w3-teal w3-large">
  <a href="#" class="w3-bar-item">Home</a>
 <a href="#" class="w3-bar-item">About</a>
     <a href="#" class="w3-bar-item">Contact</a>
     <a href="#" class="w3-bar-item">Projects</a>
    
</div>

    </br>

    <div class="w3-bar w3-teal w3-xlarge">
  <a href="#" class="w3-bar-item">Home</a>
 <a href="#" class="w3-bar-item">About</a>
     <a href="#" class="w3-bar-item">Contact</a>
     <a href="#" class="w3-bar-item">Projects</a>
    
</div>

    </br>
<div class="w3-bar w3-teal w3-xxlarge">
  <a href="#" class="w3-bar-item">Home</a>
 <a href="#" class="w3-bar-item">About</a>
     <a href="#" class="w3-bar-item">Contact</a>
     <a href="#" class="w3-bar-item">Projects</a>
    
</div>

    </br>
</body>
    
</html>

Download the code Try the code

W3CSS Dropdown

In the previous article, we saw how to create bars in W3CSS. In this article, we are going a step further and see how to create dropdowns using W3CSS. It is very easy to create W3CSS dropdown. You simply have to add w3-dropdown-hover class to the element. Now we want that when hover mouse on this element an element appears in the dropdown. To do so, add w3-dropdown-content class the element and wrap that element inside the parent element that contains a class “w3-dropdown-hover”. Now hovering your mouse over the parent element should make dropdown element appear beneath it.

Basic W3CSS Dropdown

To create a basic dropdown, create a div and add “w3-dropdown-hover” class to it. Inside the div, create a button. After the button, inside the same div, create a div with class w3-bar-block which makes this div a vertical bar. Add “w3-dropdown-content” class to the same div. This will make this div appear when mouse is hovered on its parent element. Inside the div, add w3-bar-items as you like. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-dropdown-hover">
  <button class="w3-button w3-blue w3-hover-blue">Categories</button>
  <div class="w3-dropdown-content w3-bar-block w3-border w3-yellow ">
    <a href="#" class="w3-bar-item w3-button w3-hover-red">HTML</a>
    <a href="#" class="w3-bar-item w3-button w3-hover-red">CSS</a>
    <a href="#" class="w3-bar-item w3-button w3-hover-red">JavaScript</a>
  </div>
</div>


</body>
    
</html>

Download the code Try the code

Dropdown Menus

You can also create beautiful looking menus using the W3CSS dropdown classes. For instance, modify the last example by adding bar items to the outer div before adding a button. This will create a dropdown menu, with first two links, then a dropdown button. Clicking the dropdown button will show the vertical bar with different items. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-bar  w3-teal">
      <a href="#" class="w3-bar-item w3-button">Home</a>
      <a href="#" class="w3-bar-item w3-button">About</a>    
        <div class="w3-dropdown-hover">
          <button class="w3-button w3-blue w3-hover-blue">Tutorials</button>
          <div class="w3-dropdown-content w3-bar-block w3-border w3-yellow ">
            <a href="#" class="w3-bar-item w3-button w3-hover-red">HTML</a>
            <a href="#" class="w3-bar-item w3-button w3-hover-red">CSS</a>
            <a href="#" class="w3-bar-item w3-button w3-hover-red">JavaScript</a>
          </div>
        </div>
    </div>


</body>
    
</html>

Download the code Try the code

Dropdown Menu As Cards

you can also use dropdown menu as cards. Add w3-card-number to the element that is to be shown in the dropdown.
The element will take shape of a card. Take a look at the following code:

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-bar  w3-teal">
      <a href="#" class="w3-bar-item w3-button">Home</a>
      <a href="#" class="w3-bar-item w3-button">About</a>    
        <div class="w3-dropdown-hover">
          <button class="w3-button w3-blue w3-hover-blue">Tutorials</button>
          <div class="w3-dropdown-content w3-bar-block w3-yellow w3-card-8">
            <a href="#" class="w3-bar-item w3-button w3-hover-red">HTML</a>
            <a href="#" class="w3-bar-item w3-button w3-hover-red">CSS</a>
            <a href="#" class="w3-bar-item w3-button w3-hover-red">JavaScript</a>
          </div>
        </div>
    </div>


</body>
    
</html>

Download the code Try the code

Finally, you can also create right aligned dropdown elements by adding w3-right class to the parent div. Have a look at this code:

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-dropdown-hover w3-right">
  <button class="w3-button w3-blue w3-hover-blue">Categories</button>
  <div class="w3-dropdown-content w3-bar-block w3-border w3-yellow ">
    <a href="#" class="w3-bar-item w3-button w3-hover-red">HTML</a>
    <a href="#" class="w3-bar-item w3-button w3-hover-red">CSS</a>
    <a href="#" class="w3-bar-item w3-button w3-hover-red">JavaScript</a>
  </div>
</div>


</body>
    
</html>

Download the code Try the code

W3CSS Bars

Almost every website has some sort menu on its landing page. These menus are in the form of vertical bars or horizontal menus on left or right. With W3CSS it is very very easy to create these bars. You simply have to use w3-bar and w3-bar-block to create horizontal and vertical bars respectively in W3CSS. In this article we shall study W3CSS bars.

Horizontal W3CSS Bars

It is very easy to create horizontal bar with W3CSS. You have to create an outer div with class “w3-bar”. For each item in the bar you have to create a div inside the outer div and give it a class of w3-bar-item. You can also add w3-color class to the outer div to give color to a bar. Default is black. Take a look at the following example to see horizontal bars in action.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-bar w3-teal">
  <div class="w3-bar-item">Home</div>
  <div class="w3-bar-item">About</div>
  <div class="w3-bar-item">Portfolio</div>
  <div class="w3-bar-item">Contact</div>
</div>


</body>
    
</html>

Download the code Try the code

Vertical Bars

It is very easy to create vertical bar with W3CSS. You have to create an outer div with class “w3-bar-block”. For each item in the bar you have to create a div inside the outer div and give it a class of w3-bar-item. Take a look at the following example:

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-bar-block w3-blue">
  <div class="w3-bar-item">Home</div>
  <div class="w3-bar-item">About</div>
  <div class="w3-bar-item">Portfolio</div>
  <div class="w3-bar-item">Contact</div>
</div>


</body>
    
</html>

Download the code Try the code

Bar Hover Color

You can set hover color for individual items in the bars. To do so, add “w3-hover-color” class to the individual items along w3-bar-item class. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-bar w3-blue">
  <div class="w3-bar-item w3-hover-red">Home</div>
  <div class="w3-bar-item w3-hover-yellow">About</div>
  <div class="w3-bar-item w3-hover-green">Portfolio</div>
  <div class="w3-bar-item w3-hover-purple">Contact</div>
</div>


</body>
    
</html>

Download the code Try the code

Bars with Buttons

You can also add buttons as bar items. To do so, replace inner divs with anchor tags and set the class for the anchor tags to “w3-button”. By default the items are left aligned on the bar. To right align the items add w3-right class to the item. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-bar w3-teal">
  <a href="#" class="w3-bar-item w3-button">Home</a>
  <a href="#" class="w3-bar-item w3-button">About</a>
  <a href="#" class="w3-bar-item w3-button w3-right">Search</a>
  <a href="#" class="w3-bar-item w3-button w3-right">Contact</a>
</div>


</body>
    
</html>

Download the code Try the code

W3CSS Animations

Animations are used to make elements animate. For instance, you might have visited website were when you scroll down a login box appears from left or bottom saying that register yourself for email or for certain offer. That elements basically animates on the screen. W3CSS animations can easily animate any element. Following are some of the most useful W3CSS animation classes:

  • w3-animate-top
  • w3-animate-bottom
  • w3-animate-left
  • w3-animate-right
  • w3-animate-opacity
  • w3-animate-zoom
  • w3-animate-fading
  • w3-spin

In this article we shall some of these classes in action.

W3-animate-top

This class animates the element from out of the screen from -300 pixels from the top to 0 pixels. The following example demonstrates w3-animate-top class in action. Take a look at it.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-container">
  <h1 class="w3-center w3-animate-top">Animate this from top!</h1>
</div>


</body>
    
</html>

Download the code Try the code

Open the above page in browser, you should see some text falling from outside of the top of the screen to the top.

W3-animate-bottom

This class animates the element from bottom -300 pixels to 0 pixels. The following example demonstrates w3-animate-bottom class in action. Take a look at it.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-container">
  <h1 class="w3-center w3-animate-bottom w3-red">Animate this from bottom!</h1>
</div>


</body>
    
</html>

Download the code Try the code

Open the above page in browser, you should see some text moving from the bottom of the screen to the top.

W3-animate-left

This class animates the element from left -300 pixels to 0 pixels. The following example demonstrates w3-animate-left class in action. Take a look at it.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-container">
  <h1 class="w3-center w3-animate-left">Animate this from left!</h1>
</div>


</body>
    
</html>

Download the code Try the code

Open the above page in browser, you should see some text moving from the left of the screen to the top middle.

W3-animate-right

This class animates the element from right -300 pixels to 0 pixels. The following example demonstrates w3-animate-right class in action. Take a look at it.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-container">
  <h1 class="w3-center w3-animate-right w3-text-red">Animate this from right!</h1>
</div>


</body>
    
</html>

Download the code Try the code

Open the above page in browser, you should see some text moving from the right of the screen to the top-middle

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .