3

Eu sei que pra montar um menu do tipo sanfona é assim:

<html>
    <head>
        <style>
            .menu-sanfona li ul{
                display:none;
            }
            .menu-sanfona li:focus ul{
                display:block;
            }
        </style>
    </head>

    <body>
        <ul class="menu-sanfona">
            <li tabindex="0">Item 1
                <ul>
                    <li>Item 1.1</li>
                    <li>Item 1.2</li>
                </ul>
            </li>
            <li tabindex="1">Item 2
                <ul>
                    <li>Item 2.1</li>
                    <li>Item 2.2</li>
                </ul>
            </li>
        </ul>
    </body>
</html>

O que eu gostaria de saber é como fazer pra montar um tipo de menu sanfona que abre mais menus dentro dos menus abertos por exemplo

Digamos que eu cliquei no "Item 1" e abriu um submenu chamado "Item 1.1". ok!

Aí quando eu clicar no "Item 1.1" ele mostre outro submenu com "Item 1.1.1", "Item 1.1.2", "Item 1.1.3" ... Como seria esse código utilizando apenas HTML e CSS ??

1
  • Você teria algum exemplo online para eu entender melhor e poder te ajudar? Commented 10/12/2016 às 9:23

2 Respostas 2

1

A solução que encontrei é a seguinte :

<ol class="menu-sanfona">
	<li>
    	<label for="Item-1">Item-1</label>
    	<input type="checkbox"  id="Item-1" />
   		<ol>
      		<li>
       			<label for="Item-1-1">Item-1-1</label>
        		<input type="checkbox" id="Item-1-1" />
        		<ol>
         			<li>
           				<label for="Item-1-1-1">Item-1-1-1</label>
           				<input type="checkbox" id="Item-1-1-1" />
           				<ol>
              				<li>
                				<label for="Item-1-1-1-1">Item-1-1-1-1</label>
               					<input type="checkbox" id="Item-1-1-1-1" />
                			</li>
            			</ol>
          			</li>
          		</ol> 
      		</li>
      	</ol>
	</li>
	<li>
    	<label for="Item-2">Item-2</label>
    	<input type="checkbox"  id="Item-2" />
   		<ol>
      		<li>
       			<label for="Item-2-1">Item-2-1</label>
        		<input type="checkbox" id="Item-2-1" />
        		<ol>
         			<li>
           				<label for="Item-2-1-1">Item-2-1-1</label>
           				<input type="checkbox" id="menu-2-1-1" />
           				<ol>
              				<li>
                				<label for="Item-2-1-1-1">Item-2-1-1-1</label>
               					<input type="checkbox" id="Item-2-1-1-1" />
                			</li>
            			</ol>
          			</li>
          		</ol> 
      		</li>
      	</ol>
	</li>
</ol>
<style>
ol.menu-sanfona{padding-left:30px; list-style:none;}
li{position:relative;}
li label{padding-left:37px;cursor:pointer;display:block;}
li input{position:absolute;left:-0.5em;top:0;opacity:0;cursor:pointer;}
li input + ol{height:33px;margin:-16px 0 0 -51px;}
li input + ol > li{display:none;}
li input:checked + ol{height:auto;margin:-23px 0 0 -51px;padding:33px 0 0 77px;}
li input:checked + ol > li{display:block;}
</style>

-2

@Andrei

Eu entendi o que você quis dizer, porém sua pergunta está meio complicada de se entender pois não está muito elaborada, mas vamos lá..

Para criar o que você quer você precisa fazer a mesma coisa que fez, porém dentro de outro menu, aqui está um código que fiz para você por exemplo de acordo com o código que você escreveu acima.

   <ul class="menu-sanfona">
        <li tabindex="0">Item 1
            <ul>
                <li>Item 1.1</li>
                <li>Item 1.2</li>
            </ul>
        </li>
        <li tabindex="1">Item 2
            <ul>
                <li>Item 2.1
                  <ul> <!-- CRIAR UMA ul NOVA -->
                    <li>Item 2.2</li>
                  </ul>  <!-- FINAL ul NOVA -->
              </li> <!-- FINAL li ITEM 2.1 -->
                <li>Item 2.2</li>
            </ul>
        </li>
    </ul>
3
  • Isso eu ja fiz. O que gostaria de saber é como vai ficar o estilo css com para criar uma nova UL ?
    – Andrei
    Commented 10/12/2016 às 2:59
  • pt.stackoverflow.com/questions/25611/…
    – Leo Letto
    Commented 10/12/2016 às 11:34
  • Com tabindex não fica legal! O jeito é usar tag input radio, assim quando clica em um ele desmarca o outro, ou seja, quando clico em um menu ele fecha o outro
    – Andrei
    Commented 16/02/2017 às 16:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .