Left side css custom menu using only pure css

Learn how to create custom left side menu with custom CSS. Having easy-to-use navigation is vital for any web site. With CSS you’ll be able to transform boring HTML menus into better-looking navigation bars. Manually style WordPress Navigation Menus. This method needs you to manually add custom CSS and is supposed for intermediate.

you can simply style your menu by adding css classes to every item and create use of it. regarding our CSS Menus. csspoints.com is here to supply the common webmaster with tools to form custom, cross-browser compatible web site menus.

Beautiful css menu and buttons or loader with css style rounded corners, css gradient and css3 shadows. NO JavaScript, NO Images, CSS3 Only. Navigation is such an important a part of your web site. It’s however your visitors navigate to the most areas of your website and makes it simple for them to search out your smart.

HTML

<!-- title -->
<h1 class="title">Offscreen Menu</h1>
<p class="title__p">Click / Space the icon that's on the top left to open the menu.</p>
<!-- /title -->

<!-- checkbox -->
<input type="checkbox" id="nav-checkbox">
<label for="nav-checkbox" class="checkbox-label">
	<span class="l-span-1"></span>
</label>
<!-- /checkbox -->

<!-- nav -->
<nav class="nav">
	<h1 class="nav__title">Title/Logo</h1>

	<ul class="nav__ul">
		<li class="nav__li">
			<a href="#" class="nav__link">Home</a>
		</li>
		<li class="nav__li">
			<a href="#" class="nav__link">About</a>
		</li>
		<li class="nav__li">
			<a href="#" class="nav__link">Service</a>
		</li>
		<li class="nav__li">
			<a href="#" class="nav__link">Contact</a>
		</li>
	</ul>
	<p class="nav__copyright">© 2019, csspoints.</p>
</nav>
<!-- /nav -->

CSS

*, *::after, *::before {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html {
	font-size: 62.5%;
}
body {
	--light-1: hsl(220, 50%, 90%);
	--light-2: hsl(220, 50%, 80%);
	--focus: hsl(210, 90%, 50%);
	--global-background: hsl(220, 25%, 10%);
	--background: linear-gradient(to right, hsl(210, 30%, 20%), hsl(255, 30%, 25%));

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Open Sans', sans-serif;
	min-height: 100vh;
	color: var(--light-1);
	background: var(--global-background);
}
a, a:link {
	font-family: inherit;
	text-decoration: none;
}
a:focus {
	outline: none;
}

/* title */
.title {
	font-size: 10rem;
	font-weight: normal;
	letter-spacing: .8rem;
	margin-bottom: 2.6rem;
}
.title__p {
	font-size: 1.6rem;
}

/* checkbox */
#nav-checkbox {
	position: absolute;
	top: -100%;
	left: -100%;
	z-index: -1;
	opacity: 0;
}
.checkbox-label {
	--br: 0;
	--transform--before: translateY(-.9rem);
	--transform--after: translateY(.9rem);
	display: flex;
	width: 5.4rem;
	height: 5.4rem;
	border-radius: 100rem;
	position: absolute;
	top: 6rem;
	left: 6rem;
	cursor: pointer;
	transition: .4s;
}
.checkbox-label::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: inherit;
	height: inherit;
	border-left: 1px solid var(--light-1);
	opacity: .2;
}

#nav-checkbox:hover+.checkbox-label, #nav-checkbox:focus+.checkbox-label {
	--color-1: var(--focus);
	--color-2: var(--focus);
}
.l-span-1 {
	width: 3rem;
	height: .2rem;
	background: var(--color-1, var(--light-1));
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: all .3s;
}
.l-span-1::before, .l-span-1::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: inherit;
	background: var(--color-2, var(--light-1));
	transition: inherit;
}
.l-span-1::before {
	width: var(--width, calc(100% / 2));
	transform: var(--transform--before);
}
.l-span-1::after {
	width: var(--width, calc(100% / 3));
	transform: var(--transform--after);
}
#nav-checkbox:checked+.checkbox-label {
	--color-1: transparent;
	--width: 100%;
	--transform--before: rotate(calc(45deg));
	--transform--after: rotate(-45deg);
	left: 26rem;
}

/* nav */

.nav {
	--o: 0;
	--ty: translateY(2rem);
	--tx: translateX(-6rem);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	overflow: auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	width: 22rem;
	height: 100%;
	padding: 6rem 0;
	visibility: hidden;
	background: var(--background);
	box-shadow: .4rem 0 2.4rem .2rem hsla(0, 0%, 0%, 0.2);
	transform: translateX(-100%);
	transition: .4s;
}
#nav-checkbox:checked~.nav {
	--o: 1;
	--ty: translateY(0);
	--tx: translateX(0);
	transform: translateX(0);
	visibility: visible;
}
.nav__title {
	font-size: 3.2rem;
	font-weight: normal;
	opacity: var(--o);
	transform: var(--ty);
	transition: .3s .2s;
}
.nav__ul {
	width: 100%;
	margin: 6rem 0;
	list-style: none;
}
.nav__li {
	opacity: var(--o);
	transition: var(--n) .2s;
	transform: var(--tx);

	text-align: center;
	padding: 1rem 0;

	position: relative;
}
.nav__link {
	color: inherit;
	font-size: 1.6rem;
	transition: .4s;
}
.nav__link::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	border-radius: .2rem;
	background: var(--global-background);
	opacity: 0;
	transition: inherit;
	transform: translateX(-1rem);
}
.nav__link:hover, .nav__link:focus {
	padding-left: .4rem;
	color: var(--light-2);
}
.nav__link:hover::before, .nav__link:focus::before {
	opacity: .4;
	transform: translateX(0);
}
.nav__copyright {
	font-size: 1.2rem;
	transform: var(--tx);
	transition: .3s .2s;
}
Leave a Reply