Ir para conteúdo
BenficaScore

Menu e Submenu HTML e CSS

Recommended Posts

Olá a todos

alguém me pode ajudar a conseguir mudar a largura de cada submenu conforme o tamanho dos links, Isto é, se é possível um submenu ter 100px de largura, outro 120px, mas que alarguem de forma automática, conforme comprimento texto do link sem dobrar? Por enquanto consegui que ficasse conforme o tamanho de cada link, ao pôr width: auto; logo abaixo de --COR DE FUNDO DO SUB MENU--*/ ... mas queria que toda a borda do submenu acompanhasse o mesmo tamanho.

O código é o seguinte:

 

/* NavbarMenu
--------------------------- */
#NavbarMenu {
background: #cc0000;/*--COR DE FUNDO DO MENU--*/
width: 1022px;/*--TAMANHO DO MENU--*/
float: left;
height: 35px;/*--ALTURA DAS CASAS--*/
font-size: 13px;/*--TAMANHO DA FONTE--*/
font-family: arial;/*--TIPO DA FONTE--*/
color: #fff;/*--cor do link--*//*--COR DA FONTE--*/
font-weight: none;
margin: 0;
padding: 10;
text-transform: none;
}
#NavbarMenuleft {
width: 100%;
float: left;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: yes;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF; /*--edite cor do link--*/
display: block;
font-size: 13px;/*--tamanho da fonte do link--*/
font-family: arial;
font-weight: bold;
text-transform: none;
margin: 0;
padding: 9px 15px 8px;
border-right: 1px solid #FFFFFF;/*--COR E TIPO DE BORDA--*/
}
#nav li a:hover, #nav li a:active {
background: #ffffff;/*--COR DE FUNDO EM ESTADO HOVER--*/
color: #FFF; /*--COR DA FONTE EM ESTADO HOVER--*/
margin: 0;
padding: 9px 15px 8px;
text-decoration: yes;  color: #000000;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #cc0000;/*--COR DE FUNDO DO SUB MENU--*/
width: auto;
color: #FFF; /*--cor do link--*/
font-size: 13px;/*--TAMANHO DA FONTE DO SUB MENU--*/
font-family: Arial;/*--FONTE DO SUB MENU--*/
font-weight: normal;
text-transform: none;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #cc0000;
border-left: 2px solid #cc0000;
border-right: 2px solid #cc0000;
}
#nav li li a:hover, #nav li li a:active {
background: #ffffff;/*--COR DE FUNDO DO SUB MENU EM ESTADO HOVER--*/
color: #FFF; /*--COR DA FONTE DO SUB MENU EM ESTADO HOVER--*/
text-transform: yes;  color: #000000; font-weight: bold;
padding: 7px 10px;
}
#nav li {float: left; padding: 0;
}
#nav li ul {z-index: 1000; position: absolute; left: -999em; height: auto; width: 132px; margin: 0; padding: 0;
}
#nav li ul a {width: 100px;
}
#nav li ul ul {margin: -32px 0 0 171px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {left: auto;}
#nav li:hover, #nav li.sfhover {position: static;}

 

 

------------------------------------------------------------------------------------------------------
 

<div id="NavbarMenu">
<div id="NavbarMenuleft">
<ul id="nav"> 

<li><a href="">AAAAAA &#9662;</a>
<ul class="scroll">
<li><a href="">111111111111111</a></li>
<li><a href="">2222</a></li>
<li><a href="">33333333</a></li>
<li><a href="">444444444444</a></li>
</ul></li>
<li> 

<li><a href="">BBBBBB &#9662;</a>
<ul class="scroll">
<li><a href="">555555</a></li>
<li><a href="">6666666666</a></li>
<li><a href="">7777777</a></li>
<li><a href="">888888888888888</a></li>
</ul></li>
<li> 

<li><a href="">CCCCCC &#9662;</a>
<ul class="scroll">
<li><a href="">999999</a></li>
<li><a href="">000000</a></li>
<li><a href="">000000</a></li>
<li><a href="">00000000</a></li>
</ul></li>
<li> 

<li><a href="">DDDDDD &#9662;</a>
<ul class="scroll">
<li><a href="">111111111111111</a></li>
<li><a href="">22222222222222222</a></li>
<li><a href="">33333333333333333333</a></li>
<li><a href="">44444444444444444</a></li>
</ul></li>
<li> 

<li><a href="">EEEEEE &#9662;</a>
<ul class="scroll">
<li><a href="">555</a></li>
<li><a href="">6666</a></li>
<li><a href="">777</a></li>
<li><a href="">888</a></li>
</ul></li>
<li> 

<li><a href="">FFFFFF &#9662;</a>
<ul class="scroll">
<li><a href="">99999999999</a></li>
<li><a href="">00000000</a></li>
<li><a href="">0000000000000</a></li>
<li><a href="">0000</a></li>
</ul></li>
<li> 

</li></li></li></li></li></li></ul>
<li>     
    </li></div></div>

 


Exemplos: 
 

Fixo 1.png

Fixo 2.png

Fixo 3.png

Editado por BenficaScore

Compartilhar este post


Link para o post
Compartilhar em outros sites

@BenficaScore
Para solicitar esclarecimentos sobre códigos não transcreva seus códigos, use uma interface online para mostrar os códigos

FUNCIONANDO.
Visite https://jsfiddle.net/ cole os códigos nos campos salve e poste o link juntamente com a sua dúvida.
É muito mais rápido, eficiente e fácil de se analisar e postar a solução.
O código que você postou não serve para nada e mesmo se tivesse postado a HTML quem vai analisar teria que criar um arquivo com os códigos e verificar o funcionamento. Você está transferindo para quem quer ajudar a tarefa "chata" de criar o arquivo.
A tarefa é sua que está interessado na solução, portanto use o JSFIDDLE ou outra ferramenta online e eu ou alguém que gosta de prestar ajuda neste fórum iremos analisar.
Nota: A figura que você postou é útil e está OK pois esclarece sua dúvida. 

Boa sorte.
  

  • Gostei 2
  • Obrigado! 1
  • +1 1

Compartilhar este post


Link para o post
Compartilhar em outros sites
19 horas atrás, angelorubin disse:

Se pudesse postar o HTML também, ajudaria.

 

Peço desculpa, fui distraído. Já editei e postei o código HTML junto. Muito obrigado pela atenção.

Compartilhar este post


Link para o post
Compartilhar em outros sites
19 horas atrás, angelorubin disse:

Se pudesse postar o HTML também, ajudaria.

 

15 horas atrás, Maujor disse:

@BenficaScore
Para solicitar esclarecimentos sobre códigos não transcreva seus códigos, use uma interface online para mostrar os códigos

FUNCIONANDO.
Visite https://jsfiddle.net/ cole os códigos nos campos salve e poste o link juntamente com a sua dúvida.
É muito mais rápido, eficiente e fácil de se analisar e postar a solução.
O código que você postou não serve para nada e mesmo se tivesse postado a HTML quem vai analisar teria que criar um arquivo com os códigos e verificar o funcionamento. Você está transferindo para quem quer ajudar a tarefa "chata" de criar o arquivo.
A tarefa é sua que está interessado na solução, portanto use o JSFIDDLE ou outra ferramenta online e eu ou alguém que gosta de prestar ajuda neste fórum iremos analisar.
Nota: A figura que você postou é útil e está OK pois esclarece sua dúvida. 

Boa sorte.
  

 

Muito obrigado, não conhecia essa forma. 

https://jsfiddle.net/Betencourt/kpmpaesz/

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@BenficaScore

Maravilha! Agora ficou fácil de resolver.
1- Você precisa corrigir a marcação HTML, pois existem várias aberturas e fechamentos da tag LI sem necessidade.

Marquei elas na solução que propus para que você as retire da marcação.
2-) Para controlar a largura de cada submenu separadamente, com uso de CSS, você precisa definir uma largura fixa explicita para cada submenu.
Tal largura será aquela suficiente para acomodar o texto do link mais largo em cada submenu.
No final da sua folha de estilo acrescentei as regras CSS para definir aquela larguras.

Veja a solução em https://jsfiddle.net/maujor/kpmpaesz/2/

  • +1 1

Compartilhar este post


Link para o post
Compartilhar em outros sites
6 horas atrás, Maujor disse:

@BenficaScore

Maravilha! Agora ficou fácil de resolver.
1- Você precisa corrigir a marcação HTML, pois existem várias aberturas e fechamentos da tag LI sem necessidade.

Marquei elas na solução que propus para que você as retire da marcação.
2-) Para controlar a largura de cada submenu separadamente, com uso de CSS, você precisa definir uma largura fixa explicita para cada submenu.
Tal largura será aquela suficiente para acomodar o texto do link mais largo em cada submenu.
No final da sua folha de estilo acrescentei as regras CSS para definir aquela larguras.

Veja a solução em https://jsfiddle.net/maujor/kpmpaesz/2/

 

Génio Maujor! Muitíssimo obrigado. Sou novo aqui nem sei bem como pontuar você correctamente. Vou testar então na página.

Compartilhar este post


Link para o post
Compartilhar em outros sites
1 hora atrás, BenficaScore disse:

 

Génio Maujor! Muitíssimo obrigado. Sou novo aqui nem sei bem como pontuar você correctamente. Vou testar então na página.

 

8 horas atrás, Maujor disse:

@BenficaScore

Maravilha! Agora ficou fácil de resolver.
1- Você precisa corrigir a marcação HTML, pois existem várias aberturas e fechamentos da tag LI sem necessidade.

Marquei elas na solução que propus para que você as retire da marcação.
2-) Para controlar a largura de cada submenu separadamente, com uso de CSS, você precisa definir uma largura fixa explicita para cada submenu.
Tal largura será aquela suficiente para acomodar o texto do link mais largo em cada submenu.
No final da sua folha de estilo acrescentei as regras CSS para definir aquela larguras.

Veja a solução em https://jsfiddle.net/maujor/kpmpaesz/2/

 

Tem só um problema ainda. É que se eu aumentar o número de menus, de 6 para 10, os últimos 2 submenus não estão funcionando, mesmo depois de eu aumentar correctamente no CSS até 10 ( #NavbarMenuleft > #nav li:nth-child(10) li > a  {width: 95px;} ) . Mas vou tentar descobrir qual o problema.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@BenficaScore

 

OK.
1-) Se não conseguir, corrija a HTML e CSS do mesmo JSFiddle que você postou e nele acrescente
os submenus até 10 e as regras CSS e clique em Update na interface do JSFiddle.
Com isso será acrescido o número 1 a URL do seu Fiddle. Poste a nova URL.

2-) Quando postar aqui não use o botão + Citar para responder a alguém.

Basta você começar sua resposta com @Nome.

No seu post anterior bastava escrever @Maujor sem  citar nada.
Observe que a citação de tudo que eu escrevi só serve para ocupar espaço.

Compartilhar este post


Link para o post
Compartilhar em outros sites
Em 07/02/2018 at 13:32, Maujor disse:

@BenficaScore

 

OK.
1-) Se não conseguir, corrija a HTML e CSS do mesmo JSFiddle que você postou e nele acrescente
os submenus até 10 e as regras CSS e clique em Update na interface do JSFiddle.
Com isso será acrescido o número 1 a URL do seu Fiddle. Poste a nova URL.

2-) Quando postar aqui não use o botão + Citar para responder a alguém.

Basta você começar sua resposta com @Nome.

No seu post anterior bastava escrever @Maujor sem  citar nada.
Observe que a citação de tudo que eu escrevi só serve para ocupar espaço.

Boas Sr @Maujor,

E Submenu e Subniveis, será que é possível adaptar neste código?

Compartilhar este post


Link para o post
Compartilhar em outros sites
Em 04/08/2018 at 17:50, Maujor disse:

@BenficaScore
Exemplo de mais um nível no link AAAAAA, submenu XXX.
Em: https://jsfiddle.net/kpmpaesz/153/

@Maujor muito obrigado pela resposta. Eu já tinha adaptado essas regras, até em outros códigos, mas não funciona no blogger. Não sei qual a entrave que não deixa esses níveis abrir correctamente no blogger. Vejo outros blogs com esses menus funcionando direito, mas eu não estou conseguindo. Se o Maujor não se importar de experimentar no blogger de testes, eu dou-lhe a passe via e-mail. O resultado foi este: https://benficascoreredirect.blogspot.com/

Compartilhar este post


Link para o post
Compartilhar em outros sites

@BenficaScore

Antes de passar o passe para eu verificar acrescente a diretiva !important nas declarações CSS do submenu.
Se funcionar é porque existem regras CSS do Blogger que estão subscrevendo as regras que você criou.

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por matheusmacias
      Alguém sabe resolver isso?

    • Por fabioseco
      Ola pessoal, meu dw cs6 não tem as tags de css flexbox.
      Alguém sabe como adiciona-las no dw cs6???
    • Por Solo
      Boa noite  pessoal, estou com um problema, sou iniciante me php e estou em duvida com como posso fazer uma paginacao de produtos do banco de dados...... alguem poderia me ajudar ou me indicar um tutorial ???
       
      <?php
      error_reporting(0);
      ini_set(“display_errors”, 0 );
      require_once("conexao.php"); 
         $produtos = "SELECT produto_ID, nome_produto, imagem_produto, valor ";
          $produtos .= "FROM produto ";
          $resultado = mysqli_query($conecta, $produtos);
          if(!$resultado) {
              die("Falha na consulta ao banco");   
          }
      ?> 
       
       
       
      AONDE LISTA OS PRODUTOS 
       
       
       
          <div class="rowproducts">
          <div id="listagem_produtos2" class="">
            <?php while($linha=mysqli_fetch_assoc($resultado)) {   ?>
                       
                      <ul>
                          <div class="class22">
                          
                          <li>
                              
                              <img  class="img-responsive"  height="200" width="200" src="<?php echo $linha["imagem_produto"]?> "  >
                              </li>
                              
                              <li class="nproduto"><?php echo $linha["nome_produto"]?></li>
                               <li class="nproduto">R$ <?php echo $linha["valor"]?></li>
                          </div>
                          </ul>
                          
                          
                          
                          
                          
                          
                          
                      
                  <?php } ?>
                      
                      
                      
                    </div>
                    </div>
       
       
       
       
    • Por lindomar55
      ola amigos preciso de uma ajudinha, estou montando uma aplicaçao usando vb.net windows forms. nela tenho um botao onde chamo uma url no chrome com o seguinte comando.
      Private Sub Btn_abrir_site_Click(sender As Object, e As EventArgs) Handles Btn_abrir_site.Click
              Dim url As String = “https://www.rico.com.você/dashboard/tesouro-direto/“
              Process.Start(url)
          End Sub
      no google entao eu acesso com meu logim manualmente(prefiro assim). e em realizo uma serie de operaçoes, chega um determinado momento que preciso passar passar os dados que o site me apresenta entao(apos as operaçoes) para o aplicativo. ai é que esta o problema. neste ponto estou boiando.
      no codigo abaixo por exemplo: precisava obter os valores 12,36 e 8806,84 de forma automatica e colocar em textbox.
      vi exemplos na net que mostram com webbrowser porem eu prefiro que seja com o chrome. e nesses exemplos ele abre a pagina e ja obtem os dados. eu preciso trabalhar na pagina muiiiito e so depois baixar os dados programaticamente.
      qualquer ajuda sera bem vinda....
       

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.