SodhanaLibrary

This is special for material design in which everything has to transform in animated way. Whenever user clicks on menu item, the selected border has to move. Lets implement this menu with CSS3 and jQuery

Click here to see DEMO

Make all elements normal

Whenever we define padding and margin to elements,  It will be confused if that element width or height changes. So define these CSS

* {
box-sizing:border-box;
padding:0px;
margin:0px;
}

Make header

Here header is of two parts. Left side brand name will be there, Right side menu will be there

/* header CSS */
.header {
  background-color: rgb(16, 108, 200);
  /* this property will make float divs widths to be included*/
  overflow: hidden;
  color: white;
  width:100%;
  position:relative;
}

/* for brand name display */
.header .brand{
  float:left;
  padding:18px;
  font-size:25px;
}

/* menu div */
.header .menu {
  float:right;
}

Make Menu

Take unordered list as menu, put items into that list as menu items. Find below for CSS

/*menu CSS*/
.menu ul {
  display:inline-flex;
  list-style:none;
  margin:0px;
  padding:0px;
}

.menu ul li{
  padding:25px;
  font-size:17px;
  cursor:pointer;
}

.menu ul li:hover{
  background-color:rgb(36, 128, 220);
}

/* this class is to show selected menu item */
.active{
  font-weight:bold;
}

Make Floating Border

Whenever user clicks on menu item, Border has to float to that position

/* this will represent border and it will move when user select  */
.borderDiv {
  position: absolute;
  background-color: #F00;
  right: 0px;
  width: 0;
  top: 67px;
  height: 3px;
  z-index: 1;
  /* transition effects to animation transformation*/
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}