Another menu concept

Developer
Rune Sejer Hoffmann
Size
4,533 Kb
Views
10,120
  1. Another menu concept Previews
  2. Another menu concept HTML Codes
  3. Another menu concept CSS Codes
  4. Another menu concept JS Codes

How do I make an another menu concept?

One more for the collection, this one includes a custom menu icon, i thins the animation became great.. What is a another menu concept? How do you make a another menu concept? This script and codes were developed by Rune Sejer Hoffmann on 10 December 2022, Saturday.

Another menu concept Previews
IQ Test

Another menu concept - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Another menu concept</title> <link href="https://fonts.googleapis.com/css?family=Fira+Sans:200,300,400,500" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="menu-icon">	<span class="menu-icon__line menu-icon__line-left"></span>	<span class="menu-icon__line"></span>	<span class="menu-icon__line menu-icon__line-right"></span>
</div>
<div class="nav">	<div class="nav__content">	<ul class="nav__list">	<li class="nav__list-item">Home</li>	<li class="nav__list-item">About</li>	<li class="nav__list-item">Projects</li>	<li class="nav__list-item">Contact</li>	</ul>	</div>
</div>
<div class="site-content">	<h1 class="site-content__headline">Another menu concept</h1>
</div> <script src="js/index.js"></script>
</body>
</html>

Another menu concept - Script Codes CSS Codes

body { background-color: #1e2023; font-family: "Fira Sans", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.site-content { max-width: 1100px; height: 100vh; margin-left: auto; margin-right: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.site-content__headline { font-weight: 200; color: #ffffff; font-size: calc(2vw + 10px);
}
.menu-icon { height: 30px; width: 30px; position: fixed; z-index: 2; left: 50px; top: 30px; cursor: pointer;
}
.menu-icon__line { height: 2px; width: 30px; display: block; background-color: #ffffff; margin-bottom: 4px; -webkit-transition: background-color .5s ease, -webkit-transform .2s ease; transition: background-color .5s ease, -webkit-transform .2s ease; transition: transform .2s ease, background-color .5s ease; transition: transform .2s ease, background-color .5s ease, -webkit-transform .2s ease;
}
.menu-icon__line-left { width: 15px;
}
.menu-icon__line-right { width: 15px; float: right;
}
.nav { position: fixed; z-index: 1;
}
.nav:before, .nav:after { content: ""; position: fixed; width: 100vw; height: 100vh; background: rgba(234, 234, 234, 0.2); z-index: -1; -webkit-transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s; transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s; transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s; transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s, -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s; -webkit-transform: translateX(0%) translateY(-100%); transform: translateX(0%) translateY(-100%);
}
.nav:after { background: white; -webkit-transition-delay: 0s; transition-delay: 0s;
}
.nav:before { -webkit-transition-delay: .1s; transition-delay: .1s;
}
.nav__content { position: fixed; top: 50%; -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); width: 100%; text-align: center; font-size: calc(2vw + 10px); font-weight: 200; cursor: pointer;
}
.nav__list-item { position: relative; display: inline-block; -webkit-transition-delay: 0.8s; transition-delay: 0.8s; opacity: 0; -webkit-transform: translate(0%, 100%); transform: translate(0%, 100%); -webkit-transition: opacity .2s ease, -webkit-transform .3s ease; transition: opacity .2s ease, -webkit-transform .3s ease; transition: opacity .2s ease, transform .3s ease; transition: opacity .2s ease, transform .3s ease, -webkit-transform .3s ease; margin-right: 25px;
}
.nav__list-item:before { content: ""; position: absolute; background: #000000; width: 20px; height: 1px; top: 100%; -webkit-transform: translate(0%, 0%); transform: translate(0%, 0%); -webkit-transition: all .3s ease; transition: all .3s ease; z-index: -1;
}
.nav__list-item:hover:before { width: 100%;
}
body.nav-active .menu-icon__line { background-color: #000; -webkit-transform: translateX(0px) rotate(-45deg); transform: translateX(0px) rotate(-45deg);
}
body.nav-active .menu-icon__line-left { -webkit-transform: translateX(1px) rotate(45deg); transform: translateX(1px) rotate(45deg);
}
body.nav-active .menu-icon__line-right { -webkit-transform: translateX(-2px) rotate(45deg); transform: translateX(-2px) rotate(45deg);
}
body.nav-active .nav { visibility: visible;
}
body.nav-active .nav:before, body.nav-active .nav:after { -webkit-transform: translateX(0%) translateY(0%); transform: translateX(0%) translateY(0%);
}
body.nav-active .nav:after { -webkit-transition-delay: .1s; transition-delay: .1s;
}
body.nav-active .nav:before { -webkit-transition-delay: 0s; transition-delay: 0s;
}
body.nav-active .nav__list-item { opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); -webkit-transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease; transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease; transition: opacity .3s ease, transform .3s ease, color .3s ease; transition: opacity .3s ease, transform .3s ease, color .3s ease, -webkit-transform .3s ease;
}
body.nav-active .nav__list-item:nth-child(0) { -webkit-transition-delay: 0.5s; transition-delay: 0.5s;
}
body.nav-active .nav__list-item:nth-child(1) { -webkit-transition-delay: 0.6s; transition-delay: 0.6s;
}
body.nav-active .nav__list-item:nth-child(2) { -webkit-transition-delay: 0.7s; transition-delay: 0.7s;
}
body.nav-active .nav__list-item:nth-child(3) { -webkit-transition-delay: 0.8s; transition-delay: 0.8s;
}
body.nav-active .nav__list-item:nth-child(4) { -webkit-transition-delay: 0.9s; transition-delay: 0.9s;
}

Another menu concept - Script Codes JS Codes

'use strict';
console.clear();
var app = function () {	var body = undefined;	var menu = undefined;	var menuItems = undefined;	var init = function init() {	body = document.querySelector('body');	menu = document.querySelector('.menu-icon');	menuItems = document.querySelectorAll('.nav__list-item');	applyListeners();	};	var applyListeners = function applyListeners() {	menu.addEventListener('click', function () {	return toggleClass(body, 'nav-active');	});	};	var toggleClass = function toggleClass(element, stringClass) {	if (element.classList.contains(stringClass)) element.classList.remove(stringClass);else element.classList.add(stringClass);	};	init();
}();
Another menu concept - Script Codes
Another menu concept - Script Codes
Home Page Home
Developer Rune Sejer Hoffmann
Username RSH87
Uploaded December 10, 2022
Rating 3.5
Size 4,533 Kb
Views 10,120
Do you need developer help for Another menu concept?

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!

Rune Sejer Hoffmann (RSH87) Script Codes
Name
Offset menu
Svg polycat
Social sharing button
Pure css download button
A Pen by Rune Sejer Hoffmann
Nav ui
Fadout menu concept
Perspective CSS hover effect
Crosshair loader
Left right navigation
Create amazing marketing copy 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!