Dúvida menu css maker

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

Resolvido Dúvida menu css maker

Mensagem por LeviFernandes em 09/05/13, 11:36 am

Qual é minha questão:
Olá amigos , eu estou com a seguinte dúvida:
Eu coloquei esse menu no meu fórum

Porém eu gostaria de mudar a cor dele, gostaria de acrescentar menu nele, e gostaria de corrigir o seguinte erro

Percebe que o sub menu não aparece.

Então deixa eu resumir eu quero menu assim:
Fórum
Portal
Todos gta - gta
                 gta 2
                 etc...
Computadores
Assuntos gerais


Claro que a cima é um exemplo, mas eu gostaria de acrescentar mais menus e sub menus ali onde esta escrito todos gta, e corrigir aquele erro que não parace o resto do sub menu

Endereço do meu fórum:
http://gta-forum.forumeiros.com

Versão do fórum:
PHPBB3


Última edição por LeviFernandes em 10/05/13, 12:40 pm, editado 1 vez(es)
avatar

LeviFernandes
Usuário avançado

Masculino
Inscrito dia : 03/12/2008
Mensagens : 332
Pontos Ativos : 415

Ver perfil do usuário http://gta-forum.forumeiros.com

Resolvido Re: Dúvida menu css maker

Mensagem por BrunoH. em 09/05/13, 10:37 pm

Olá,
O senhor poderia nos conceder o código utilizado neste Menu Maker CSS? Para que eu possa verificar os CSS e fazer a edição do mesmo.

Caso não deseja nos conceder o tal código, basta o senhor retirar seu fórum de manutenção.

Até mais.
avatar

BrunoH.
Principal contribuidor
Principal contribuidor

Inscrito dia : 15/06/2012
Mensagens : 7675
Pontos Ativos : 10382

Ver perfil do usuário http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Resolvido Re: Dúvida menu css maker

Mensagem por LeviFernandes em 10/05/13, 09:14 am

vou passar o código.

Código:
<div id='cssmenu'>
<ul>
<li class='active'><a href='http://gta-forum.forumeiros.com/forum'><span>Fórum
<span></a></li>
<li class='active'><a href='http://gta-forum.forumeiros.com/'><span>Portal
</span></a></li>
<li class='has-sub'><a href='#'><span>Todos GTA</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Product 1</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Product 2</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
<style>
/* Some stylesheet reset */
#cssmenu > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  line-height: 1;
}

/* The container */
#cssmenu > ul {
  display: block;
  position: relative;
  width: 150px;
}

  /* The list elements which contain the links */
  #cssmenu > ul li {
      display: block;
      position: relative;
      margin: 0;
      padding: 0;
      width: 150px; 
  }

      /* General link styling */
      #cssmenu > ul li a {
        /* Layout */
        display: block;
        position: relative;
        margin: 0;
        border-top: 1px dotted #3a3a3a;
        border-bottom: 1px dotted #1b1b1b;
        padding: 11px 20px;
        width: 110px;

        /* Typography */
        font-family: Helvetica, Arial, sans-serif;
        color: #d8d8d8;
        text-decoration: none;
        text-transform: uppercase;
        text-shadow: 0 1px 1px #000;
        font-size: 13px;
        font-weight: 300;

        /* Background & effects */
        background: #282828;
      }

      /* Rounded corners for the first link of the menu/submenus */
      #cssmenu > ul li:first-child>a {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        border-top: 0;
      }

      /* Rounded corners for the last link of the menu/submenus */
      #cssmenu > ul li:last-child>a {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border-bottom: 0;
      }


      /* The hover state of the menu/submenu links */
      #cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
        color: #fff;
        text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
        background: #f23f37;
        background: -webkit-linear-gradient(bottom, #f23f37, #f45d57);
        background: -ms-linear-gradient(bottom, #f23f37, #f45d57);
        background: -moz-linear-gradient(bottom, #f23f37, #f45d57);
        background: -o-linear-gradient(bottom, #f23f37, #f45d57);
        border-color: transparent;
      }

      /* The arrow indicating a submenu */
      #cssmenu > ul .has-sub>a::after {
        content: '';
        position: absolute;
        top: 16px;
        right: 10px;
        width: 0px;
        height: 0px;

        /* Creating the arrow using borders */
        border: 4px solid transparent;
        border-left: 4px solid #d8d8d8;
      }
      /* The same arrow, but with a darker color, to create the shadow effect */
      #cssmenu > ul .has-sub>a::before {
        content: '';
        position: absolute;
        top: 17px;
        right: 10px;
        width: 0px;
        height: 0px;

        /* Creating the arrow using borders */
        border: 4px solid transparent;
        border-left: 4px solid #000;
      }

      /* Changing the color of the arrow on hover */
      #cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
        border-left: 4px solid #fff;
      }

      #cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
        border-left: 4px solid rgba(0, 0, 0, .3);
      }

 
      /* THE SUBMENUS */
      #cssmenu > ul ul {
        position: absolute;
        left: 150px;
        top: -9999px;
        padding-left: 5px;
        opacity: 0;
        /* The fade effect, created using an opacity transition */
        -webkit-transition: opacity .3s ease-in;
        -moz-transition: opacity .3s ease-in;
        -o-transition: opacity .3s ease-in;
        -ms-transition: opacity .3s ease-in;
      }

      /* Showing the submenu when the user is hovering the parent link */
      #cssmenu > ul li:hover>ul {
        top: 0px;
        opacity: 1;
      }</style>
avatar

LeviFernandes
Usuário avançado

Masculino
Inscrito dia : 03/12/2008
Mensagens : 332
Pontos Ativos : 415

Ver perfil do usuário http://gta-forum.forumeiros.com

Resolvido Re: Dúvida menu css maker

Mensagem por Hashimaru em 10/05/13, 09:18 am

Olá,O codigo utilizado por você se encontra normal,No entanto sugiro almentar a largura de seus Widgets para caber o Efeito Drop.

Adicionei mas Submenus:

Código:
        <div id='cssmenu'>
        <ul>
        <li class='active'><a href='http://gta-forum.forumeiros.com/forum'><span>Fórum
        <span></a></li>
        <li class='active'><a href='http://gta-forum.forumeiros.com/'><span>Portal
        </span></a></li>
        <li class='has-sub'><a href='#'><span>Todos GTA</span></a>
        <ul>
        <li class='has-sub'><a href='#'><span>Product 1</span></a>
        <ul>
        <li class='has-sub'><a href='#'><span>Product 1</span></a>
        <ul>
        <li><a href='#'><span>Sub Item</span></a></li>
        <li class='last'><a href='#'><span>Sub Item</span></a></li>
        </ul>
        </li>
        <li class='has-sub'><a href='#'><span>Product 2</span></a>
        <ul>
        <li><a href='#'><span>Sub Item</span></a></li>
        <li class='last'><a href='#'><span>Sub Item</span></a></li>
        </ul></ul>
        </li>
        </ul>
        </li>
        <li><a href='#'><span>About</span></a></li>
        <li class='last'><a href='#'><span>Contact</span></a></li>
        </ul>
        </div>
        <style>
        /* Some stylesheet reset */
        #cssmenu > ul {
          list-style: none;
          margin: 0;
          padding: 0;
          vertical-align: baseline;
          line-height: 1;
        }

        /* The container */
        #cssmenu > ul {
          display: block;
          position: relative;
          width: 150px;
        }

          /* The list elements which contain the links */
          #cssmenu > ul li {
              display: block;
              position: relative;
              margin: 0;
              padding: 0;
              width: 150px; 
          }

              /* General link styling */
              #cssmenu > ul li a {
                /* Layout */
                display: block;
                position: relative;
                margin: 0;
                border-top: 1px dotted #3a3a3a;
                border-bottom: 1px dotted #1b1b1b;
                padding: 11px 20px;
                width: 110px;

                /* Typography */
                font-family: Helvetica, Arial, sans-serif;
                color: #d8d8d8;
                text-decoration: none;
                text-transform: uppercase;
                text-shadow: 0 1px 1px #000;
                font-size: 13px;
                font-weight: 300;

                /* Background & effects */
                background: #282828;
              }

              /* Rounded corners for the first link of the menu/submenus */
              #cssmenu > ul li:first-child>a {
                border-top-left-radius: 4px;
                border-top-right-radius: 4px;
                border-top: 0;
              }

              /* Rounded corners for the last link of the menu/submenus */
              #cssmenu > ul li:last-child>a {
                border-bottom-left-radius: 4px;
                border-bottom-right-radius: 4px;
                border-bottom: 0;
              }


              /* The hover state of the menu/submenu links */
              #cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
                color: #fff;
                text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
                background: #f23f37;
                background: -webkit-linear-gradient(bottom, #f23f37, #f45d57);
                background: -ms-linear-gradient(bottom, #f23f37, #f45d57);
                background: -moz-linear-gradient(bottom, #f23f37, #f45d57);
                background: -o-linear-gradient(bottom, #f23f37, #f45d57);
                border-color: transparent;
              }

              /* The arrow indicating a submenu */
              #cssmenu > ul .has-sub>a::after {
                content: '';
                position: absolute;
                top: 16px;
                right: 10px;
                width: 0px;
                height: 0px;

                /* Creating the arrow using borders */
                border: 4px solid transparent;
                border-left: 4px solid #d8d8d8;
              }
              /* The same arrow, but with a darker color, to create the shadow effect */
              #cssmenu > ul .has-sub>a::before {
                content: '';
                position: absolute;
                top: 17px;
                right: 10px;
                width: 0px;
                height: 0px;

                /* Creating the arrow using borders */
                border: 4px solid transparent;
                border-left: 4px solid #000;
              }

              /* Changing the color of the arrow on hover */
              #cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
                border-left: 4px solid #fff;
              }

              #cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
                border-left: 4px solid rgba(0, 0, 0, .3);
              }

         
              /* THE SUBMENUS */
              #cssmenu > ul ul {
                position: absolute;
                left: 150px;
                top: -9999px;
                padding-left: 5px;
                opacity: 0;
                /* The fade effect, created using an opacity transition */
                -webkit-transition: opacity .3s ease-in;
                -moz-transition: opacity .3s ease-in;
                -o-transition: opacity .3s ease-in;
                -ms-transition: opacity .3s ease-in;
              }

              /* Showing the submenu when the user is hovering the parent link */
              #cssmenu > ul li:hover>ul {
                top: 0px;
                opacity: 1;
              }</style>

Até mais.
avatar

Hashimaru
Nível 3

Masculino
Inscrito dia : 05/05/2013
Mensagens : 23
Pontos Ativos : 27

Ver perfil do usuário

Resolvido Re: Dúvida menu css maker

Mensagem por LeviFernandes em 10/05/13, 09:45 am

para criar mais submenus é apenas utilizando este código?
<li class='has-sub'><a href='#'><span>Product 1</span></a>
<ul>

ou tem que adicionar mais códigos la em baixo?
avatar

LeviFernandes
Usuário avançado

Masculino
Inscrito dia : 03/12/2008
Mensagens : 332
Pontos Ativos : 415

Ver perfil do usuário http://gta-forum.forumeiros.com

Resolvido Re: Dúvida menu css maker

Mensagem por LeviFernandes em 10/05/13, 09:48 am

viu, vc adicionou mais submenus e ele ficou apenas com 1 sub menu.
Creio que tem algo errado, não é preciso almentar largura no widget, o fórum que visitei que contia este menu a largura do widget dele era do mesmo tamanho que o meu, se eu almentar widget do fórum vai ficar zuado
avatar

LeviFernandes
Usuário avançado

Masculino
Inscrito dia : 03/12/2008
Mensagens : 332
Pontos Ativos : 415

Ver perfil do usuário http://gta-forum.forumeiros.com

Resolvido Re: Dúvida menu css maker

Mensagem por LeviFernandes em 10/05/13, 10:00 am

Olha aqui o fórum que o cara colocou menu, porque o dele da e o meu não da?
avatar

LeviFernandes
Usuário avançado

Masculino
Inscrito dia : 03/12/2008
Mensagens : 332
Pontos Ativos : 415

Ver perfil do usuário http://gta-forum.forumeiros.com

Resolvido Re: Dúvida menu css maker

Mensagem por [F]lames em 10/05/13, 10:39 am

Olá,

Adicione á teu CSS:

Código:
.module {background-color: transparent !important;}
#cssmenu {z-index: 9999999999;position: absolute;}
Resultas ?

Até mais.
avatar

[F]lames
Usuário destaque

Masculino
Inscrito dia : 05/10/2012
Mensagens : 866
Pontos Ativos : 1207

Ver perfil do usuário http://www.bestskins.net/

Resolvido Re: Dúvida menu css maker

Mensagem por LeviFernandes em 10/05/13, 11:33 am

ae siim hein, muuuito obrigado.
Agora consegui fazer ele aparecer por completo.

Agora só falta eu acrescentar mais sub menu porque esta osso aqui
avatar

LeviFernandes
Usuário avançado

Masculino
Inscrito dia : 03/12/2008
Mensagens : 332
Pontos Ativos : 415

Ver perfil do usuário http://gta-forum.forumeiros.com

Resolvido Re: Dúvida menu css maker

Mensagem por [F]lames em 10/05/13, 11:40 am

Olá,

Substitua o código usado por este:

Código:
<div id="cssmenu">
<ul>
<li class="active"><a href="http://gta-forum.forumeiros.com/forum"><span>Fórum
<span></span></span></a></li>
<li class="active"><a href="http://gta-forum.forumeiros.com/"><span>Portal
</span></a></li>
<li class="has-sub"><a href="#"><span>Todos GTA</span></a>
<ul>
<li class="has-sub"><a href="#"><span>Product 1</span></a>
<ul>
<li><a href="#"><span>Sub Item</span></a></li>
<li class="last"><a href="#"><span>Sub Item</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Product 2</span></a>
<ul>
<li><a href="#"><span>Sub Item</span></a></li>
<li class="last"><a href="#"><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li><li class="has-sub"><a href="#"><span>New submenu</span></a>
<ul>
<li class="has-sub"><a href="#"><span>Product 1</span></a>
<ul>
<li><a href="#"><span>Sub Item</span></a></li>
<li class="last"><a href="#"><span>Sub Item</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Product 2</span></a>
<ul>
<li><a href="#"><span>Sub Item</span></a></li>
<li class="last"><a href="#"><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><span>About</span></a></li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div><style>
        /* Some stylesheet reset */
        #cssmenu > ul {
          list-style: none;
          margin: 0;
          padding: 0;
          vertical-align: baseline;
          line-height: 1;
        }

        /* The container */
        #cssmenu > ul {
          display: block;
          position: relative;
          width: 150px;
        }

          /* The list elements which contain the links */
          #cssmenu > ul li {
              display: block;
              position: relative;
              margin: 0;
              padding: 0;
              width: 150px; 
          }

              /* General link styling */
              #cssmenu > ul li a {
                /* Layout */
                display: block;
                position: relative;
                margin: 0;
                border-top: 1px dotted #3a3a3a;
                border-bottom: 1px dotted #1b1b1b;
                padding: 11px 20px;
                width: 110px;

                /* Typography */
                font-family: Helvetica, Arial, sans-serif;
                color: #d8d8d8;
                text-decoration: none;
                text-transform: uppercase;
                text-shadow: 0 1px 1px #000;
                font-size: 13px;
                font-weight: 300;

                /* Background & effects */
                background: #282828;
              }

              /* Rounded corners for the first link of the menu/submenus */
              #cssmenu > ul li:first-child>a {
                border-top-left-radius: 4px;
                border-top-right-radius: 4px;
                border-top: 0;
              }

              /* Rounded corners for the last link of the menu/submenus */
              #cssmenu > ul li:last-child>a {
                border-bottom-left-radius: 4px;
                border-bottom-right-radius: 4px;
                border-bottom: 0;
              }


              /* The hover state of the menu/submenu links */
              #cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
                color: #fff;
                text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
                background: #f23f37;
                background: -webkit-linear-gradient(bottom, #f23f37, #f45d57);
                background: -ms-linear-gradient(bottom, #f23f37, #f45d57);
                background: -moz-linear-gradient(bottom, #f23f37, #f45d57);
                background: -o-linear-gradient(bottom, #f23f37, #f45d57);
                border-color: transparent;
              }

              /* The arrow indicating a submenu */
              #cssmenu > ul .has-sub>a::after {
                content: '';
                position: absolute;
                top: 16px;
                right: 10px;
                width: 0px;
                height: 0px;

                /* Creating the arrow using borders */
                border: 4px solid transparent;
                border-left: 4px solid #d8d8d8;
              }
              /* The same arrow, but with a darker color, to create the shadow effect */
              #cssmenu > ul .has-sub>a::before {
                content: '';
                position: absolute;
                top: 17px;
                right: 10px;
                width: 0px;
                height: 0px;

                /* Creating the arrow using borders */
                border: 4px solid transparent;
                border-left: 4px solid #000;
              }

              /* Changing the color of the arrow on hover */
              #cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
                border-left: 4px solid #fff;
              }

              #cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
                border-left: 4px solid rgba(0, 0, 0, .3);
              }

         
              /* THE SUBMENUS */
              #cssmenu > ul ul {
                position: absolute;
                left: 150px;
                top: -9999px;
                padding-left: 5px;
                opacity: 0;
                /* The fade effect, created using an opacity transition */
                -webkit-transition: opacity .3s ease-in;
                -moz-transition: opacity .3s ease-in;
                -o-transition: opacity .3s ease-in;
                -ms-transition: opacity .3s ease-in;
              }

              /* Showing the submenu when the user is hovering the parent link */
              #cssmenu > ul li:hover>ul {
                top: 0px;
                opacity: 1;
              }</style>
Resulta ?

Até mais.
avatar

[F]lames
Usuário destaque

Masculino
Inscrito dia : 05/10/2012
Mensagens : 866
Pontos Ativos : 1207

Ver perfil do usuário http://www.bestskins.net/

Resolvido Re: Dúvida menu css maker

Mensagem por LeviFernandes em 10/05/13, 12:40 pm

Muito obrigado a todos graças ao código acima ja catei as manhas de todo o código desse menu, muito obrigado, muito mesmo, agora já consigo criar mais menus FelizFeliz
avatar

LeviFernandes
Usuário avançado

Masculino
Inscrito dia : 03/12/2008
Mensagens : 332
Pontos Ativos : 415

Ver perfil do usuário http://gta-forum.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum