SHARE

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

Yo gang, in this CSS tricks tutorial I’ll show you how to create an animating burger nav icon (from lines to cross).

—– COURSE LINKS:
+ Repo – hhttps://github.com/iamshaunjp/CSS-Tips-and-Tricks
+ Atom editor – https://atom.io/a

CSS ANIMATIONS – https://www.youtube.com/playlist?list=PL4cUxeGkcC9iGYgmEd2dm3zAKzyCGDtM5

JS Playlist – https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

HTML Playlist – https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc

NODEJS Playlist – https://www.youtube.com/playlist?list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp

———————————————————————————————
You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage…

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

========== PSD to WordPress Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gnow7e45LQFkNVxwQ5BH-W

============ Node.js for Beginners Playlist =============

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp

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

41 COMMENTS

  1. you can do it dynamically too, like when you add the open class make each bar width: 0 and opacity :0, except the first and last child, using the :first-child and :last-child css selector. That way, you wouldn't have to write css for every bar in between 🙂
    As always, Shaun, a great tutorial!!

  2. That was so creative like always. Thanks shawn ;-).
    But an important question! How can I have live preview?? Would you please make a tutorial?

  3. Hey, Do you want to do an interview for Coding Tutorials 360?
    He is doing interviews of famous developers like quincy larson and others.
    He's gonna ask you stuff like how did you became a developer first job etc.
    Would be very cool if you do it.

  4. Hey, thanks for the tutorial!

    But using jquery seems a bit redundant to me.
    Here is vanilla version:

    window.onload = function () {
    document.getElementById('burger-container').addEventListener('click', function () {
    this.classList.toggle('open');
    })
    }

LEAVE A REPLY

Please enter your comment!
Please enter your name here