Os menus suspensos podem ajudar a organizar e categorizar links do seu conteúdo. Enquanto muitos webmasters debatem entre si sobre essas boas ou más práticas, não há dúvida de que eles podem ajuda-lo no seu projeto, caso você tenha um blog cheio de conteúdo. Se o seu blog contém uma grande quantidade de informações e você está interessado em categorizar seus links um pouco melhor, um menu suspenso pode ser a solução! Uma vez que o Blogger não oferece a opção de adicionar automaticamente um menu suspenso como o WordPress, então teremos que fazer o nosso próprio. Isso requer um pouco de conhecimento em CSS e HTML, mas vou orientá-los através deste tutorial para que não lhes pareça tão difícil como você ta pensando, certo!
O menu que eu coloquei é construído inteiramente com CSS3 e HTML. Nenhum Javascript aqui, por isso é agradável, leve e fácil de configurar. Você pode ver uma demonstração aqui .
Para começar, você precisará encaminhar-se para a página Layout no painel do Blogger e adicionar um gadget HTML / Javascript na área do topo/cabeçalho :
Adicione o código abaixo ao seu novo widget, personalizando os títulos e os links correspondentes ao seu blog:
<Ul id = "menuofs">
<Li> <a href="#"> Home </a> </ li>
<Li> <a href="#"> Sobre </a> </ li>
<Li>
Tópicos
<ul>
<li> <a href="#"> Estilo de vida </a> </ li>
<li> <a href="#"> Tutoriais </a> </ li>
<li> <a href="#"> Arte e design </a> </ li>
</ ul>
</ li>
<Li> <a href="#"> Portfólio </a> </ li>
<Li> <a href="#"> Contato </a> </ li>
</ Ul>
Aqui está o exemplo deste menu:
Você precisará substituir os caractere # com os links reais de suas páginas, e os títulos do menu correspondentes as páginas de sua preferencia. O texto que está em VERMELHO mostra um título de menu ("Tópicos") com três itens de sub-menu que aparecem quando você rola sobre ele.
Agora, você deseja exibir a página Modelo> Personalizar do Blogger e desloque-se para Avançado> CSS. Adicione o seguinte código para dar esse menu algum estilo:
.tabs-inner .widget ul#menuofs {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
border:none;
}
.tabs-inner .widget ul#menuofs li {
font-size: 12px/18px;
font-family: sans-serif; /* Fonte do menu */
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff; /* Cor do background do menu*/
float:none;
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;
}
.tabs-inner .widget ul#menuofs li a {
padding:0;
font-family: sans-serif; /* Fonte dos links do menu */
border:0;
}
.tabs-inner .widget ul#menuofs li:hover {
background: #555; /* Cor do background em estado hover */
color: #fff; /* Cor da fonte em estado hover*/
}
.tabs-inner .widget ul#menuofs li:hover a {
background: transparent;
color: #fff; /* Cor do titulo do menu em estado hob */
}
.tabs-inner .widget ul#menuofs li ul {
z-index:1000;
border:none;
padding: 0;
position: absolute;
top: 45px;
left: 30px;
float:none;
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;
}
.tabs-inner .widget ul#menuofs li ul li {
background: #555; /* cor do background dos submenus */
display: block;
color: #fff; /* Cor da fonte dos submenus */
text-shadow: 0 -1px 0 #000;
}
ul#menuofs li ul li a{
color:#fff /* Cor do link dos submenus*/
}
.tabs-inner .widget ul#menufs li ul li:hover {
background: #666; /*Cor do background dos submenus em estado hover*/
}
.tabs-inner .widget ul#menuofs li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
Você pode mudar as cores quando quiser e se você quiser centralizar o seu menu, basta adicionar: <center> antes do código HTML no gadget que você adicionou e </center> no final dele.
Se este post ajudou você, então compartilhe. Até a próxima!
0 Comments:
Postar um comentário