Hamburger subtract

Developer
John Urbank
Size
2,767 Kb
Views
56,672
  1. Hamburger subtract Previews
  2. Hamburger subtract HTML Codes
  3. Hamburger subtract CSS Codes
  4. Hamburger subtract JS Codes

How do I make an hamburger subtract?

I picked up the idea from thetruth.com but I threw in the animation.. What is a hamburger subtract? How do you make a hamburger subtract? This script and codes were developed by John Urbank on 08 July 2022, Friday.

Hamburger subtract Previews
IQ Test

Hamburger subtract - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hamburger subtract</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <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! */ .icon-group { position: relative; width: 65px; height: 40px; transform: translate(-50%, -50%); position: absolute; left: 50%; top: 50%;
}
.icon-group:hover { cursor: pointer;
}
.icon { margin-top: 20px; position: absolute; width: 100%; height: 0.5em; background: #000;
}
.icon:before, .icon:after { position: absolute; width: 100%; height: 0.5em; background: #000; transition: margin-top 150ms; content: ""; display: block; margin-top: -20px;
}
.icon:after { margin-top: 20px;
}
.icon-group.collapsed .icon:before { margin-top: 0;
}
.icon-group.collapsed .icon:after { margin-top: 0;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="icon-group"> <div class="icon"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Hamburger subtract - Script Codes CSS Codes

.icon-group { position: relative; width: 65px; height: 40px; transform: translate(-50%, -50%); position: absolute; left: 50%; top: 50%;
}
.icon-group:hover { cursor: pointer;
}
.icon { margin-top: 20px; position: absolute; width: 100%; height: 0.5em; background: #000;
}
.icon:before, .icon:after { position: absolute; width: 100%; height: 0.5em; background: #000; transition: margin-top 150ms; content: ""; display: block; margin-top: -20px;
}
.icon:after { margin-top: 20px;
}
.icon-group.collapsed .icon:before { margin-top: 0;
}
.icon-group.collapsed .icon:after { margin-top: 0;
}

Hamburger subtract - Script Codes JS Codes

$('.icon-group').on('click', function(){ $(this).toggleClass('collapsed');
});
Hamburger subtract - Script Codes
Hamburger subtract - Script Codes
Home Page Home
Developer John Urbank
Username jurbank
Uploaded July 08, 2022
Rating 3
Size 2,767 Kb
Views 56,672
Do you need developer help for Hamburger subtract?

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!

John Urbank (jurbank) Script Codes
Name
Canvas Geometry
Traveling through Tron - Best viewed in Webkit
Time is Money
A Pen by John Urbank
Simple, CSS only, responsive menu
Mouse Trailing
Logo Slider
Tape Cassette Icon - CSS Only
Gutterless Feature Grid
Diagonal CSS Pattern
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!