Jump to content
s3c0

Menu Suspenso

Recommended Posts

Olá pessoal,

 

peguei um exemplo de um menu suspenso que utiliza somente CSS, porém não estou conseguindo adaptar para a minha aplicação.

 

Segue abaixo:

 

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}
/*Configurações Padrões*/
ul.menu, .menu li, .menu a{ margin:0; padding:0; list-style:none; text-decoration:none; width:100%; }
ul.menu ul{ position:absolute; display:none;}
 
/* Configurações nivel 1*/
ul.menu{ float:left; font-family:Verdana, Geneva, sans-serif; font-size:15px; padding:0 5px;}
.menu li{ float:left; width:auto; position:relative;}
.menu li a{ display:block; padding:0 20px; line-height:45px; height:45px; float:left; width:240px; transition:all 0.1s linear;  }
 
/* Configurações nivel 2*/
.menu li:hover > ul.submenu-1{ display:block; top:45px; left:0; padding:0px; width:250px;  }
.menu ul.submenu-1 a{ padding:0 20px; width:250px;  }
 
/* Configurações nivel 2*/
.menu li:hover > ul.submenu-2{ display:block; top:0; padding:0px; width:250px; left:240px;  }
.menu ul.submenu-2 a{  width:250px; padding:0 20px;  }
 
/* Configurações nivel 3*/
.menu li:hover > ul.submenu-3{ display:block; top:0; padding:0px; width:250px; left:240px;  }
.menu ul.submenu-3 a{  width:250px; padding:0 20px;  }
 
.column1 {
  float: left;
  width: 250px;
  padding: 10px;
  min-height: 250px;
}

.column1 a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.column1 a:hover {
}
 
.column4 {
  float: right;
  width: 300px;
  padding: 10px;
  min-height: 250px;
  position:relative;
  top:0px;
}

.column4 a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.column4 a:hover {
}

.row:after {
  content: "";
  display: table;
  clear: both;
} 
 
/*Configurações de cores*/
 
/*nivel 1*/
.menu{background:#CCC; }
.menu a{ color:#000; }
.menu li:hover > a{ color:#000; }
 
/*nivel 2*/
.submenu-1{}
.submenu-1 a{color:#000;}
.submenu-1 li:hover > a{ color:#000; }
 
/*nivel 3*/
.submenu-2{ }
.submenu-2 a{color:#000;};
.submenu-2 li:hover > a{ color:#000; }
 
/*nivel 3*/
.submenu-3{ }
.submenu-3 a{color:#000;}
.submenu-3 li:hover > a{ color:#000; }
 
 

 

<ul class="menu"> <!-- Esse é o 1 nivel ou o nivel principal -->
    <li><a href="#">Categorias <i class="fa fa-caret-down"></i></a>		
        <ul class="submenu-1"> <!-- Esse é o 2 nivel ou o primeiro Drop Down -->
            <li><a href="#">Departamento 1 <i class="fa fa-caret-right"></i></a>
                    <ul class="submenu-2"> <!-- Esse é o 3 nivel ou o Segundo Drop Down -->
                        <li><a href="#">Categoria 1</a></li>
                        <li><a href="#">Categoria 11</a></li>
                        <li><a href="#">Categoria 111 <i class="fa fa-caret-right"></i></a>
                                    <ul class="submenu-3"> <!-- Esse é o 4 nivel ou o Terceiro Drop Down -->
                                            <li><a href="#">Subcategoria 1</a></li>
                                            <li><a href="#">Subcategoria 11</a></li>
                                            <li><a href="#">Subcategoria 111</a></li>
                                    </ul>
                        </li>
                    </ul>
             </li>
			  <li><a href="#">Departamento 2 <i class="fa fa-caret-right"></i></a>
                    <ul class="submenu-2"> <!-- Esse é o 3 nivel ou o Segundo Drop Down -->
                        <li><a href="#">Categoria 1</a></li>
                        <li><a href="#">Categoria 11</a></li>
                        <li><a href="#">Categoria 111 <i class="fa fa-caret-right"></i></a>
                                    <ul class="submenu-3"> <!-- Esse é o 4 nivel ou o Terceiro Drop Down -->
                                            <li><a href="#">Subcategoria 1</a></li>
                                            <li><a href="#">Subcategoria 11</a></li>
                                            <li><a href="#">Subcategoria 111</a></li>
                                    </ul>
                        </li>
                    </ul>
             </li>
        </ul>
    </li>
</ul>

 

A primeira imagem é o resultado e a segunda imagem, seria o que estou querendo fazer.

 

Alguém consegue me explicar o que está de errado?

 

Agradeço a atenção de todos!

menu1.jpg

menu2.jpg

Share this post


Link to post
Share on other sites
<ul class="menu"> <!-- Esse é o 1 nivel ou o nivel principal -->
    <li><a href="#">Categorias <i class="fa fa-caret-down"></i></a>		
        <ul class="submenu-1"> <!-- Esse é o 2 nivel ou o primeiro Drop Down -->
            <li><a href="#">Departamento 1 <i class="fa fa-caret-right"></i></a>
                    <ul class="submenu-2"> <!-- Esse é o 3 nivel ou o Segundo Drop Down -->
                        <li><a href="#">Categoria 1</a></li>
                        <li><a href="#">Categoria 11</a></li>
                        <li><a href="#">Categoria 111 <i class="fa fa-caret-right"></i></a>
                                    <ul style="top: -88px;" class="submenu-3"> <!-- Esse é o 4 nivel ou o Terceiro Drop Down -->
                                            <li><a href="#">Subcategoria 1</a></li>
                                            <li><a href="#">Subcategoria 11</a></li>
                                            <li><a href="#">Subcategoria 111</a></li>
                                    </ul>
                        </li>
                    </ul>
             </li>
			  <li><a href="#">Departamento 2 <i class="fa fa-caret-right"></i></a>
                    <ul style="top: -45px;" class="submenu-2"> <!-- Esse é o 3 nivel ou o Segundo Drop Down -->
                        <li><a href="#">Categoria 1</a></li>
                        <li><a href="#">Categoria 11</a></li>
                        <li><a href="#">Categoria 111 <i class="fa fa-caret-right"></i></a>
                                    <ul style="top: -88px;" class="submenu-3"> <!-- Esse é o 4 nivel ou o Terceiro Drop Down -->
                                            <li><a href="#">Subcategoria 1</a></li>
                                            <li><a href="#">Subcategoria 11</a></li>
                                            <li><a href="#">Subcategoria 111</a></li>
                                    </ul>
                        </li>
                    </ul>
             </li>
        </ul>
    </li>
</ul>

ft1.png.6dd05eee1c627064f521d82792ec66d8.png

 

@s3c0 é isso?

Share this post


Link to post
Share on other sites

@Megao obrigado pela resposta.

 

É quase isso. 

 

Se você adicionar mais "departamentos", os demais não ficam no "topo" do menu.

 

Percebi que você especificou a margem TOP tanto do ul como do li, mas não teria como fazer automático? Supondo que não sabemos quando "departamentos" serão adicionados.

 

E na segunda imagem que adicionei, tem uma faixa azul, que seria o fundo do menu.

Share this post


Link to post
Share on other sites
1 hora atrás, s3c0 disse:

Percebi que você especificou a margem TOP tanto do ul como do li, mas não teria como fazer automático? Supondo que não sabemos quando "departamentos" serão adicionados.

Eu editei somente o código HTML, pois meu tempo atualmente está escasso, ou seja; não me sobra tempo para interpretar o CSS da tua página.

1 hora atrás, s3c0 disse:

E na segunda imagem que adicionei, tem uma faixa azul, que seria o fundo do menu.

Não entendi muito bem. Tu quer que o fundo azul apareça junto com as categorias ou fique ali de maneira fixa?

https://www.w3schools.com/css/css_background.asp

Share this post


Link to post
Share on other sites

Olá @Megao obrigado pela ajuda.

 

"Consegui" fazer o tão esperado modelo do menu, porém não consigo finalizar da forma que gostaria.

 

Em anexo, o menu "funcionando", porém o que não estou conseguindo fazer:

 

* A altura da DIV PAI seguir com a altura das DIV´s filho;
* A altura das DIV´s filho (coluna 2 e 3) também não possui altura referente a DIV PAI ou coluna1;

* A imagem ("banner") não fica no topo do menu

 

Segue códigos:

 

.i9-menu{position:absolute;z-index:102;top:auto;display:none;text-align:left;margin-top:15px;border:1px solid #d0d0d0;border-radius:3px; }
.i9-menu a{display: inline-block;}
.ul-menu{list-style-type: none; padding:20px 10px; position:absolute;background-color:#fff;box-shadow:0 1px 10px rgba(0,0,0,.1);width:1170px;margin-left:-19px;display:inline-block;float:left; height:auto; }
.li-menu{color:#000;list-style-type: none; font-size:14px;font-weight: bold; padding:5px; width:152px;}
.navPages-item:hover .i9-menu{display:block;}

#navPages ul li{list-style-type:none;}
#navPages ul li a{text-decoration:none;}
#navPages ul li a:hover{background-color:#ccc;width:152px;}
#navPages ul li > ul{display:none;}
#navPages ul li:hover > ul {display:block;margin-left: 152px;position:absolute;top:0px;padding:25px 30px ;}

 

<div class="navPages-container" id="menu" data-menu>
        <div class="container">
            <nav class="navPages" style="text-align:left;">
				<ul class="navPages-list">
					<li class="navPages-item">
						<a class="navPages-action has-subMenu" href=""><i class="fa fa-list"></i> Categorias</a>
						<div class="i9-menu" id="navPages" tabindex="-1">
							<ul class="ul-menu">
								<li class="li-menu">
									<div><a class="navPage-subMenu-action navPages-action has-subMenu" href="glamourishtml">
										<i class="fa fa-list"></i> <span>Glamouris</span> <i class="fas fa-angle-right" style="float:right; margin-right:10px;line-height:20px;"></i>
										</a>
									</div>
										<ul>
											<li><a href="#">item</a></li>
											<li><a href="#">item</a></li>
											<li><a href="#">item</a></li>
											<li><a href="#">item</a></li>
											<li><a href="#">item</a></li>
											<li><a href="#">item</a></li>
											<li><a href="#">item</a></li>
											<li><a href="#">item</a></li>
											<li><a href="#">item</a></li>
											<li><a href="#">item</a></li>
											<li><a href="#">item</a></li>
											<li><a href="#">item</a></li>
											<li><a href="#">item</a>
												<ul>
													<li><a href="#">item</a></li>
													<li><a href="#">item</a></li>
													<li><a href="#">item</a></li>
													<li><a href="#">item</a></li>
													<li><a href="#">item</a></li>
												</ul>
											</li>
										</ul>	
								</li>
								<li class="li-menu">
									    <div><a class="navPage-subMenu-action navPages-action has-subMenu" href="glamouris.html">
										<i class="fa fa-list"></i> <span>Glamouris</span> <i class="fas fa-angle-right" style="float:right; margin-right:10px;line-height:20px;"></i>
										</a>
									</div>
								</li>
								<li class="li-menu">
									    <div><a class="navPage-subMenu-action navPages-action has-subMenu" href="glamouris.html">
										<i class="fa fa-list"></i> <span>Glamouris</span> <i class="fas fa-angle-right" style="float:right; margin-right:10px;line-height:20px;"></i>
										</a>
									</div>
								</li>
							<div style="float: right; margin-right: 0; width:350px; text-align:center; postion:relative; margin-top:0px;">
								<img src="departamentos/departamentos.jpg" name="categoria" style="border: 1px; solid transparent; border-radius: 3px; width:350px;">
							</div>
							</ul>
						</div>
					</li>
				</ul>
			</nav>
        </div>
</div>

 

O que estaria de errado com o código?

menu1.png

menu2.png

menu3.png

menu4.png

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By luiz monteiro
      Tudo bem pessoal!
      Estou há alguns dias pesquisando e usando diferentes dicas para resolver o problema para que a borda inferior de 1px aplicada em quatro boxes sejam exibidas igualmente no chrome, safari, mozilla, opera e IE.
      A estrutura é a seguinte:
       
      ==========CSS
       
      html, body, span, p, form, img, a, ul, ol, li, table, tr, td, div
      {
          margin: 0px;
          padding: 0px; 
          border:none; 
          outline:none;
          list-style-type:none;
          box-sizing: border-box;
      }
       
      *
      {
          font-size: 14px;
          font-family: verdana, arial;
      }
       
      .container
      {
          width: 608px;
          height: 421px;
          margin: auto;
          margin-top: 50px;
          overflow: hidden;
      }
       
      .box_one, .box_two
      {
          display: inline-block;
          width: 300px;
          height: 250px;
          overflow: hidden;
      }
       
      .border_bottom
      {
          border-bottom: #f5f5f5 solid 1px;
      }
       
      .border_bottom_white
      {
          border-bottom: #fff solid 1px;
      }
       
      .espaco
      {
          margin-right: 2px;
      }
       
      .box_tree, .box_four, .box_fift
      {
          display: inline-block;
          width: 198px;
          height: 149px;
          margin-top: 20px;
          overflow: hidden;
      }
       
      .vertical
      {
          vertical-align: top;
      }
       
       
       
      ============HTML
       
         <content>

              <div class="container">
       
                  <div class="box_one border_bottom_white espaco vertical">box one in first line</div>
                  <div class="box_two border_bottom vertical">box two in first line</div>
                  <div class="box_tree espaco border_bottom vertical">box tree in second line</div>
                  <div class="box_four espaco border_bottom vertical">box four in second line</div>
                  <div class="box_fift border_bottom vertical">box fift in second line</div>
            
          </div>
       
       </content>
       
      O que ocorre é que cada navegador exibe de uma maneira diferente, mesmo resetando o box-sizing: border-box;  o font-size e o font-family.
      Essa configuração do CSS foi a mais próxima do desejável.
      A estrutura do HTML precisa ser essa aí.
      Agradeço desde já.
       
       
       
       
    • By Marlonsantos
      Olá pessoal, eu estou começando meu curso de programação Full Stack e tive a tarefa de fazer uma página mais parecida possível com essa. Mas estou com muita dificuldade na hora de colocar essa <DIV> branca dentro dessa <DiV> preta. Eu já consegui colocar os links nas imagens do Facebook e do Instagram, porém não consigo alinhar elas no canto direito, meu <h1> vem junto... Muito obrigado pela atenção galera

    • By thailangodoy
      Boa tarde amigos,
       
      Quero copiar o efeito hover, que aparece na foto de perfil do login, o qual consiste em uma borda externa, que não influencia no tamanho.
       
      Tentei atribuiu o box-sizing:border-box; // ele diminui a imagem e traz a borda para dentro.
       


    • By Camilavip
      Oi, tenho um flip para virar a imagem, bem pequeno e funcional, mas ao colocar um rodapé, ele simplesmente invade esse rodapé
      Creio que tem haver alguma coisa com o position: absolute, mas não entendo nada de css
       
      <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"> </head> <body> <!-- CSS DO FLIP --> <style> .flip-container:hover .flipper{ transform: rotateY(180deg); /* se quiser uma animação na vertical, troque por rotateX(180deg) */ } .flipper{ width: 100%; height: 100%; transition: transform 0.8s; transform-style: preserve-3d; } .front, .back{ position: absolute; width: 100%; height: 100%; } .back{ transform: rotateY(180deg); } </style> <center> <div class="flip-container"> <div class="flipper"> <div class="front"> <img src="https://d3mwk3f7r8fv9u.cloudfront.net/images/zohO24tyN2WB8etR3nhZPvhf.png" /> </div> <div class="back"> <img src="https://d3mwk3f7r8fv9u.cloudfront.net/images/XkAkTVqVPbLB3cK5njqdun66.png" /> </div> </div> </div> <!-- AQUI COMEÇA O RODAPÉ --> <!-- CSS DO RODAPÉ --> <style> @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap'); *{ margin: 0; padding: 0; color: #d9d9d9; box-sizing: border-box; font-family: 'Poppins', sans-serif; } .content1{ position: relative; margin: 130px auto; text-align: center; padding: 0 20px; } .content1 .text{ font-size: 2.5rem; font-weight: 600; color: #202020; } .content1 .p{ font-size: 2.1875rem; font-weight: 600; color: #202020; } footer{ position: fixed; bottom: 0px; width: 100%; background: #111; } .main-content{ display: flex; } .main-content .box{ flex-basis: 50%; padding: 10px 20px; } .box h2{ font-size: 1.125rem; font-weight: 600; text-transform: uppercase; } .box .content{ margin: 20px 0 0 0; position: relative; } .box .content:before{ position: absolute; content: ''; top: -10px; height: 2px; width: 100%; background: #1a1a1a; } .box .content:after{ position: absolute; content: ''; height: 2px; width: 15%; background: #f12020; top: -10px; } .left .content p{ text-align: justify; } .left .content .social{ margin: 20px 0 0 0; } .left .content .social a{ padding: 0 2px; } .left .content .social a span{ height: 40px; width: 40px; background: #1a1a1a; line-height: 40px; text-align: center; font-size: 18px; border-radius: 5px; transition: 0.3s; } .left .content .social a span:hover{ background: #f12020; } .center .content .fas{ font-size: 1.4375rem; background: #1a1a1a; height: 45px; width: 45px; line-height: 45px; text-align: center; border-radius: 50%; transition: 0.3s; cursor: pointer; } .center .content .fas:hover{ background: #f12020; } .center .content .text{ font-size: 1.0625rem; font-weight: 500; padding-left: 10px; } .center .content .phone{ margin: 15px 0; } .right form .text{ font-size: 1.0625rem; margin-bottom: 2px; color: #656565; } .right form .msg{ margin-top: 10px; } .right form input, .right form .msgForm{ width: 100%; font-size: 1.0625rem; background: #151515; padding-left: 10px; border: 1px solid #222222; } .right form input:focus, .right form .msgForm:focus{ outline-color: #3498db; } .right form input{ height: 35px; } .right form .btn{ margin-top: 10px; } .right form .btn button{ height: 40px; width: 100%; border: none; outline: none; background: #f12020; font-size: 1.0625rem; font-weight: 500; cursor: pointer; transition: .3s; } .right form .btn button:hover{ background: #000; } .bottom center{ padding: 5px; font-size: 0.9375rem; background: #151515; } .bottom center span{ color: #656565; } .bottom center a{ color: #f12020; text-decoration: none; } .bottom center a:hover{ text-decoration: underline; } @media screen and (max-width: 900px) { footer{ position: relative; bottom: 0px; } .main-content{ flex-wrap: wrap; flex-direction: column; } .main-content .box{ margin: 5px 0; } } </style> <div class="content1"> <div class="text"> Fully Responsive Footer Section</div> <div class="p"> HTML and CSS (Flexbox)</div> </div> <footer> <div class="main-content"> <div class="left box"> <h2> About us</h2> <div class="content"> <p> CodinNepal is a YouTube channel where you can learn web designing, web development, ui/ux designing, html css tutorial, hover animation and effects, javascript and jquery tutorial and related so on.</p> <div class="social"> <a href="https://facebook.com/coding.np"><span class="fab fa-facebook-f"></span></a> <a href="#"><span class="fab fa-twitter"></span></a> <a href="https://instagram.com/coding.np"><span class="fab fa-instagram"></span></a> <a href="https://youtube.com/c/codingnepal"><span class="fab fa-youtube"></span></a> </div> </div> </div> <div class="center box"> <h2> Address</h2> <div class="content"> <div class="place"> <span class="fas fa-map-marker-alt"></span> <span class="text">Birendranagar, Surkhet</span> </div> <div class="phone"> <span class="fas fa-phone-alt"></span> <span class="text">+089-765432100</span> </div> <div class="email"> <span class="fas fa-envelope"></span> <span class="text">abc@example.com</span> </div> </div> </div> <div class="right box"> <h2> Contact us</h2> <div class="content"> <form action="#"> <div class="email"> <div class="text"> Email *</div> <input type="email" required> </div> <div class="msg"> <div class="text"> Message *</div> <!-- NOTE: Due to more textarea tag I got an error. So I changed the textarea name to changeit. Please change that changeit name to textarea --> <changeit id=".msgForm" rows="2" cols="25" required></changeit> <!-- replace this changeit name to textarea --> <br /> <div class="btn"> <button type="submit">Send</button> </div> <div class="bottom"> <center> <span class="credit">Created By <a href="https://youtube.com/c/codingnepal">CodingNepal</a> | </span> <span class="far fa-copyright"></span> 2020 All rights reserved. </center> </div> </body> </html>  
    • By Kemily
      Eu preciso de ajuda para poder publicar meu site.
      O professor mandou faze-lo em HTML e CSS e eu fiz mas eu não sei postar e manter as imagens.
      Quando consegui postar as imagens não foram junto.
      O link q consegui fazer sem as imagens ficou assim:
       
      http://hyundai.droppages.com/
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.