Hot File

Ultimate Guide to Beautiful CSS3 Hover Menu

View: 333    Dowload: 0   Comment: 0   Post by: hanhga  
Author: none   Category: HTML-CSS template   Fields: Other

9 point/2 review File has been tested

Sometimes we will need to use the simple menu templates with beautiful hover effect without the need to use the image or script to heavy. In this article, I will share with you 3 sample menu with hover effect is made entirely of CSS3, lighter and smoother, but also very nice, maybe you will use for future web projects next.

Introduction

Sometimes we will need to use the simple menu templates with beautiful hover effect without the need to use the image or script to heavy. In this article, I will share with you 3 sample menu with hover effect is made entirely of CSS3, lighter and smoother, but also very nice, maybe you will use for future web projects next.

HTML

Suppose we have 3 menu with standard html as follows:

 id="nav-1">
   class="link-1" href="#">Home
   class="link-1" href="#">About
   class="link-1" href="#">Contact
   class="link-1" href="#">Shop
 id="nav-2">
   class="link-2" href="#">Home
   class="link-2" href="#">About
   class="link-2" href="#">Contact
   class="link-2" href="#">Shop

 id="nav-3">
   class="link-3" href="#">Home
   class="link-3" href="#">About
   class="link-3" href="#">Contact
   class="link-3" href="#">Shop

CSS

Then you format the entire menu with css following paragraph:

nav {
  margin-top: 40px;
  padding: 24px;
  text-align: center;
  font-family: Raleway;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}
#nav-1 {
  background: #3fa46a;
}
#nav-2 {
  background: #5175C0;
}
#nav-3 {
  background: #EEA200;
}
 
.link-1 {
  transition: 0.3s ease;
  background: #3fa46a;
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
  border-top: 4px solid #3fa46a;
  border-bottom: 4px solid #3fa46a;
  padding: 20px 0;
  margin: 0 20px;
}
.link-1:hover {
  border-top: 4px solid #ffffff;
  border-bottom: 4px solid #ffffff;
  padding: 6px 0;
}
 
.link-2 {
  transition: 0.6s;
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
  border-right: 2px dotted transparent;
  padding: 30px 8px 0 10px;
  margin: 0 10px;
}
.link-2:hover {
  border-right: 2px dotted #ffffff;
  padding-bottom: 24px;
}
.link-3 {
  transition: 0.4s;
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
  padding: 0 10px;
  margin: 0 10px;
}
.link-3:hover {
  background-color: #ffffff;
  color: #EEA200;
  padding: 24px 10px;
}

Ultimate Guide to Beautiful CSS3 Hover Menu

Ultimate Guide to Beautiful CSS3 Hover Menu Posted on 14-12-2015  Sometimes we will need to use the simple menu templates with beautiful hover effect without the need to use the image or script to heavy. In this article, I will share with you 3 sample menu with hover effect is made entirely of CSS3, lighter and smoother, but also very nice, maybe you will use for future web projects next. 4.5/10 333

Comment:

To comment you must be logged in members.

Files with category

 
Newsletter Email

File suggestion for you

File top downloads

logo codetitle
Codetitle.com - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.com Develope by Vinagon .Ltd