Menu que abre sub-itens pra baixo

[Annes 1]

Gente, não sei explicar direito o que eu preciso, mas lá vai:

Pra fazer um menu em cascata no CSS que empurra os de baixo, como faço? É o mesmo esquema de menu em cascata, mas muda position (absolute / relative)?

 

Pra entender melhor, vou colocar um rascunho aqui.

No lado esquerdo, tem o menu em cascata. Esse eu sei fazer... mas eu preciso fazer o que está do lado direito. Ou seja, quando você clica no Item 2, por exemplo, os sub-itens aparecem embaixo dele, e antes do Item 3, por exemplo, e o Item 3 desce. Antes de clicar, ou quando clicar em outro Item, os sub-itens desaparecem novamente e o Item 3 volta a ficar logo abaixo do Item 2.

 

Imagino que seja algo como mudar o position e o visible, está correto o meu raciocínio?

 

Como é o nome desse tipo de menu?

[Evandro Oliveira 331]

Gente, não sei explicar direito o que eu preciso, mas lá vai:

Pra fazer um menu em cascata no CSS que empurra os de baixo, como faço? É o mesmo esquema de menu em cascata, mas muda position (absolute / relative)?

 

Pra entender melhor, vou colocar um rascunho aqui.

No lado esquerdo, tem o menu em cascata. Esse eu sei fazer... mas eu preciso fazer o que está do lado direito. Ou seja, quando você clica no Item 2, por exemplo, os sub-itens aparecem embaixo dele, e antes do Item 3, por exemplo, e o Item 3 desce. Antes de clicar, ou quando clicar em outro Item, os sub-itens desaparecem novamente e o Item 3 volta a ficar logo abaixo do Item 2.

 

Imagino que seja algo como mudar o position e o visible, está correto o meu raciocínio?

 

Como é o nome desse tipo de menu?

 

menu acordeão. E o princípio básico é que você não vai trabalhar com as positions. Ele vai parar de aparecer do lado e começar a aparecer embaixo.

[Annes 1]

menu acordeão. E o princípio básico é que você não vai trabalhar com as positions. Ele vai parar de aparecer do lado e começar a aparecer embaixo.

 

Mas como faço? Primeiro vou trabalhar no comando visible dele, deixando-o oculto, certo? E quando clicar, mudo o visible? (Aff, mas tá mais parecendo programação do que HTML + CSS)...

 

E se o princípio básico é não trabalhar com as positions, como deverei fazer???

 

Olha, este site tem exatamente o que eu preciso:

secretaria de estado da educação

[Evandro Oliveira 331]

Mas como faço? Primeiro vou trabalhar no comando visible dele, deixando-o oculto, certo? E quando clicar, mudo o visible? (Aff, mas tá mais parecendo programação do que HTML + CSS)...

 

E se o princípio básico é não trabalhar com as positions, como deverei fazer???

 

Olha, este site tem exatamente o que eu preciso:

secretaria de estado da educação

 

 

markup

<ul id="menu">
   <li><p>item</p>
       <ul>
           <li><p>subitem</p></li>
       </ul>
   </li>
</ul>

 

cascata:

ul ul {
   display: none;
   left: 100%;
   position: relative;
}

li {
   border: 1px solid #000;
   padding: 3px;
}

li:hover ul {
   display: block;
}

 

aninhado:

ul ul {
   display: none;
}

li {
   border: 1px solid #000;
   padding: 3px;
}

li:hover ul {
   display: block;
}

[dingbing 0]

O nome é menu acordeão ou acordion ou sanfona procura vertical que tem muito horizontal

tem milhares por ai a maioria em java script que da aquele efeito de movimento

tem em css3 também

 

nomelivre.com

[Annes 1]

markup

<ul id="menu">
   <li><p>item</p>
       <ul>
           <li><p>subitem</p></li>
       </ul>
   </li>
</ul>

 

cascata:

ul ul {
   display: none;
   left: 100%;
   position: relative;
}

li {
   border: 1px solid #000;
   padding: 3px;
}

li:hover ul {
   display: block;
}

 

aninhado:

ul ul {
   display: none;
}

li {
   border: 1px solid #000;
   padding: 3px;
}

li:hover ul {
   display: block;
}

 

você se importaria de colocar o que fez em cada linha?

[Evandro Oliveira 331]

você se importaria de colocar o que fez em cada linha?

 

Claro que não

 

<ul><!-- lista não ordenada -->
   <li><!-- novo item da lista-->
       <p><!-- parágrafo -->
           Item
       </p>
       <ul><!-- sub-lista ou lista aninhada não ordenada -->
           <li><!-- novo item da sub-lista -->
               <p><!-- parágrafo -->
                   Sub item
               </p>
           </li>
       </ul><!-- fim da sub lista -->
   </li>
</ul><!-- fim da lista -->

 

li { /* Declaro que vou trabalhar nos itens de lista */
   border: 1px solid #000; /* Adicionando uma borda apenas para melhorar a viusalização */
   padding: 5px; /* Espaçamento interno para não ficar colado nas bordas */
   position: relative; /* Marco este elemento para ser a referência dos sub itens declarados acima */
   width: 100px; /* Dou uma largura pro item não ocupar a tela toda */
}

li ul { /* Aqui eu vou trabalhar todos os itens UL que estiverem dentro de um LI */
   display: none; /* Inicialmente, os subitens estão escondidos */
   left: 100%; /* Posiciono o item à borda direita do item superior a ele */
   position: absolute; /* Adiciona flexibilidade podendo posicionar o sub item onde quisermos */
   top: 0; /* Alinha com o topo do item superior a ele */
}

/* :Hover é um estado que o elemento ganha quando tem o mouse posicionado sobre ele */
/* A seguir, dizemos que vamos trabalhar em todos os itens de lista (LI) que possuírem o mouse sobre os mesmos */
li:hover ul { /* Isso quer dizer que eu quero a sub lista, dentro do item de lista que esteja sob o mouse */
   display: block; /* Redefino o valor 'display' para o padrão. Lembra que nós escondemos o item lá no começo? */
}

 

Para o menu acordeão, não precisamos trabalhar tanto o posicionamento. Isso simplifica e permite que nós removamos as linhas

left: 100%;
position: absolute;
top: 0;

 

O resultado final é como já foi postado anteriormente

li { /* Declaro que vou trabalhar nos itens de lista */
   border: 1px solid #000; /* Adicionando uma borda apenas para melhorar a viusalização */
   padding: 5px; /* Espaçamento interno para não ficar colado nas bordas */
   position: relative; /* Marco este elemento para ser a referência dos sub itens declarados acima */
   width: 100px; /* Dou uma largura pro item não ocupar a tela toda */
}

li ul { /* Aqui eu vou trabalhar todos os itens UL que estiverem dentro de um LI */
   display: none; /* Inicialmente, os subitens estão escondidos */
}

/* :Hover é um estado que o elemento ganha quando tem o mouse posicionado sobre ele */
/* A seguir, dizemos que vamos trabalhar em todos os itens de lista (LI) que possuírem o mouse sobre os mesmos */
li:hover ul { /* Isso quer dizer que eu quero a sub lista, dentro do item de lista que esteja sob o mouse */
   display: block; /* Redefino o valor 'display' para o padrão. Lembra que nós escondemos o item lá no começo? */
}

[Annes 1]

Evandro Oliveira... você tem sido muito atencioso! Até mais do que o necessário... rsrs... quando eu pedi pra explicar por linha o que fez, não precisava de tantos detalhes assim... rsrs...

 

Eu pedi isso pq aqui não estava dando certo, e daí se você me dissesse o que fez, eu poderia identificar o motivo de não estar dando certo aqui...

 

Outra pergunta: o que é "aninhado"?

 

AH... agora deu certo... olhei o que você fez, e comparei as suas duas postagens, e percebi uma coisa: no primeiro código que você passou, na hora de trabalhar todos os itens UL de dentro de um LI, você postou:

 

ul ul {
   display: none;
   left: 100%;
   position: relative;
}

 

Eu não tinha entendido o motivo de um UL UL, mas mesmo assim, fiz igual...

Agora que você explicou o que fez, é que verifiquei isso... aí deu certo! Funfou... rsrs...

 

Mais duas perguntas apenas:

 

1. Neste código, apenas passando o mouse por cima, o submenu aparece. Tem como ele só aparecer quando clicar?
   
2. Se eu quisesse usar o comando "webkit-transition" neste código daria certo? Pergunto pq me lembro que uma vez utilizei, mas só dava certo no google chrome, e com mais umas adaptações, dava certo tbm no firefox... mas não dava certo no IE. Enfim, na época estava tão cansada do projeto que larguei mão e nem continuei pesquisando. Mas me lembro que o efeito ficava muito bonito. Só que o código nem abria no IE. QUeria saber se dá pra fazer de um jeito que desse este efeito nos ooutros navegadores, mas que tbm abra no IE, mesmo qe mais toscamente! rsrs...
   

[Evandro Oliveira 331]

Outra pergunta: o que é "aninhado"?

 

http://pt.bab.la/dicionario/ingles-portugues/nested

http://www.priberam.pt/dlpo/dlpo.aspx?pal=aninhada

 

Usaremos a segunda alternativa: Abrigado.

 

Veja que os submenus ficam sob o primeiro menu. Ficam escondidinhos, abrigados, como filhotes em um ninho ;)

 

AH... agora deu certo... olhei o que você fez, e comparei as suas duas postagens, e percebi uma coisa: no primeiro código que você passou, na hora de trabalhar todos os itens UL de dentro de um LI, você postou:

 

ul ul {
   display: none;
   left: 100%;
   position: relative;
}

 

Neste nosso caso em específico,

ul ul {}

, como feito da primeira vez, não difere em nada de

li ul

, como foi feito na última.

 

Veja que, em ambos os casos, a segunda UL do nosso exemplo está tanto sob uma UL...

<li>
   <p>Item</p>
   <ul>...

 

quanto sob uma UL

<ul>
   <li>
       <p>Item<p>
       <ul>...

 

O fator-chave aqui, é definirmos que queremos somente as UL que estejam sob alguma coisa.

Se fizéssemos

ul { display: none; } /* faça o teste */

nosso menu desapareceria!

 

Mais duas perguntas apenas:

 

1. Neste código, apenas passando o mouse por cima, o submenu aparece. Tem como ele só aparecer quando clicar?

 

Sim, com Javascript. Adicionaríamos um pouco de complexidade e as dúvidas posteriores terão de ser realizadas na área apropriada.

 

Segue um exemplo simples:

<ul id="menu">
   <li>
       <p>Item</p>
       <ul>
           <li>
               <p>Sub item</p>
           </li>
       </ul>
   </li>
</ul>

 

(function (w) {
   "use strict";
   var d, menu, i, ln, menuitens, submenus, menuitem, submenu;
   d = w.document;
   // Vamos armazenar o primeiro UL dentro da variável menu
   menu = d.getElementById('menu');
   // Vamos armazenar os itens de menu (LI) dentro da variável menuitens
   menuitens = menu.getElementsByTagName('li');
   // Por último, vamos armazenar os submenus na respectiva variável
   submenus = menu.getElementsByTagName('ul');
   // Aqui é onde vamos esconder os submenus
   function hideAll() {
       for (i = 0, ln = submenus.length; i < ln; i += 1) {
           submenus[i].style.display = 'none';
       }
   }
   // Vamos adicionar uma escuta de cliques no item de menu armazenado na
   // variável from
   function openSubMenu(submenu) {
       return function () {
           // Escondemos qualquer submenu que esteja visível
           hideAll();
           // E mostramos apenas este submenu
           submenu.style.display = 'block';
       };
   }
   hideAll();
   // Vamos passar, um a um, pelos itens de menu encontrados
   for (i = 0, ln = menuitens.length; i < ln; i += 1) {
       menuitem = menuitens[i];
       // Procuramos pelo submenu dentro do item de menu atual
       submenu  = menuitem.getElementsByTagName('ul');
       // Se houver um submenu, criaremos uma escuta no item de menu para que o
       // submenu seja exibido após o clique
       if (submenu.length) {
           menuitem.onclick = openSubMenu(submenu[0]);
       }
   }
}(window));

 

• Se eu quisesse usar o comando "webkit-transition" neste código daria certo? Pergunto pq me lembro que uma vez utilizei, mas só dava certo no google chrome, e com mais umas adaptações, dava certo tbm no firefox... mas não dava certo no IE. Enfim, na época estava tão cansada do projeto que larguei mão e nem continuei pesquisando. Mas me lembro que o efeito ficava muito bonito. Só que o código nem abria no IE. QUeria saber se dá pra fazer de um jeito que desse este efeito nos ooutros navegadores, mas que tbm abra no IE, mesmo qe mais toscamente! rsrs...
  

 

Sim e não

 

Por ainda ser um recurso experimental, a sintaxe fica um pouco feia e demanda um pouco de carinho.

 

https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions

 

Mas não se preocupe, se não houver suporte, simplesmente não vai haver a animação, mas a funcionalidade será garantida.

[Annes 1]

 

Sim e não

 

Por ainda ser um recurso experimental, a sintaxe fica um pouco feia e demanda um pouco de carinho.

 

https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions

 

Mas não se preocupe, se não houver suporte, simplesmente não vai haver a animação, mas a funcionalidade será garantida.

 

Evandro, MARAVILHA! Obrigada pelos esclarecimentos! No atual momento me pediram para não utilizar nada além de HTML e CSS (não sei se é por causa das máquinas onde vai rodar a página, ou se é pq ela é pra trabalhar offline, em CD, ou se é as duas coisas). Mas de qualquer forma, achei muito boa sua explicação...

 

Quanto ao recurso experimental aí, eu testei, e no IE, ele nem abre! Não apenas não acontece a animação, mas nada aparece... fica uma página em branco. você sabe me dizer o pq?

[Annes 1]

Nova dúvida!

 

Seguinte: preciso que cada Item tenha uma cor diferente, e seria interessante tbm que os subitens fossem de outra cor. Por exemplo, se o item 1 é rosa, os subitens dele seriam um rosa mais escuro. Mas não estou conseguindo fazer isso. A class e a id não estão funcionando apenas nos subitens, inclusive, pra conseguir fazer que cada item (juntamente com seus subitens) ficasse de uma cor diferente, só consegui desta forma que segue abaixo... mas achei que ficou muito tosco esse CSS... tem como melhorar? Gosto de CSS clean...

 

CSS:

 

li ul {
   display: none;
color:#F00;
margin-left:-30px;
}
li {
	list-style:none;
}
li:hover ul {
   	display: block;
}
li p:hover {
	color:#09F;
	background-color:#9FF;
}
li p {
	margin-top:-15px;
}
p {
	padding:10px;
}
.efeito1 {
	background:#FCF;
}
.efeito1 a{
	color:#C0F;
}
.efeito2 {
	background:#6FC;
}
.efeito2 a {
	color:#090;
}
.efeito3{
	background:#FF0;
}
.efeito3 a{
	color:#F60;
}

 

HTML:

 

   <ul class="efeito1" id="menu">
   	<li><a href=""><p>item 1</p></a>
       	<ul>
           	<li><a href=""><p>subitem 1-1</p></a></li>
           	<li><a href=""><p>subitem 1-2</p></a></li>                
       	</ul>
       </li>
   </ul>
   <ul class="efeito2">
   	<li><a href=""><p>item 2</p></a>
       	<ul>
           	<li><a href=""><p>subitem 2-1</p></a></li>
           	<li><a href=""><p>subitem 2-2</p></a></li>                
       	</ul>
       </li>
   </ul>
   <ul class="efeito3">
   	<li><a href=""><p>item 3</p></a>
       	<ul>
           	<li><a href=""><p>subitem 3-1</p></a></li>
           	<li><a href=""><p>subitem 3-2</p></a></li>                
       	</ul>
       </li>
   </ul>

[Evandro Oliveira 331]

@Annes, há alguns "erros" na sua marcação.

 

Envolvi em aspas porque o conceito de errado é relativo. Mas, via senso comum, a forma como desenvolveu seu menu não é a mais otimizada.

 

Partido do pressuposto que todo item de topo do menu já compõe uma lista, não precisaríamos de diversos UL's de nível superior, como foi feito. Apenas um

 

<ul id="menu"></ul>

 

dentro dele viriam os itens, contendo subitens, como foi apresentado no restante da sua markup

 

 

<ul id="menu">
   <li class="efeito1">
       <a href="#">Item 1</a>
       <ul>
           <li><a href="#">subitem 1-1</a></li>
           <li><a href="#">subitem 1-2</a></li>
       </ul>
   </li>
   <li class="efeito2">
       <a href="#">Item 2</a>
       <ul>
           <li><a href="#">subitem 2-1</a></li>
           <li><a href="#">subitem 2-2</a></li>
       </ul>
   </li>
   <li class="efeito3">
       <a href="#">Item 3</a>
       <ul>
           <li><a href="#">subitem 3-1</a></li>
           <li><a href="#">subitem 3-2</a></li>
       </ul>
   </li>
</ul>

 

 

Essa simples correção já vai dar uma melhorada no resultado final do menu.

 

O segundo ponto vem na seleção do subitem, a forma como está sendo feita.

 

Basta aplicar as mesmas regras de herança que já foram apresentadas anteirormente

 

.efeito1 ul { background: #f0f; }

 

Quanto às transições, não sei como você tentou, mas assim funciona:

 

 

li ul {
   display: none;
   color: #F00;
   margin-left: -30px;
}

li {
   list-style: none;
}

li:hover ul {
   display: block;
}

li a:hover {
   color: #09F;
   background-color: #9FF;
   -webkit-transition: background-color 0.5s linear;
   -moz-transition: background-color 0.5s linear;
   -ms-transition: background-color 0.5s linear;
   -o-transition: background-color 0.5s linear;
   transition: background-color 0.5s linear;
}

li p {
   margin-top: -15px;
}

p {
   padding: 10px;
}

.efeito1 {
   background: #FCF;
}

.efeito1 a {
   color: #C0F;
}

.efeito2 {
   background: #6FC;
}

.efeito2 a {
   color: #090;
}

.efeito3 {
   background: #FF0;
}

.efeito3 a {
   color: #F60;
}

li a {
   background: black;
   -webkit-transition: background-color 1s linear;
   -moz-transition: background-color 1s linear;
   -ms-transition: background-color 1s linear;
   -o-transition: background-color 1s linear;
   transition: background-color 1s linear;
}

 

Em browsers com suporte, você verá o fundo do link mudando suavemente de cor.

 

Sem suporte, a mudança é brusca, como estamos acustumados a ver. Mas o menu continua funcionando plenamente, como prova a imagem abaixo:

 

Win XP - IE 8

[Annes 1]

Mas Evandro, desta forma, o background fica apenas sob as letras. É justamente por isso que eu tive que separar. Eu tinha feito algo parecido com o que você fez, mas obtive o mesmo resultado que você... o que naão é o suficiente no caso, pois fica muito feio metade da linha mudar de cor, e metade da linha permanecer na mesma cor, quando o mouse passa por cima.

 

Quanto à transição, vamos deixá-la de lado por enquanto... Eu tinha feito parecido tbm, mas antes, tenho prioridade em deixar a questão das diferenças das cores do jeito que precisa ser. Depois eu posto aqui como eu tinha feito.

 

Quanto ao "erro" que você disse, é justamente isso que você explicou que eu não gostei do meu código, mas não consegui realizar o mesmo efeito sem perder na aparência final...

 

você chegou a testar o código que eu fiz, pra ver o efeito que ele dá?

[Evandro Oliveira 331]

Mas Evandro, desta forma, o background fica apenas sob as letras.

 

#menu a { display: block; }

 

Estude sobre box model.

 

você chegou a testar o código que eu fiz, pra ver o efeito que ele dá?

 

Foi baseado no seu código que postei a resposta. Fiz apenas alterações.