3 de ago de 2010

Menu horizontal com imagem animada e descrição para o Blogger

Mais um menu do site Timpanus, veja AQUI o efeito...



Hospede o arquivo jquery em um site como o Google Site

jquery-1.4.2.min.js

Agora copie este código abaixo e cole no HTML/Javascript colando depois o endereço do arquivo jquery no local indicado.

<style>
.container{
    width:900px;
    height:140px;
    margin:0 auto;
    position:relative;
    overflow:hidden;
    border:3px solid #fff;
    background-color:#fff;
    -moz-box-shadow:1px 1px 6px #000;
    -webkit-box-shadow:1px 1px 6px #000;
    -moz-border-radius:0px 0px 20px 20px;
    -webkit-border-bottom-left-radius:20px;
    -webkit-border-bottom-right-radius:20px;
    border-radius:0px 0px 20px 20px;
}
ul#menu{
    list-style:none;
    position:absolute;
    bottom:0px;
    left:10px;
    font-size:22px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    color:#999;
    letter-spacing:-1px;
}
ul#menu li{
    float:left;
    margin:0px 4px 2px 0px;
}
ul#menu a{
    cursor:pointer;
    position:relative;
    float:left;
    bottom:-95px;
    line-height:20px;
    width:130px;
}

.link1,
.link2,
.link3,
.link4,
.link5,
.link6{
    width:64px;
    height:74px;
    display:block;
    left:40px;
    top:220px;
    position:absolute;
}
.link1{
    background:transparent url(http://2.bp.blogspot.com/_FXIne2ZDJII/TFeLjfKDLtI/AAAAAAAAC4I/WQiafUG3MbQ/s320/home.png) no-repeat top left;
}
.link2{
    background:transparent url(http://1.bp.blogspot.com/_FXIne2ZDJII/TFeLh4-ECAI/AAAAAAAAC4A/JT6EGC_-lBY/s320/folder.png) no-repeat top left;
}
.link3{
    background:transparent url(http://2.bp.blogspot.com/_FXIne2ZDJII/TFePB7hF3SI/AAAAAAAAC4g/HJQ0mhzq7-s/s320/warning.png) no-repeat top left;
}
.link4{
    background:transparent url(http://1.bp.blogspot.com/_FXIne2ZDJII/TFeLgaBenjI/AAAAAAAAC34/8Gc7FgVwJ6M/s320/rss.png) no-repeat top left;
}
.link5{
    background:transparent url(http://1.bp.blogspot.com/_FXIne2ZDJII/TFeOKQR-f6I/AAAAAAAAC4Q/WtwzHGixiYY/s320/tag.png) no-repeat top left;
}
.link6{
    background:transparent url(http://4.bp.blogspot.com/_FXIne2ZDJII/TFeOM4E7C-I/AAAAAAAAC4Y/qyn-88T5rKc/s320/mail.png) no-repeat top left;
}
ul#menu span.title{
    display:block;
    height:26px;
    text-shadow:1px 1px 1px #000;
    color:#B7B7B6;
    text-indent:10px;
}
ul#menu span.description{
    width:100px;
    height:80px;
    background-color:#B7B7B6;
    border:3px solid #fff;
    color:#fff;
    display:block;
    font-size:14px;
    padding:5px;
    -moz-box-shadow:1px 1px 6px #000;
    -webkit-box-shadow:1px 1px 6px #000;
    box-shadow:1px 1px 6px #000;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}

ul#menu a:hover span.description{
    background-color:#808080; color: #cc0000;
}
ul#menu a:hover span.title{
    color:#cc0000;
}

</style>


<script src='AQUI O ENDEREÇO DO ARQUIVO JQUERY'/></script>

 <script type="text/javascript">

$(function() {
    $('#menu > li').hover(
        function () {
            var $this = $(this);
            $('a',$this).stop(true,true).animate({
                    'bottom':'-15px'
                }, 300);
            $('i',$this).stop(true,true).animate({
                    'top':'-10px'
                }, 400);
        },
        function () {
            var $this = $(this);
            $('a',$this).stop(true,true).animate({
                    'bottom':'-95px'
                }, 300);
            $('i',$this).stop(true,true).animate({
                    'top':'50px'
                }, 400);
        }
    );
});
 </script>


Agora vá até o HTML de seu blog e procure pelo seguinte código (para ficar acima da header)

<div id='header-wrapper'>

e cole o próximo código.


<div class='container'>
<ul id='menu'>
<li>
<a href='ENDEREÇO DE SEU BLOG/'>
<i class='link1'/>
<span class='title'>Home</span>
<span class='description'>
Início
</span>
</a></li>
<li>
<a href='ENDEREÇO DA PÁGINA ARQUIVO/'>
<i class='link2'/>
<span class='title'>Arquivo</span>
<span class='description'>
Publicações antigas
</span>
</a></li>
<li>
<a href='ENDEREÇO DA PÁGINA COM REGRAS DE USO DO SEU BLOG/'>
<i class='link3'/>
<span class='title'>Política</span>
<span class='description'>
Regras de uso
</span>
</a>
</li>
<li>
<a href='ENDEREÇO DO FEED/'>
<i class='link4'/>
<span class='title'>Feed</span>
<span class='description'>
Assine
</span>
</a>
</li>
<li>
<a href='ENDEREÇO DA PÁGINA MARCADORES/'>
<i class='link5'/>
<span class='title'>Marcadores</span>
<span class='description'>
Índice
</span>
</a>
</li>
<li>
<a href='mailto: ENDEREÇODOSEUEMAIL/'>
<i class='link6'/>
<span class='title'>Email</span>
<span class='description'>
Contato
</span>
</a>
</li>

</ul></div>


Para ficar no footer do blog cole antes de: 

<!-- end outer-wrapper -->
</body>
</html>




  • Para conseguir o endereço da página de marcadores, clique AQUI 
  • Para conseguir o endereço da página de aquuivos clique AQUI
Crédito do menu: Timpanus
Crédito pelos ícones: Dry Icons

Nenhum comentário:

Postar um comentário

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube