Πώς να δημιουργήσετε ένα αποκριτικό συρόμενο μενού

Τρέχω ένα blog με το όνομα learnersbucket.com όπου γράφω για το ES6, τις δομές δεδομένων και τους αλγόριθμους για να βοηθήσω άλλους να σπάσουν τις συνεντεύξεις κωδικοποίησης. Ακολουθήστε με στο Twitter για τακτικές ενημερώσεις.

Όταν σχεδίαζα το ιστολόγιό μου με προσέγγιση για κινητά, αποφάσισα να κρατήσω το μενού πλοήγησης της πλευρικής μπάρας ξεχωριστό κάτω δεξιά. Δεν υπάρχει ανάγκη για κολλώδη κεφαλίδα και ο χρήστης μπορεί να διαβάσει τα πάντα σε πλήρες ύψος.

Αυτή είναι η απλή έκδοση του τρόπου εμφάνισης του μενού του κινητού μου.

Δείτε πώς μπορείτε να δημιουργήσετε το δικό σας μενού πλοήγησης με αποκριτική πλευρική γραμμή.

ΣΦΑΙΡΙΚΗ ΕΙΚΟΝΑ

Προτού προχωρήσουμε στο σχεδιασμό του μενού, ας φανταστούμε ποια στοιχεία χρειαζόμαστε.

  • Ενα χάμπουργκερ ? κουμπί το οποίο θα s πώς / h ide το συρόμενο μενού.
  • Κινούμενη εικόνα στο κουμπί χάμπουργκερ για την αναπαράσταση της τρέχουσας κατάστασης του μενού.
  • Ένα πλευρικό μενού πλοήγησης.

Καθώς το πλευρικό μενού πλοήγησης θα εναλλάσσεται με το κλικ του μενού χάμπουργκερ, μπορούμε να τα κρατήσουμε μαζί σε ένα μόνο κοντέινερ.

Εξαρτήσεις

Μου αρέσει να χρησιμοποιώ το jQuery για χειρισμό DOM καθώς μειώνει την ποσότητα του κώδικα που πρέπει να γράψω.

Κουμπί χάμπουργκερ

Δομή HTML

Υπάρχει ένα απλό τέχνασμα για τη δημιουργία μενού χάμπουργκερ.

Θα χρησιμοποιήσουμε ένα iv> w ith a .hamburger class to create the hamburger button wrapper. Then we will place three s to create the layers of the hamburger.

Designing the hamburger button

Now that the HTML structure for our button is ready, we need to design it to make it look like a hamburger. While designing, we need to keep in mind that we have to provide the animation for open & close when the user clicks on it.

As we are creating a fixed dimension hamburger button, we are going to provide fixed dimensions to the wrapper.

  • We have created a fixed parent .hamburger{position:fixed} to place it wherever we want on the screen.
  • Then we have designed all the an>s as small rectangular boxes with position:absolute.
  • As we need to show three different strips we have changed the top position of the 2nd span .hamburger > span:nth-child(2){ top: 16px; } & 3rd span .hamburger > span:nth-child(3){ top: 27px; }.
  • We have also provided transition: all .25s ease-in-out; to all the spans so that the change of their properties should be smooth.

Opening & Closing hamburger button with jQuery

Whenever the hamburger button is clicked it will toggle an open class to it. We can now use this class to add the opening & closing effect.

.hamburger.open > span:nth-child(2){ transform: translateX(-100%); opacity: 0;} will slide the middle strip of the hamburger to the left and make it transparent.

.hamburger.open > span:nth-child(1){ transform: rotateZ(45deg); top:16px; } & .hamburger.open > span:nth-child(2){ transform: rotateZ(-45deg); top:16px; } will bring the first and last span to the same top position and rotate them to make an X.

Kudos ? we have our hamburger ? button ready, so let us create the side navigation now.

Responsive side navigation menu

HTML structure

We will create a simple navigation menu.

We used a nav element for creating the navigation menu and placed the links in ul.

Designing the navigation menu

I have created a full-screen side menu, you can change the dimensions according to your need. We are using > selector to avoid overwriting the style of other elements.

Now we have our navigation menu and hamburger button ready, so we can wrap them inside a wrapper to make them functional.

Sliding navigation menu

HTML structure

We have placed the hamburger button and navigation menu inside the .mobile-menu wrapper.

Designing the sliding navigation menu

We have updated the design a little by providing some property of the .hamburger to .mobile-menu making it fixed and made .hamburger relative to keep the an> design the same.

As there can be multiple navs, we have updated all the selectors .mobile-menu >nav as well to make sure we are pointing to the required elements only.

Making sidebar menu functional with jQuery

We now add our .open class to the .mobile-menu so that we can handle both the hamburger button and the sliding menu with a single change.

Our CSS for the animation is also updated accordingly.

Well done ??? we covered everything.

Check out the working demo here

Conclusion

This post was about a simple sliding menu. I tried to break it into different components so that you can use them independently.

Thank you for having patience while reading this. If you learned something new today then give some ?. Also, share it with your friends so that they can learn something new too.

That’s it, follow me on Twitter for knowledge sharing. I write about ES6, Nodejs, Data structures & Algorithms and full stack web development with JavaScript.

Originally published at learnersbucket.com on April 14, 2019.