Navigation Icon 3 lines to X
How do I make an navigation icon 3 lines to x?
Just testing my CSS skills to create 3 lines icon to X, though it can be arrow or any thing. Purely done with CSS3, just toggling class with jQuery.. What is a navigation icon 3 lines to x? How do you make a navigation icon 3 lines to x? This script and codes were developed by Satnam Singh on 07 October 2022, Friday.
Navigation Icon 3 lines to X - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Navigation Icon 3 lines to X</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a class="lines-button"> <div class="line"></div>
</a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Navigation Icon 3 lines to X - Script Codes CSS Codes
body { text-align: center;
}
.lines-button { padding: 3em; display: inline-block; margin: 7em auto; text-align: center; cursor: pointer; transition: all .2s;
}
.lines-button:hover { -webkit-transform: scale3d(.8, .8, .8);
}
.line { background: rgba(255, 0, 0, .5); width: 6em; height: .8em; box-shadow: 0 0 0 3px red; border-radius: 1em; position: relative; transition: all .2s;
}
.line:before, .line:after { content: ''; background: rgba(255, 0, 0, .5); width: 6em; height: .8em; box-shadow: 0 0 0 3px red; border-radius: 1em; position: absolute; left: 0; -webkit-transform-origin: center center; transition: all .2s;
}
.line:before { background: rgba(0, 255, 0, .5); box-shadow: 0 0 0 3px green; top: -1.8em;
}
.line:after { background: rgba(0, 0, 255, .5); box-shadow: 0 0 0 3px blue; top: 1.8em;
}
.transform.lines-button .line { background: none; box-shadow: none;
}
.transform.lines-button .line:before { top: 0; -webkit-transform: rotate3d(0,0,1,-45deg); width: 6em;
}
.transform.lines-button .line:after { top: 0; -webkit-transform: rotate3d(0,0,1,45deg); width: 6em;
}
Navigation Icon 3 lines to X - Script Codes JS Codes
$('.lines-button').click(function() { $(this).toggleClass('transform');
});
Developer | Satnam Singh |
Username | rssatnam |
Uploaded | October 07, 2022 |
Rating | 3 |
Size | 2,053 Kb |
Views | 30,360 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
CSS Ribbon | 1,903 Kb |
Giving Strike, Del or S elements a Color | 1,505 Kb |
JavaScript Reference Type | 1,984 Kb |
Pure CSS3 Drop-down Navigation with Effects | 2,262 Kb |
SVG Cone Scribble | 1,724 Kb |
Navigation Slider | 2,107 Kb |
Image Viewer | 2,115 Kb |
CSS Image Parallax Effect | 2,232 Kb |
Menu Hover Animation | 2,057 Kb |
Countdown Timer with Video | 2,428 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
A Pen by Jess | Jessamyne | 5,100 Kb |
Sony Xperia Z3 Flat MockUp | Dapinitial | 4,379 Kb |
Part 19 Bootstrap split button dropdown | Venkatesha | 1,601 Kb |
Right Click Menu | Anodpixels | 2,252 Kb |
Ionic Infinite outside ion-content with ion-pane | Felquis | 3,117 Kb |
CSS3 Form | Tusharbandal | 1,836 Kb |
Savemedia1.1 | EdsonAlcala | 2,148 Kb |
Particle Motion trajectories | Sniejadlik | 5,899 Kb |
Svg animation draw | SzymonDziewonski | 5,545 Kb |
Animated Donut Chart | Jplhomer | 3,808 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!