0
اجرا نشدن کد ها در صفحات
سلام
کدی که برای منو ایجاد شده در صفحه ای اصلی کار میکنه ولی صفحه های دیگه اجرا نمیشه
https://coloredtears.com
5 پاسخ
1
راهش ساده است دوست من جاهایی که نوشتی src="nav-menu باید از ریشه سایت آدرس بدی یعنی مثلا
src="yoursite.com/nav-menu/....
فقط دقت کن که توی آدرسی که میدی فایل مورد نظر موجود باشه.
0
ممنون از لطفتون
فقط اگر امکانش هست راهنمایی کنید چطور این کار رو انجام بدم ممنون میشم
از وردپرس استفاده کردم
1
آدرس دهی شما برای فایل هایی که توی پوشه nav-menu هستن اشکال داره. برای صفحه اصلی چون پوشه nav-menu کنار فایل صفحه اصلی هست می تونه فایل ها رو پیدا کنه ولی بقیه صفحات چون توی پوشه جدا هستن نمی تونه فایل های پوشه nav-menu رو پیدا کنه. برای حل این مشکل از آدرس دهی مستقیم از ریشه استفاده کنید.
0
من کد رو تو هدر سایت گذاشتم که توی تمام صفحات اجرا بشه ولی فقط توی صفحه ای اصلی اجرا میشه
<!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>
0
سلام به شما دوست عزیز.
در صفحه های دیگر هم مثل صفحه اصلی کتابخانه ها و استایل ها رو لینک دادین یا نه؟
من صفحه شما رو دیدم باگ زیاد داره و خیلی از باگ ها به خاطر آدرس اشتباه و پیدا نشدن فایل ها هستن. این خطا ها رو تصحیح کنید فکر می کنم درست بشن.