WordpressTheme Simplicity menu idea

Developer
Hidekichi
Size
6,271 Kb
Views
62,744
  1. WordpressTheme Simplicity menu idea Previews
  2. WordpressTheme Simplicity menu idea HTML Codes
  3. WordpressTheme Simplicity menu idea CSS Codes
  4. WordpressTheme Simplicity menu idea JS Codes

How do I make an wordpresstheme simplicity menu idea?

What is a wordpresstheme simplicity menu idea? How do you make a wordpresstheme simplicity menu idea? This script and codes were developed by Hidekichi on 10 July 2022, Sunday.

WordpressTheme Simplicity menu idea Previews
IQ Test

WordpressTheme Simplicity menu idea - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>WordpressTheme Simplicity menu idea</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container"> <div id="header"> <div id="header-in"> <div id="h-top"> <div class="align-left"> <h1 id="site-title">TEST SITE</h1> <h2 id="site-description">Just another WordPress site</h2> </div> </div> </div> </div> <nav id="navi"> <div id="navi-in"> <div class="menu-main-container"> <ul id="menu-main" class="menu"> <li id="menu-item-592" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-592"><a href="http://blazechariot.wp.xdomain.jp/">ホーム</a></li> <li id="menu-item-597" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-597"><a href="http://blazechariot.wp.xdomain.jp/category/linux">linux</a> <ul class="sub-menu"> <li id="menu-item-606" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-606"><a href="http://blazechariot.wp.xdomain.jp/category/linux/linuxmint">linuxmint</a></li> </ul> </li> <li id="menu-item-599" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-has-children menu-item-599"><a href="http://blazechariot.wp.xdomain.jp/category/wordpress">WordPress</a> <ul class="sub-menu"> <li id="menu-item-770" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-770"><a href="http://blazechariot.wp.xdomain.jp/category/wordpress/simplicity">Simplicity</a></li> <li id="menu-item-611" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-611"><a href="http://blazechariot.wp.xdomain.jp/category/wordpress/plugin">plugin</a></li> </ul> </li> <li id="menu-item-607" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor menu-item-has-children menu-item-607"><a href="http://blazechariot.wp.xdomain.jp/category/webprogram">webプログラム</a> <ul class="sub-menu"> <li id="menu-item-608" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-608"><a href="http://blazechariot.wp.xdomain.jp/category/webprogram/jquery">jQuery</a></li> <li id="menu-item-609" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-609"><a href="http://blazechariot.wp.xdomain.jp/category/webprogram/css">CSS</a></li> <li id="menu-item-610" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-610"><a href="http://blazechariot.wp.xdomain.jp/category/webprogram/php">PHP</a></li> </ul> </li> <li id="menu-item-593" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-593"><a href="http://blazechariot.wp.xdomain.jp/sitemap">SITEMAP</a></li> <li id="menu-item-595" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-595"><a href="http://blazechariot.wp.xdomain.jp/about-2">ABOUT</a></li> </ul> </div> </div> <!-- /#navi-in --> </nav> <div id="body"> <div id="body-in"> <div id="main"> <div id="the-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod, lectus id lobortis tincidunt, lacus elit interdum ipsum, quis facilisis mauris eros at orci. In vitae ex tristique, pharetra tellus in, eleifend justo. Suspendisse potenti. Ut porttitor imperdiet nulla. Duis imperdiet sollicitudin orci. Etiam ac dignissim velit. Donec ipsum massa, consectetur in mauris sed, rutrum accumsan nisi. Phasellus sit amet turpis fringilla nulla interdum sollicitudin.</p> <p>Suspendisse interdum, lectus vel lobortis lacinia, nisi massa mollis massa, nec tincidunt orci augue in risus. Curabitur vitae sollicitudin risus. Mauris id elementum felis. Ut et viverra nisl. Etiam congue finibus mi, ut volutpat libero pellentesque suscipit. Mauris commodo luctus mattis. Integer eu tincidunt lorem, vel iaculis diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p> <p>Quisque blandit porttitor ligula, in convallis tortor commodo congue. Nullam gravida id orci sit amet dictum. Curabitur nec risus ut massa tincidunt ultricies. Sed id mi sit amet tellus accumsan bibendum sed non felis. Aliquam pellentesque, leo sed posuere gravida, ligula nisl varius arcu, eget faucibus velit enim at diam. Curabitur dictum tristique nibh, et efficitur quam varius vel. Etiam commodo massa sed ultricies blandit. Mauris eget congue felis, eget tristique lacus. Phasellus malesuada lectus leo, sed cursus nisl scelerisque at. Suspendisse lobortis mattis sapien, at iaculis massa. Ut sit amet enim risus.</p> <p>Donec euismod, risus a varius ullamcorper, nulla ante iaculis nisl, id imperdiet ipsum felis a ligula. Suspendisse eget augue cursus, accumsan sapien eu, aliquam ante. Suspendisse quis iaculis mi. Aliquam at ligula libero. Quisque quam ex, rhoncus vitae diam ut, lacinia euismod lectus. Donec sed dui ac mi aliquet tempor. Maecenas venenatis ac libero vel molestie. Quisque eleifend cursus sapien, et convallis purus vestibulum id. In convallis elit et turpis eleifend molestie. Nulla eu turpis sed dui porttitor porta a eu nisi.</p> <p>Mauris magna ante, maximus eget elit a, commodo dignissim ex. Donec iaculis felis eget turpis vulputate interdum. Ut euismod dui quis dui finibus, nec hendrerit nisi tempor. Donec porttitor eleifend tortor, eget interdum magna suscipit in. Ut magna velit, hendrerit at rhoncus vel, finibus sit amet diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi aliquam eget urna vitae semper. Proin eu risus vitae est iaculis auctor vitae at urna. Quisque ligula justo, luctus et mollis quis, scelerisque eu justo. Sed vestibulum lacinia lorem, non luctus est vestibulum in.</p> </div> </div> <div id="sidebar">sidebar</div> </div> </div>
</div>
<div id="footer"> <div id="footer-in"> <div class="copyright">&copy;2015 TEST SITE</div> </div>
</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>

WordpressTheme Simplicity menu idea - Script Codes CSS Codes

* { box-sizing: border-box;
}
/* main */
html, body { margin: 0; padding: 0;
}
#container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column wrap; flex-flow: column wrap; -webkit-box-pack: sp-between; -ms-flex-pack: sp-between; justify-content: sp-between; width: 100%; height: auto; padding: 0; margin: 0 auto;
}
#header { max-height: 100px; -webkit-box-flex: 1; -ms-flex: 1 auto; flex: 1 auto;
}
#header #h-top { height: 100px;
}
#header .align-left { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: sp-between; -ms-flex-pack: sp-between; justify-content: sp-between; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; margin: 10px 10px 0 40px;
}
#header h1 { margin: 0; padding: 0; font-size: 32; font-size: 2rem;
}
#header h2 { margin: 0; padding: 0; font-size: 14; font-size: 0.875rem; font-weight: 100;
}
#body { -webkit-box-flex: 1; -ms-flex: 1 auto; flex: 1 auto; margin-top: 10px;
}
#body-in { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: sp-between; -ms-flex-pack: sp-between; justify-content: sp-between; margin: 0 auto;
}
#main { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; border: 1px solid #ccc; border-radius: 4px; margin-right: 10px;
}
@media screen and (max-width: 440px) { #main { -webkit-box-flex: 1; -ms-flex: 1 auto; flex: 1 auto; margin-right: 0; }
}
@media screen and (max-width: 1024px) { #main { width: 100%; -webkit-box-flex: 1; -ms-flex: 1 auto; flex: 1 auto; margin-right: 0; }
}
#main #the-content { margin: 0 auto; padding: 10px 20px; width: 100%;
}
#main #the-content p { font-size: 16; font-size: 1rem; font-family: sans; line-height: 1.7; margin: 0 0 2rem;
}
#sidebar { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; max-width: 300px; border: 1px solid #000; margin-left: auto;
}
@media screen and (max-width: 1024px) { #sidebar { max-width: 100%; -webkit-box-flex: 1; -ms-flex: 1 auto; flex: 1 auto; margin-right: 0; }
}
#footer { -webkit-box-flex: 1; -ms-flex: 1 auto; flex: 1 auto; margin-top: 10px; min-height: 60px; position: relative; background-color: #0078b9;
}
#footer .copyright { position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); color: #fff;
}
#header-in,
#navi-in,
#body-in,
#footer-in { width: 100%; max-width: 1070px; margin: 0 auto;
}
@media screen and (max-width: 440px) { #header-in, #navi-in, #body-in, #footer-in { width: 100%; }
}
@media screen and (max-width: 1024px) { #header-in, #navi-in, #body-in, #footer-in { width: 100%; }
}
/**************************************************/
.wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-color: #fff; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow-y: scroll; overflow-x: hidden; -webkit-transition: .5s ease; transition: .5s ease;
}
.wrapper.inactive { cursor: pointer; -webkit-transition: .3s ease; transition: .3s ease; -webkit-transform: translate3d(160px, 0, 0) scale(0.5); transform: translate3d(160px, 0, 0) scale(0.5);
}
#menu-button { width: 30px; height: 30px; background-color: #f00; position: fixed; top: 15px; left: 5px;
}
#navi { position: absolute; width: 100%; height: 100%; background-image: url("http://nelog.jp/wp-content/uploads/2015/05/5557946326_ccb846d946_b.jpg"); background-size: cover; overflow: hidden;
}
#navi ul { width: 600px; list-style: none; margin: 10% 0px 0px 10%;
}
#navi ul li { font-weight: 200; font-size: 19px; line-height: 19px; margin-bottom: 28px; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -webkit-transform: translate3d(-100px, 0px, 0px) scale(0.2); transform: translate3d(-100px, 0px, 0px) scale(0.2); opacity: 0;
}
#navi ul li ul { list-style: none; padding: 0; margin: 0.5em 0 10px 1em;
}
#navi ul li ul li { margin: 15px 0 20px 0;
}
#navi ul li.visible { -webkit-transform: translate3d(0px, 0px, 0px) scale(1); transform: translate3d(0px, 0px, 0px) scale(1); opacity: 1; text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
}
#navi ul li a { text-decoration: none;
}

WordpressTheme Simplicity menu idea - Script Codes JS Codes

(function($) { $(function() { if (!$("#menu-button").length) { $("#header").prepend("<div id='menu-button' />"); } $("#container").wrap("<div class='wrapper' />"); $("#footer").appendTo(".wrapper"); var nav = $("#navi").remove().clone(); $("body").prepend(nav); var fire = $("#menu-button"); var wrapper = $(".wrapper"); fire.on("click", function() { if (!wrapper.hasClass("inactive")) { wrapper.addClass("inactive"); setTimeout(function() { wrapper.addClass('flag'); }, 100); var timer = 0; $("#navi li").each(function(i, v){ timer = 40 * i; setTimeout(function() { $(v).addClass('visible'); }, timer); }); } }); wrapper.on("click", function() { if (wrapper.hasClass("flag")) { close(); } }); $('li a').on("click", function(e) { e.preventDefault(); close(); }); });
})(jQuery);
function close() { var wrapper = $("div.wrapper"); setTimeout(function() { $('#navi li').removeClass('visible').delay(300).queue(function(del) { wrapper.removeClass("inactive flag"); del(); }); }, 300);
}
WordpressTheme Simplicity menu idea - Script Codes
WordpressTheme Simplicity menu idea - Script Codes
Home Page Home
Developer Hidekichi
Username Hidekichi
Uploaded July 10, 2022
Rating 3
Size 6,271 Kb
Views 62,744
Do you need developer help for WordpressTheme Simplicity menu idea?

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!

Hidekichi (Hidekichi) Script Codes
Name
WordpressTheme Simplicity SNS count The count up automatically the count value of the SNS
WordpressTheme Simplicity title position fixed
A Pen by Hidekichi
WordpressTheme Simplicity 1column idea
Wordpress theme Simplicity eye-catch image idea
Wordpress theme Simplicity list style flex
WordpressThemeSimplicity SNS button applied to Simplicity
WordpressTheme Simplicity sns button setting
Create amazing video scripts 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!