Menu Deslizante

11 de mai de 2013


- Vá no seu Design > Editar HTML > Dê um CTRL + F e procure por:

 ]]></b:skin> 




Acima da tag procurada, cole o código abaixo:



/* Aqui definimos as propriedades CSS para a lista do menu */ul#navigation {    position: absolute;    margin: -25px;    padding: 0px;    top: 0px;    right: 150px;    list-style: none;    z-index:999999;    width:721px;}ul#navigation li {    width: 103px;    display:inline;    float:left;}ul#navigation li a {    display: block;    float:left;    margin-top: -2px;    width: 100px;    height: 25px;    background-color:#d4d4d4; /*---cor de fundo---*/    background-repeat:no-repeat;    background-position:50% 10px;    border:1px dashed #8d898b;  /*---cor da borda---*/    -moz-border-radius:0px 0px 10px 10px;    -webkit-border-bottom-right-radius: 10px;    -webkit-border-bottom-left-radius: 10px;    -khtml-border-bottom-right-radius: 10px;    -khtml-border-bottom-left-radius: 10px;    text-decoration:none;    text-align:center;    padding-top:80px;    opacity: 0.8;    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}ul#navigation li a:hover{background-color:#CAE3F2;opacity: 1;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);}ul#navigation li a span{    letter-spacing:2px;    font-size:13px;    color:#3e3d3e; /*---cor do link---*/    text-shadow: 0 -1px 1px #fff;}

/* Aqui definimos as imagens de fundo para os links dos itens da lista do menu*/ul#navigation .home a{background-image: url(http://i1234.photobucket.com/albums/ff411/SweetLG/homee.png);}ul#navigation .sobre a      {background-image: url(http://i1234.photobucket.com/albums/ff411/SweetLG/sobre.png);}ul#navigation .foryou a    {background-image: url(http://i1234.photobucket.com/albums/ff411/SweetLG/fpryou.png);}ul#navigation .tutoriais a   {    background-image: url(http://i1234.photobucket.com/albums/ff411/SweetLG/tuto.png);}ul#navigation .png a     {    background-image: url(http://i1234.photobucket.com/albums/ff411/SweetLG/png.png);




Não vou explicar o code todo se não vou ficar uns dois séculos aqui exagerei, enfim vou explicar o básico do código.




 position: absolute;

Você pode trocar absolute por fixed se quiser que o menu acompanhe a página.




 margin: -25px;  

Aumente 25 se quiser que o menu fique com um espacinho quando passar o mouse.




opacity: 0.8; 

Troque o número 8 se quiser tirar a opacidade.




O resto está bem explicadinho no código.




Você devem ter percebido que no meu menu está: Home, Sobre, Contato, Encomende, Créditos, Goodies, já no código tem Tutoriais, For You e Png's, no caso se você quiser trocar o nome dessas páginas por outras é só fazer isso:




{background-image: url(http://i1234.photobucket.com/albums/ff411/SweetLG/sobre.png);}ul#navigation .foryou a <- trocar esse nome pelo o da página e pode fazer o mesmo nas páginas que quiser trocar o nome mas cuidado para não bagunçar o código eu fiz isso e não deu certo na primeira vez tive que refazer para funcionar porque fiz uma confusão no código.




Nesse trecho do código: http://i1234.photobucket.com/albums/ff411/SweetLG/sobre.png , é o url das imagens do menu você pode trocar por outras se quiser.




Agora ainda em Editar HTML, procure por:




 </head> 




acima dessa tag cole o seguinte código:



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
    var d=300;
    $(&#39;#navigation a&#39;).each(function(){
        $(this).stop().animate({
            &#39;marginTop&#39;:&#39;-80px&#39;
        },d+=150);
    });


    $(&#39;#navigation &gt; li&#39;).hover(

    function () {

        $(&#39;a&#39;,$(this)).stop().animate({

            &#39;marginTop&#39;:&#39;-2px&#39;

        },200);
    },
    function () {
        $(&#39;a&#39;,$(this)).stop().animate({
            &#39;marginTop&#39;:&#39;-80px&#39;
        },200);
    }
);
});</script>




E por último procure por essa tag:

 <header> 




Acima dela, cole o código abaixo:




<ul id='navigation'>

 <li class='home'><a href='URL-AQUI'><span>Home</span></a></li>

 <li class='sobre'><a href='URL-AQUI'><span>Sobre</span></a></li>

 <li class='foryou'><a href='URL-AQUI'><span>For You</span></a></li>

 <li class='tutoriais'><a href='URL-AQUI'><span>Tutoriais</span></a></li>
 <li class='png'><a href='URL-AQUI'><span>Png's</span></a></li>
</ul> 




Lembrando se você tiver trocado o nome das páginas lá no primeiro código não se esqueça de trocar no código acima também:




<li class='foryou'><a href='URL-AQUI'><span>For You</span></a></li> 

Troque os nomes for you pelo nome da página que você troco.




Não é tão complicado é só ter atenção, e galera que não tem muita experiencia com HTML é melhor não trocar o nome das páginas se não pode causar erro no HTML do seu blog ok ? 


0 comentários :

Postar um comentário

Seu Comentários é sempre bem vindo!
Comente,opine,se expresse! Este espaço é seu!
Comentar faz parte,então por favor deixem comentários

-Todos os comentários são moderados e só ficarão disponíveis ao serem aprovados
-A área de comentários não é casa da mãe Joana,então tenha respeito.Não use palavrões,nem insultos,ofensas,agressões e baixarias;
-Não serão aceitos comentários Anônimos,comentários repetidos,e que tenham qualquer material publicitários ou de merchandising pessoal ou de benefício de terceiros
-Contatos pessoais devem ser feitos na pagina de contato.
-Não deixe links desnecessários os comentários

AVISOS:

--Blog não é Chat,respeitadas as regras ,é livre o debate dos assuntos aqui postados,Que o espaço de comentários não sirva para bate papo sobre assuntos de caráter pessoal ou estranhos ao blog
--A tentativa de clonar nomes e apelidos de outros usuários para emitir opiniões em nome de terceiros configura crime de falsidade ideológica.

Espero que tenham gostado do blog e que volte sempre!