Offset menu

Developer
Rune Sejer Hoffmann
Size
5,402 Kb
Views
6,072
  1. Offset menu Previews
  2. Offset menu HTML Codes
  3. Offset menu CSS Codes
  4. Offset menu JS Codes

How do I make an offset menu?

Just a simple offset menu. What is a offset menu? How do you make a offset menu? This script and codes were developed by Rune Sejer Hoffmann on 10 December 2022, Saturday.

Offset menu Previews
IQ Test

Offset menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Offset menu</title> <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='menuContainer'> <ul> <li>Products</li> <li>About us</li> <li>News</li> <li>Contact</li> </ul>
</div>
<div class='pageWrapper'> <div class='slider'> <div class='menu'> <span></span> </div> </div> <div class='section grey'> <h2> Menu </h2> <p> In finibus erat sed ullamcorper pharetra. Duis semper scelerisque pulvinar. Morbi libero arcu, aliquet at orci sed, lobortis pharetra mauris. Aenean sollicitudin mollis lorem. Fusce euismod magna dolor, vitae sagittis ante vulputate a. Nam et nisl in libero commodo egestas sit amet et purus. In dolor nulla, semper sed dignissim sit amet, elementum et massa. Sed ornare lacus vel elit fringilla, id egestas tellus lobortis. Suspendisse rhoncus quam orci, sed imperdiet odio vulputate a. Cras elementum, mauris vitae sollicitudin tristique, lacus ligula blandit mi, non scelerisque ligula metus eget metus. Nam ut commodo mauris, euismod pellentesque nibh. Nam ac nisi est. In bibendum lectus commodo, pellentesque nisl ac, ornare tellus. In sed justo id est efficitur luctus hendrerit quis quam. Phasellus vulputate massa at metus commodo, eu fringilla lectus euismod. Proin finibus accumsan erat vitae vulputate. </p> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Offset menu - Script Codes CSS Codes

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300);
* { box-sizing: border-box;
}
body { background-color: #f4f3ea; text-rendering: optimizeLegibility; font-smooth: always; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: "Open Sans", sans-serif; overflow-x: hidden;
}
.pageWrapper { position: relative; -webkit-transition: left .4s ease; transition: left .4s ease; left: 0px;
}
.pageWrapper.active { left: 300px;
}
.menuContainer { position: fixed; width: 300px; height: 100vh; top: 0; left: -300px; z-index: 999; background-color: #b8b7b1; padding: 30px; -webkit-transition: left .4s ease; transition: left .4s ease;
}
.menuContainer.active { left: 0px;
}
.menuContainer.active li:nth-child(1) { -webkit-transition: opacity 0.3s ease 0.1s; transition: opacity 0.3s ease 0.1s; opacity: 1;
}
.menuContainer.active li:nth-child(2) { -webkit-transition: opacity 0.3s ease 0.2s; transition: opacity 0.3s ease 0.2s; opacity: 1;
}
.menuContainer.active li:nth-child(3) { -webkit-transition: opacity 0.3s ease 0.3s; transition: opacity 0.3s ease 0.3s; opacity: 1;
}
.menuContainer.active li:nth-child(4) { -webkit-transition: opacity 0.3s ease 0.4s; transition: opacity 0.3s ease 0.4s; opacity: 1;
}
.menuContainer li { width: 100%; opacity: 0; color: #fff; font-size: 20px; font-weight: bold; text-transform: uppercase; height: 60px; line-height: 60px; padding-left: 20px; cursor: pointer; -webkit-transition-delay: .4s; transition-delay: .4s;
}
.menuContainer li:after { content: '❯'; font-size: 20px; display: inline-block; margin-left: 15px; color: #000; text-align: center; color: #fff; -webkit-transition: all .3s ease; transition: all .3s ease;
}
.menuContainer li:hover { color: #413C58;
}
.menuContainer li:hover:after { margin-left: 20px;
}
h1 { font-weight: 800; font-size: 38px;
}
h2 { font-weight: 600; font-size: 24px; margin-bottom: 20px; text-transform: uppercase;
}
.menu { height: 90px; width: 90px; background-color: #fff; position: fixed; cursor: pointer;
}
.menu:before, .menu:after, .menu span { width: 50%; height: 6px; background-color: #222; display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: all .4s ease; transition: all .4s ease;
}
.menu:before { content: ""; top: 35%;
}
.menu:after { content: ""; top: 65%;
}
.menu.active span { opacity: 0;
}
.menu.active:before, .menu.active:after { top: 50%; -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg);
}
.menu.active:after { -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg);
}
.arrow { height: 70px; width: 70px; background-color: #fff; position: absolute; bottom: 0; right: 0; text-align: center; line-height: 70px; cursor: pointer;
}
.arrow:before { content: '❯'; font-size: 24px; font-weight: bold;
}
.arrow.left { right: 72px;
}
.arrow.left:before { content: '❮';
}
.section { max-width: 870px; margin-left: auto; margin-right: auto;
}
.section.grey { background-color: #fff; min-height: 500px; padding: 50px;
}
.section p { line-height: 24px; color: #6d7074;
}

Offset menu - Script Codes JS Codes

(function() { var menuContainer, menuOpen, pageWrapper; menuOpen = false; menuContainer = $('.menuContainer'); pageWrapper = $('.pageWrapper'); $(".menu").on("click", function() { if (menuOpen === false) { $(this).addClass("active"); $(menuContainer).addClass("active"); $(pageWrapper).addClass("active"); return menuOpen = true; } else { $(this).removeClass("active"); $(menuContainer).removeClass("active"); $(pageWrapper).removeClass("active"); return menuOpen = false; } });
}).call(this);
Offset menu - Script Codes
Offset menu - Script Codes
Home Page Home
Developer Rune Sejer Hoffmann
Username RSH87
Uploaded December 10, 2022
Rating 3
Size 5,402 Kb
Views 6,072
Do you need developer help for Offset 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!

Rune Sejer Hoffmann (RSH87) Script Codes
Name
Perspective CSS hover effect
Svg polycat
Ecommerce animations
RoadFURY
A Pen by Rune Sejer Hoffmann
Another menu concept
Nav ui
Fadout menu concept
Crosshair loader
3d mini flip player concept
Create amazing sales emails 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!