CSS-Tricks- Animate Bootstrap Menu with CSS : No Jquery

Animated-Bootstrap-menu

Animated-Bootstrap-menu

Animated-Bootstrap-menu

Animated-Bootstrap-menu

Animated Bootstrap Menu

Nowadays Bootstrap is the most widely used framework for responsive websites, and This Bootstrap Menu Tutorial help you to make Bootstrap Menu Attractive.

Hello everyone!! In this Tutorial I will explain how to create menu (Animated Bootstrap Menu), you already know jQuery right? Let’s clear about JQuery, A short description about jQuery, jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. But in this tutorial we will not use any JS. As well as we are going to use BOOTSTRAP (For Menu) with less use of CSS.

The aim is to create BOOTSTRAP MENU without JQuery, with several transition effects.

BootStrap Menu Demo

Click HERE to view BootStrap Menu demo page.

 

CSS3 Animated-Menu with bootstrap

 

There are lots of tutorials out there on the net, but it contains lots of JS code so I decided to create my own way and with only a few lines of CSS code.

Ok, let’s start for creating our Bootstrap Menu.

HTML

This contains our menu HTML element, this is just a simple HTML UL LI tag to make our menu, I have tried to make it as simple as possible by using of BOOTSTRAP.

And I hope you are interested to learn this.

Here is the HTML code:

<div class=”navbar-x”><div class=”container”><ul class=”nav nav-pills”><li class=”active”>

<a href=”#”>Home</a>

</li>

<li>

<a href=”#”>Bootstrap Menu</a>

</li>

<li>

<a href=”#”> Bootstrap Menu Activity</a>

</li>

<li>

<a href=”#”>Bootstrap Menu Calendar</a>

</li>

<li>

<a href=”#”>Bootstrap Menu Profile</a>

</li>

<li class=”bottom-bar”></li>

</ul>

</div>

</div>

 

 

CSS

To make our BOOTSTRAP MENU list horizontally we need to add CSS code.

.navbar-x {text-align: center;}

.navbar-x .nav {

position: relative;

overflow: hidden;

display: inline-block;

}

 

.navbar-x .nav:hover.nav-pills > li.active > a, .navbar-x .nav:focus.nav-pills > li.active > a {

color: #eee;

}

 

.navbar-x .nav:hover.nav-pills > li.active > a:hover, .navbar-x .nav:hover.nav-pills > li.active > a:focus, .navbar-x .nav:focus.nav-pills > li.active > a:hover, .navbar-x .nav:focus.nav-pills > li.active > a:focus {

color: #FFCB00;

background-color: inherit;

}

 

.navbar-x .nav > li > a {

width: 100px;

color: #eee;

transition: color 0.42s ease-in-out;

}

 

.navbar-x .nav > li > a:hover, .navbar-x .nav > li > a:focus {

color: #FFCB00;

background-color: inherit;

}

 

.navbar-x .nav > li.active > a {

color: #FFCB00;

background-color: inherit;

}

 

.navbar-x .nav > li.bottom-bar {

transition: left 0.42s ease-in-out;

position: absolute;

height: 3px;

width: 100px;

bottom: 0;

background-color: #ebbf00;

}

 

.navbar-x .nav > li:nth-child(1).active ~ .bottom-bar {

left: 0px;

}

 

.navbar-x .nav > li:nth-child(1):hover ~ .bottom-bar, .navbar-x .nav > li:nth-child(1):focus ~ .bottom-bar {

left: 0px !important;

}

 

.navbar-x .nav > li:nth-child(2).active ~ .bottom-bar {

left: 100px;

}

 

.navbar-x .nav > li:nth-child(2):hover ~ .bottom-bar, .navbar-x .nav > li:nth-child(2):focus ~ .bottom-bar {

left: 100px !important;

}

 

.navbar-x .nav > li:nth-child(3).active ~ .bottom-bar {

left: 200px;

}

 

.navbar-x .nav > li:nth-child(3):hover ~ .bottom-bar, .navbar-x .nav > li:nth-child(3):focus ~ .bottom-bar {

left: 200px !important;

}

 

.navbar-x .nav > li:nth-child(4).active ~ .bottom-bar {

left: 300px;

}

 

.navbar-x .nav > li:nth-child(4):hover ~ .bottom-bar, .navbar-x .nav > li:nth-child(4):focus ~ .bottom-bar {

left: 300px !important;

}

 

.navbar-x .nav > li:nth-child(5).active ~ .bottom-bar {

left: 400px;

}

 

.navbar-x .nav > li:nth-child(5):hover ~ .bottom-bar, .navbar-x .nav > li:nth-child(5):focus ~ .bottom-bar {

left: 400px !important;

}

so, here we finishes our menu. I hope you all like it. Keep Sharing guys. We are still playing with CSS and provide you some different things.

Click HERE to view BootStrap Menu demo page.

Source:
http://www.w3.org,
www.google.com,
www.dev.moz.org
www.getbootstrap.com.

You Might Also Like

394 Comments

  1. 1
  2. 3

Comments are closed.