Responsive menu metro UI từ CSS

#DEMO

#Thêm CSS

1. Đăng nhập Blogger
2. > Mẫu > Chỉnh sửa HTML
3. > Tìm thẻ ]]></b:skin>
4. > Chèn code dưới vào trên thẻ vừa tìm được
4. > Thay http://wsnippets.com/wp-content/uploads/2013/11/logo.png thành url đến hình ảnh của mình.

body{
 font-family:verdana;
}
.wrap{
 width:95%;
 margin:0 auto;
}
#menu {
    margin-bottom: 10px;
}

#menu a {
    float: left;
    display: block;
    color: #fff;
    text-decoration: none;
 text-align:center;
}

#menu a i {
 font-size:80px;
 display:block;
 text-align:center;
 padding-top:20px;
}

#menu .logo, 
#menu .home, 
#menu .about, 
#menu .projects, 
#menu .portfolio, 
#menu .contact 
{
    margin-right: 3px;
    height: 150px;
}
#menu a.logo{
 width:25%;
}
#menu a.home, 
#menu a.about, 
#menu a.projects, 
#menu a.portfolio, 
#menu a.contact 
{
    margin-right: 3px;
    width: 11%;
   /* padding-top: 115px;*/
    padding-left: 20px;
    padding-right: 20px;
  /*  height: 35px;*/
}

#menu .logo {
    background: #A6C91C url('http://wsnippets.com/wp-content/uploads/2013/11/logo.png') no-repeat center center;
}

#menu a.home {
    background: #D87426;
}

#menu a.about {
    background: #086A77;
}

#menu a.projects {
    background: #5375CA;
}

#menu a.portfolio {
    background: #DA3DF8;
}

#menu .contact {
    background: #9C3939;
}

/* CSS3 Effects */
#menu  a {
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
}
#menu  a:hover {
-webkit-transform: scale(0.85,0.85);
-moz-transform: scale(0.85,0.85);
-o-transform: scale(0.85,0.85);
-ms-transform: scale(0.85,0.85);
transform: scale(0.85,0.85);
}
#menu  a {
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
}
@media (max-width:768px){
 #menu a i{
  font-size:16px;
 }
 #menu .logo, 
 #menu .home, 
 #menu .about, 
 #menu .projects, 
 #menu .portfolio, 
 #menu .contact{
  height:73px;
 }
 #men.a.logo,
 #menu a.home, 
 #menu a.about, 
 #menu a.projects, 
 #menu a.portfolio, 
 #menu a.contact 
 {
  width:22%;
 }
}

#Thêm HTML

1. > Tìm thẻ <body>
2. > Dán code dưới vào dưới thẻ vừa tìm được

<div class="wrap">
<div id="menu">
<a class="logo" href="http://khanh98.blogspot.com/"></a>
  <a class="home" href="#"><i class="fa fa-home"></i>Home</a>
  <a class="about" href="#"><i class="fa fa-info"></i>About</a>
  <a class="projects" href="#"><i class="fa fa-tasks"></i>Projects</a>
  <a class="portfolio" href="#"><i class="fa fa-users"></i>Our Team</a>
  <a class="contact" href="#"><i class="fa fa-phone"></i>Contact</a>
  </div>
</div>

Khanh blog

Search This Blog

Responsive menu metro UI từ CSS

#DEMO

#Thêm CSS

#Thêm HTML

Comments

Post a Comment