Site Menu

Developer
Matt Gross
Size
6,873 Kb
Views
52,624
  1. Site Menu Previews
  2. Site Menu HTML Codes
  3. Site Menu CSS Codes
  4. Site Menu JS Codes

How do I make an site menu?

Menu Scheme based on Codrops' Animated Border Menu concepts, adapted to work with php-generated elements of a wordpress theme.. What is a site menu? How do you make a site menu? This script and codes were developed by Matt Gross on 28 August 2022, Sunday.

Site Menu Previews
IQ Test

Site Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Site Menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header id="masthead" class="site-header cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" role="banner"> <!--built within a php request, non-editable classes--> <a class="home-link" href="#" title="Enter" rel="home">	<h1 class="site-title">This is a Wordpress Header</h1>	<h2 class="site-description">Working around the php-generated elements</h2>	</a><!--php home link-->	<div id="navbar" class="navbar">	<nav id="site-navigation" class="navigation main-navigation menu-close" role="navigation"><!--based on Animated Border Menus by Codrops and adapted to work with wordpress--> <a href="#" class="menu-trigger"> <span>Menu</span> </a>	<!--built within a php request, non-editable classes-->	<div class="menu-primary-nav-container"> <ul id="menu-primary-nav" class="nav-menu"> <li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-12"><a href="#">Home</a></li> <li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13"><a href="#">Web</a></li> <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="#">Print</a></li> <li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="#">About</a></li> <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="#">U&SM</a></li> <li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="#">Contact</a></li> </ul>	</div><!--php nav--> <div class="overlay"></div>	</nav><!-- #site-navigation -->	</div><!-- #navbar -->	</header><!-- #masthead --> <section> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eleifend congue dapibus. Etiam molestie pretium orci, ut consequat metus tincidunt non. Vivamus tempus pulvinar eros nec dictum. Nam posuere nibh lorem, lobortis placerat urna adipiscing quis. Nunc tristique vulputate ligula vitae blandit. Donec cursus massa ac urna placerat aliquet. Sed vulputate tortor ac scelerisque dapibus. Morbi laoreet, diam in dictum vehicula, leo dolor pellentesque leo, vitae tempus urna enim in dui. In dictum a quam facilisis rutrum. Phasellus accumsan felis at metus semper hendrerit non at sem.</p> <p>Quisque pulvinar justo ut neque hendrerit, non imperdiet magna tincidunt. Quisque hendrerit consectetur eros nec porta. In turpis nunc, elementum id imperdiet a, vulputate id turpis. Sed adipiscing nibh id ligula tincidunt, ut viverra dolor auctor. Etiam sed libero tristique metus aliquet suscipit sit amet in dolor. Morbi non enim in lectus mollis pulvinar. Nunc consequat urna eget nisl luctus, quis fermentum purus elementum. Vestibulum id semper nunc. Donec et cursus quam. Morbi semper eleifend elit, quis bibendum neque posuere sed. In malesuada erat nec nisl porttitor, et aliquet tellus imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> <p>Proin nibh libero, condimentum eu congue sed, sollicitudin sed purus. Quisque ac sagittis mauris, ac condimentum tellus. Curabitur non felis suscipit, interdum velit sit amet, eleifend turpis. Nulla sed tortor ac mauris porta pellentesque sed ac nisi. Mauris rutrum arcu ut velit luctus auctor. Proin augue risus, viverra non convallis eu, porttitor id nulla. In non turpis ultrices, ultricies mi eget, iaculis metus. Ut sit amet tincidunt nibh, ac pretium libero.</p> <p>Fusce sit amet nisi id elit volutpat vehicula non et purus. Pellentesque ornare, sem a pretium dapibus, velit augue consectetur dolor, non facilisis lorem est eget lectus. Quisque euismod magna sit amet lectus luctus, in elementum nunc suscipit. Duis eu tristique justo, eu congue magna. Mauris pulvinar tortor non ultricies rhoncus. Aenean tempor facilisis auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non ipsum dolor. Aliquam sit amet odio ipsum. Curabitur quis vehicula magna.</p> <p>Vivamus lacinia nisl id turpis cursus tristique quis quis augue. Fusce volutpat lacinia pulvinar. Praesent aliquet eu nisi sed euismod. Proin ornare nisi quis varius pulvinar. Nam ultrices erat velit, id molestie urna condimentum vel. Aliquam erat volutpat. Proin venenatis sagittis molestie. Nulla ac purus eu mauris viverra laoreet quis nec leo. Pellentesque cursus, lorem ut fringilla facilisis, velit risus mattis neque, ac interdum dui est vitae magna. Aenean dignissim tincidunt turpis, eu dictum nisl interdum sit amet.</p> </section> <script src="js/index.js"></script>
</body>
</html>

Site Menu - Script Codes CSS Codes

* { box-sizing: border-box;
}
a, a:focus { color: #fff; outline: none;
}
body { margin: 0; padding: 80px; background: #2980b9; color: #fff; font-family: 'Lato', Arial, sans-serif; font-size: 1em;
}
.site-header { padding: 80px; text-align: center;
}
.main-navigation { position: fixed; top: 0; left: 0; width: 100%; height: 0; border-width: 0px; border-style: solid; border-color: #333; background-color: rgba(0,0,0,0); -webkit-backface-visibility: hidden; -webkit-transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s; transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
}
.main-navigation.menu-open { height: 100%; border-width: 10px 10px 70px 10px; background-color: rgba(0,0,0,0.3); -webkit-transition: border-width 0.3s, background-color 0.3s; transition: border-width 0.3s, background-color 0.3s;
}
.menu-trigger { position: fixed; bottom: 11px; left: 50%; z-index: 100; display: block; margin-left: -25px; width: 60px; height: 50px; cursor: pointer; background: #2980b9; border-left: 10px solid #2980b9; border-right: 10px solid #2980b9; transition: all .2s ease;
}
.menu-open .menu-trigger { background: #333; border-color: #333;
}
.menu-open .menu-trigger span { background-color: #2980b9;
}
.menu-trigger span { position: absolute; top: 50%; left: 0; display: block; width: 100%; height: 8%; background-color: #fff; font-size: 0px; -webkit-transition: background-color 0.3s; transition: background-color 0.3s;
}
.menu-trigger span:before,
.menu-trigger span:after { position: absolute; left: 0; width: 100%; height: 100%; background: #fff; content: ''; -webkit-transition: -webkit-transform 0.3s, background-color 0.3s; transition: transform 0.3s, background-color 0.3s;
}
/* toggle button animation */
.menu-open .menu-trigger span:before,
.menu-open .menu-trigger span:after { background-color: #2980b9;
}
.menu-trigger span:before { -webkit-transform: translateY(-250%); transform: translateY(-250%);
}
.menu-trigger span:after { -webkit-transform: translateY(250%); transform: translateY(250%);
}
.menu-open .menu-trigger span:before { -webkit-transform: translateY(-350%); transform: translateY(-350%);
}
.menu-open .menu-trigger span:after { -webkit-transform: translateY(350%); transform: translateY(350%);
}
.main-navigation ul { position: fixed; bottom: 0px; left: 0; margin: 0; padding: 0; width: 100%; list-style: none; text-align: center; white-space: nowrap; height: 0; -webkit-transition: -webkit-transform 0.3s, background-color 0.3s; -webkit-transition: height 0s 0.3s; transition: height 0s 0.3s;
}
.main-navigation.menu-open ul { height: 70px; -webkit-transition: none; transition: none;
}
.main-navigation ul li { display: inline-block; height: 70px; width: 11%; line-height: 70px; opacity: 0; -webkit-transition: -webkit-transform 0.3s, background-color 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0);
}
.main-navigation.menu-open ul li { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);
}
.main-navigation ul li,
.main-navigation ul li a { text-align: center;
}
.main-navigation ul li { line-height: 70px;
}
.main-navigation ul li a:before { display: none; font-size: 32px;
}
.main-navigation ul li a { display: block; outline: none; color: #fff; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; font-size: 1em; transition: all .2s ease; transition-delay: color .1s; width: 100%;
}
.main-navigation ul li a:hover { background: #2B2B2B; color: #2980b9
}
.main-navigation ul li:nth-child(3) { margin-right: 70px;
}
.main-navigation ul li:nth-child(4) { margin-left: 70px;
}
/* variations in slide timing */
.main-navigation.menu-open ul li:nth-child(1) { transition-delay: 0.033s; }
.main-navigation.menu-open ul li:nth-child(2) { transition-delay: 0.066s; }
.main-navigation.menu-open ul li:nth-child(3) { transition-delay: 0.099s; }
.main-navigation.menu-open ul li:nth-child(4) { transition-delay: 0.099s; }
.main-navigation.menu-open ul li:nth-child(5) { transition-delay: 0.066s; }
.main-navigation.menu-open ul li:nth-child(6) { transition-delay: 0.033s; }
/* overlay for click event */
.overlay { position: absolute; width: 100%;
}
.menu-open .overlay { height: 100%;
}
@media (max-width: 50em) { .main-navigation ul li a { font-size: .707em; } .main-navigation ul li:nth-child(3) { margin-right: 40px; } .main-navigation ul li:nth-child(4) { margin-left: 40px; }
}
@media (max-width: 40em) { .main-navigation ul li a { font-size: .5em; } .menu-trigger { bottom: 11px; left: 45px; } .main-navigation.menu-open { height: 100%; border-width: 10px 10px 10px 100px; } .main-navigation ul { position: fixed; top: 10px; left: 0; margin: 0; padding: 0; width: 100%; text-align: left; height: 0; } .main-navigation ul li { display: block; height: 40px; width: 100px; line-height: 40px; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0); } .main-navigation ul li:nth-child(3) { margin-right: 0px; } .main-navigation ul li:nth-child(4) { margin-left: 0px; } .main-navigation ul li a { height: 40px; } /* variations in slide timing */
.main-navigation.menu-open ul li:nth-child(1) { transition-delay: 0.0165s; }
.main-navigation.menu-open ul li:nth-child(2) { transition-delay: 0.033s; }
.main-navigation.menu-open ul li:nth-child(3) { transition-delay: 0.0495s; }
.main-navigation.menu-open ul li:nth-child(4) { transition-delay: 0.066s; }
.main-navigation.menu-open ul li:nth-child(5) { transition-delay: 0.0825s; }
.main-navigation.menu-open ul li:nth-child(6) { transition-delay: 0.099s; }
}

Site Menu - Script Codes JS Codes

/*! * classie - class helper functions * from bonzo https://github.com/ded/bonzo * * classie.has( elem, 'my-class' ) -> true/false * classie.add( elem, 'my-new-class' ) * classie.remove( elem, 'my-unwanted-class' ) * classie.toggle( elem, 'my-class' ) */
/*jshint browser: true, strict: true, undef: true */
/*global define: false */
( function( window ) {
'use strict';
// class helper functions from bonzo https://github.com/ded/bonzo
function classReg( className ) { return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;
if ( 'classList' in document.documentElement ) { hasClass = function( elem, c ) { return elem.classList.contains( c ); }; addClass = function( elem, c ) { elem.classList.add( c ); }; removeClass = function( elem, c ) { elem.classList.remove( c ); };
}
else { hasClass = function( elem, c ) { return classReg( c ).test( elem.className ); }; addClass = function( elem, c ) { if ( !hasClass( elem, c ) ) { elem.className = elem.className + ' ' + c; } }; removeClass = function( elem, c ) { elem.className = elem.className.replace( classReg( c ), ' ' ); };
}
function toggleClass( elem, c ) { var fn = hasClass( elem, c ) ? removeClass : addClass; fn( elem, c );
}
var classie = { // full names hasClass: hasClass, addClass: addClass, removeClass: removeClass, toggleClass: toggleClass, // short names has: hasClass, add: addClass, remove: removeClass, toggle: toggleClass
};
// transport
if ( typeof define === 'function' && define.amd ) { // AMD define( classie );
} else { // browser global window.classie = classie;
}
})( window );
(function() { // http://stackoverflow.com/a/11381730/989439 function mobilecheck() { var check = false; (function(a){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera); return check; } function init() { var menu = document.getElementById( 'site-navigation' ), trigger = menu.querySelector( 'a.menu-trigger' ), // event type (if mobile, use touch events) eventtype = mobilecheck() ? 'touchstart' : 'click', resetMenu = function() { classie.remove( menu, 'menu-open' ); classie.add( menu, 'menu-close' ); }, closeClickFn = function( ev ) { resetMenu(); overlay.removeEventListener( eventtype, closeClickFn ); }; var overlay = document.createElement('div'); overlay.className = 'overlay'; menu.appendChild( overlay ); trigger.addEventListener( eventtype, function( ev ) { ev.stopPropagation(); ev.preventDefault(); if( classie.has( menu, 'menu-open' ) ) { resetMenu(); } else { classie.remove( menu, 'menu-close' ); classie.add( menu, 'menu-open' ); overlay.addEventListener( eventtype, closeClickFn ); } }); } init();
})();
Site Menu - Script Codes
Site Menu - Script Codes
Home Page Home
Developer Matt Gross
Username mattgrosswork
Uploaded August 28, 2022
Rating 3.5
Size 6,873 Kb
Views 52,624
Do you need developer help for Site 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!

Matt Gross (mattgrosswork) Script Codes
Name
JS Input Selector
Super Basic Menu with Best Practices
Scared Eyes
Footnote concept
CSS-Only Fly Menu
Fullscreen Video Background
Easy Lines Around a Subtitle
Basic Fullscreen Video Background
EvenVision Branded Ajax Loader
A Pen by Matt Gross
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!