A Little Menu Bar
How do I make an a little menu bar?
A smooth little UI menu bar with some snazzy hover and active states, check it out! : ). What is a a little menu bar? How do you make a a little menu bar? This script and codes were developed by Billy Crist on 04 October 2022, Tuesday.
A Little Menu Bar - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Little Menu Bar</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="mm-menu"> <a href="javascript:;" class="mm-item"><span class="fontawesome-home"></span></a> <a href="javascript:;" class="mm-item"><span class="fontawesome-comment"></span></a> <a href="javascript:;" class="mm-item"><span class="fontawesome-th"></span></a> <a href="javascript:;" class="mm-item"><span class="fontawesome-camera"></span></a> <a href="javascript:;" class="mm-item"><span class="fontawesome-cog"></span></a>
</div><!--/mm-menu--> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
A Little Menu Bar - Script Codes CSS Codes
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
html, body { height: 100%; position: relative;
}
body { margin: 0; background: radial-gradient(circle at 40% 0%, #eeeeee 10%, #999999);
}
.mm-menu { font-size: 1rem; position: relative; width: 22.5em; height: 4.5em; border-radius: 0.15em; background: #c4cac8; box-shadow: 0 -1px 0.3em rgba(0, 0, 34, 0.2) inset, 0 -1px 1px rgba(0, 0, 34, 0.03) inset, 2px 2px 3px rgba(0, 0, 34, 0.2); margin: -2.25em auto 0; top: 50%;
}
.mm-item > [class*="fontawesome-"]::before { display: block; font-family: 'FontAwesome'; font-size: 2em; text-align: center; line-height: 2.25em; color: #c9c9c9; text-shadow: 0 -0.03em rgba(0, 0, 0, 0.21), 0 0.03em 0.06em rgba(255, 255, 255, 0.5);
}
.mm-item { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; position: relative; top: -0.25em; float: left; width: 4.5em; height: 4.5em; text-decoration: none; border-radius: 0.15em; transition: 250ms; background: linear-gradient(#f6f7f9, #d6d8dc) 0 50%; background-size: 100% 200%;
}
.mm-item:hover { top: -0.35em; background-position: 0 0%;
}
.mm-item:focus,
.mm-item:active { outline: none; top: -0.15em; background-position: 0 100%;
}
.mm-item,
.mm-item:first-of-type:focus,
.mm-item:first-of-type:active,
.mm-item:hover:focus + .mm-item,
.mm-item:hover:active + .mm-item { box-shadow: 1px 1px 0 0 rgba(255, 255, 255, 0.15) inset, 0 0 0 0 transparent inset, 0.2em 0.2em 0.3em -0.07em rgba(255, 255, 255, 0.6) inset, -0.2em -0.3em 0.3em -0.07em rgba(0, 0, 0, 0.08) inset;
}
.mm-item:hover + .mm-item,
.mm-item:focus,
.mm-item:active { box-shadow: 0 0.3em 0.3em -0.2em rgba(255, 255, 255, 0.6) inset, 1px 0 0 0 rgba(0, 0, 0, 0.02) inset, 0.35em 0 0.3em -0.2em rgba(0, 0, 34, 0.07) inset, -0.2em -0.3em 0.3em -0.07em rgba(0, 0, 0, 0.08) inset;
}
.mm-item:hover + .mm-item:focus { box-shadow: 0 0.3em 0.3em -0.2em rgba(255, 255, 255, 0.6) inset, 1px 0 0 0 rgba(0, 0, 0, 0.01) inset, 0.45em 0 0.3em -0.2em rgba(0, 0, 34, 0.09) inset, -0.2em -0.3em 0.3em -0.07em rgba(0, 0, 0, 0.08) inset;
}
@media only screen and (height: 300px) { .mm-menu { font-size: 1.5rem; } .mm-item:nth-of-type(1) { top: -0.35em; background-position: 0 0%; } .mm-item:nth-of-type(1)::after { top: 4.8em; } .mm-item:nth-of-type(2) { box-shadow: 0 0.2em 0.3em -2px rgba(255, 255, 255, 0.6) inset, -1px -1px 0 0 rgba(0, 0, 0, 0.03) inset, 0.3em 0 0.2em -2px rgba(0, 0, 0, 0.05) inset, -0.2em -0.2em 0.3em -2px rgba(0, 0, 0, 0.08) inset; } .mm-item:nth-of-type(3) { top: -0.15em; background-position: 0 100%; box-shadow: 0 0.2em 0.3em -2px rgba(255, 255, 255, 0.6) inset, -1px -1px 0 0 rgba(0, 0, 0, 0.03) inset, 0.3em 0 0.2em -2px rgba(0, 0, 0, 0.05) inset, -0.2em -0.2em 0.3em -2px rgba(0, 0, 0, 0.08) inset; } .mm-item:nth-of-type(3)::after { top: 4.6em; } .mm-item:last-of-type::before { width: 43.4%; }
}
A Little Menu Bar - Script Codes JS Codes
// JS needed to simulate the "sticky" focus state, aka stay pressed down, in chrome:
$(".mm-item").click(function() { $(this).focus();
});
Developer | Billy Crist |
Username | billyysea |
Uploaded | October 04, 2022 |
Rating | 4.5 |
Size | 3,899 Kb |
Views | 24,288 |
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 |
Random Swim Slider | 2,345 Kb |
A Music Player | 6,174 Kb |
Full Page Vertical Hover Sliders | 2,418 Kb |
SuprLiTE CSS Arrows | 3,691 Kb |
Switches | 3,081 Kb |
Interactive Business Card - OG | 3,334 Kb |
A Bouncy Menu Toggle | 4,563 Kb |
Hotel Booking ..in progress | 4,458 Kb |
Camera | 2,136 Kb |
A Sphere | 2,244 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 |
Cool Page Split Effect | Anthonyadamski | 6,128 Kb |
Sign Up Form | Sicontis | 5,272 Kb |
Disable JavaScript execution from console | Ludviglindblom | 2,534 Kb |
Sony Xperia Z3 Flat MockUp | Dapinitial | 4,379 Kb |
Slider css only | Armandobau | 2,161 Kb |
Save for later... | Victorfreire | 1,359 Kb |
Svg penguin | _massimo | 2,990 Kb |
Mosaic transition effect between two photos using jQuery | Stathisg | 2,518 Kb |
CSS Link Icons with jQuery Titles | Nicwinn | 2,312 Kb |
Midterm dry run | Jds317 | 1,649 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!