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
- Add HTML markup UL, LI
- 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.
2 comments on “CSS Vertical Navigation with Teaser [MenuBar]”
Very well explained about CSS Vertical Navigation, helped me it out.
Thanks for sharing Anjan