Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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 ▾</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 ▾</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 ▾</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 ▾</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 ▾</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 ▾</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:
@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.
>
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.
>
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.
@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/
>
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.
>
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.
@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.>
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?@BenficaScore
Exemplo de mais um nível no link AAAAAA, submenu XXX.
Em: https://jsfiddle.net/kpmpaesz/153/
>
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/
@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.
Se pudesse postar o HTML também, ajudaria.