Fórum grátis: ajuda e atendimento ao utilizador Forumeiros.com

Menu inicial

3 participantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Menu inicial

Mensagem por StyLe® 04.10.12 19:16

Qual é minha questão:
Eu fiz um início para o meu fórum e gostaria de adicionar um menu de navegação já tenho o menu mais gostaria de personalizar mais um pouco ele bom eu gostaria de deixar uma seta em cima para quando passar o mouse Ex: Fórum, Portal etc... desse uma seta quero igual ao SP-DESIGN

Menu
Código:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <style>
            #cssmenu ul,
            #cssmenu li,
            #cssmenu span,
            #cssmenu a {
              margin: 0;
              padding: 0;
              position: relative;
            }
            #cssmenu {
              width: 601px;
              height: 49px;
              border-radius: 5px 5px 0 0;
              -moz-border-radius: 5px 5px 0 0;
              -webkit-border-radius: 5px 5px 0 0;
              background: #141414;
              background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
              background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
              background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
              background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
              background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
            /*  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
              filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
              border-bottom: 2px solid #0fa1e0;*/
            }
            #cssmenu:after,
            #cssmenu ul:after {
              content: '';
              display: block;
              clear: both;
            }
            #cssmenu a {
              background: #141414;
              background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
              background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
              background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
              background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
              background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
              background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
              filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
              color: #ffffff;
              display: inline-block;
              font-family: Helvetica, Arial, Verdana, sans-serif;
              font-size: 12px;
              line-height: 49px;
              padding: 0 20px;
              text-decoration: none;
            }
            #cssmenu ul {
              list-style: none;
            }
            #cssmenu > ul {
              float: left;
            }
            #cssmenu > ul > li {
              float: left;
            }
      /*      #cssmenu > ul > li:hover:after {
              content: '';
              display: block;
              width: 0;
              height: 0;
              position: absolute;
              left: 50%;
              bottom: 0;
              border-left: 10px solid transparent;
              border-right: 10px solid transparent;
              border-bottom: 10px solid #0fa1e0;
              margin-left: -10px;
            }*/
            #cssmenu > ul > li:first-child > a {
              border-radius: 5px 0 0 0;
              -moz-border-radius: 5px 0 0 0;
              -webkit-border-radius: 5px 0 0 0;
            }
            #cssmenu > ul > li:last-child > a {
              border-radius: 0 5px 0 0;
              -moz-border-radius: 0 5px 0 0;
              -webkit-border-radius: 0 5px 0 0;
            }
            #cssmenu > ul > li.active > a {
              box-shadow: inset 0 0 3px #000000;
              -moz-box-shadow: inset 0 0 3px #000000;
              -webkit-box-shadow: inset 0 0 3px #000000;
              background: #070707;
              background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
              background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
              background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
              background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
              background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
              background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
              filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
            }
          /*  #cssmenu > ul > li:hover > a {
              background: #070707;
              background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
              background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
              background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
              background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
              background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
              background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
              filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
              box-shadow: inset 0 0 3px #000000;
              -moz-box-shadow: inset 0 0 3px #000000;
              -webkit-box-shadow: inset 0 0 3px #000000;
            }*/
            #cssmenu .has-sub {
              z-index: 1;
            }
            #cssmenu .has-sub:hover > ul {
              display: block;
            }
            #cssmenu .has-sub ul {
              display: none;
              position: absolute;
              width: 200px;
              top: 100%;
              left: 0;
            }
            #cssmenu .has-sub ul li {
              *margin-bottom: -1px;
            }
            #cssmenu .has-sub ul li a {
              background: #0fa1e0;
              border-bottom: 1px dotted #6fc7ec;
              filter: none;
              font-size: 11px;
              display: block;
              line-height: 120%;
              padding: 10px;
            }
            #cssmenu .has-sub ul li:hover a {
              background: #0c7fb0;
            }
            #cssmenu .has-sub .has-sub:hover > ul {
              display: block;
            }
            #cssmenu .has-sub .has-sub ul {
              display: none;
              position: absolute;
              left: 100%;
              top: 0;
            }
            #cssmenu .has-sub .has-sub ul li a {
              background: #0c7fb0;
              border-bottom: 1px dotted #6db2d0;
            }
            #cssmenu .has-sub .has-sub ul li a:hover {
              background: #095c80;
            }
        </style>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        </head>

        <body>
            <div id='cssmenu'>
            <ul>
              <li><a href='/forum'><span>Forum</span></a></li>
              <li><a href='/portal'><span>Portal</span></a></li>
              <li><a href='/f4-'><span>Recrutamento</span></a></li>
              <li><a href='/memberlist'><span>Membros</span></a></li>
              <li><a href='/groups'><span>Grupos</span></a></li>
              <li><a href='/register'><span>Registrar</span></a></li>
              <li><a href='/login'><span>Login</span></a></li>
            </ul>
            </div>
        </body>
        </html>


Links e imagens do meu problema:
Vi a seta no menu da SP-DESIGN


Endereço do meu fórum:


Versão do meu fórum:
Não sei


Última edição por StyLe® em 06.10.12 19:30, editado 3 vez(es)
avatar

StyLe®
Super Membro

Membro desde : 28/04/2012
Mensagens : 1919
Pontos : 2654

https://ajuda.forumeiros.com/t79652-

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Menu inicial

Mensagem por Sennior 04.10.12 19:18

Olá,

Não compreendi. Poderia ser mais claro à tua dúvida?

Até mais.
Sennior

Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu inicial

Mensagem por StyLe® 04.10.12 19:22

Olá Mikéé quera ler novamente o meu tópico eu editei
avatar

StyLe®
Super Membro

Membro desde : 28/04/2012
Mensagens : 1919
Pontos : 2654

https://ajuda.forumeiros.com/t79652-

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu inicial

Mensagem por StyLe® 06.10.12 11:58

UP STAFF
avatar

StyLe®
Super Membro

Membro desde : 28/04/2012
Mensagens : 1919
Pontos : 2654

https://ajuda.forumeiros.com/t79652-

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu inicial

Mensagem por Josh 06.10.12 14:06

Olá!

As classes são diferentes, aqui está o CSS adaptado para a página HTML:
Código:
#cssmenu a {
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-webkit-transition: all .2s linear;
background: url(http://i42.servimg.com/u/f42/17/32/13/00/menu-s14.png) no-repeat 40% -10px;
padding-top: 14px;
position: relative;
transition: all .2s linear;
}
#cssmenu:hover {
background: url(http://i42.servimg.com/u/f42/17/32/13/00/menu-s14.png) 50% 0% no-repeat;
padding-top: 6px;
Abraços.
Josh

Josh
Super Membro

Membro desde : 03/03/2012
Mensagens : 1170
Pontos : 1512

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu inicial

Mensagem por StyLe® 06.10.12 14:09

Olá Josh!

Você pode adaptar o código já no meu código?
avatar

StyLe®
Super Membro

Membro desde : 28/04/2012
Mensagens : 1919
Pontos : 2654

https://ajuda.forumeiros.com/t79652-

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu inicial

Mensagem por Josh 06.10.12 14:19

Olá!

Aqui está:
Código:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <style>
#cssmenu a {
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-webkit-transition: all .2s linear;
background: url(http://i42.servimg.com/u/f42/17/32/13/00/menu-s14.png) no-repeat 40% -10px;
padding-top: 14px;
position: relative;
transition: all .2s linear;
}
#cssmenu:hover {
background: url(http://i42.servimg.com/u/f42/17/32/13/00/menu-s14.png) 50% 0% no-repeat;
padding-top: 6px;

            #cssmenu ul,
            #cssmenu li,
            #cssmenu span,
            #cssmenu a {
              margin: 0;
              padding: 0;
              position: relative;
            }
            #cssmenu {
              width: 601px;
              height: 49px;
              border-radius: 5px 5px 0 0;
              -moz-border-radius: 5px 5px 0 0;
              -webkit-border-radius: 5px 5px 0 0;
              background: #141414;
              background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
              background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
              background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
              background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
              background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
            /*  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
              filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
              border-bottom: 2px solid #0fa1e0;*/
            }
            #cssmenu:after,
            #cssmenu ul:after {
              content: '';
              display: block;
              clear: both;
            }
            #cssmenu a {
              background: #141414;
              background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
              background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
              background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
              background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
              background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
              background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
              filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
              color: #ffffff;
              display: inline-block;
              font-family: Helvetica, Arial, Verdana, sans-serif;
              font-size: 12px;
              line-height: 49px;
              padding: 0 20px;
              text-decoration: none;
            }
            #cssmenu ul {
              list-style: none;
            }
            #cssmenu > ul {
              float: left;
            }
            #cssmenu > ul > li {
              float: left;
            }
      /*      #cssmenu > ul > li:hover:after {
              content: '';
              display: block;
              width: 0;
              height: 0;
              position: absolute;
              left: 50%;
              bottom: 0;
              border-left: 10px solid transparent;
              border-right: 10px solid transparent;
              border-bottom: 10px solid #0fa1e0;
              margin-left: -10px;
            }*/
            #cssmenu > ul > li:first-child > a {
              border-radius: 5px 0 0 0;
              -moz-border-radius: 5px 0 0 0;
              -webkit-border-radius: 5px 0 0 0;
            }
            #cssmenu > ul > li:last-child > a {
              border-radius: 0 5px 0 0;
              -moz-border-radius: 0 5px 0 0;
              -webkit-border-radius: 0 5px 0 0;
            }
            #cssmenu > ul > li.active > a {
              box-shadow: inset 0 0 3px #000000;
              -moz-box-shadow: inset 0 0 3px #000000;
              -webkit-box-shadow: inset 0 0 3px #000000;
              background: #070707;
              background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
              background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
              background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
              background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
              background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
              background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
              filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
            }
          /*  #cssmenu > ul > li:hover > a {
              background: #070707;
              background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
              background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
              background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
              background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
              background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
              background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
              filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
              box-shadow: inset 0 0 3px #000000;
              -moz-box-shadow: inset 0 0 3px #000000;
              -webkit-box-shadow: inset 0 0 3px #000000;
            }*/
            #cssmenu .has-sub {
              z-index: 1;
            }
            #cssmenu .has-sub:hover > ul {
              display: block;
            }
            #cssmenu .has-sub ul {
              display: none;
              position: absolute;
              width: 200px;
              top: 100%;
              left: 0;
            }
            #cssmenu .has-sub ul li {
              *margin-bottom: -1px;
            }
            #cssmenu .has-sub ul li a {
              background: #0fa1e0;
              border-bottom: 1px dotted #6fc7ec;
              filter: none;
              font-size: 11px;
              display: block;
              line-height: 120%;
              padding: 10px;
            }
            #cssmenu .has-sub ul li:hover a {
              background: #0c7fb0;
            }
            #cssmenu .has-sub .has-sub:hover > ul {
              display: block;
            }
            #cssmenu .has-sub .has-sub ul {
              display: none;
              position: absolute;
              left: 100%;
              top: 0;
            }
            #cssmenu .has-sub .has-sub ul li a {
              background: #0c7fb0;
              border-bottom: 1px dotted #6db2d0;
            }
            #cssmenu .has-sub .has-sub ul li a:hover {
              background: #095c80;
            }
        </style>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        </head>

        <body>
            <div id='cssmenu'>
            <ul>
              <li><a href='/forum'><span>Forum</span></a></li>
              <li><a href='/portal'><span>Portal</span></a></li>
              <li><a href='/f4-'><span>Recrutamento</span></a></li>
              <li><a href='/memberlist'><span>Membros</span></a></li>
              <li><a href='/groups'><span>Grupos</span></a></li>
              <li><a href='/register'><span>Registrar</span></a></li>
              <li><a href='/login'><span>Login</span></a></li>
            </ul>
            </div>
        </body>
        </html>
Abraços.
Josh

Josh
Super Membro

Membro desde : 03/03/2012
Mensagens : 1170
Pontos : 1512

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu inicial

Mensagem por StyLe® 06.10.12 15:50

Não resulto valeu por tentar


Cade os STAFF que não me ajuda?
avatar

StyLe®
Super Membro

Membro desde : 28/04/2012
Mensagens : 1919
Pontos : 2654

https://ajuda.forumeiros.com/t79652-

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu inicial

Mensagem por StyLe® 06.10.12 19:29

Pode dar como RESOLVIDO nem um staff aff
avatar

StyLe®
Super Membro

Membro desde : 28/04/2012
Mensagens : 1919
Pontos : 2654

https://ajuda.forumeiros.com/t79652-

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum

Permissões neste sub-fórum
Não podes responder a tópicos