/ Dropdown Menu

Pure CSS dropdown menu ui

Pure CSS dropdown menu ui

Pure CSS dropdown menu.

Made with

Html
Css

html

<p class='title'><a href='https://dribbble.com/shots/850410' target='_blank'>Dropdown Menu UI</a></p>

<div class='panel noselect'>
	<div class='admin-panel'>
		<label class='text' for='toggle'>Admin Settings</label>
		<label class='fas fa-cog' for='toggle'></label>
	</div>

	<input type='checkbox' id='toggle'>

	<div class='menu-panel'>
		<div class='arrow'></div>
		<a href='#' class='row'>
			<div class='column-left'>Edit Users</div>
			<div class='column-right'><i class='fas fa-user'></i></div>
		</a>
		<a href='#' class='row'>
			<div class='column-left'>Web Statistics</div>
			<div class='column-right'><i class='far fa-chart-bar'></i></div>
		</a>
		<a href='#' class='row'>
			<div class='column-left'>Upload Settings</div>
			<div class='column-right'><i class='fas fa-upload'></i></div>
		</a>
		<a href='#' class='row'>
			<div class='column-left'>Edit Slider</div>
			<div class='column-right'><i class='fas fa-edit'></i></div>
		</a>
</div>

Css

@import 'https://use.fontawesome.com/releases/v5.0.10/css/all.css';
@import 'https://fonts.googleapis.com/css?family=Lato:300';

html {
	height: 100%;
	box-shadow: inset 0 0 30px hsla(0, 0%, 0%, 0.3);
}

body {
	margin: 0;
	padding: 0;
	font-family: 'Helvetica', 'Arial', sans-serif;
	background-color: #8b9da9;
	background: linear-gradient(#8b9da9, #fff6e4);
}

.title { text-align: center; }

.title a {
	font-family: 'Lato', 'Helvetica', 'Arial', sans-serif;
	font-size: 24px;
	color: #566b78;
	text-decoration: none;
}

.title a:hover { text-decoration: underline; }

.panel {
	margin: 15px auto 15px;
	max-width: 250px;
}

.admin-panel {
	padding: 12px 0;
	background-color: #f8f8f8;
	border-radius: 3px;
	box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
}

.admin-panel .text {
	color: #888888;
	font-size: 13px;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	margin-left: 10px;
}

.admin-panel .fa-cog {
	float: right;
	margin-right: 10px;
	font-size: 20px;
	color: #888888;
}

.admin-panel :hover { cursor: pointer; color: #555555; }

input#toggle { display: none; }
input#toggle ~ .menu-panel { display: block; }
input#toggle:checked ~ .menu-panel { display: none; }

.menu-panel {
	margin-top: 14px;
	background-color: #f8f8f8;
	border-radius: 3px;
	box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
}

.arrow {
	position: absolute;
	top: 111px;
	margin-left: 15px;
	width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 9px solid #f8f8f8;
}

.menu-panel .row {
	display: flex;
	justify-content: center;
	align-items: center;
}

.menu-panel .column-left {
	float: left;
	width: 85%;
	margin-left: 10px;
}

.menu-panel .column-right {
	float: right;
	width: 15%;
	padding: 8px;
	text-align: right;
}

/* Clear floats after the columns */
.menu-panel .row:after {
	content: '';
	display: table;
	clear: both;
}

.menu-panel a {
	color: #888888;
	font-size: 13px;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
}

.menu-panel i {
	font-size: 18px;
	width: 25px;
	text-align: center;
}

.menu-panel:hover .row:hover { background: #ebebeb; color: #555555; border-radius: 3px; }

.menu-panel:hover a { color: #bebebe; }

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

Demo

See the Pen Dropdown Menu UI by Jeplaa (@Jeplaa) on CodePen.

CodeTea

A Nice collection of often useful examples done in HTML JavaScript CSS.

Read More