SHARE

Donate via PayPal – https://www.paypal.me/thenetninja
Donate via Patreon – https://www.patreon.com/thenetninja

Hey gang, in this CSS tricks tutorial I’ll sow you how to create a dropdown menu using CSS only and no JavaScript, using checkboxes and pseudo selectors.

—– COURSE LINKS:
+ Atom editor – https://atom.io/a
+ CMDER – http://cmder.net/
+ PYTHON – http://www.python.org/
+ GitHub Repo – https://github.com/iamshaunjp/CSS-Tips-and-Tricks

———————————————————————————————
Other tutorials:

—– NODE.JS TUTORIALS
https://www.youtube.com/playlist?list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp

—– SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

============== The Net Ninja =====================

For more front-end development tutorials & to black-belt your coding skills, head over to – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

================== Social Links ==================

Twitter – @TheNetNinja – https://twitter.com/thenetninjauk

34 COMMENTS

  1. man i'll unsubscribe from your channel just so i can subscribe again..u are making really helpful content and your explanations are great..keep up good work

  2. Awesome tutorial! I juat would add "mobile" to the video title because people could think that it's about dropdowns for desktop websites

  3. The Net Ninja — your tutorials are AMAZING. (1) can you do a video discussing pseudo classes (:) vs pseudo elements (::) and (2) do you think you will ever do some (beginning) JAVA tutorials? Thanks in advance!

  4. <html>
    <head>
    <style>
    body{
    background:lightgrey;
    }
    .content{
    height:0;
    overflow:hidden;
    }
    .dropdown{
    padding:10px;
    background:white;
    }
    .dropdown ul{
    list-style:none;
    padding:0;
    }
    .dropdown a{
    text-decoration:none;
    color:red;
    }
    #menu{
    display:;
    }
    input:checked – .content{
    height:100%;
    }
    </style>
    </head>
    <body>
    <div class="dropdown">
    <input type="checkbox" id="menu"/>
    <label for="menu">menu</label>
    <div class="content">
    <ul>
    <li><a href="#">dsds</a></li>
    <li><a href="#">sdsdsd</a></li>
    <li><a href="#">sds</a></li>
    <li><a href="#">dsdsds fbg</a></li>
    <li><a href="#">dsdfv scs</a></li>
    <li><a href="#">dsc</a></li>
    </ul>
    </div>
    </div>
    </body>
    </html>

    NOT WORKING!

  5. First I thought about skipping this video .Glad I have watched it

    and Learned about general sibling selector !!

    Thank You !!

  6. This is awesome technique for doing simple toggle controls on the web page. Not very semantic, but less trouble than introducing JS in the equation, up to a point.
    Since you mentioned at the end of the video, I can share my portfolio which utilizes this technique to the point of abusal. It was actually an exercise, I would never do such complex html/css combination in the production, and in time, I'll change the portfolio to use JS to toggle classes. Here is the github link: https://github.com/Gruximillian/portfolio
    One peculiar thing about this project is that I had to put header/menu content at the end of the html file so that I can use ':target' pseudo class to achieve menu item highlitghing and scrolling to the desired page section only with css, which is something that is not recommended, but as I said, this was practice pushed to the limit of my current knowledge.

  7. omg you are just a god thanks a lot man. I searched so long for a video like this one. Keep up the awesome work man. I love you 🙂

LEAVE A REPLY

Please enter your comment!
Please enter your name here