Mostrar mensagens com a etiqueta menus. Mostrar todas as mensagens

Olá voltei com mais uma das minhas partilhas.
Como pode visualizár na imagem acima trago aqui um menu lateral em forma degrau.
Fica super vistoso na sidebar do blogger , e tambem arruma uma serie de links de uma vez.
Mas vamos visualizár online:ENTRE AQUI!!!

Siga os passos abaixo e vamos colocár o menu``

Antes de tudo faça 1 cópia do seu template/tema...

Aplicár; stylesheet

Note: Vamos aplicár stylesheet abaixo head.

<link href='http://fonts.googleapis.com/css?family=Rouge+Script' rel='stylesheet' type='text/css'/>

Aplicár; css

Note: Vamos aplicár css acima ]]>

.menubt{
width: 300px;
margin: auto;
}
.btdeg{
list-style: none;
padding-left: 20px;
position: relative;
color: #666;
font-family: 'Rouge Script', cursive;
font-size: 20px;
text-shadow:0 3px 2px rgba(0,0,0,0.5);
}
.btdeg:before{
content: '';
width: 1px;
background: #666;
top: 0;
bottom:7px;
left:0;
position: absolute;
}
.btdeg li{
position: relative;
margin-top:10px;
}
.btdeg li:hover, .btdeg li:focus{
color: #000;
cursor: pointer;
}
.btdeg li:before{
content: '';
width: 20px;
height: 1px;
background: #666;
top: 12px;
left:-20px;
position: absolute;
}
.btdeg .btdeg{display:none;
}

Aplicár; script

Note: Vamos aplicár script acima body

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
$('.branch').click(function(){
$(this).children().toggleClass('fa-folder-open-o');
$(this).next().slideToggle();

});
</script>

Se já estiver ajaxlibsjquery retire pode fazer conflito...

Agora salve guarde e vamos em esquema e aplique gadget html/javascript...

Aplicár; html/javascript

Note: Vamos aplicár html/javascript .

<div class="menubt">
<ul class="btdeg">
<li> Menu-
<ul class="btdeg">
<li>
Menu0
<ul class="tree">
<li><a href="#"> vazio-1</a></li>
<li><a href="#"> vazio-2</a></li>
</ul>
</li>
<li>
Menu1
<ul class="btdeg">
<li><a href="#"> vazio-1</a></li>
<li><a href="#"> vazio-2</a></li>
</ul>
</li>
<li>
 Menu-2
<ul class="btdeg">
<li> Sub-menu1
<ul class="btdeg">
<li><a href="#"> vazio-1</a></li>
<li><a href="#"> vazio-2</a></li>
</ul>
</li>
<li>
 Sub-menu2
<ul class="btdeg">
<li><a href="#"> vazio-1</a></li>
<li><a href="#"> vazio-1</a></li>
</ul>
</li>
<li> Sub-menu3
<ul class="btdeg">
<li><a href="#"> vazio-1</a></li>
</ul>
</li>
</ul>
</li>
<li>
 Menu-3
<ul class="btdeg">
<li><a href="#"> vazio-1</a></li>
<li><a href="#"> vazio-2</a></li>
</ul>
</li>
<li>
 Menu-4
<ul class="btdeg">
<li><a href="#"> vazio-1</a></li>
<li><a href="#"> vazio-2</a></li>
</ul>
</li>
<li>
 Menu-5
<ul class="btdeg">
<li><a href="#"> vazio-1</a></li>
</ul>
</li>
</ul>
</li></ul></div>

E está feito os 4 passos salve e veja como ficou...
Onde estiver( #) coloque link quiser...
Alguma questão deixe recado fuiiiiiiiiiiiii...

Leia +

Menubt lateral degrau

► 0

► menus

► Cartita

Boa noite,voltei aqui com uma dica de menu com efeitos hover e transição...
Na imagem acima mostra resultado final ,mas pode visualizar online:ENTRE AQUI
Lembrando que este código original pertence( @thecodeplayer )créditos ...
Modifiquei algumas coisas e agora deixarei aqui códigos abaixo.

Exemplo de menu horizontal c/transição e hover modificado.

Html do menu``

<div id='bt-menuwrapper'>
<ul class="menu_wrapbt">
<li>
<h2>INICIO</h2>
Pagina Inicial
</li>
<li>
<h2>botao 2</h2>
exemplo 2 botao
</li>
<li>
<h2>botao 3</h2>
exemplo 3 botao
</li>
<li>
<h2>botao 4</h2>
exemplo 4 botao
</li>
</ul>
</div>

E agora css do menu abaixo``

.menu_wrapbt {
margin: 20px auto;
background: #fff;
overflow: hidden;
width: 760px ;height:auto;
box-shadow: 0 2px 10px 2px #f0f0f0;
border-radius: 4px;
}
.menu_wrapbt li {
width: 120px; border-right: 5px solid #666;
float: left;
cursor: pointer;
list-style-type: none;
padding: 0px 50px 0px 5px;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
}
.menu_wrapbt li h2 {
font-family: Arial Black;
font-weight: normal;
font-style: italic;
font-size: 14px;
margin-bottom: 5px;
line-height: 10px;
}
.menu_wrapbt li p{
font-size: 11px;
font-family: Arial Black;
font-weight: normal;
font-style: italic;
color: #999; -webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;
}
.menu_wrapbt li:hover {
background: #333;
border-left: 5px solid #f0f0f0;
}
.menu_wrapbt li:hover H2 {
font-weight: bold;
color: #fff;
}
.menu_wrapbt li:hover p {
color: #ccc;
padding-left: 5px;
}

Feito a partilha por hoje ficamos por aqui...Bye...

Leia +

Ex menu horizontal c/hover

► 0

► Cartita

Oié trazendo aqui mais um menu simples com hover.
É isso ai está acima resultado final do menu.
Mas pode visualizar online:ENTRE AQUI

Vamos então aplicar este menu esta partilha no seu blog.

Antes de tudo faça uma cópia seu template...

Entre em modelo no seu blog e procure este código:

</b:skin>

Encontro, então acima coloque este meu:

}
menu {
  margin: 0;
  font-size: 13px;
  text-align: center;
}

ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}
ul li {
  font: bold 12px/18px Arial Black;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #ffaea8;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  color: #fff;
}
ul li:hover {
  background: #fff;
  color:#ffaea8 ;
}
ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}
ul li ul li { 
  background: #ffaea8; 
  display: block; 
  color: #fff;
}
ul li ul li:hover { background: #fff;}
ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}
.MENU1BT {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.MENU2BT {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.MENU3BT {
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}
menu {
  padding-top: auto ;
}

Depois disto vamos em adicionar um gadget html/javascript e coloque este meu código:


<br />
<menu>
<ul>
<li><a href='#'><span>Inicio</span></a></li>
<li><a href='#'><span>Filmes</span></a></li>
<li><a href='#'><span>Musica</span></a></li>
<li><a href='#'><span>Livros</span></a></li>
</ul>
</menu>
<br />
<br />

Depois disto visualize e veja resultado: NOTA:Onde tem # apague e coloque seus links e troque nomes feito isso salve ...Alguma questão deixe recado,vlw galera...

Leia +

Novo menu simplesbt

► 1

► menus vários

► Cartita

B-T

Menubt lateral degrau

Ex menu horizontal c/hover

Novo menu simplesbt

Etiquetas

Populares

Ajuda

Feed

Eu aqui

Recomendo

Estatísticas

…

…

…