Accordion menu with CSS opening more submenus inside a submenu

Asked

Viewed 675 times

3

I know that to assemble a menu of the type accordion is like this:

<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>

What I would like to know is how to assemble a type of accordion menu that opens more menus inside the open menus for example

Let’s say I clicked on "Item 1" and opened a submenu called "Item 1.1". ok!

Then when I click on "Item 1.1" it shows another submenu with "Item 1.1.1", "Item 1.1.2", "Item 1.1.3" ... What would this code look like using only HTML and CSS ??

html

  • Would you have some example online so I understand better and can help you?

2 answers

1

The solution I found is as follows: :

<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

I understand what you mean, but your question is kind of complicated to understand because it’s not very elaborate, but come on..

To create what you want you need to do the same thing you did, but within another menu, here’s a code I made for you by example according to the code you wrote above.

   <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>

  • This I’ve done. What I’d like to know is how the css style will look with to create a new UL ?

  • http://answall.com/questions/25611/criar-um-menu-accordion-apenas-com-css

  • Tabindex doesn’t look good! The way is to use radio input tag, so when you click on one it unchecks the other, ie when I click on a menu it closes the other

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.