0

I am trying to create animated menu from the reference of 'codepen' but i don't understand the code written below can someone help me, its the first time i saw the code like this, its looks like selector but cant help it to understand HTML :

    <div id="wrapper">
        <div class="mobile">
            <!-- Checkbox to tonggle the menu -->
            <input type="checkbox" id="tm"/>

            <ul class="sidenav">
                <li><a href="#"><i class="fa fa-apple"></i></a></li>
                <li><a href="#"><i class="fa fa-windows"></i></a></li>
                <li><a href="#"><i class="fa fa-android"></i></a></li>
                <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                <li><a href="#"><i class="fa fa-tumblr"></i></a></li>
                <li><a href="#"><i class="fa fa-github"></i></a></li>
                <li><a href="#"><i class="fa fa-youtube-play"></i></a></li>
                <li><a href="#"><i class="fa fa-dropbox"></i></a></li>
                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                <li><a href="#"><i class="fa fa-vimeo"></i></a></li>
                <li><a href="#"><i class="fa fa-skype"></i></a></li>
            </ul>

            <!-- Content area -->
            <section>
                <!-- Label for #tm checkbox -->
                <label for="tm">Menu</label>
            </section>
kiran
  • 1
  • if the `id` is checked then apply the styles for its siblings element called `section`. – Suresh Ponnukalai Aug 01 '14 at 05:55
  • possible duplicate of [What does the CSS ~ (tilde/squiggle/twiddle) selector do?](http://stackoverflow.com/questions/10782054/what-does-the-css-tilde-squiggle-twiddle-selector-do) – Havenard Aug 01 '14 at 05:56

1 Answers1

1
 #ID:checked~section{

 }

It means inside particular ID, if the check box is checked then its section(sibling) must have following properties

tilde(~) is a general sibling combinator

For more Information Check this link

G.L.P
  • 7,119
  • 5
  • 25
  • 41