CSS Vertical Navigation with Teaser [MenuBar]

Pure CSS vertical navigation menus with the teaser:  This article explains how to create vertical navigation menus without jquery or javascript. Yes, we are going to build vertical menus with CSS only. The navigation menu of a website plays a significant role in website’s usability and User Experience. Without menu navigation site is like content all but useless. Easy navigation throughout the whole website is something every website needs. If you are looking for a CSS vertical menu, then you have come to the right place.

On the internet, you will find many different styles of Menubar, which may created using jquery/ javascript. It okay to create menus with the use of jquery, but what if we can create navigation menus with pure CSS. Now we create a simple CSS menu bar with teaser .i.e on menu hover we show some related data.

Steps to create vertical menu CSS with teaser

1. Add HTML markup UL, LI
2. CSS: span data display on hover.

Example :

---

# HTML Markup:  Adding UL, Li, A, Span tag.

Here we are adding UL, LI, A, and Span tag for creating menu items. This is how our HTML looks like as shown below.

//*
<ul class="menu-navigation">
  <li><a href="#"># jQuery
  <span>Lorem Ipsum es texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el.
 </span></a>
  </li>
  <li><a href="#"># Angular JS
  <span>Persona que se dedica a la impren desconocido usó una galería de textos y los mezcló de tal manera que. </span>
  </a>
  </li>
  <li><a href="#"># MS SQL
  <span>Documentos quedando esencialmente igual ás recientemente con software de autoedición, como por ejemplo. </span>
  </a>
  </li>
  <li><a href="#"># JavaScript
  <span>Creaciónesencialmente igual ás recientemente con software de autoedición, como por ejemplo. </span>
  </a>
  </li>
  <li><a href="#"># Asp.net MVC
  <span>Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, </span>
  </a>
  </li>
</ul>
//*

 

---

CSS: On hover show Span data.

Here with this pure CSS, we able to create vertical navigation menu CSS

//*
ul.menu-navigation {
  font-size: 1.2em;
  float: left;
  width: 250px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #e25454;
  border-bottom: 1px solid #BF4E4E;
  border-top: 1px solid #BF4E4E;
}

ul.menu-navigation li a {
  display: block;
  color: #fff;
  text-decoration: none;
  width: 205px;
  padding: 10px 10px 10px 35px;
  border-top: 1px solid #BF4E4E;
  border-bottom: 1px solid #BF4E4E;
}

ul.menu-navigation li span {
  display: none;
}

ul.menu-navigation li a:hover {
  background-color: #BF4E4E;
  border-top: 1px solid #BF4E4E;
}

ul.menu-navigation li a:hover span {
  display: block;
  font-size: 0.8em;
  padding: 10px 0;
}
//*

Try It Yourself ⇒

 

Conclusion: This post explains how to create vertical navigation menus with teaser using pure CSS. .i.e no Javascript or jquery required to create the stylish fancy menu bar.