[Resolvido] Menu Topo

Detalhes da dúvida

Versão do fórum : PunBB
Nível de acesso : Fundador
Navegador usado : Baidu Browser (Spark Browser)
Imagem :

Imagem da minha dúvida:

Membros afetados : Todos os membros do fórum
Problema começou : Sempre
Endereço do fórum : http://www.brbrasilreality.forumeiros.com

Descrição do problema

Queria remover o meu menu do meu forum e botar um igual á este.
E deixar a barra de navegação igual ao da imagem e debaixo do menu.




Grato.
Obrigado pela atenção.

Hey! Boa tarde!

Então, como já deve saber, só podemos ajudar em uma questão por tópico.
Seria o Menu no caso? Se for, poderia fornecer o link para que, possa extrair o efeito de lá?

Ah sim claro, tinha me esquecido.
Encontrei isto neste forum: http://nartes.besaba.com/index.php

@EDIT: Este é para outro forum meu, e o meu outro tópico ninguem responde.

Hey!  

Vá em:   Painel de controle   Visualização    Imagens e Cores Cores CSS

Código:

#pun-navlinks{height: 44px !important;background: #34383c !important;padding: 0 !important;;margin: 0 !important;display: block;position: fixed !important;height: 50px;line-height: 50px;width: 100% !important;top: 0% !important;left: -0px !important;right: -10px !important;} #pun-navlinks ul.clearfix{ display: block;background: transparent url(../images/theme/menu.png) top left;margin: 0;float: right;overflow: hidden;width: auto;height: 50px;line-height: 25px;padding-top: 5px;}a.mainmenu{color: #FFF;background: #282b2e;text-decoration: none;padding: 18px 10px;font-size: 11px;font-weight: bold;transition: color .25s ease-in-out;-moz-transition: color .25s ease-in-out;-webkit-transition: color .25s ease-in-out;left: -3px;position: relative !important;color: white !important}

Posição: No início
Atenciosamente, EuficoLouko.

Ficou meio estranho, pois ficou mais fino, e os botões ficou uma faixa, e a logo fico toda bugada embaixo :/

Então, a minha internet, não tá lá essas coisas. Então vou lhe ensinar, a alterar a altura.
Crie um novo js, em todas as páginas:

Código:

$(function(){var x = $('#pun-logo').html();$('a.mainmenu:first').before(' <div style="float: left !important;position: relative !important;"> '+x+' </div> ');$('a.mainmenu').css('background', 'none', 'padding', '0 !important' );});

Deixe tudo ativado!

A barra de menu ainda, está pequena, porem o resto está bom, exceto a logo, pois ela está mal posicionada.

@EDIT: O menu tem muito espaço se ver o outro forum, tem menos espaço e acho que a letra é um pouco menor de lado.

Olá!

Nesse código:

Código:

$(function(){var x = $('#pun-logo').html();$('a.mainmenu:first').before(' <div style="float: left !important;position: relative !important;"> '+x+' </div> ');$('a.mainmenu').css('background', 'none', 'padding', '0 !important' );});

Troque por:

Código:

$(function(){var x = $('#pun-logo').html();$('a.mainmenu:first').before(' <div style="float: left !important;position: relative !important;left: -10px !important;top: -10px !important"> '+x+' </div> ');$('a.mainmenu').css('background', 'none', 'padding', '0 !important' );});

Nele procure por left: -10px vá aumentando o 10 para deixa-lo mais para a esquerda (a logo)
Procure também por top: -10px vá aumentando o 10 para deixa-lo mais alto, e diminua para mais baixo. Pode-se utilizar números positivos e negativos.

Agora no CSS, veja:

Código:

#pun-navlinks{height: 44px !important;background: #34383c !important;padding: 0 !important;;margin: 0 !important;display: block;position: fixed !important;height: 50px;line-height: 50px;width: 100% !important;top: 0% !important;left: -0px !important;right: -10px !important;} #pun-navlinks ul.clearfix{ display: block;background: transparent url(../images/theme/menu.png) top left;margin: 0;float: right;overflow: hidden;width: auto;height: 50px;line-height: 25px;padding-top: 5px;}a.mainmenu{color: #FFF;background: #282b2e;text-decoration: none;padding: 18px 10px;font-size: 11px;font-weight: bold;transition: color .25s ease-in-out;-moz-transition: color .25s ease-in-out;-webkit-transition: color .25s ease-in-out;left: -3px;position: relative !important;color: white !important}

Procure por:

Código:

font-size: 11px;

Diminua o 11 para diminuir a letra.
Agora, procure por:

Código:

padding: 18px 10px;

Aumente o 10 para mais espaço / diminua para menos entre os menus.

Procure por:

Código:

height: 44px !important;

Aumente o 44 para deixa-lo mais alto. Ou diminua para deixar ele mais baixo.(A barra do menu);

Teria como o efeito daquela faixa que fica na logo tambem? e que tipo, no Inicio etc tb, que tipo, se eu tiver no Inicio fica uma faixa nele, se e eu tiver no Portal fica uma faixa no portal, teria como? (E emvez de sublinhar quando passasse o mouse emcima da letra, deixasse a cor da letra meio cinza que nem no forum que lhe passei)

Olá!

Vamos por parte, primeiro o hover da letra:
Adicione em sua CSS:

Código:

a.mainmenu:hover{color: #999999 !important;text-decoration: none !important;}
img[alt="MAPEDINE Productions"]{background: #282b2e;padding: 0 10px !important;height: 49px;}


Eu percebi que há 2 logos do forum, teria como remover a debaixo, e deixar a que ta na barra como a default? Há 2.

Olá!

Adicione em sua CSS:

Código:

#pun-logo{display: none !important}

Se não resultar, tente esse js - em todas:

Código:

$(function(){$('#pun-logo').hide();});

Ficou um espaço em branco agora.

Olá!

Adicione mais esse, CSS:

Código:

#pun-intro{display: none !important}

Teria como aumentar o tamanho do menu pros lados, e modificar o "Sair [ NomeDoUsuario ]" pra só "Sair" ?

Olá!

Adicione em sua CSS:

Código:

#pun-navlinks{padding-left: 100px !important; margin-left: -5% !important;}

Crie um novo js, em todas:

Código:


$(function(){$('#logout').text('Sair')});

Vlw Teria como tirar o espacinho que ficou sobrando emcima do menu ou aumentar ele pra cima? :?

Olá!

Acrescente em sua CSS:

Código:

#pun-navlinks{margin-top: -5px !important;}

Atenciosamente,
Loko.

Teria como tipo, botar a faixa que nem no nartes(forum que te passei)? as faixas nos botão do menu que tipo, quando to no Inicio vai tar uma faixa no Inicio, se eu tiver no Calendário vai tar uma faixa no Calendário, teria como?

Olá!

Crie um novo js - Em todas as páginas:

Código:

$(function(){if(location.pathname.indexOf('/faq')!==-1){ $('a.mainmenu:contains("FAQ")').html('<a class="mainmenu" href="/faq" style="background: #282b2e;padding-bottom: 20px;padding-top: 20px !important; margin-right: -5px !important;;"><img id="i_icon_mini_index" src="http://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="FAQ" title="FAQ">FAQ</a>'); };  if(location.pathname.indexOf('/search')!==-1){ $('a.mainmenu:contains("Buscar")').html('<a class="mainmenu" href="/search" style="background: #282b2e;padding-bottom: 20px;padding-top: 20px !important;margin-right: -5px !important;"><img id="i_icon_mini_index" src="http://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Buscar" title="Buscar">Buscar</a>'); };if(location.pathname.indexOf('/memberlist')!==-1){ $('a.mainmenu:contains("Membros")').html('<a class="mainmenu" href="/memberlist" style="background: #282b2e;padding-bottom: 20px;padding-top: 20px !important;margin-right: -5px !important;"><img id="i_icon_mini_index" src="http://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Membros" title="Membros">Membros</a>'); };if(location.pathname.indexOf('/groups')!==-1){ $('a.mainmenu:contains("Grupos")').html('<a class="mainmenu" href="/groups" style="background: #282b2e;padding-bottom: 20px;padding-top: 20px !important;margin-right: -5px !important;"><img id="i_icon_mini_index" src="http://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Grupos" title="Grupos">Grupos</a>'); };if(location.pathname.indexOf('/profile')!==-1){ $('a.mainmenu:contains("Perfil")').html('<a class="mainmenu" href="/profile?mode=editprofile" style="background: #282b2e;padding-bottom: 20px;padding-top: 20px !important;margin-right: -5px !important;"><img id="i_icon_mini_index" src="http://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Perfil" title="Perfil">Perfil</a>'); };if(location.pathname.indexOf('/forum')!==-1){ $('a.mainmenu:contains("Início")').html('<a class="mainmenu" href="/" style="background: #282b2e;padding-bottom: 20px;padding-top: 20px !important;margin-right: -5px !important;"><img id="i_icon_mini_index" src="http://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Início" title="Início">Início</a>'); };if(location.pathname.indexOf('/privmsg')!==-1){ $('a.mainmenu:contains("Mensagens privadas")').html('<a class="mainmenu" href="/privmsg?folder=inbox" style="background: #282b2e;padding-bottom: 20px;padding-top: 20px !important;margin-right: -5px !important;"><img id="i_icon_mini_index" src="http://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="MP" title="MP">Mensagens privadas</a>'); };
if(location.pathname.indexOf('/login')!==-1){ $('a.mainmenu:contains("Login")').html('<a class="mainmenu" href="/login" style="background: #282b2e;padding-bottom: 20px;padding-top: 20px !important;margin-right: -5px !important;"><img id="i_icon_mini_index" src="http://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="FAQ" title="">Login</a>');
};
$('a.mainmenu:contains("Registrar-se")').text('Registrar');
if(location.pathname.indexOf('/register')!==-1){ $('a.mainmenu:contains("Registrar")').html('<a class="mainmenu" href="/register" style="background: #282b2e;padding-bottom: 20px;padding-top: 20px !important;margin-right: -5px !important;"><img id="i_icon_mini_index" src="http://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="FAQ" title="">Registrar</a>');
};
if(location.pathname.indexOf('/calendar')!==-1){ $('a.mainmenu:contains("Calendário")').html('<a class="mainmenu" href="/calendar" style="background: #282b2e;padding-bottom: 20px;padding-top: 20px !important;margin-right: -5px !important;"><img id="i_icon_mini_index" src="http://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="FAQ" title="">Calendário</a>'); };
});

Atenciosamente,
Loko.

Vlw te amo <3


@Resolvido
@Closed