سلام
کدی که برای منو ایجاد شده در صفحه ای اصلی کار میکنه ولی صفحه های دیگه اجرا نمیشه
https://coloredtears.com
لینک رو چک کردم باز میکنه
<!DOCTYPE html>
<!-- saved from url=(0072)https://cdpn.io/romagny13/fullembedgrid/dXbqJg?animations=run&type=embed -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet" href="nav-menu/css">
<style>
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
margin: 0;
}
body {
font-family: "baskerville old face", sans-serif;
}
.nav {
position: fixed;
width: 300px;
top: 2em;
bottom: 2em;
left: 20px;
z-index: 100;
overflow: hidden;
transform: translate3d(-165px, 0, 0);
transition: transform 0.6s;
}
.nav-menu {
position: none;
list-style: none;
width: calc(100% + 25px);
height: 100%;
padding: 0 150px 2em 25px;
overflow-y: auto;
z-index: 100;
color: #ff0000;
font-family: "baskerville old face", sans-serif;
font-size: 20px;
font-weight:900;
text-align: left;
}
.nav--open {
transform: translate3d(0, 0, 0);
}
.nav--open .nav-toggle span {
opacity: 0;
}
.nav--open .nav-toggle::before {
transform: rotate3d(0, 0, 1, 45deg);
}
.nav--open .nav-toggle::after {
transform: rotate3d(0, 0, 1, -45deg);
}
.nav-morph {
position: absolute;
width: 240px;
height: 100%;
top: 0;
right: 0;
}
.nav-morph svg path {
stroke: #ff0000;
stroke-width: 5px;
}
/* NAV TOGGLE */
.nav-toggle {
position: absolute;
top: 3px;
right: 70px;
width: 30px;
height: 24px;
padding: 0;
background: transparent;
border: none;
cursor: pointer;
outline: none;
z-index: 2000;
}
.nav-toggle::before, .nav-toggle::after {
content: '';
position: absolute;
height: 2px;
width: 100%;
left: 0;
top: 50%;
background: #ff0000;
transform-origin: 50% 50%;
transition: transform 0.25s;
}
.nav-toggle::before {
transform: translate3d(0, -10px, 0);
}
.nav-toggle::after {
transform: translate3d(0, 10px, 0);
}
.nav-toggle span {
position: absolute;
width: 100%;
height: 2px;
background: #ff0000;
left: 0;
overflow: hidden;
text-indent: 200%;
transition: opacity 0.25s;
}
</style>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
<script style="display: none;">var tvt = tvt || {}; tvt.captureVariables = function(a){for(var b=
new Date,c={},d=Object.keys(a||{}),e=0,f;f=d[e];e++)if(a.hasOwnProperty(f)&&"undefined"!=typeof a[f])try{var g=[];c[f]=JSON.stringify(a[f],function(l,t){try{if("function"!==typeof t){if("object"===typeof t&&null!==t){if(t instanceof HTMLElement||t instanceof Node||-1!=g.indexOf(t))return;g.push(t)}return t}}catch(A){}})}catch(l){}a=document.createEvent("CustomEvent");a.initCustomEvent("TvtRetrievedVariablesEvent",!0,!0,{variables:c,date:b});window.dispatchEvent(a)};window.setTimeout(function() {tvt.captureVariables({'dataLayer.hide': (function(a){a=a.split(".");for(var b=window,c=0;c<a.length&&(b=b[a[c]],b);c++);return b})('dataLayer.hide'),'gaData': window['gaData'],'dataLayer': window['dataLayer']})}, 2000);</script></head>
<body translate="no">
<!-- Cette source est librement inspirée du bon article tympanus https://tympanus.net/codrops/2014/12/15/elastic-svg-elements/
-->
<nav class="nav">
<button class="nav-toggle"><span>Menu</span></button>
<ul class="nav-menu">
<li><a href="https://coloredtears.com/">Home</a></li>
<li><a href="https://coloredtears.com/1-2/">Games</a></li>
<li><a href="https://coloredtears.com/888/">Applications</a></li>
<li><a href="https://coloredtears.com/888/">Books</a></li>
<li>Gallery</li>
<li>Etc</li>
</ul>
Applications
<div class="nav-morph" data-open="M 300,-1.9235101 C 947.48798,352.73374 368.08761,564.6745 301.42857,1052.3622" data-close="M 300,-1.9235101 C -43.940589,374.16231 223.80189,644.6745 301.42857,1052.3622">
<svg width="100%" height="100%" viewBox="0 0 600 800" preserveAspectRatio="none">
<path fill="none" d="M 300,-1.9235101 C 304.63084,565.59088 299.51618,538.96021 301.42857,1052.3622"></path>
<desc>Created with Snap</desc><defs></defs></svg>
</div>
</nav>
<script src="nav-menu/stopExecutionOnTimeout-8216c69d01441f36c0ea791ae2d4469f0f8ff5326f00ae2d00e4bb7d20e24edb.js.download"></script>
<script src="nav-menu/snap.svg-min.js.download"></script>
<script id="rendered-js">
// Snap.svg http://snapsvg.io/
function configToggleAnimation() {
var toggle = document.querySelector('.nav-toggle'),
nav = document.querySelector('.nav'),
snap = Snap(document.querySelector('.nav-morph svg')),
nav_morph = document.querySelector('.nav-morph'),
path = snap.select('path'),
reset = path.attr('d'),
open = nav_morph.getAttribute('data-open'),
close = nav_morph.getAttribute('data-close'),
speed = 250,
speed_back = 800,
easing = mina.easeinout,
easing_back = mina.elastic,
isOpen = false;
toggle.addEventListener('click', function () {
// si ouvert on ferme
if (isOpen) {
path.stop().animate({
'path': close },
speed, easing, function () {
path.animate({
'path': reset },
speed_back, easing_back);
isOpen = false;
});
nav.classList.remove('nav--open');
} else {
path.stop().animate({
'path': open },
speed, easing, function () {
path.animate({
'path': reset },
speed_back, easing_back);
isOpen = true;
});
nav.classList.add('nav--open');
}
});
}
function initialize() {
configToggleAnimation();
}
document.addEventListener('DOMContentLoaded', initialize);
//# sourceURL=pen.js
</script>
<script src="nav-menu/iframeRefreshCSS-4793b73c6332f7f14a9b6bba5d5e62748e9d1bd0b5c52d7af6376f3d1c625d7e.js.download"></script>
</body></html>
سلام مجدد
بله لینک درست شد الان
احتمالا میدهم مشکل از آدرس دهی باشه !!مثلا فایل css یا جاواسکریپتی رو در بخش های دیگر درست بارگذاری نکردید
امکانش هست راهنمایی کنید
فولدر رو توی مسیر اصلی گذاشتم باید تو چه مسیری بزارم که تمام صفحات بتون فولدر رو ببینن
از وردپرس استفاده میکنم
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟