sábado, 28 de abril de 2012

Menu Horizontal com CSS e Jquery

07:32 , , , 0 comments



Em um dos meus blogs de teste eu instalei este menu criado por Soh  do site SohTanaka e que tem um efeito bastante interessante. Você pode conferir o demo aqui.
Me pediram para explicar como colocar este menu no Blogger, então lá vai:

Primeiro você deve criar uma imagem com 80px de altura onde metade de cima dela (40px) aparecerá quando o menu estiver em estado normal e a metade de baixo no estado hover (quando passa o mouse por cima), como neste exemplo:


Hospede a imagem (pode ser no próprio Blogger) e guarde o link. Agora vá em Editar HTML  e cole no código do seu template, abaixo de ]]></b:skin>

<style type='text/css'>

.container {
    width: 520px;
    height: 100px;
    position: absolute;
    top: 10%; left: 60%;
    margin: 0px 0 0 -80px;
    overflow: hidden;
}
img {border: none;}
ul#topnav {
    margin: 10px 0 20px;
    padding: 0;
    list-style: none;  
    font-size: 1.1em;
    clear: both;
    float: left;
    width: 520px;
}
ul#topnav li{
    margin: 0;
    padding: 0;
    overflow: hidden;
    float: left;
    height:40px;
}
ul#topnav a, ul#topnav span {
    padding: 10px 10px;
    float: left;
    text-decoration: none;
    color: #fff;
    clear: both;
    height: 20px;
    line-height: 20px;
    background: #1d1d1d;
}
ul#topnav a {    color: #7bc441; }
ul#topnav span {
    display: none;
}

ul#topnav.v2 span{
    background: url(coloque aqui a url da imagem) repeat-x left top;
}
ul#topnav.v2 a{
    color: #555;
    background: url(coloque aqui a url da imagem) repeat-x left bottom;
}
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {
           $(&quot;#topnav li&quot;).prepend(&quot;<span/>&quot;); //Throws an empty span tag right before the a tag
  
    $(&quot;#topnav li&quot;).each(function() { //For each list item...
        var linkText = $(this).find(&quot;a&quot;).html(); //Find the text inside of the a tag
        $(this).find(&quot;span&quot;).show().html(linkText); //Add the text in the span tag
    });
  
    $(&quot;#topnav li&quot;).hover(function() {    //On hover...
        $(this).find(&quot;span&quot;).stop().animate({
            marginTop: &quot;-40&quot; //Find the span tag and move it up 40 pixels
        }, 250);
    } , function() { //On hover out...
        $(this).find(&quot;span&quot;).stop().animate({
            marginTop: &quot;0&quot; //Move the span back to its original state (0px)
        }, 250);
    });
     
});
</script>

depois, no HTML ( após a tag <body> ) coloque o seguinte trecho, antes ou depois de <div id='header-wrapper'>....</div> :


<div class='container'>

<ul class='v2' id='topnav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Portfolio</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>

</div>

No meu exemplo, os códigos foram colocados abaixo de header, assim:

 em container, determinamos as dimensões ocupadas pelo menu, bem como sua posição na página:

.container {
    width: 520px;
    height: 100px;
    position: absolute;
    top: 10%; left: 60%;
    margin:  0px 0 0 -80px;
    overflow: hidden;
}


width: largura total ocupada pela div que contém o menu.
note que em ul#topnav o valor se repete (width: 520px)
top: 10% - distância do menu para o topo da página
left: 60% - distância do menu para o lado esquerdo da página
com margin  você também controla a posição do menu. Veja que o menu está a 60% da esquerda da página menos 80px. Vá alterando os valores para que melhor se encaixe no seu layout. 
Coloque a url da sua imagem hospedada (no Blogger ou em outro site) onde está indicado no código CSS em negrito. Substitua os # no HTML do menu pelos links que desejar.

resultado

Fonte: Templete Novo Blog





0 comentários:

Postar um comentário