LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

CSS3 Navigation Slide Hover Effect

More Details Here

Find More Details Here

CSS
@import url(https://fonts.googleapis.com/css?family=Cuprum:400,700);

.mainmenu {
    color: #FFFFFF;
    font-family: 'Cuprum',Georgia,"Times New Roman",Times,Serif;
    font-size: 16px;
    height: 57px;
}
.mainmenu ul {margin: 0; padding: 0; }
.mainmenu li i { position: absolute; margin-left: -35px; margin-top: 6px;}
.mainmenu li { float: left; display: block; padding: 10px 10px 10px 50px; border-right: 1px solid #ffffff; cursor: pointer; }
.mainmenu li:last-child{ border-right:none;}
.mainmenu li main {font-weight: 700; margin-top: -18px; }
.mainmenu li span { position: relative; float: left; font-size: 12px; color: #f5f7f8; }

.mainmenu li, .mainmenu li i, .mainmenu li main, .mainmenu li span {
    -moz-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
}

.mainmenu li:hover main { 
	margin-left: 10px; 
   -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}
.mainmenu li:hover span { 
	margin-left: 25px; 
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

/* COLOR MANAGEMENT */

.ccblue .mainmenu { background: none repeat scroll 0 0 #03B2EC;}
.ccblue .mainmenu li:hover { background: #044c64; }
.ccblue .mainmenu li:hover i {color: #ffffff;}
.ccblue .mainmenu li i { color: #044c64; }
.ccblue .mainmenu li:hover i {color: #ffffff;}

.ccred .mainmenu { background: none repeat scroll 0 0 #f00940;}
.ccred .mainmenu li:hover { background: #a30328; }
.ccred .mainmenu li i { color: #a30328; }
.ccred .mainmenu li:hover i {color: #ffffff;}

.ccgreen .mainmenu { background: none repeat scroll 0 0 #98c304;}
.ccgreen .mainmenu li:hover { background: #5e7902; }
.ccgreen .mainmenu li i { color: #5e7902; }
.ccgreen .mainmenu li:hover i {color: #ffffff;}

.cssbron .mainmenu { background: none repeat scroll 0 0 #af4004;}
.cssbron .mainmenu li:hover { background: #7c2e03; }
.cssbron .mainmenu li i { color: #7c2e03; }
.cssbron .mainmenu li:hover i {color: #ffffff;}

section{ float:left; width:100%; margin-bottom:40px;}

.credit {
float: left;
margin: 25px;
text-align: center;
}
.credit em{
margin-right:5px;
}
.credit a {
color: #00B7EA;
font-weight: bold;
text-decoration: none;
}
.credit a:hover {
color: #086cc1;
}
.demo {
  font-family: 'Raleway', sans-serif;
	color:#fff;
    display: block;
    margin: 0 auto;
    padding: 15px 0;
    text-align: center;
}
.demo a{
  font-family: 'Raleway', sans-serif;
color: #2ecc71;		
  font-weight:bold;
}

Host Instantly Drag and Drop Website Builder

 

Description

The slide hover effect on Navigation have been quite interesting to work and enhances the beauty of the website.
Term
Mon, 11/27/2017 - 21:59

Related Codes

Pen ID
Pen ID
Pen ID