Checkbox menu with smooth transition, without the use of "visibility :;" or "display: none;"

Question

Checkbox menu with smooth transition, without the use of "visibility :;" or "display: none;"

Navigation

#1 by (1 votes)

2

I have a small menu here, which has the use of overflow: hidden; / max-height :; and height :; to make a smooth transition by clicking on the checkbox and displaying the sub-menus, but I'm not able to smoothly display the 'SUB 2' class by clicking on it and displaying the '3 links' so that they smoothly retreat with the transition :; I already used 'display: none;' but it does not back off smoothly, I've already used the 'visibility :;' but it does not track the upload of other objects if they are added after 'links 3', since I can not retreat the 'links 3' of 'SUB 2' by clicking on the 'checkbox', it would be possible to make it behave as others above ?? the 'menu' and 'SUB 1' that recede smoothly and relative to the other objects when clicking on the 'checkbox' ?? I do not know how to make 'SUB 2' behave like the 'menu' and 'SUB' classes that worked!

input{ display:;}

.menu{ width:200px;}

.rd1:checked ~ ul{ max-height:300px; height:auto; transition:all 0.4s linear;}
.rd2:checked ~ ul ul{max-height:300px; height:auto; transition:all 0.4s linear;}
.rd3:checked ~ ul ul ul{max-height:300px; height:auto;  transition:all 4s linear;}
 
.menu ul{overflow: hidden; max-height:0px;transition:all 0.4s linear; }

label#lb1{ background-color:#09F; position:relative; padding:5px; display:block;}

.menu ul li{ padding:3px; }

.menu ul li a{ background-color:#FFC488; padding:5px; display:block;}

<nav class="menu">
<input type="checkbox" class="rd1" id="t1" checked/>
<input type="checkbox" class="rd2" id="t2" checked/>
<input type="checkbox" class="rd3" id="t3" checked/>

<label for="t1" id="lb1">MENU</label>
<ul>
  <li><a href="#">LINKS</a></li>
  <li><a href="#">LINKS</a></li>
  <li><label id="lb1" for="t2">SUB</label></li>
      <ul>
         <li><a href="#">LINKS 2</a></li>
         <li><a href="#">LINKS 2</a></li>
     
  <li><label for="t3" id="lb1">SUB 2</label></li>
       <ul>
         <li><a href="#">LINKS 3</a></li>
         <li><a href="#">LINKS 3</a></li>
       </ul>
  </ul>
   
</ul>
</nav>

html css checkbox

asked by anonymous 29.05.2018 / 17:36

1 answer

Return data Json My function that returns a boolean true / false if it exists or not, is it correct?

score 1 · Accepted Answer

The option I found is by reversing the order of inputs in the HTML to get it right. For the 3 level would only make sense to open if the 2 is already open.

To understand better, see the example as it was.

NOTE: Note that now the order of inputs checkbox is inverted in html, if you want to have CSS like go back to the order, but how do you give display:none I believe ...

input{ display: inline-block;}

.menu{ width:200px;}

label#lb1{ background-color:#09F; position:relative; padding:5px; display:block;}

.menu ul li{ padding:3px; }

.menu ul li a{ background-color:#FFC488; padding:5px; display:block;}

.menu ul, .menu ul ul, .menu ul ul ul {
    overflow: hidden; 
    height:0px;
    transition:all 0.4s linear; 
}

#t1:checked ~ ul {
    height: 300px;
}
#t2:checked + #t1:checked ~ ul ul {
    height: 100px;
}
#t3:checked + #t2:checked  ~ ul ul{
    height: 170px;
}

<nav class="menu">
    <input type="checkbox" class="rd3" id="t3" />3
    <input type="checkbox" class="rd2" id="t2" />2
    <input type="checkbox" class="rd1" id="t1" />1

    <label for="t1" id="lb1">MENU</label>
    <ul>
    <li><a href="#">LINKS</a></li>
    <li><a href="#">LINKS</a></li>

    <li><label id="lb1" for="t2">SUB</label></li>
        <ul>
            <li><a href="#">LINKS 2</a></li>
            <li><a href="#">LINKS 2</a></li>
        
            <li><label for="t3" id="lb1">SUB 2</label></li>
            <ul>
                <li><a href="#">LINKS 3</a></li>
                <li><a href="#">LINKS 3</a></li>
            </ul>
    </ul>
    </ul>
</nav>