Página 1 de 7

[Suporte] Menu deslizante ou retrátil (Slide Menu)

Enviado: 10 Set 2011, 19:14
por robra
O Menu deslizante vertical, ou horizontal, pode ser incluído nas abas da barra de navegação ou até mesmo substituir a sua barra de navegação.
Como o nome já diz o Menu deslizante pode ser vertical, estendendo-se verticalmente abaixo da aba da barra de navegação ou pode ser horizontal, deslocando horizontalmente podendo até substituir a sua barra de navegação. Há alguns Menus horizontais que se assemelham ao menu dos PC da Apple, como este: http://www.ndesign-studio.com/demo/css- ... -dock.html
O Menu deslizante é conhecido na net como Slide Menu, sendo os mais comuns em jQuery, em CSS ou em JavaScript.
Para ter uma ideia do que estamos falando veja algumas imagens do Slide Menu na página http://www.google.com.br/search?hl=pt-B ... a=N&tab=wi.

Abaixo seguem alguns demonstrativos com seus os respectivos códigos:
1- Slide Menu jQuery
- http://www.webmaster.pt/menu-jquery-9730.html
- http://www.1stwebdesigner.com/css/36-ey ... ion-menus/

2- Slide Menu CSS
- http://css3menu.com/

3- Slide Menu JavaScript
- http://www.queness.com/post/237/30-java ... nd-scripts

Agora fica a critério e gosto do freguês... Imagem

Abraço. [img]http://www.gsmfans.com.br/Smileys/GSMFans/cool.gif[/img


Artigo pode ser acessado pelo link kb.php?a=101

Re: Menu deslizante para abas da barra de navegação

Enviado: 10 Set 2011, 19:26
por lovestories
muito interessante, mas nao compreendi como aplicar :oops:

Re: Menu deslizante para abas da barra de navegação

Enviado: 10 Set 2011, 20:01
por robra
Para quem já possui uma barra de navegação e escolhe um dos Menus deslizantes demonstrativos, obviamente, terá de adaptá-lo à sua barra de navegação atual, mudando as cores dele, retirando a barra do menu do demo, deixando apenas o menu deslizante vertical para a(s) sua(s) aba(s) da barra de navegação atual, ou substituindo toda a barra de navegação pelo Menu deslizante horizontal.
Basicamente, para o Menu vertical, os scripts e códigos vão para o overall_header.html, e os arquivos .js e os .css vão para pasta style/seu_etilo/theme.
No overall_header.html os scripts que chamam os arquivos .js são colocados na linha antes da tag </head>, e os códigos são inseridos junto a(s) aba(s) da barra de navegação, que estão geralmente entre as tags <li> </li>, dentro da <div class="navbar">.
Já para o Menu horizontal, todo o conteúdo dentro da <div class="navbar"> tem de ser substituído e personalizado com os códigos do Menu Deslizante horizontal.

Abraço. Imagem

Re: Menu deslizante ou retrátil (Slide Menu)

Enviado: 10 Set 2011, 21:03
por lovestories
testarei vamos ver o q sai ;)

Re: Menu deslizante ou retrátil (Slide Menu)

Enviado: 10 Set 2011, 21:33
por robra
lovestories escreveu:testarei vamos ver o q sai ;)
Ai, ai, ai... que dê tudo certo. Imagem

Imagem

Abraço. Imagem

Re: Menu deslizante ou retrátil (Slide Menu)

Enviado: 11 Set 2011, 09:37
por Night Angel
Hummm..gostei das dicas..também vou testar
(E seja o que Deus quizer..kkkkk)

Re: Menu deslizante ou retrátil (Slide Menu)

Enviado: 11 Set 2011, 11:02
por lovestories
robra escreveu:
lovestories escreveu:testarei vamos ver o q sai ;)
Ai, ai, ai... que dê tudo certo. Imagem

Imagem

Abraço. Imagem
mas que falta de fé em mim hein :lol:
realmente nao consegui :lol:

Re: Menu deslizante ou retrátil (Slide Menu)

Enviado: 11 Set 2011, 16:30
por robra
lovestories escreveu:...mas que falta de fé em mim hein :lol:
realmente nao consegui :lol:
Você escolheu algum menu deslizante vertical ?
Pensei em você criar uma aba chamada ENTRETENIMENTO ou CANAIS, após a aba Rede Social, com o menu deslizante vertical contendo todos as canais, semelhante a este demonstrativo: http://apycom.com/menus/8-dim-gray.html.
No demonstrativo, ao colocar o mouse sobre a palavra "HOME" o menu vertical abre. Obviamente que as cores seriam outras para combinar com seu Fórum.

Abraço. Imagem

Re: Menu deslizante ou retrátil (Slide Menu)

Enviado: 12 Set 2011, 02:25
por _Vinny_
robra, adicionei o prefixo DICA ao titulo do topico.
Sinta-se livre para enviar a pagina de artigos e tutorias. kb.php

Re: [DICA] Menu deslizante ou retrátil (Slide Menu)

Enviado: 12 Set 2011, 10:42
por robra
Ok, Vinny.

Para enviar à página de artigos ou tutoriais teria de criar um novo tópico lá ?
Se for, para não termos assunto em duplicidade, penso ser melhor mover este tópico para a página de "dicas".

Abraço. Imagem