Criar menu personalizado

Detalhes da dúvida

Versão do fórum : PunBB
Nível de acesso : Fundador
Navegador usado : Google Chrome
Membros afetados : Todos os membros do fórum
Endereço do fórum : http://teste98.forumeiros.com

Descrição do problema

Olá,

gostaria do código do menu deste fórum www.lokoscripts.com

Até mais!

Olá Faeel!

Bem há, podemos criar um para o senhor.. Não precisa necessariamente 'copiar' este. Não deseja que nós criemos um exclusivo ao senhor?

Crie por favor, não precisa ser exatamente igual, mas do tipo do seu fórum, aprecio muito ele, e quando seu fórum abrir participarei dele, desculpe em tentar copiar

Até mais!

Olá!

Relaxe, está tudo perfeito amigo!
Vamos do com calma na personalização, adicionei o fundo semelhante ao menu e a letra white, tem algo mais a adicionar?
CSS:

Código:

  #pun-navlinks {

  background-color: #141414;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==);
  background-repeat: repeat-x;
  color: white;
  display: block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  font-weight: normal;
  line-height: 180%;
  padding: 13px 20px;
  text-decoration: none;
  padding-top: 5px;
  padding-bottom 5px;
  line-height: 30px;
  height: 35px;

}
.mainmenu {
color: white !important;
      }
      .mainmenu, a.mainmenu:hover {text-decoration: none !important}

Visualização:


Abraços!

Olá!

Coloque o hover parecido com o seu, e uma barra azul pequan em baixo, deixar a barra a largura inteira da tela por favor.

Até!

Olá!

Troque por este:

Código:

body{overflow-x: hidden !important}

#pun-navlinks{background-color:#141414;margin-left: -15px;width: 101%;position: relative;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==);background-repeat:repeat-x;color:#fff;display:block;font-family:Helvetica, Arial, Verdana, sans-serif;font-size:12px;font-weight:400;height:35px;line-height:30px;padding:5px 20px 13px;text-decoration:none}.mainmenu{color:#fff!important}.mainmenu,a.mainmenu:hover{text-decoration:none!important}
      #pun-navlinks {border-bottom: 3px solid red !important
      ;}
      a.mainmenu:hover, .mainmenu:hover a {
background: white;
color: black !important;
              padding-top: 15px;
             
              padding-bottom: 18px;
      }
      .mainmenu{
padding-left: 15px;
padding-right: 15px

      }

Agrada-lhe?

Olá!
Veja o o hover só aparece quando o cursor esta sobre o texto, e peç oque dimunia a altura da barra um pouco só.

https://i.imgur.com/BM1jKyT.png

Até!

Olá!

Para alterar a largura, procure por:

Código:

height:35px;

E vá diminuindo o número 35.
Agora quanto ao hover;
Amigo, efeito hover e assim. Ele só aparece com o mouse em cima, por isto e denominado de hover.
No lokoscripts e a mesma coisa:

Olá!

Não amigo, no seu olha https://i.imgur.com/umda2lZ.png no meu esta assim, https://i.imgur.com/BM1jKyT.png

Não me agradou o efeito hover, poderíamos tentar outro?

Para arrumar a questão do texto hover, troque por:

Código:

body{overflow-x: hidden !important}

#pun-navlinks{background-color:#141414;margin-left: -15px;width: 101%;position: relative;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==);background-repeat:repeat-x;color:#fff;display:block;font-family:Helvetica, Arial, Verdana, sans-serif;font-size:12px;font-weight:400;height:35px;line-height:30px;padding:5px 20px 13px;text-decoration:none}.mainmenu{color:#fff!important}.mainmenu,a.mainmenu:hover{text-decoration:none!important}
      #pun-navlinks {border-bottom: 3px solid red !important  ;}
     
.mainmenu:hover, .mainmenu{color:#fff!important;max-height: 10px !important;padding-bottom:17px !important;padding-top:13px;padding: 10px;}.mainmenu,a.mainmenu:hover{text-decoration:none!important}

li .mainmenu:hover {background:#fff;color:#000!important;}

Quanto ao efeito do hover, deseja como?
Na última linha:

Código:

li .mainmenu:hover {background:#fff;color:#000!important;}

E a linha do hover, podendo trocar a cor do background de #fff para a que o senhor desejar. A cor do texto de #000 para a que desejar. Etc..

Olá!

Desculpe, eu exagerei em querer trocar o hover, só poderia adicionar uma barrinha vermelha igual ao seu?

ex: https://i.imgur.com/umda2lZ.png

Até!

Olá!

Sim, troque essa linha:

Código:

li .mainmenu:hover {background:#fff;color:#000!important;}

Por esta:

Código:

li .mainmenu:hover {background:#fff;color:#000!important;border: 3px solid red}

Procure por '3px', vá aumentando para a espessura da borda.

Olá!

Veja como ficou https://i.imgur.com/66INi1h.png quero o borda somente em cima.

Saudações!

Troque a linha por este:

Código:

#pun-navlinks a:hover {
background: none repeat scroll 0 0 white;
border-top: 3px solid red;
padding: 12px!important;
}

Até!

Veja como ficou https://i.imgur.com/RmqgGu6.png

Substitua por este:

Código:

#pun-navlinks a:hover {
background: none repeat scroll 0 0 #fff;
border-top: 3px solid red;
padding: 12px!important;
color: black !important;
}

Até!

O hover ficou meio fora da linha, gostaria que ficasse da mesma maneira do fórum do Loko

https://i.imgur.com/umda2lZ.png

Seria isto:

Código:

#pun-navlinks a:hover {
background: none repeat scroll 0 0 #fff;
border-top: 3px solid red;
color: #000!important;
padding-top: 2px!important;
}

Até!

Olá!

gostaria que o texto ficasse centralizado dentro da barra e aumentar a fonte.

Substitua por este:

Código:

#pun-navlinks li {
display: inline;
font-size: 1.15em;
}
#pun-navlinks a, #pun-navlinks a:visited, a.mainmenu {
left: -120px!important;
position: relative;
top: -3px!important;
}
#pun-navlinks a:hover {
background: none repeat scroll 0 0 #fff;
border-top: 3px solid red;
padding: 12px!important;
color: black !important;
}

Resulta?

Até!

Olá!

para nao criar um tópico com uma dúvida simples, gostaria de saber o código para adicionar o banner igual ao fórum do Loko.

Até.

Olá novamente!

Infelizmente não se pode cessar duas questões diferentes num mesmo tópico! Crie um novo para que possamos ajuda-los!

Posso finalizar este tópico?


Até!

Olá!

só um coisinha, não usei seu código que pedi para aumentar a letra e etc.. pois bugo e ia dar muita confusão e dar mais trabalho, então só queria deixar o texto do menu centralizado dentro do hover

Até.

Substitua por este:

Código:

#pun-navlinks li a {
margin: 0 .8em 0 0;
position: relative !important;
top: 5px !important;
}
#pun-navlinks a:hover {
background: none repeat scroll 0 0 #4D4D4D;
border-top: 3px solid red;
color: #fff!important;
padding-bottom: 12px !important;
}

É isto?

Poderíamos deixar a o hover por inteiro ali?

Sim... troque por este:

Código:

#pun-navlinks li a {
margin: 0 .8em 0 0;
position: relative !important;
top: 5px !important;
}
#pun-navlinks a:hover {
background: none repeat scroll 0 0 #4D4D4D;
border-top: 3px solid red;
color: #fff!important;
padding-bottom: 19px!important;
}

Att

Veja, não ficou no local desejado, https://i.imgur.com/Qtytj6z.png

Tente com este:

Código:

#pun-navlinks li a {
margin: 0 .8em 0 0;
position: relative !important;
top: 5px !important;
}
#pun-navlinks a:hover {
background: none repeat scroll 0 0 #4D4D4D;
border-top: 3px solid red;
color: #fff!important;
padding: 14px !important;
}

Procure pelo valor "14" e modifique até ficar ao teu gosto!

Att

Obrigado @EuficoLoko e @Hakuouki