Instalando um menu no estilo proDVGFX.

Suporte aos Styles/Templates para phpBB.
arthuraires
Novato
Novato
Mensagens: 13
Registrado em: 15 Set 2013, 15:32

Instalando um menu no estilo proDVGFX.

Mensagem por arthuraires » 27 Nov 2013, 17:15

Código: Selecionar todos

Step1. HTML

First create an unordered list for your base top navigation. Then simply nest another unordered list for your sub navigation.

<ul class="topnav">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Tutorials</a>
        <ul class="subnav">
            <li><a href="#">Sub Nav Link</a></li>
            <li><a href="#">Sub Nav Link</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Resources</a>
        <ul class="subnav">
            <li><a href="#">Sub Nav Link</a></li>
            <li><a href="#">Sub Nav Link</a></li>
        </ul>
    </li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Advertise</a></li>
    <li><a href="#">Submit</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

Step2. CSS

Next, it’s time to style the navigation wireframe with CSS.

ul.topnav {
	list-style: none;
	padding: 0 20px;	
	margin: 0;
	float: left;
	width: 920px;
	background: #222;
	font-size: 1.2em;
	background: url(topnav_bg.gif) repeat-x;
}
ul.topnav li {
	float: left;
	margin: 0;	
	padding: 0 15px 0 0;
	position: relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li a{
	padding: 10px 5px;
	color: #fff;
	display: block;
	text-decoration: none;
	float: left;
}
ul.topnav li a:hover{
	background: url(topnav_hover.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
	width: 17px;
	height: 35px;
	float: left;
	background: url(subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
	list-style: none;
	position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
	left: 0; top: 35px;
	background: #333;
	margin: 0; padding: 0;
	display: none;
	float: left;
	width: 170px;
	border: 1px solid #111;
}
ul.topnav li ul.subnav li{
	margin: 0; padding: 0;
	border-top: 1px solid #252525; /*--Create bevel effect--*/
	border-bottom: 1px solid #444; /*--Create bevel effect--*/
	clear: both;
	width: 170px;
}
html ul.topnav li ul.subnav li a {
	float: left;
	width: 145px;
	background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
	padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
	background: #222 url(dropdown_linkbg.gif) no-repeat 10px center; 
}

Step3. jQuery

For those who are new to jQuery, you can learn about it here.

The following script contains comments explaining which jQuery actions are being performed.

$(document).ready(function(){

	$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)
	
	$("ul.topnav li span").click(function() { //When trigger is clicked...
		
		//Following events are applied to the subnav itself (moving subnav up and down)
		$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

		$(this).parent().hover(function() {
		}, function(){	
			$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
		});

		//Following events are applied to the trigger (Hover events for the trigger)
		}).hover(function() { 
			$(this).addClass("subhover"); //On hover over, add class "subhover"
		}, function(){	//On Hover Out
			$(this).removeClass("subhover"); //On hover out, remove class "subhover"
	});

});

*To degrade gracefully, we only show the drop down menu trigger to those who have javascript enabled.

Drop down menu that degrades gracefully

This is what it looks like when javascript is disabled:

Drop down menu that degrades gracefully
Esse tutorial ai em cima,que vi e gostei do menu,sera que alquem me ensinari a colocar no meu forum em baixo do titulo,deem uma olhado do meu forum http://www.hackerspro.tkme ajudem pf!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Editado pela última vez por robra em 28 Nov 2013, 20:00, em um total de 1 vez.
Razão: Título editado para atender às regras de utilização.

Avatar do usuário
_Vinny_
Administrador
Administrador
Mensagens: 5809
Registrado em: 03 Set 2009, 21:59
Nome Real: Marcus Vinicius
Localização: Macapá, AP - Brasil
Contacto:

Re: Me AJudem a Instalar esse menu Porfavor!!!!!

Mensagem por _Vinny_ » 27 Nov 2013, 18:53

sera que alquem me ensinari a colocar no meu forum em baixo do titulo
Embaixo de qual título?

arthuraires
Novato
Novato
Mensagens: 13
Registrado em: 15 Set 2013, 15:32

Re: Me AJudem a Instalar esse menu Porfavor!!!!!

Mensagem por arthuraires » 27 Nov 2013, 19:06

Embaixo de qual título?
Imagem
Desculpe se o print esta meio bagunçado,mais consequiu entender onde e?

arthuraires
Novato
Novato
Mensagens: 13
Registrado em: 15 Set 2013, 15:32

Re: Me AJudem a Instalar esse menu Porfavor!!!!!

Mensagem por arthuraires » 27 Nov 2013, 19:25

Entendeu?

robra
Membro Sênior
Membro Sênior
Mensagens: 6065
Registrado em: 02 Dez 2010, 22:29

Re: Me AJudem a Instalar esse menu Porfavor!!!!!

Mensagem por robra » 27 Nov 2013, 20:33

Poste o conteúdo de seu overall_header.html dentro do BBcode Code.

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".

arthuraires
Novato
Novato
Mensagens: 13
Registrado em: 15 Set 2013, 15:32

Re: Me AJudem a Instalar esse menu Porfavor!!!!!

Mensagem por arthuraires » 28 Nov 2013, 14:43

Ainda não consequi sera que vc poderia mandar um print,ou mostra onde fica esta parte do codigo pf?

robra
Membro Sênior
Membro Sênior
Mensagens: 6065
Registrado em: 02 Dez 2010, 22:29

Re: Me AJudem a Instalar esse menu Porfavor!!!!!

Mensagem por robra » 28 Nov 2013, 19:59

Cara... antes de criar um tópico, leia as Regras de Utilização, como por exemplo, o parágrafo que trata sobre a elaboração do título do tópico:
http://www.suportephpbb.com.br/regras#rule3h
Se a sua dúvida é quanto a instalação do de um menu em um determinado estilo, então, o título deve ficar desta forma:
"Instalando um menu no estilo XXXXXXXX"
... sendo XXXXXXXX o nome do estilo em questão, que no seu caso é o proDVGFX.
Ainda não consequi sera que vc poderia mandar um print,ou mostra onde fica esta parte do codigo pf?
A questão não é "print". Primeiro, você tem de entender a estrutura do phpBB. No topo da página, faça uma busca na "pesquisa personalizada" por "arquivos phpbb" e, no retorno da busca, o 2º link é de um artigo que contém a lista dos arquivos dos estilos "padrão"(Prosilver e Subsilver2).
Depois de identificar e achar o arquivo overall_header.html de seu estilo, você vai abri-lo pelo programa notepad++(não é o notepad do windows), vai copiar todo o seu conteúdo e postá-lo aqui, em uma nova mensagem, dentro do BBcode Code.

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".

Trancado