Suporte aos Styles/Templates para phpBB.
  • Avatar do usuário
#289989
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.
#290001
Poste o conteúdo de seu overall_header.html dentro do BBcode Code.

Abraço. Imagem
#290017
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

Olá pessoal eu queria mudar o fundo da cor […]

Experimente limpar o cache do navegador

O erro já foi corrigido sozinho. obrigado

uso xampp, vou aumentar aqui, já tive um pr[…]