Animated Left Menu Design with Sass-Scss

---

Repository

https://github.com/sass/sass

What Will I Learn?

• You will learn how to disappear elements with negative margin.
• You will learn how to create vertical navigation bar .
• You will learn how to use id function on styles.
• You will learn how to use font-awesome icons.
• You will learn how to appear elements on hover.

Requirements

• Any text editor. (Brackets, Atom, Notepad++)
• Basic HTML knowledge
• Basic SCSS code knowledge
• SASS installed.
• Local server (Wampserver)
• Any browser

Resources

• https://fontawesome.com/icons
• https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateX
• https://www.smashingmagazine.com/2009/07/the-definitive-guide-to-using-negative-margins/
• https://www.w3schools.com/cssref/sel_hover.asp
• https://en.wikipedia.org/wiki/Sass_(stylesheet_language)
• https://sass-lang.com/
• https://github.com/sass/sass
• https://www.w3schools.com
• http://thesassway.com/
• http://sass-lang.com/documentation/file.SASS_REFERENCE.html
• https://sass-lang.com/install
• https://rubyinstaller.org/

Difficulty

• Intermediate

Description

In this tutorial we will create a vertical menu on lifet side with hover effects. When the box is selected it will slide to right and appear. We will also create shadow effects on icons. If you follow this tutorial download all files from my github page and change the values. You can use comment mark(/*between these marks*/) to deactivate codes and test it. With this way it will be more useful for you and you can test and understand the codes better.

---

1- Before you start be sure that you run our sass code in the directory of site files. Our command is sass --watch sass:css. It will translate all codes that you write in scss file to css file. After that, write a basic html file on root directory and into body section define a navigation bar.

---

2- We are starting with our background and fixing image to the page. After that we style out header text and define some shadow and border line to bottom.

---

3- Here we are defining a size and positioning it to center of the page on the left side. And also with minus left spacing it is going to take a position out side of the page. We define also a general style to all ul tags.

---

4- Our list is here a block and each of them will have some height and padding. With transform we define a delay if we write our hover. Our hover effect will bring these all with 165px to the right.

---

5- Here we are giving a background color to each tab of our menu.

---

**6- As last step we define more styles for our icons and menu texts also positioning them.

---

7- And finally our end work...

---

Video Tutorial

Curriculum

• Styling Boxes With Lighting Effect - Sass-Scss
• How to Play with Borders and Create Design Shapes with Sass-Scss
• Playing With Text and PNG Shadows and Animate them with Sass Scss
• Color Animations & Using as Background - 360° Infinite Image 3D with Sass-Scss
• Curriculum Gallery Page Design with Sass-Scss using gifs and hyperlinks
• Intro Page with Text Animation Using Sass - Scss
• Image Dimensions and 3D 360deg rotate effect with Sass Scss
• Rounded Image With Rainbow Color Shadow Animation with Sass-Scss
• Creating a Personal Card with Animation with Sass Scss codes and meaning of the codes
• Creating a Contact Form from a simple version to a stylish animated one with Sass Scss
• Transition effect with Sass (Scss)
• Animated effect and styles for navigation bar with Sass scss
• Image zoom effect with Sass

Proof of Work Done

https://github.com/omersurer/Sass-Scss-Tutorials/tree/master/AnimatedLeftMenuDesign