We want the navigation to display over the

We are going to use CSS animation to create an animated hamburger icon for your website menus.  1.Initiate documentThe first step is to create the HTML document. This consists of the HTML document container, which includes sections for the head and body. The head section contains descriptive information and links to external resources – in this case the CSS stylesheet. The body section will be populated with the visible content in the next step.

Animated Hamburger Effect  2.Navigation contentThe menu is made from a navigation container that stores a series of links. The first link in this container will be the hamburger icon; a link that will reference the navigation container. The hamburger icon has three span elements, which will be styled to show as the hamburger bars in a later step.

 3. Start the stylesheetThe HTML markup is now complete, so create a new file called ‘styles.css’ to start defining the CSS formatting. The first entry into this file will be to define the document and content body to display with a dark background without border spacing. We also set the font that all elements will inherit.html,body{display: block;width: 100%;height: 100%;margin: 0;padding: 0;font-family: Helvetica, sans-serif;background: rgb(21, 34, 47); }    4.Navigation containerThe navigation container will be set to display at 25% of the document width without any margin. This is important if we don’t want the navigation to display over the full page, hence defining the width controls how wide the menu is to be displayed at. A block display is also used to guarantee that width sizing will work regardless of how a browser treats navigation containers by default.nav{display: block;width: 25%;margin: 0; }  5.Default navigation linksBorder and width settings are applied to the links within the navigation container so that they appear prominently at the same size defined for the navigation width. Navigation links are not visible by default, but become visible when their parent container is targeted; hence the reason why the HTML link of the hamburger icon references its parent navigation container.nav a{display: none;width: 100%;padding: 10%;font-size: 1.5em;border: 3px solid #fff;background: #333;color: #fff; }nav:target a{display: block; }6. Hamburger styleThe hamburger icon will always be the first element inside the navigation container, hence we reference it using the ‘nth-child’ selector. Firstly, we set this to display as a block of five character width. Secondly, the inner elements are styled as white bars in relation to the previously set size. Each bar has a specific margin and height set to appear visible and separate from each other.nav > *:nth-child(1){display: block;width: 5em; }nav > *:nth-child(1) span{position: relative;display: block;width: 100%;height: .5em;margin-top: .25em;background: #fff; }7.Animation: preparationThe animation e?ect will be made from the ‘before’ element that CSS can apply to web page elements. This will add a bar with a red background applied to each of the span elements defined in the previous step. With their parent span using relative positioning, the position of these elements will be positioned in relation to their parent. These elements are initiated with no width, ready to be animated in the next steps.nav > *:nth-child(1) span::before{content: “”;position: absolute;top: 0;left: 0;width: 0;height: 100%;background: red;transition: width 1s;}8. Animation: bar settingsFirstly, the before elements of each of the hamburger bars need to have the ‘open’ animation applied to them when their parent link is being hovered. This animation will be played ‘forwards’ to ensure that it stops on the last frame. Secondly, the second and third bars need to have di?erent delays applied to them for the full e?ect to work.nav > *:nth-child(1):hover span::before{animation: open 1s forwards; }nav > *:nth-child(1):hover span:nthchild(2)::before{animation-delay: .15s; }nav > *:nth-child(1):hover span:nthchild(3)::before{animation-delay: .3s;}9. Animation: definitionThe ‘open’ animation applied to the before elements is a simple two frame animation that changes the width from zero to the full width of the parent burger bar. The browser will fill in all of the animation frames required between these two states to show a smooth transition lasting the time specified in the previous [email protected] open {0% {width: 0;}100% {width: 100%;}}  

We Will Write a Custom Essay Specifically
For You For Only $13.90/page!


order now
x

Hi!
I'm Harold!

Would you like to get a custom essay? How about receiving a customized one?

Check it out