Lastik menu
How do I make an lastik menu?
Simple lava-lamp like horizontal menu, using Tweenmax . What is a lastik menu? How do you make a lastik menu? This script and codes were developed by Chrysto on 16 July 2022, Saturday.
Lastik menu - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Lastik menu</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="menu"> <ul id="menu-list"> <li> <a href="#">Home</a></li> <li> <a href="#">Gallery</a></li> <li> <a href="#">Contacts</a></li> <li> <a href="#">Blog</a></li> </ul> <div id="menu-line"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Lastik menu - Script Codes CSS Codes
html, body, div { margin: 0; padding: 0; font-family: "Helvetica Neue", Helvetica, sans-serif;
}
#menu{ position: relative; text-align: center; margin: 100px;
}
#menu-line{ display: block; position: absolute; left: 50%; top: 25px; width: 0; height: 5px; background-color: black;
}
ul{ z-index: 100;
}
ul li { display: inline-block; margin-right: 30px;
}
ul li a{ display: block; font-size: 20px; text-transform: uppercase; text-decoration: none; color: black;
}
Lastik menu - Script Codes JS Codes
$(function(){ var currentIndex = 0; var _offset = 10; var $menuLi = $("#menu-list li"); var $line = $("#menu-line"); $menuLi.on("click", function(){ var _$this = $(this); TweenMax.killTweensOf($line); if( _$this.index() > currentIndex ){ TweenMax.to($line, 0.5, {css: {width: (_$this.position().left + _$this.outerWidth()) - $line.position().left + _offset/2 }, onComplete:function(){ currentIndex = _$this.index(); TweenMax.to($line, 0.5, { css:{ left : _$this.position().left - _offset/2, width: _$this.outerWidth() + _offset } }) } }); } else { TweenMax.to($line, 0.5, {css: { left: _$this.position().left - _offset/2, width: ($line.position().left + $line.outerWidth()) - _$this.position().left + _offset/2 }, onComplete:function(){ currentIndex = _$this.index(); TweenMax.to($line, 0.5, { css:{ width: _$this.outerWidth() + _offset } }) } }); } }); });
Developer | Chrysto |
Username | bassta |
Uploaded | July 16, 2022 |
Rating | 4 |
Size | 2,257 Kb |
Views | 40,480 |
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 |
Single page website | 2,688 Kb |
Smooth scroll | 4,915 Kb |
Medium.com style header effect | 2,828 Kb |
Fullscreen Parallax | 3,313 Kb |
One page website scrolling effect | 2,764 Kb |
TweenMax text - changing slogans | 2,333 Kb |
Simple one page header concept | 2,530 Kb |
Page Header animation | 2,828 Kb |
TweenLite staggerTo | 2,495 Kb |
GSAP Parallax | 2,513 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 |
Sexy Social Buttons | Ipiyale | 2,226 Kb |
Blank Starter | Mhartington | 2,171 Kb |
A Pen by Matt Popovich | Mpopv | 3,349 Kb |
Toggle Time | Petebot | 5,345 Kb |
Canvas stripes | Adrianparr | 1,948 Kb |
Coburg Banks SVG Logo | Mjtweaver | 3,875 Kb |
Twinner Spinner II | Katydecorah | 2,974 Kb |
Hovers with popups | Zacharyolson | 2,380 Kb |
Two column of responsive height | Fixie | 2,908 Kb |
Christ the Redeemer | Prashantsani | 2,208 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!