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 AnimationsW3CSS Dropdown >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .