Prototype for a menu pattern

Developer
Niels Oeltjen
Size
4,074 Kb
Views
34,408
  1. Prototype for a menu pattern Previews
  2. Prototype for a menu pattern HTML Codes
  3. Prototype for a menu pattern CSS Codes
  4. Prototype for a menu pattern JS Codes

How do I make an prototype for a menu pattern?

Just an idea for a menu for a current project. What is a prototype for a menu pattern? How do you make a prototype for a menu pattern? This script and codes were developed by Niels Oeltjen on 08 September 2022, Thursday.

Prototype for a menu pattern Previews
IQ Test

Prototype for a menu pattern - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Prototype for a menu pattern</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://elbone.github.io/cdn/codepen/codepen-default.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="nav"> <ul> <li class="top-left"><a href="#one">⦾</a></li> <li class="top-right"><a href="#two">⊙</a></li> <li class="bottom-left"><a href="#three">⊜</a></li> <li class="bottom-right"><a href="#four">⊘</a></li> </ul>
</div>
<div class="item" id="one"> <h2>⦾</h2> <p>Item one content</p>
</div>
<div class="item" id="two"> <h2>⊙</h2> <p>Item two content</p>
</div>
<div class="item" id="three"> <h2>⊜</h2> <p>Item three content</p>
</div>
<div class="item" id="four"> <h2>⊘</h2> <p>Item four content</p>
</div>
<div class="overlay"><a class="overlay-close" href="#">&times;</a> <div class="inside"></div>
</div>
<div class="content"> <h1>A prototype for a menu interface pattern</h1>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Prototype for a menu pattern - Script Codes CSS Codes

.nav { position: relative; z-index: 20;
}
.nav a { display: block; text-align: center; line-height: 3rem; font-size: 1.5rem; width: 3rem; height: 3rem;
}
.nav li { position: fixed; background: black; -webkit-transition: all 700ms ease; transition: all 700ms ease;
}
.nav li.top-left { top: 0; left: 0; border-radius: 0 0 0.1875rem 0;
}
.overlay-expanded .nav li.top-left { top: -3rem; left: -3rem;
}
.nav li.top-right { top: 0; right: 0; border-radius: 0 0 0 0.1875rem;
}
.overlay-expanded .nav li.top-right { top: -3rem; right: -3rem;
}
.nav li.bottom-left { bottom: 0; left: 0; border-radius: 0 0.1875rem 0 0;
}
.overlay-expanded .nav li.bottom-left { bottom: -3rem; left: -3rem;
}
.nav li.bottom-right { bottom: 0; right: 0; border-radius: 0.1875rem 0 0 0;
}
.overlay-expanded .nav li.bottom-right { bottom: -3rem; right: -3rem;
}
.overlay { z-index: 19; position: fixed; top: 0; bottom: 0; left: 0; right: 0;
}
.overlay .inside { background: black; -webkit-transform: rotate(45deg) scale(0); transform: rotate(45deg) scale(0); -webkit-transition: all 700ms ease; transition: all 700ms ease; position: absolute; top: 50%; left: 50%;
}
.overlay .overlay-close { -webkit-transition: all 700ms ease; transition: all 700ms ease; position: fixed; z-index: 23; text-align: center; line-height: 3rem; font-size: 1.5rem; width: 3rem; height: 3rem; background: black; top: -3rem; right: -3rem; border-radius: 0 0 0 0.1875rem;
}
.overlay-expanded .overlay { z-index: 21; display: block;
}
.overlay-expanded .overlay .overlay-close { display: block; top: 0; right: 0;
}
.overlay-expanded .overlay .inside { -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1);
}
.item { opacity: 0; -webkit-transition: opacity 300ms ease 400ms; transition: opacity 300ms ease 400ms; z-index: 22; position: relative; display: none;
}
.item.visible { display: block;
}
.item.active { opacity: 1;
}
.content { -webkit-transition: all 300ms ease; transition: all 300ms ease; position: absolute; top: 40%; left: 0; right: 0;
}

Prototype for a menu pattern - Script Codes JS Codes

(function() { var setOverlaySize; setOverlaySize = function() { var css, max, overlay; overlay = $('.overlay .inside'); max = Math.max($(window).height(), $(window).width()); css = { width: max, height: max, marginLeft: max / 2 * -1, marginTop: max / 2 * -1 }; return overlay.css(css); }; setOverlaySize(); $(window).on("resize", function(event) { return setOverlaySize(); }); $('.nav a').on('click', function(event) { var target; target = $(this).attr('href'); $('body').addClass('overlay-expanded'); $('.item' + target).addClass('visible'); return $('.item' + target).addClass('active'); }); $('.overlay, .overlay-close').on('click', function(event) { $('body').removeClass('overlay-expanded'); $('.item').removeClass('active'); return $('.item').removeClass('visible'); });
}).call(this);
Prototype for a menu pattern - Script Codes
Prototype for a menu pattern - Script Codes
Home Page Home
Developer Niels Oeltjen
Username NielsOeltjen
Uploaded September 08, 2022
Rating 3.5
Size 4,074 Kb
Views 34,408
Do you need developer help for Prototype for a menu pattern?

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!

Niels Oeltjen (NielsOeltjen) Script Codes
Name
Layout states using jQuery and Data Attributes
Single element Adobe Brackets logo
Semantic vertical centering
Large menu pattern
Another nice loader
Prose.io repo icon
Loading animation
CSS only audio player UI
Multiple SVG icons in one file
Button toggle box
Create amazing web content 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!