Ribbon Banner Navigation Bar Using CSS
24
March
2015

Ribbon Banner Navigation Bar Using CSS
In this post I will show you how to create a navigation bar with ribbon effect, the result will be as follow :::
ribbion-demo

1) First we will markup our main-container which encloses all the page and it centered in our browser so we will style it accordingly


		<div class="main-container">
		</div>
	

and we will style it as foliow


		.main-container{
			width:968px;
			margin-right:auto;
			margin-left:auto;
		}
	

2) First of all we will write down the markup for our navigation bar using ul,li,a tags. We will give ul the class of navigation.


		<ul class="navigation">
			<li><a href="#">Link1</a></li>
			<li><a href="#">Link2</a></li>
			<li><a href="#">Link3</a></li>
			<li><a href="#">Link4</a></li>
			<li><a href="#">Link5</a></li>
		</ul>
	

3) We need the links to float in a single line so we will provide below style in our stylesheet


		.navigation li{
			float:left;
			list-style:none;
			display:block;
			text-align:center;
			width:20%;
		}
	

4) We will style our links


		.navigation li a{
			font-size:1.6em;
			color:#333;
			text-shadow:0px 1px 2px #aaa;
			text-decoration:none;
			
		}
	

5) Till this point we are having a simple navigation list but to make it more attractive we will enclose our ul tag inside
.ribbon-container, so our code will look like this.


		<div class="main-container">
			<div class="ribbon-container">
				<ul class="navigation">
					<li><a href="">Link1</a></li>
					<li><a href="">Link2</a></li>
					<li><a href="">Link3</a></li>
					<li><a href="">Link4</a></li>
					<li><a href="">Link5</a></li>
				</ul>
			</div>
		</div>
	

6) We will add style to our ribbon-container


		.ribbon-container{
			background-color:#ccc;
			height:55px;		
			position:relative;
			z-index:999;
			box-shadow:5px 5px 10px 5px #aaa;
		}
	

7) Now we will add our ribbon effect across our navigation class, for this we will be adding 4 triangles one to the left-top, second to the left-bottom, third to the right-top and last on to the right-bottom


		<div class="main-container">
			<div class="ribbon-container">
				<ul class="navigation">
					<li><a href="">Link1</a></li>
					<li><a href="">Link2</a></li>
					<li><a href="">Link3</a></li>
					<li><a href="">Link4</a></li>
					<li><a href="">Link5</a></li>
				</ul>
				<div class="left-top">
				</div>
				<div class="left-bottom">
				</div>
				<div class="right-top">
				</div>
				<div class="right-bottom">
				</div>
			</div>
		</div>
	

8) We will provide style to each one accordingly so we will insert the following into our stylesheet

	
		.left-top{
			border-color:#ccc transparent transparent;
			border-style: solid;
			border-width: 50px;
			position:absolute;
			float:left;
			left: -52px;
			top: 0px;
			z-index:-1;	
		}
		.right-top{
			border-color:#ccc transparent transparent;
			border-style: solid;
			border-width: 50px;
			position:absolute;
			float:left;
			right: -52px;
			top: 0px;
			z-index:-1;	
		}
		.left-bottom{
			border-color:transparent transparent  #ccc transparent;
			border-style: solid;
			border-width: 50px;
			position:absolute;
			float:left;
			float: left;
			bottom: 0px;
			left: -52px;
			z-index:-1;
		}
		.right-bottom{
			border-color:transparent transparent  #ccc transparent;
			border-style: solid;
			border-width: 50px;
			position:absolute;
			float:left;
			float: left;
			bottom: 0px;
			right: -52px;
			z-index:-1;
		}
	

9) The main property used into this is border-color in each of the element we are showing only one side and other sides are given transparent values, this will help us to get traingle effect. The property is explaned as follow


	border-color:color1 color2 color3 color4;
				top border is color1
				right border is color2
				bottom border is color3
				left border is color4
				
border-color:color1 color2 color3 ; top border is color1 right and left border is color2 bottom border is color3
  • 747 View
  • Pin It