Portfolio for Gillian Maffit
Chapter 10

Creating a Smooth Sliding Menu

Chapter 10

In this chapter I learned how to add a sliding menu into my web pages which is something I see a lot on websites that I use. Learning this allowed me to work on combining CSS transitions and JavaScript modifying CSS. One big thing I learned from this chapter was that it takes time and a lot of changing the codes functions to really see how it works and to make it smooth and match the theme of the page. It always a difficult for me to try and make the sliding menu look professional like i have seen on various web pages, but then I had to remember that I am still learning how to do this and after time it will start to look professional. In the example below I have a sliding menu, I also go over it more and make some edits in the video to the side. One thing I really like about having the option to add a sliding menu into web pages I create is that it could replace the navigation bar! The sliding menu can have links on it, as seen in my video, which is very nice because the sliding menu also acts as a navigation bar in a way! Which could be helpful in the future when creating more professional looking websites. I really enjoyed working with sliding menus in this chapter, and playing around with the timkng functions helps find the smoothest looking outcome for the slides in.

Example: Click the circle for the sliding menu!

What Happens?

When clicking on the circle, it pulls out the sliding menu. The links are not connected to anything since this is just an example. In my video, I do talk about how to link them to a page, I connect the home page to my index pae just so that way viewers know how it would work. Along with that, when the menu slides out it takes over the whole page, if you want to get out of it without clickling a link tou can tap the screen and it will then slide out of your screen.