Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

s3c0

DIV pai acompanhar altura ul filho

Recommended Posts

Olá pessoal,

 

boa tarde. Tem alguma forma da DIV pai acompanhar a altura da ul filho?

 

<div class="navPages-container" >
        <div class="container">
            <nav class="navPages" style="text-align:left;">
				<ul class="navPages-list">
					<li class="navPages-item" style="z-index:3; width:122px;" onmouseover="mostra_fundo();" onmouseout="esconde_fundo();"><a class="navPages-action has-subMenu" href=""><i class="fa fa-list"></i> Categorias</a>
						<div id="menu2">
							<ul class="parent-menu">
								<li onmouseover="document.imgcategoria.src='https://www.vagparts.com.br/departamentos/acessorios.jpg'" onmouseout="document.imgcategoria.src='https://www.vagparts.com.br/departamentos/departamentos.jpg'"><a href="#1">Home & Kitchen</a>
									<div class="categoria">
										<ul>
											<li><a href="#11">item1</a></li>
											<li><a href="#12" onmouseover="document.imgcategoria.src='https://www.vagparts.com.br/departamentos/acessorios.jpg'" onmouseout="document.imgcategoria.src='https://www.vagparts.com.br/departamentos/departamentos.jpg'">item2</a></li>
											<li><a href="#13"><i class="fa fa-list"></i> <span>Item 1</span> <i class="fas fa-angle-right" style="float:right; margin-right:10px;line-height:35px;"></i></a>
											<div class="subcategoria">
												<ul >
													<li><a href="#111">item</a></li>
													<li><a href="#112">Even more</a></li>
													<li><a href="#113">item</a></li>
													<li><a href="#114">item</a></li>
													<li><a href="#115">item</a></li>
												</ul>					
											</div>
											</li>
											<li><a href="#14">item4</a></li>
											<li><a href="#15">item5</a></li>
											<li><a href="#16">item6</a></li>
										</ul>
									</div>
								</li>
#menu2{position:absolute;z-index:3;margin-top:16px; width:1170px; margin-left:-19px;background:#fff;box-shadow:0 1px 10px rgba(0,0,0,.1);border:1px solid #d0d0d0;border-radius:0 0 3px 3px; min-height:300px;display:none;font-size:14px;font-weight: bold;}
		.parent-menu{list-style-type:none;padding:15px 0px;width:270px;float:left;margin-top:0;position:absolute;line-height:35px;}
		.parent-menu li:hover{background:#ccc;cursor:pointer;}
		.categoria{display:none;width:270px;left:255px;line-height:35px;list-style-type:none;position: absolute;top: 15px;a {line-height: 35px;}}
		.categoria ul li:hover{background:#ccc;cursor:pointer;}
		.categoria ul{list-style-type:none;width:270px;}
		.categoria ul li{list-style-type:none;width:270px;}
		.subcategoria{display:none;width:270px;left:270px;line-height:35px;list-style-type:none;position: absolute;top: 0px;a {line-height: 35px;}}
		.subcategoria ul{list-style-type:none;width:270px;}
		.subcategoria ul li{list-style-type:none;width:270px;}
		.subcategoria ul li:hover{background:#ccc;cursor:pointer;}
		.navPages-item:hover #menu2{display:block;}
		.parent-menu li:hover .categoria{display:block;}
		.categoria ul li:hover .subcategoria{display:block;}
		#menu2 ul a { margin: 0px; display: block; width: 100%; height: 100%; }
		#menu2 ul li a { margin: 0px; display: block; width: 100%; height: 100%; }

 

menu.jpg

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá @winterjeferson obrigado pela rápida resposta.

 

porém a primeira coluna, perdeu o seu alinhamento. Sabe o motivo?

 

Já na segunda coluna é possível acompanhar a altura da primeira?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá @winterjeferson, desculpa pela demora em responder..

 

A questão do alinhamento, eu consegui resolver, porém me surgiu um outro problema.

 

Na segunda coluna, está "estourando" a altura do menu.

 

Tem alguma forma de corrigir?

 

Desde já agradeço sua ajuda

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por ILR master
      Fala pessoal, tudo bem?
       
      Eu tenho o seguinte código:
       
      <script>
         $(function(){
      var jElement = $('.fixar_banner');
      $(window).scroll(function(){
          if ( $(this).scrollTop() > 120 ){
              jElement.css({
                  'position':'fixed',
                  'top':'10px'
              });
          }else{
              jElement.css({
                  'position':'relative',
                  'top':'auto'
              });
          }
      });
      });
      </script>
       
      Porém, eu quero que a div fique fixa até que outro elemento apareça na tela, tipo o rodapé da página por exemplo. É mais ou menos como a página de notícia do uol.
      https://noticias.uol.com.br/internacional/ultimas-noticias/2025/01/19/sonho-americano-brasileiros-moram-em-carro-e-buscam-comida-no-lixo-nos-eua.htm
       
      Espero ter sido claro.
       
      Obrigado :)
       
    • Por Alessandro Bodão
      Fala galerinha, 
       
      Tenho um container com um título (h1) no cabeçalho do meu site, esse container ocupa metade da tela (50vw), e eu gostaria que esse título ocupasse toda a largura desse container, independente do seu tamanho ou do tamanho do monitor, de forma com que a palavra tenha exactamente o mesmo tamanho do container (vou anexar uma foto de exemplo). Já tentei todos os valores pra essa h1, como % e vw... mas nada parece fazer sentido.
       
       

    • Por FabianoSouza
      Galera, por padrão, cada LI que se cria (via jscript), vai parar na parte inferior da UL, né?
      Há uma maneira de fazer a LI criada pela minha function ir para o topo da lista dentro da UL?
       
       
    • Por Giovanird
      Olá a todos!
      tenho varias divs com o mesmo ID e nome de classe. Preciso que a cor da div seja conforme uma escala de valores.
      Estou tentando pegar o valor pelo nome da classe, pois as divs possuem o mesmo id e não tive sucesso. Segue script:
      <div class="planos" id="1" value="74">74</div> <div class="planos" id="1" value="29">29</div> <div class="planos" id="1" value="55">55</div> <div class="planos" id="1" value="74">74</div> <div class="planos" id="1" value="63">63</div> <div class="planos" id="1" value="55">55</div> <script type="text/javascript"> var valueElement = document.getElementsByClassName('.planos').getAttribute('value'); console.log(valueElement); if (valueElement >= "70") { document.getElementsByClassName('.planos').style.backgroundColor == '#4caf50'; } else if (valueElement >= "50" && valueElement <= "69") { document.getElementsByClassName('.planos').style.backgroundColor == '#ffbc00'; } else { document.getElementsByClassName('.planos').style.backgroundColor == '#f44336'; } </script>  
       
    • Por GOD
      Quero um código div ou qualquer outra forma, para atingi esse resultado do link
       https://drive.google.com/file/d/0B8Ssi9zuKdQWMExWeVpGUXN0MlRsUzdmdGRuTFl2eU1yejB3/viewocal
       
      Para ficar nesse local.
      https://drive.google.com/file/d/0B8Ssi9zuKdQWeGZSSnVBaFBxM1FUN1hEeWdrRzhTNWI0Q01Z/view
       
      Meu objetivo é que em cada quadro da div, fique uma noticia de um site especifico, que pretendo colocar através de plugin rss.
       
       
      Enfim espero uma ajuda sobre como posso fazer isso
       
       
×

Informação importante

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