Medium Menu
How do I make an medium menu?
I'm a fan of Medium's UI design. On this experiment I try to reproduce the design of their awesome menu.. What is a medium menu? How do you make a medium menu? This script and codes were developed by Lucas Motta on 22 September 2022, Thursday.
Medium Menu - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Medium Menu</title> <meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav class=" menu "> <div class=" logo "> <span class=" icon icon--logo-m "></span> </div> <ul class=" menu--list "> <li class=" menu__list--item " title="Go home"> <span class=" icon icon--logo-m is-overriden "></span> <a href="#">Home</a> </li> <li class=" menu__list--item " title="View your profile"> <span class=" user-avatar "> <!-- WebP FTW! --> <img src="http://db.tt/GP3CSQDz" /> </span> <a href="#">Rafael Rinaldi</a> </li> <li class=" menu__list--item " title="New post"> <span class=" icon icon--new-post "></span> <span class=" icon icon--settings is-right is-big "></span> <a href="#">New Post</a> </li> <li class=" menu__list--item " title="View your drafts"> <span class=" icon icon--draft "></span> <a href="#">Drafts</a> </li> <li class=" menu__list--item " title="View your reading list"> <span class=" icon icon--reading-list "></span> <a href="#">Reading List</a> </li> <li class=" menu__list--item " title="View your activity"> <span class=" icon icon--activity "></span> <span class=" badge is-right ">10</span> <a href="#">Activity</a> </li> </ul>
</nav> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Medium Menu - Script Codes CSS Codes
@import "http://db.tt/Gl73HGYI";
body { -moz-font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; margin: 10px; padding: 0; background: url(http://db.tt/awdlVCUb) no-repeat; background-size: cover;
}
.menu { position: absolute; float: left; width: 50px; height: 45px; background: red;
}
.menu:hover .menu--list { display: block; width: 210px; height: 270px;
}
.menu:hover .logo { display: none;
}
.menu--list { float: left; padding: 0; margin: 0; display: none;
}
.menu__list--item { cursor: pointer; color: #b3b3b1; background: #333332; width: 195px; height: 30px; list-style: none; font-family: "Medium Menu Bold"; font-size: 12px; padding-left: 15px; padding-top: 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.menu__list--item.is-active { color: white;
}
.menu__list--item:first-child { -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0;
}
.menu__list--item:last-child { -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; border-bottom-left-radius: 5px; border-bottom: transparent;
}
.menu__list--item:hover { background: #232323;
}
.menu__list--item a { margin-left: 10px; text-decoration: none; color: inherit;
}
.icon, .user-avatar { display: block; float: left; width: 16px; height: 16px; line-height: 16px; font-family: "Medium Icons"; font-style: normal; font-weight: 400; font-size: 16px; text-align: center; text-decoration: none; text-rendering: optimizeLegibility; vertical-align: middle;
}
.badge { font-family: "Medium Menu Bold"; padding: 1px; display: block; width: 16px; height: 16px; line-height: 16px; text-align: center; color: white; background: #52a463; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;
}
.icon--logo-m.is-overriden { margin-left: 2px; margin-top: -1px;
}
.user-avatar { overflow: hidden; border: 2px solid #b3b3b1; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%;
}
.user-avatar img { width: inherit; height: inherit;
}
.logo { position: absolute; width: 50px; height: 45px; line-height: 45px; color: white; background: #232323; opacity: 0.95; border-bottom: 5px solid #52a463;
}
.logo > * { display: block; width: inherit; height: inherit; line-height: inherit; text-align: center; vertical-align: middle;
}
.is-right { float: right; margin-right: 10px;
}
.is-big { font-size: 18px;
}
Developer | Lucas Motta |
Username | lucasmotta |
Uploaded | September 22, 2022 |
Rating | 3 |
Size | 3,923 Kb |
Views | 26,312 |
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 Triangles with shadow | 2,920 Kb |
A Pen by Lucas Motta | 4,076 Kb |
Follow the kitty | 4,466 Kb |
Medium Menu | 3,923 Kb |
3D Kitty Grid | 3,428 Kb |
Responsive Infinite Carousel | 5,704 Kb |
Flying Particles | 4,660 Kb |
CSS Grid Example | 10,061 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 |
Subscription Newsletter - Before inlining | Bradstrong | 7,526 Kb |
Sass Radar | Jlong | 6,887 Kb |
Mesmerizing octopus | Jllodra | 3,549 Kb |
My Starter Kit For Codepen | Dkdesign | 2,012 Kb |
Reading Grid | Tappily | 4,306 Kb |
Nice textured background | Hans | 2,659 Kb |
A Pen by Kevin | Kevinkenger | 2,642 Kb |
Background-blend-mode Test | 0x04 | 4,744 Kb |
Importable Clearfix | Corysimmons | 1,411 Kb |
Animated rainbow wave on canvas | Icodeforlove | 2,777 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!