Hamburglar

Developer
Travis Arnold
Size
3,457 Kb
Views
26,312
  1. Hamburglar Previews
  2. Hamburglar HTML Codes
  3. Hamburglar CSS Codes
  4. Hamburglar JS Codes

How do I make an hamburglar?

Hamburger menu icon animation. Working on making it as modular and portable as possible.TODO: add if statement for menu text, check weird text jump on active, round pixels. What is a hamburglar? How do you make a hamburglar? This script and codes were developed by Travis Arnold on 12 September 2022, Monday.

Hamburglar Previews
IQ Test

Hamburglar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hamburglar</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .menu-icon { display: inline-block; position: relative; padding: 28.8px 21.6px 28.8px 115.2px; text-indent: -93.6px; font-size: 28.8px; line-height: 6px; color: #fff; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 3px; cursor: pointer; user-select: none;
}
.menu-icon i { position: relative; display: block; width: 36px; height: 6px; background: #fff; border-radius: 5em; font-style: normal; transition: background 0.1s;
}
.menu-icon i:after, .menu-icon i:before { content: ''; display: block; position: absolute; z-index: -1; height: 6px; width: 36px; background: #fff; border-radius: inherit; transition: top 0.1s 0.2s ease, transform 0.1s ease;
}
.menu-icon i:before { top: -12px;
}
.menu-icon i:after { top: 12px;
}
.is-active i { background: transparent;
}
.is-active i:before, .is-active i:after { top: 0; transition: top 0.1s ease, transform 0.1s 0.2s ease; transform: rotate(45deg) translate(0);
}
.is-active i:after { transform: rotate(-45deg);
}
body { font-family: Helvetica, sans-serif; background: #54C7F3;
}
.menu-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <a class="menu-icon"> <i>Menu</i>
</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>

Hamburglar - Script Codes CSS Codes

.menu-icon { display: inline-block; position: relative; padding: 28.8px 21.6px 28.8px 115.2px; text-indent: -93.6px; font-size: 28.8px; line-height: 6px; color: #fff; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 3px; cursor: pointer; user-select: none;
}
.menu-icon i { position: relative; display: block; width: 36px; height: 6px; background: #fff; border-radius: 5em; font-style: normal; transition: background 0.1s;
}
.menu-icon i:after, .menu-icon i:before { content: ''; display: block; position: absolute; z-index: -1; height: 6px; width: 36px; background: #fff; border-radius: inherit; transition: top 0.1s 0.2s ease, transform 0.1s ease;
}
.menu-icon i:before { top: -12px;
}
.menu-icon i:after { top: 12px;
}
.is-active i { background: transparent;
}
.is-active i:before, .is-active i:after { top: 0; transition: top 0.1s ease, transform 0.1s 0.2s ease; transform: rotate(45deg) translate(0);
}
.is-active i:after { transform: rotate(-45deg);
}
body { font-family: Helvetica, sans-serif; background: #54C7F3;
}
.menu-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}

Hamburglar - Script Codes JS Codes

$('.menu-icon').on('click', function(){ $(this).toggleClass('is-active');
});
Hamburglar - Script Codes
Hamburglar - Script Codes
Home Page Home
Developer Travis Arnold
Username souporserious
Uploaded September 12, 2022
Rating 3.5
Size 3,457 Kb
Views 26,312
Do you need developer help for Hamburglar?

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!

Travis Arnold (souporserious) Script Codes
Name
React Circle Media Player
Instagram Style HTML5 Video Player
Success Message
React Measure Demo
React Media Player Demo
Material CSS Switch
React Checkbox MultiSelect
Wipe Hover Effect
Expose - a responsive jQuery modal plugin
Playing with CSS folding
Create amazing art & images with AI!

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!