quarta-feira, 11 de novembro de 2015

Menu Flat side bar com Hover

flat-slider-with-hover


Hoje vamos apresentar menu flat side bar com hover effect é um efeito animado uma vez que passamos o mouse ele aparece com os botões isso é muito útil para qualquer tipo de layout se você deseja instalar isso no seu blogger siga os passos abaixo.


Adicionando CSS  
para isso abra o blogger faça login e no menu modelo então editar/Html 
com as teclas combinadas CTRL+F busque por ]]></b:skin> então acima disso cole o seguinte código.



/* Navigation */
nav{
  width: 300px;
  height: 100%;
  background: #333;
  position: fixed;
  top: 0; left: -236px;
  z-index: 2;
  transition: left .7s;
  -webkit-transition: left .7s;
}
nav:hover{
  left: 0;
}
nav:hover ~ #content{
  opacity: .3;
}
nav a, nav a:hover{
  text-decoration: none;
}
/* Navigation  -- Icon */
nav .icon{
  width: 32px;
  height: 32px;
  float: right;
  margin: 20px 16px 0 0;
  font-size: 36px;
  text-align: center;
  line-height: 32px;
  color: white;
  transition: opacity .7s;
  -webkit-transition: opacity .7s;
}
nav:hover .icon{
  opacity: 0;
}
/* Navigation -- Header */
nav header{
  margin: 40px 20px 30px;
}
nav header a{
  font-size: 2.7em;
  font-weight: 300;
  text-transform: uppercase;
  color: rgba(240,240,240,.7);
}
nav header a:hover{
  color: #eee;
}

/* Navigation -- Links */
nav ul{
  padding-left: 0;
  list-style: none;
}
nav li a{
  display: block;
  border-left: 3px solid transparent;
  padding: 16px 20px;
  font-weight: 600;
      color: rgba(200,200,200,.5);
}
nav li a:hover{
  background: rgba(0,0,0,.1);
  border-color: #1b9;
  color: #eee;
}
nav li a:before{
  content: '';
  width: 0;
  height: 0;
  display: inline-block;
  margin: 3px 0 0 -20px;
  border: 8px solid transparent;
}
nav li a:hover:before{
  border-left-color: #1b9;
}

salve o modelo

Html para instalar no template.

<nav>
<div class="icon fi-list"></div>
<header><a href="#">Header</a></header>
<ul>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
<li><a href="#">Menu5</a></li>
<li><a href="#">Menu6</a></li>
<li><a href="#">Menu7</a></li>
</ul>
</nav>


Instale e pronto até o próximo post  

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner