Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

December 14, 2020 07:55 pm GMT

Just CSS: CSS Only Hamburger Nav Animation

Adding animation can be a quick way to ensure your user knows where to look and what to do when they interact with your application. Plus it just looks really cool, and we like cool points!

Here is a simple Hamburger Animation using CSS Selectors and the Checkbox attribute.

Steps

1. Boilerplate Setup

Start by setting up your generic CSS and HTML templates. I like to see my HTML like JavaScript or a React App, so we are going to isolate the hamburger icon like a component, style it, and then test it so we can reuse it in other applications.

HTML:

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Hamburger Animation</title>    <link rel="stylesheet" href="style.css" />  </head>  <body>    <input type="checkbox" class="menu-btn">      <div class="menu-btn-burger"></div>    </input>  </body></html>

Enter fullscreen mode Exit fullscreen mode

CSS:

* {  margin: 0;  padding: 0;  box-sizing: border-box;}body {  background: blueviolet;  display: flex;  justify-content: center;  align-items: center;  min-height: 100vh;}

Enter fullscreen mode Exit fullscreen mode

2. The Menu Button and CSS Trigram of Heaven

We are going to do something different from the norm, and actually use an input field as our parent element. Doing this helps us replace our JavaScript and simply leverage CSS selectors.

Start by Writing a class for the Menu Button called .menu-btn as such:

Menu Button

.menu-btn {  position: relative;  display: flex;  justify-content: center;  align-items: center;  width: 80px;  height: 80px;  cursor: pointer;  transition: all 0.5s;  opacity: 0;  z-index: 2;}

Enter fullscreen mode Exit fullscreen mode

We want to create a check box that sits over top of our other elements. This way we can click the box like a button and activate its on and off state.

Trigram of Heaven

Fun fact: Trigram comes from the computational term n-gram, a series of contiguous items, or items that share a common border. A great example is word levels, for example:

the quick red
quick red fox
red fox jumps
fox jumps over
jumps over the
over the lazy
the lazy brown
lazy brown dog

This writing of "the quick brown fox jumps over the lazy dog" shows symmetry when written this way.

We are going to create our own Trigram with CSS to communicate visually the presence of a menu within our application.

Trigram Bars

Using ::before and ::after pseudo-elements, we will create the appearance of a trigram within our application.

.menu-btn-burger {  z-index: 0;  width: 50px;  height: 6px;  position: absolute;  background: white;  /* border-radius: 5px; */  transition: all 0.5s;  box-shadow: 0 2px 5px rgba(255, 101, 80, 0.5);}.menu-btn-burger::before,.menu-btn-burger::after {  content: "";  position: absolute;  z-index: 0;  width: 50px;  height: 6px;  background: white;  /* border-radius: 5px; */  transition: all 0.5s ease-in-out;  box-shadow: 0 2px 5px rgba(255, 101, 80, 0.5);}/* Bottom Bar */.menu-btn-burger::before {  transform: translateY(-16px);}/* Top Bar */.menu-btn-burger::after {  transform: translateY(16px);}

Enter fullscreen mode Exit fullscreen mode

Doing this should give you the following:

Now its time to add animation for closed and open state.

3. Animation

CSS Selectors

CSS selectors apply styling to child components based on state of parent component. Since our menu button is a checkbox we can leverage the checked of unchecked state for animation purposes.

We need two state:

Closed === Trigram of Heavan
Open === X symbol (No middle Bar)

Since our menu will naturally begin in closed state, that means our animations need to match the Open State ( ) of the Trigram.

/* Animation *//* Disappearing Middle Bar */.menu-btn:checked + .menu-btn-burger {  transform: translateX(-50px);  background: transparent;  box-shadow: none;}/* Rotation to X symbol */.menu-btn:checked + .menu-btn-burger::before {  transform: rotate(45deg) translate(35px, -35px);}.menu-btn:checked + .menu-btn-burger::after {  transform: rotate(-45deg) translate(35px, 35px);}

Enter fullscreen mode Exit fullscreen mode

We will tilt our top and bottom bars whilst removing the middle bar, to give the illusion of an X symbol. This kind of visual communication preserves our HTML elements, and creates a minimalist experience that is easier to code, and entertaining to use.

Final Product

Thanks For Reading! Wanna turn this into a full Hamburger Nav? Read My Article on : React.js Hamburger Nav Integration

Resources:

Kumar, P., Kumar, P., 27, V., 30, V., 2, H., 20, H., . . . 3, C. (2017, October 21). An Introduction to N-grams: What Are They and Why Do We Need Them? Retrieved December 14, 2020, from https://blog.xrds.acm.org/2017/10/introduction-n-grams-need/

Original Link: https://dev.to/uzomezu/just-css-css-only-hamburger-nav-animation-h0a

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To