Follow Us @soratemplates

segunda-feira, 4 de junho de 2012

Menu Móvel

Olá!! Tudo bem? Espero que sim ^^
Nosso tutorial de hoje será sobre como fazer aquele menu que utilizei anteriormente, que você podia movimentá-lo para qualquer lugar que quisesse. O nome desse menu é jGlide Menu, mas fica mais fácil chamá-lo de móvel não é mesmo? Ele possui subcategorias, com opções de avançar e voltar para a home dele, e de fechar, super útil!
Novamente, aprendi a fazê-lo no Ciudad Blogger, que considero um "google" para blogs. A princípio pode parecer meio complicadinho, mas não é e aos poucos você percebe o quanto ele pode ser personalizado ao seu gosto.
Vamos lá!

1º O resultado será como mostra a imagem abaixo:
Ao passar o mouse no menu o cursor muda para a opção de mover, e você pode arrastar para qualquer lugar
2º Antes de tudo faça um backup do seu template, porque caso não dê certo ou você não goste do resultado, basta fazer o upload novamente;
3º Você deve baixar este arquivo, hospedar em algum site como Github e copiar a URL do arquivo que você hospedou;
Ok, feito isso, vamos começar:
1-Acesse o modelo do seu blog, na edição de html e procure por </head>. Assim que encontrar, adicione este código antes:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript' />
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js' type='text/javascript' />
<script src='URL DO ARQUIVO QUE VOCE HOSPEDOU' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('#jGlide_001').jGlideMenu({
tileSource : '.jGlide_001_tiles' ,
demoMode : false
}).show();

$('#switch').click(function(){$(this).jGlideMenuToggle();});
});
//]]>
</script>
2-Agora vamos personalizar o nosso menu, dando a ele a aparência que mais agradar; eu vou deixar os códigos que editei para o meu menu, do jeitinho do que usava; espero que gostem. Encontre ]]></b:skin> e acrescente acima disso o seguinte código:
.jGM_box {
position: absolute; /* Troque absolute por fixed se quiser que ele se deslize */
top: 30px; /* Distancia do topo */
left: 155px; /* Distancia da esquerda */
width: 240px;
height: 317px;
background: url(https://lh6.googleusercontent.com/-9P88i10SFz4/T5LGt4mMngI/AAAAAAAAGvc/i7E8rMOvE6w/s15/bg11.gif) repeat; /* Cor ou imagem de fundo */
margin: 0;
padding: 0;
border: 5px dashed #ffffff; /* Borda */
overflow: hidden;
border-radius:20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
}
.jGM_header {
position: absolute;
top: -5px;
right: -10px;
height: 140px;
width: 240px;
background: url(https://lh4.googleusercontent.com/-UsNvCeiTFxU/T5LDujfnlBI/AAAAAAAAGvU/cCWYgKa51hg/s240/pixel6.gif) no-repeat; /* Cor ou imagem do header */
color: #784216;
text-align: right;
vertical-align: middle;
line-height: 18px;
cursor: move;
}
.jGM_header a {
margin-right: 12px;
text-decoration: none;
color: #784216!important;
cursor: pointer;
}
.jGM_wrapper {
position: absolute;
top: 55px;
left: 10px;
width: 2270px;
height: 200px;
margin: 0;
padding: 0;
border: 0;
}
.jGM_tile {
position: absolute;
top: 0;
left: 7px;
width: 213px;
height: auto;
overflow: hidden;
margin: 0;
padding: 0;
border: 0;
display: block;
}
.jGM_cats {
width: 100%;
height: 64px;
overflow: hidden;
vertical-align: middle;
text-align: left;
}
.jGM_cats h4 {
font-family: Verdana,Arial,serif;
font-size: 1.8em;
margin: 0;
padding: 2px 0;
line-height: 1.8em;
color: #784216;
font-weight: normal;
}
.jGM_cats p {
font-family: Verdana,tahoma,arial;
font-size: 1em; /* Tamanho da descricao */
margin: 0;
padding: 0;
line-height: 1.2em;
color: #784216; /* Cor da descricao */
font-weight: normal;
}
.jGM_pager {
height: 18px;
width: 213px;
line-height: 18px;
margin: 0;
border: 0;
padding: 0;
background: url(https://lh3.googleusercontent.com/-PjDoPRPJ0SU/T2Yvv09RYYI/AAAAAAAAFvA/boazdrQGrHY/s10/M3.gif) repeat; /* Barras */
text-align: center;
vertical-align: middle;
border-radius:20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
}
.jGM_pager a {
text-decoration: none;
font-weight: bold;
text-decoration: none;
display: block;
}
.jGM_pager a:hover { background: url(https://lh3.googleusercontent.com/-PjDoPRPJ0SU/T2Yvv09RYYI/AAAAAAAAFvA/boazdrQGrHY/s10/M3.gif) repeat; }
.jGM_pager img { border: 0; margin: 6px 0; }
.jGM_content {
width: 213px;
height: 150px;
margin: 1px 0;
padding: 0;
border: 0;
overflow: hidden;
}
.jGM_content a {
font-family: Tahoma,arial;
text-decoration: none;
color: #784216 !important;
height: 18px;
width: 100%;
display: block;
line-height: 18px;
padding: 0 0 0 10px;
background-color: #ffe;
margin: 1px 0;
}
.jGM_content a:hover {
color: #fcc !important;
background-color: #fff5ff; /* Cor da barra ao passar o cursor */
}
.jGM_more {
background-image:
background-repeat: no-repeat;
background-position: 203px 50%;
}
.jGM_back {
position: absolute;
top: 222px;
right: 0;
height: 18px;
width: 52px;
background: #transparent;
line-height: 18px;
vertical-align: middle;
text-align: center;
margin: 10px 0 0 0;
padding: 0;
border: 0;
z-index: 99;
}
.jGM_back a {
height: 100%;
width: 100%;
text-decoration: none;
color: #784117 !important; /* Cor da palavra atras */
display: block;
}
.jGM_back a:hover {
color: #784117 !important; /* Cor da palavra atras ao passar o cursor */
background: #transparent;
}
.jGM_reset {
position: absolute;
top: 222px;
right: 62px;
height: 18px;
width: 52px;
background: #transparent;
line-height: 18px;
vertical-align: middle;
text-align: center;
margin: 10px 0 0 0;
padding: 0;
border: 0;
z-index: 99;
}
.jGM_reset a {
height: 100%;
width: 100%;
text-decoration: none;
color: #784117 !important; /* Cor da palavra inicio */
display: block;
}
.jGM_reset a:hover {
color: #784117 !important; /* Cor da palavra inicio ao passar o cursor */
background: #transparent;
}
Bom, as partes mais importantes já estão explicadas no código; você pode ir alterando as coisas para modificá-lo, só tenha cuidado. Visualize seu blog; o menu ainda não vai aparecer, então note se está tudo normal e se estiver, prossiga.

3-Entre em Layout-Elementos da Página-Adicionar novo Gadget-Html/JavaScript, e cole isso:
<div class="jGM_box" id="jGlide_001">

<!-- Links primeiro nivel -->
<ul id="tile_001" class="jGlide_001_tiles" title="Titulo" alt="Menu">
<li rel="tile_002"> Titulo1 </li>
<li rel="tile_003"> Titulo2 </li>
<li><a href=" Link "> Nome do link </a></li>
<li><a href="Link"> Nome do link </a></li>
<li><a href=" Link "> Nome do link</a></li>  
<li><a href="Link"> Nome do Link </a></li>
<li><a href=" Link "> Nome do Link </a></li>
<li><a href=" Link "> Nome do Link </a></li>
</ul>

<!-- Links segundo nivel -->
<ul id="tile_002" class="jGlide_001_tiles" title="Titulo" alt="Menu">
<li rel="tile_005">Subtitulo </li>
<li><a href=" Link "> Nome do Link </a></li>
<li><a href=" Link "> Nome do Link </a></li>
<li><a href=" Link "> Nome do Link </a></li>
</ul>

<ul id="tile_003" class="jGlide_001_tiles" title="Titulo" alt="Menu">
<li><a href=" Link "> Nome do Link </a></li>
<li><a href=" Link "> Nome do Link </a></li>
<li><a href=" Link "> Nome do Link </a></li>
<li><a href=" Link "> Nome do Link </a></li>
</ul>



</div>
Essa é a parte mais chatinha; cada nível ou título se subdivide, portanto tem que prestar a atenção, porque dentro de um título pode haver subtítulos; essa maneira foi a forma como simplifiquei o código para vocês. Basta substituir os títulos e links. O menu gera automaticamente setas de navegação para cima ou para baixo, portanto o número de links pode ser bem maior do que os que estão no código.
Caso vocês tenham alguma dúvida, pode perguntar ou então consultar o tutorial original:
http://ciudadblogger.com/2012/04/menu-vertical-drag-and-drop-con-jquery.html 
Acho esse menu super portátil, você leva para onde quiser rsrsrs...
É isso; beijus<3

8 comentários:

  1. Aiin flor não sei nem como agradecer! obrigada de coração. Só que infelizmente deu certo apenas no meu blog de teste, no blog original deu erro ;(

    http://candy-bruna.blogspot.com

    ResponderExcluir
  2. Roberta amei o tutorial!!!!~ lembra da quele dia que pedi parceria e você disse que primeiro iria observar meu blog? se você já foi desculpe pela template supeer bagunçada pois queria fazer umas modificações que não deram certo e mudaram tudo! em fim.... era só isso Beijos ! amo seu blog! :cat:

    ResponderExcluir
  3. :v:Bruna: Que pena:p:Mas continue tentando, quem sabe você consegue ^^ O meu não deu certo na primeira vez que tentei também.
    :v:Beatriz: Ainda não visitei por causa da correria que tá aki devido ao final do meu curso; tenho estudado muito!! As vagas para parceiros (Elite) já estão completas, como te disse, mas add vc aos favoritos em breve ok? E não se preocupe quanto a aparência ^^ O que chama a atenção é o conteúdo e você tem sido uma verdadeira princesa em todos os seus comentários e visitas aqui<3 Com certeza seu site é lindo!
    Beijus e obrigada meninas<3

    ResponderExcluir
  4. Obrigada roberta!! Voucolocar seu blog na inspiração do dia <3 Beijos! :v:

    ResponderExcluir
  5. Ola Roberta.
    Estou dando uma voltinha em seu blog, e achei-o maravilhoso...
    Bom eu estou fazendo um blog para mim e queria pedir ara me ajudar com algumas coisinhas simples...
    Por favor, ficarei grata. Entre em contato no imail innezinha_lemos@hotmail.com
    Esperarei sua reposta^^
    Beijos *-*

    ResponderExcluir
  6. :v:Beatriz: Mesmo:j:Não sabe o quanto fico feliz! Beijus<3
    :v:Innezinha: Olá ^^ Ficarei feliz em ajudá-la; quando tiver alguma dúvida pode deixar seu recadinho aqui, na c-box ou na página de contato e eu irei responder assim que puder ok?
    Beijus<3
    Obrigada a todas:cat:

    ResponderExcluir
  7. Muito legal esse menu!! um dia ainda uso ele num lay meu, lindo demais!

    Bjs ~> imnanda.blogspot.com

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart