Vertical Layout with Navigation By Ettrics
Ettrics has designed a layout that has got all the code lovers going nuts. His layout has been praised and thanked in the likes of Code Pen and on CSS Design Awards, both Facebook and Twitter accounts.
You have vertical scrolling sections of content, slick mobile hamburger navigation and a great menu!
Ettrics has truly created his “you brand” and by this I mean his work is being more and more recognized by users and it’s being shared more and more by users because his coding skills are so good and his users just cannot get enough of it.
The layout was uploaded on the 07th of April and so far has been very popular with users stating “such a fluid code”, “your work is just stunning”, “not only does it look awesome but a great code too!” CSS Design Awards have been reeling in the likes, comments and shares on this layout that they shared – credit it where it’s due! So, let’s get behind the understandings of the theme; The process of the structure of the theme; The navigation is housed within the
element, the classic hamburger icon was created with pseudo elements and the
element is used for the lists of links to each section.
The process of the styling of the theme… The navigation is set to position: fixed, this is so that it remains nicely in the top left corner at all times whilst in viewing. The
element within the navigation is hidden by transforming it’s translate Y value by -100%. This will move upwards so we can then animate it downwards when the hamburger is clicked, and as for the sections of content, each
is set to min-height: 100vh so it fills the entire height of the screen.
Finally the process of the jQuery of the theme, for the navigation, simple toggling classes is applied when the hamburger is being clicked. For each section you will find observe how the content animates each time it is scrolled to. To accomplish this you compare the value of $(document).scrollTop() to the .offset().top of the
elements. If the .offset().topvalue is less than the value of $(document).scrollTop() than you will add a class to the content of that section so it animates in when we scroll to it, otherwise, we remove that class so the content is hidden again. You will then bind this function to the window objects scroll event.