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

Suporte à dúvidas gerais relacionadas ao phpBB.
gssilva
Membro Avançado
Membro Avançado
Mensagens: 1109
Registrado em: 27 Jul 2010, 19:40
Nome Real: Guilherme Silva
Localização: Araraquara - SP
Contact:

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

Mensagem por gssilva »

robra escreveu: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
Não é possível mover esse tópico para lá, eu pelo menos não consigo, eu acho que pelos artivos serem uma modificação, algo "fora" do phpbb, não tem como fazer isso, eu acho que o ideal vai ser você criar esse artigo lá mesmo, essa é uma grande dica.

Ai esse tópico poderá ficar para tirara dúvidas sobre o menu deslizante, assim evita de criarem outros tópicos sobre a mesma dúvida.

Sinta-se a vontade para criar o artigo. =)
Avatar do usuário
robra
Membro Sênior
Membro Sênior
Mensagens: 6065
Registrado em: 02 Dez 2010, 22:29

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

Mensagem por robra »

Obrigado, gssilva.

Só queria evitar duplicidade mas como não tem como movê-lo, então, vou criar o artigo lá e informar este tópico para sanar dúvidas sobre o assunto, seguindo a sua sugestão.


Abraço. Imagem
[DICA] Antes de abrir um Novo Tópico, procure saber se a sua dúvida já foi respondida. Pesquise no Google por palavras(em inglês também) relacionadas à ela, somado à palavra "phpbb".
gssilva
Membro Avançado
Membro Avançado
Mensagens: 1109
Registrado em: 27 Jul 2010, 19:40
Nome Real: Guilherme Silva
Localização: Araraquara - SP
Contact:

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

Mensagem por gssilva »

Ok, e obrigado por mais essa contribuição.
Night Angel
Membro Recente
Membro Recente
Mensagens: 262
Registrado em: 26 Mai 2011, 22:54
Localização: Planeta Terra
Contact:

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

Mensagem por Night Angel »

//Ajuda//
Estou querendo colocar esse menu horizontal neste style
http://demo.phpbb3styles.net/CA+Vintage+Blue
Mas..
Pelo que eu entendi na página deste site aqui

http://ndesign-studio.com/blog/css-dock-menu
Depois de fazer o download de uma pasta especifica
(que eu já fiz)
Tem que se agragar os arquivos nela (pasta) encontrados no estilo)
O problema é:
Onde exatamente devo colocar os respectivos arquivos?
E quais as partes do
overall_header.html
eu tenho que editar?

Anexos do Style e da pasta:
Você não está autorizado a ver ou baixar esse anexo.
Imagem
Avatar do usuário
robra
Membro Sênior
Membro Sênior
Mensagens: 6065
Registrado em: 02 Dez 2010, 22:29

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

Mensagem por robra »

Ok.
Não sou "expert" nisso mas vamos tentar primeiro exibir os menus.
Acredito que você já deve ter baixado tanto o menu deslizante horizontal mencionado como também o Estilo CA Vintage Blue.
O 1º passo é descompactar o arquivo zipado do menu deslizante horizontal, o css-dock-menu.zip.
Na raiz da pasta descompactada do menu, chamada css-dock-menu, você encontrará os arquivos html:
- css-dock.html
- css-dock-bottom.html
- css-dock-top.html
Abrindo estes arquivos pelo seu navegador, como o Google Chrome, Firefox ou IE, no 1º você terá o menu deslizante horizontal superior(header) e o inferior(footer). No 2º somente o inferior(footer) e no 3º somente o superior(header).
Abrindo os arquivos mencionados no Notepad++ você verá como deve ser feita a inclusão das linhas e dos scripts.
Como você não especifica se quer o menu deslizante tanto superior como inferior, ou só superior ou só inferior, então vou fazer com o da 1ª opção, ou seja, com o arquivo css-dock.html. Ok ?
1) Abra os seguintes arquivos no Notepad++:
Do Menu:
- css-dock.html

Do Estilo CA Vintage Blue:
- overall_header.html
- overall_footer.html

2) Repare que no arquivo css-dock.html entre as tags <head> </head> você tem as linhas abaixo:

Código: Selecionar todos

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>

<link href="style.css" rel="stylesheet" type="text/css" />

<!--[if lt IE 7]>
 <style type="text/css">
 .dock img { behavior: url(iepngfix.htc) }
 </style>
<![endif]-->
Copie-as e cole-as em uma nova linha ANTES da tag </head> do arquivo overall_header.html.

3) Repare que no arquivo css-dock.html entre as tags <body> </body> você tem as respectivas linhas e scripts separados por:
- <!--top dock -->
- <!--bottom dock -->
- <!--dock menu JS options -->
Vamos colocar o menu horizontal superior acima da barra de navegação. Ok ?
Copie o conteúdo do <!--top dock --> do arquivo css-dock.html, ou seja, o que está abaixo...

Código: Selecionar todos

<!--top dock -->
<div class="dock" id="dock">
  <div class="dock-container">
	  <a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a> 
	  <a class="dock-item" href="#"><img src="images/email.png" alt="contact" /><span>Contact</span></a> 
	  <a class="dock-item" href="#"><img src="images/portfolio.png" alt="portfolio" /><span>Portfolio</span></a> 
	  <a class="dock-item" href="#"><img src="images/music.png" alt="music" /><span>Music</span></a> 
	  <a class="dock-item" href="#"><img src="images/video.png" alt="video" /><span>Video</span></a> 
	  <a class="dock-item" href="#"><img src="images/history.png" alt="history" /><span>History</span></a> 
	  <a class="dock-item" href="#"><img src="images/calendar.png" alt="calendar" /><span>Calendar</span></a> 
	  <a class="dock-item" href="#"><img src="images/rss.png" alt="rss" /><span>RSS</span></a>
	  <a class="dock-item" href="#"><img src="images/rss.png" alt="rss" /><span>RSS</span></a> 
	  <a class="dock-item" href="#"><img src="images/rss2.png" alt="rss" /><span>RSS2</span></a>
  </div> 
</div>
... e cole-o em uma nova linha ANTES da linha <div id="page-header"> do overall_header.html, salvando o arquivo.

4) Vamos colocar o menu horizontal inferior abaixo da barra de navegação. Ok ?
Copie o conteúdo do <!--bottom dock --> do arquivo css-dock.html, ou seja, o que está abaixo...

Código: Selecionar todos

<!--bottom dock -->
<div class="dock" id="dock2">
  <div class="dock-container2">
	  <a class="dock-item2" href="#"><span>Home</span><img src="images/home.png" alt="home" /></a> 
	  <a class="dock-item2" href="#"><span>Contact</span><img src="images/email.png" alt="contact" /></a> 
	  <a class="dock-item2" href="#"><span>Portfolio</span><img src="images/portfolio.png" alt="portfolio" /></a> 
	  <a class="dock-item2" href="#"><span>Music</span><img src="images/music.png" alt="music" /></a> 
	  <a class="dock-item2" href="#"><span>Video</span><img src="images/video.png" alt="video" /></a> 
	  <a class="dock-item2" href="#"><span>History</span><img src="images/history.png" alt="history" /></a> 
	  <a class="dock-item2" href="#"><span>Calendar</span><img src="images/calendar.png" alt="calendar" /></a> 
	  <a class="dock-item2" href="#"><span>Links</span><img src="images/link.png" alt="links" /></a> 
	  <a class="dock-item2" href="#"><span>RSS</span><img src="images/rss.png" alt="rss" /></a> 
	  <a class="dock-item2" href="#"><span>RSS2</span><img src="images/rss2.png" alt="rss" /></a> 
  </div>
</div>
... e cole-o em uma nova linha ANTES de...

Código: Selecionar todos

<div>
	<a id="bottom" name="bottom" accesskey="z"></a>
	<!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
</div>
... do overall_footer.html.

5) Copie o conteúdo do <!--dock menu JS options --> do arquivo css-dock.html, ou seja, o que está abaixo...

Código: Selecionar todos

<!--dock menu JS options -->
<script type="text/javascript">
	
	$(document).ready(
		function()
		{
			$('#dock').Fisheye(
				{
					maxWidth: 50,
					items: 'a',
					itemsText: 'span',
					container: '.dock-container',
					itemWidth: 40,
					proximity: 90,
					halign : 'center'
				}
			)
			$('#dock2').Fisheye(
				{
					maxWidth: 60,
					items: 'a',
					itemsText: 'span',
					container: '.dock-container2',
					itemWidth: 40,
					proximity: 80,
					alignment : 'left',
					valign: 'bottom',
					halign : 'center'
				}
			)
		}
	);

</script>
... e cole-o em uma nova linha ANTES da tag </body> do overall_footer.html, salvando o arquivo.

6) Faça upload dos arquivos abaixo para a pasta styles/ca_vintage_blue/theme:
- css-dock-menu\style.css
- css-dock-menu\js\interface.js
- css-dock-menu\js\jquery.js

7) Faça upload dos arquivos .png e .gif da pasta css-dock-menu\images para a pasta styles/ca_vintage_blue/theme/images.

8) Faça upload dos arquivos overall_header.html e overall_footer.html editados para a pasta styles/ca_vintage_blue/template.

9) Limpe o cache do Fórum, o cache do navegador, atualize o Template, Temas e Sets de imagem do Estilo CA Vintage Blue.

Abraço. Imagem
[DICA] Antes de abrir um Novo Tópico, procure saber se a sua dúvida já foi respondida. Pesquise no Google por palavras(em inglês também) relacionadas à ela, somado à palavra "phpbb".
Night Angel
Membro Recente
Membro Recente
Mensagens: 262
Registrado em: 26 Mai 2011, 22:54
Localização: Planeta Terra
Contact:

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

Mensagem por Night Angel »

robra quase deu certo..kkk
Fiz todo o procedimento que vc indicou.
Limpei cache do fórum, do navegador, atualizei template e sets de imagens.
Mas..
Tanto no Header quanto no Footer, só apareceu uns links..e não as imagens

***Ver imagem abaixo***
http://img694.imageshack.us/img694/893/unled2nhu.jpg

Será que tem haver com o arquivo iepngfix.htc
Onde eu tenho que adicionar ele?
E no caso eu não teria que fazer alguma alteração no arquivo stylesheet.css ?
Imagem
Avatar do usuário
robra
Membro Sênior
Membro Sênior
Mensagens: 6065
Registrado em: 02 Dez 2010, 22:29

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

Mensagem por robra »

Night Angel escreveu:robra quase deu certo..kkk
Fiz todo o procedimento que vc indicou.
Limpei cache do fórum, do navegador, atualizei template e sets de imagens.
Mas..
Tanto no Header quanto no Footer, só apareceu uns links..e não as imagens

***Ver imagem abaixo***
http://img694.imageshack.us/img694/893/unled2nhu.jpg

Será que tem haver com o arquivo iepngfix.htc
Onde eu tenho que adicionar ele?
E no caso eu não teria que fazer alguma alteração no arquivo stylesheet.css ?
Abra overall_header.html editado e abaixo da linha <!--top dock --> substitua a palavra images por ./images em todos os endereços dos ícones, ou seja, desde src="images/home.png" até src="images/rss2.png", ficando o endereço do ícone desta forma: src="./images/home.png".
Depois, faça a mesma substituição da palavra images por ./images no overall_footer.html editado, em todas os endereços dos ícones abaixo da linha <!--bottom dock -->, ou seja, desde src="images/home.png" até src="images/rss2.png", ficando o endereço do ícone desta forma: src="./images/home.png".

Abraço. Imagem
[DICA] Antes de abrir um Novo Tópico, procure saber se a sua dúvida já foi respondida. Pesquise no Google por palavras(em inglês também) relacionadas à ela, somado à palavra "phpbb".
Night Angel
Membro Recente
Membro Recente
Mensagens: 262
Registrado em: 26 Mai 2011, 22:54
Localização: Planeta Terra
Contact:

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

Mensagem por Night Angel »

Alteração realizada
<!--top dock -->

Código: Selecionar todos

<div class="dock" id="dock">
      <div class="dock-container">
         <a class="dock-item" href="#"><img src="./images/home.png" alt="home" /><span>Home</span></a>
         <a class="dock-item" href="#"><img src="./images/email.png" alt="contact" /><span>Contact</span></a>
         <a class="dock-item" href="#"><img src="./images/portfolio.png" alt="portfolio" /><span>Portfolio</span></a>
         <a class="dock-item" href="#"><img src="./images/music.png" alt="music" /><span>Music</span></a>
         <a class="dock-item" href="#"><img src="./images/video.png" alt="video" /><span>Video</span></a>
         <a class="dock-item" href="#"><img src="./images/history.png" alt="history" /><span>History</span></a>
         <a class="dock-item" href="#"><img src="./images/calendar.png" alt="calendar" /><span>Calendar</span></a>
         <a class="dock-item" href="#"><img src="./images/rss.png" alt="rss" /><span>RSS</span></a>
         <a class="dock-item" href="#"><img src="./images/rss.png" alt="rss" /><span>RSS</span></a>
         <a class="dock-item" href="#"><img src="./images/rss2.png" alt="rss" /><span>RSS2</span></a>
      </div>
    </div>
<!--bottom dock -->

Código: Selecionar todos

<div class="dock" id="dock2">
      <div class="dock-container2">
         <a class="dock-item2" href="#"><span>Home</span><img src="./images/home.png" alt="home" /></a>
         <a class="dock-item2" href="#"><span>Contact</span><img src="./images/email.png" alt="contact" /></a>
         <a class="dock-item2" href="#"><span>Portfolio</span><img src="./images/portfolio.png" alt="portfolio" /></a>
         <a class="dock-item2" href="#"><span>Music</span><img src="./images/music.png" alt="music" /></a>
         <a class="dock-item2" href="#"><span>Video</span><img src="./images/video.png" alt="video" /></a>
         <a class="dock-item2" href="#"><span>History</span><img src="./images/history.png" alt="history" /></a>
         <a class="dock-item2" href="#"><span>Calendar</span><img src="./images/calendar.png" alt="calendar" /></a>
         <a class="dock-item2" href="#"><span>Links</span><img src="./images/link.png" alt="links" /></a>
         <a class="dock-item2" href="#"><span>RSS</span><img src="./images/rss.png" alt="rss" /></a>
         <a class="dock-item2" href="#"><span>RSS2</span><img src="./images/rss2.png" alt="rss" /></a>
      </div>
    </div>
Mas..não resultou em nenhuma mudança.
Continua aparecendo apenas o link.

***Como na imagem acima***
Imagem
Avatar do usuário
robra
Membro Sênior
Membro Sênior
Mensagens: 6065
Registrado em: 02 Dez 2010, 22:29

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

Mensagem por robra »

Tente então substituindo src="./images/home.png" por
src="{T_THEME_PATH}/styles/seu_estilo/theme/images/home.png", lembrando que o texto seu_estilo na linha tem que ser mudado pelo nome do Estilo em uso.
Faça o mesmo com as demais linhas citadas anteriormente, tanto no overall_header.html como no overall_footer.html

P.S.: Se não der certo, então substitua src="./images/home.png" por
src="http://www.blackangelarts.com/styles/seu_estilo/theme/images/home.png", lembrando que o texto seu_estilo na linha tem que ser mudado pelo nome do Estilo em uso.
Faça o mesmo com as demais linhas citadas anteriormente, tanto no overall_header.html como no overall_footer.html

Se ainda assim não der certo, aí a gente tenta mudando as imagens do Menu para a pasta raiz_do_forum/images.

Abraço. Imagem
[DICA] Antes de abrir um Novo Tópico, procure saber se a sua dúvida já foi respondida. Pesquise no Google por palavras(em inglês também) relacionadas à ela, somado à palavra "phpbb".
Night Angel
Membro Recente
Membro Recente
Mensagens: 262
Registrado em: 26 Mai 2011, 22:54
Localização: Planeta Terra
Contact:

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

Mensagem por Night Angel »

Na primeira tentatica acima colocando src="{T_THEME_PATH}/styles/seu_estilo/theme/images/home.png"
Não funcionou.
Na segunda tentativa colocando src="http://127.0.0.1/forum/styles/seu_estil ... s/home.png"
Funcionou
***Ver imagem***
http://www.picpanda.com/images/w0rz5w65ji3vvyc7im.jpg

Mas..
O problema agora é que as imagens ficaram estaticas..sem o movimento.
Imagem
Trancado