Medium Menu

Developer
Lucas Motta
Size
3,923 Kb
Views
26,312
  1. Medium Menu Previews
  2. Medium Menu HTML Codes
  3. Medium Menu CSS Codes

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 Previews
IQ Test

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;
}
Medium Menu - Script Codes
Medium Menu - Script Codes
Home Page Home
Developer Lucas Motta
Username lucasmotta
Uploaded September 22, 2022
Rating 3
Size 3,923 Kb
Views 26,312
Do you need developer help for Medium Menu?

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!

Lucas Motta (lucasmotta) Script Codes
Name
CSS Grid Example
A Pen by Lucas Motta
CSS Triangles with shadow
Responsive Infinite Carousel
3D Kitty Grid
Follow the kitty
Flying Particles
Create amazing Facebook ads 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!