Hamburger menu animations, all with pure CSS
A Pen by rosalieelphick on CodePen.
Raloux Nouebissie nraloux
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link href="https://unpkg.com/[email protected]/dist/tailwind.min.css" rel="stylesheet"> | |
| </head> | |
| <body class="h-screen overflow-hidden flex items-center justify-center" style="background: #edf2f7;"> | |
| <div class="bg-purple-800 p-6"> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link href="https://unpkg.com/[email protected]/dist/tailwind.min.css" rel="stylesheet"> | |
| </head> | |
| <body class="h-screen overflow-hidden flex items-center justify-center" style="background: #edf2f7;"> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link href="https://unpkg.com/[email protected]/dist/tailwind.min.css" rel="stylesheet"> | |
| </head> | |
| <body class="h-screen overflow-hidden flex items-center justify-center" style="background: #edf2f7;"> | |
| <!-- This is an example component --> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <section class="app"> | |
| <aside class="sidebar"> | |
| <header> | |
| Menu | |
| </header> | |
| <nav class="sidebar-nav"> | |
| <ul> | |
| <li> | |
| <a href="#"><i class="ion-bag"></i> <span>Shop</span></a> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .burgers | |
| label.burger.burger1(for="burger1") | |
| input#burger1.hidden(type="checkbox") | |
| span | |
| label.burger.burger2(for="burger2") | |
| input#burger2.hidden(type="checkbox") | |
| span | |
| label.burger.burger3(for="burger3") | |
| input#burger3.hidden(type="checkbox") | |
| span |
A Pen by Elitsa Dimitrova on CodePen.
Got this wonderful idea of these cool corner ribbons and decided to make it ready for use. Custom styles like colors work with simple class changes.
A Pen by Miro Karilahti on CodePen.
A Pen by Swarup Kumar Kuila on CodePen.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .heading | |
| h1 Ordered List UI | |
| .container | |
| .nav | |
| a(href='#') | |
| i(class='fal fa-home') | |
| a(href='https://twitter.com/collinscode_' target='_blank') | |
| i(class='fab fa-twitter') | |
| a(href='https://github.com/cmdeveloped' target='_blank') |