طراحی منوی ناوبری جادویی با استفاده از Html CSS & Javascript | جلوه های خارجی منحنی

طراحی منو با css
  • Html, طراحی سایت

عناوین این گفتار:

در این قسمت از یکی دیگر از مجموعه آموزش های طراحی سایت، ساخت یک منو ناوبری زیبا با استفاده از CSS و JavaSCRIPT را مشاهده می کنید. امیدوارم که برای شما مفید واقع شود.

در طراحی وب، منوی ناوبری یک عنصر اساسی است که کاربران را قادر می‌سازد به راحتی در سایت حرکت کنند. اما طراحی یک منوی ناوبری جالب و جذاب به عنوان یک عنصر برجسته و تمایزدهنده می‌تواند تجربه کاربری را بهبود بخشد. در این مقاله، ما قصد داریم یک منوی ناوبری جادویی را با استفاده از HTML، CSS و JavaScript طراحی کنیم و از جلوه‌های خارجی منحنی استفاده کنیم تا ظاهری زیبا و جذاب برای آن ایجاد کنیم.

بخش اول: طراحی ساختار HTML

در این بخش، به طراحی ساختار اولیه HTML برای منوی ناوبری می‌پردازیم. این ساختار شامل عناصر `<ul>` و `<li>` است که به ترتیب لیست‌های ناوبری و آیتم‌های آن را نشان می‌دهند. همچنین، برای هر آیتم، لینک مربوطه را نیز قرار می‌دهیم. همچنین پیشنهاد میکنم مقاله 5 پروژه جاوا اسکریپت با چت جی پی تی  را سری بزنید.

مثال:

				
					<!DOCTYPE html>
<html>
<head>
  <title>منوی ناوبری جادویی</title>
  
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">صفحه اصلی</a></li>
      <li><a href="#">درباره ما</a></li>
      <li><a href="#">خدمات</a></li>
      <li><a href="#">تماس با ما</a></li>
    </ul>
  </nav> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script><script data-optimized="1" type="litespeed/javascript" data-src="http://mahditavakoli.com/wp-content/litespeed/js/993331ddf8ef62bee6aefbb5725d2963.js?ver=2360e"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body>
</html>

توضیحات:

بطور کلی، کد HTML برای طراحی منوی ناوبری جادویی شامل یک عنصر `<nav>` و یک لیست نامرئی `<ul>` است. درون لیست نامرئی، هر آیتم منو با استفاده از عنصر `<li>` و لینک با استفاده از عنصر `<a>` نمایش داده می‌شود. آیتم‌های منوی اصلی در سطح اول لیست نامرئی قرار می‌گیرند و زیرمجموعه‌های منو با استفاده از لیست نامرئی داخلی دیگر ایجاد می‌شوند.

به طور کلی، ساختار کد HTML برای طراحی منوی ناوبری جادویی به صورت زیر است:

<nav>
<ul>
<li><a href="#">آیتم منو 1</a></li>
<li><a href="#">آیتم منو 2</a></li>
<li><a href="#">آیتم منو 3</a></li>
<li><a href="#">آیتم منو 4</a></li>
</ul>
</nav>

در کد بالا، هر `<li>` شامل یک عنصر `<a>` است که به صفحه یا بخش مورد نظری که باید با کلیک روی آن لینک شود، پیوند داده شده است. شما می‌توانید متن لینک را با متن دلخواه خود جایگزین کنید و همچنین مقصد لینک را با آدرس مورد نظر خود تغییر دهید.

این عناصر HTML اصلی کد منوی ناوبری جادویی هستند. با استفاده از CSS و JavaScript، می‌توانید استایل و رفتار منو را به دلخواه خود تغییر دهید. در کد CSS، استایل‌های مربوط به منوی ناوبری و جلوه‌های خارجی منحنی تعریف شده است. و در کد JavaScript، رفتار هاور ماوس بر روی آیتم‌های منو پیاده سازی شده است. اگر به این زبان علاقه مند هستید پیشنهاد میکنم از آموزش زبان HTML دیدن کنید.

بخش دوم: طراحی استایل CSS

در این بخش، به طراحی استایل CSS برای منوی ناوبری می‌پردازیم. از جلوه‌های خارجی منحنی استفاده می‌کنیم تا به منوی ناوبری شکلی زیبا و دلخواه بدهیم. با استفاده از خواص CSS مختلف، مانند `border-radius` و `transform`, این جلوه‌های منحنی را ایجاد می‌کنیم. همچنین، استایل‌های دیگری نیز برای طراحی رنگ‌بندی، فونت، و پوزیشن منوی ناوبری اعمال می‌کنیم.

مثال:

				
					body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
  display: flex;
  justify-content: center;
  border-radius: 20px;
}

nav li {
  margin: 5px;
}

nav a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  color: #333;
  border-radius: 10px;
  transition: background-color 0.3s ease;
}

nav a:hover {
  background-color: #ddd;
}

nav ul ul {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  border-radius: 20px;
}

nav ul li:hover > ul {
  display: inherit;
}

nav ul ul li {
  width: 150px;
  float: none;
  display: list-item;
  position: relative;
}

nav ul ul ul li {
  position: relative;
  top: -60px;
  left: 150px;
}

توضیح:

در این کد CSS، استایل‌های مربوط به منوی ناوبری و جلوه‌های خارجی منحنی تعریف شده است.

“`css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
“`
این قسمت کدها به بدنه صفحه اعمال می‌شود و فونت مورد استفاده، حاشیه‌ها و پرشینگ‌های صفحه را صفر تنظیم می‌کند.

“`css
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #f1f1f1;
display: flex;
justify-content: center;
border-radius: 20px;
}
“`
این بخش مشخصات استایل لیست نامرئی (`<ul>`) را تعیین می‌کند. استایل‌هایی مانند نوع لیست، حاشیه‌ها، پرشینگ‌ها، رنگ پس زمینه و انعطاف پذیری (`flex`) برای مرکز چین کردن آیتم‌ها درون منو تعیین می‌شوند. همچنین یک حاشیه گرد (`border-radius`) با شعاع 20 پیکسل به منو اضافه می‌شود تا شکل منحنی را به آن بدهد.

“`css
nav li {
margin: 5px;
}
“`
این بخش حاشیه‌های کناری آیتم‌ها را تعیین می‌کند.

“`css
nav a {
display: block;
padding: 10px 20px;
text-decoration: none;
color: #333;
border-radius: 10px;
transition: background-color 0.3s ease;
}
“`
این بخش استایل لینک‌ها (`<a>`) را تعیین می‌کند. استایل‌هایی مانند نمایش بلوک، حاشیه‌ها، رنگ متن، حاشیه گرد و انتقال رنگ پس زمینه با انتقال نرم (`transition`) تعیین می‌شوند. این انتقال باعث می‌شود که رنگ پس زمینه لینک‌ها با انیمیشنی نرم تغییر کند در هنگام هاور ماوس بر روی آن‌ها.

“`css
nav a:hover {
background-color: #ddd;
}
“`
این بخش استایل لینک‌ها را در هنگام هاور ماوس بر روی آن‌ها تغییر می‌دهد. در اینجا، رنگ پس زمینه لینک با رنگ خاکستری روشن (`#ddd`) جایگزین می‌شود.

“`css
nav ul ul {
display: none;
position: absolute;
background-color: #f1f1f1;
border-radius: 20px;
}
“`
این بخش استایل لیست نامرئی داخلی (`<ul>`) برای زیرمنوها را تعیین می‌کند. استایل‌هایی مانند نمایش نداشتن (`display:none`)، موقعیت مطلق (`position: absolute`)، رنگ پس زمینه و حاشیه گرد به زیرمنوها اعمال می‌شوند.

“`css
nav ul li:hover > ul {
display: inherit;
}
“`
این بخش استایل زیرمنوها را در هنگام هاور ماوس بر روی آیتم‌های منوی اصلی تعیین می‌کند. با استفاده از این استایل، زیرمنوها به صورت نمایش (`display: inherit`) نمایان می‌شوند.

“`css
nav ul ul li {
width: 200px;
float: none;
display: list-item;
position: relative;
}
“`
این بخش استایل آیتم‌های زیرمنو را تعیین می‌کند. با استفاده از استایل‌های مانند عرض 200 پیکسل، شناوری نداشتن (`float: none`)، نمایش به صورت آیتم لیست (`display: list-item`) و موقعیت نسبی (`position: relative`)، آیتم‌های زیرمنو در یک سطر نمایش داده می‌شوند. برای اطلاعات بیشتر به آموزش CSS مراجعه کنید.

“`css
nav ul ul ul li {
position: relative;
top: -60px;
left: 200px;
}
“`
این بخش استایل آیتم‌های زیرزیرمنو را تعیین می‌کند. با استفاده از استایل‌های مانند موقعیت نسبی (`position: relative`)، تعیین موقعیت با استفاده از بالا (`top`) و چپ (`left`)، آیتم‌های زیرزیرمنو به صورت منحنی به سمت چپ و بالا نمایش داده می‌شوند.

بخش سوم: اضافه کردن رفتار با JavaScript

در این بخش، به اضافه کردن رفتار و تعامل به منوی ناوبری با استفاده از JavaScript می‌پردازیم. به وسیله‌ی رویدادهای ماوس و توابع JavaScript، می‌توانیم تغییراتی را در منو ایجاد کنیم. به عنوان مثال، هنگامی که کاربر روی یک آیتم هاور می‌کند، می‌توانیم استایل آن آیتم را تغییر دهیم و یا زیرمنوها را نمایش دهیم.

مثال:

				
					// اضافه کردن رفتار به هاور ماوس
var navItems = document.querySelectorAll('nav a');

for (var i = 0; i < navItems.length; i++) {
  navItems[i].addEventListener('mouseover', function () {
    this.style.backgroundColor = '#ddd';
  });

  navItems[i].addEventListener('mouseout', function () {
    this.style.backgroundColor = '';
  });
}

توضیح:

این کد JavaScript به صورت کامل رفتاری را به المان‌های لینک در منوی ناوبری (nav) اضافه می‌کند. همچنین، با استفاده از رویدادهای mouseover و mouseout، تغییراتی را در ظاهر المان‌های لینک ایجاد می‌کند وقتی ماوس روی آن‌ها حرکت می‌کند یا از روی آن‌ها خارج می‌شود.

در خط اول، تمام المان‌های لینک درون منوی ناوبری با استفاده از کوئری‌سلکتور (querySelectorAll) و به عنوان معیار انتخاب، ‘nav a’، انتخاب می‌شوند و در متغیر navItems ذخیره می‌شوند.

سپس، با استفاده از یک حلقه (for loop)، به ترتیب هر المان لینک را در navItems در نظر می‌گیریم. درون حلقه، دو رویداد بر روی هر المان لینک اضافه می‌شود.

در خطوط سوم تا پنجم، رویداد mouseover به هر المان لینک اضافه می‌شود. وقتی ماوس روی المان لینک حرکت می‌کند، تابع مربوطه صدا زده می‌شود و با استفاده از کلیدواژه this به المان لینک مورد نظر دسترسی پیدا می‌کنیم. سپس، رنگ پس زمینه آن المان لینک به ‘#ddd’ تغییر می‌کند. این کد تغییر رنگ پس زمینه المان لینک را به رنگ خاکستری روشن (light gray) تنظیم می‌کند.

همچنین، در خطوط هفتم تا نهم، رویداد mouseout به هر المان لینک اضافه می‌شود. وقتی ماوس از روی المان لینک خارج می‌شود، تابع مربوطه فراخوانی می‌شود و با استفاده از کلیدواژه this به المان لینک مورد نظر دسترسی پیدا می‌کنیم. سپس، رنگ پس زمینه آن المان لینک به حالت اولیه خود برگشت می‌کند (بدون تنظیم رنگ پس زمینه خاصی). این کد باعث برگشت المان لینک به رنگ پس زمینه پیش‌فرض می‌شود.

سوالات متداول:

پاسخ: برای اعمال جلوه‌های خارجی منحنی به منوی ناوبری، می‌توانید از ویژگی‌ها و تکنیک‌های CSS استفاده کنید. به عنوان مثال، می‌توانید با استفاده از ترانزیشن‌ها و ترانسفرمیشن‌ها، حرکت‌های منحنی را به المان‌های منوی ناوبری اعمال کنید. می‌توانید از ترانزیشن‌های CSS برای ایجاد انیمیشن‌های انتقالی و تغییر اندازه استفاده کنید. همچنین، می‌توانید از توابع و متدهای JavaScript برای اعمال جلوه‌های پیچیده‌تری مانند منحنی‌ها و انیمیشن‌های سفارشی استفاده کنید.

پاسخ: برای اعمال ترانزیشن منحنی بر روی المان‌ها در CSS، می‌توانید از تابع `cubic-bezier()` استفاده کنید. این تابع به شما اجازه می‌دهد یک تابع منحنی سفارشی را برای ترانزیشن تعیین کنید. تابع `cubic-bezier()` چهار پارامتر دارد که هر کدام از 0 تا 1 مقدار می‌گیرند. این پارامترها نشان دهنده نقاط کنترل منحنی هستند و با تغییر مقادیر آن‌ها می‌توانید ترانزیشن‌های منحنی مختلفی را اعمل کنید. برای مثال، اگر بخواهید یک ترانزیشن منحنی با انحنای زیاد داشته باشید، می‌توانید از مقادیری نزدیک به 0 و 1 استفاده کنید. به طور کلی، با آزمایش و تغییر مقادیر پارامترها، می‌توانید ترانزیشن منحنی دلخواه خود را به دست آورید.

پاسخ: برای اضافه کردن رفتارهای تعاملی به منوی ناوبری با استفاده از JavaScript، می‌توانید از رویدادها و توابع جاوااسکریپت استفاده کنید. به طور معمول، شما می‌توانید رویدادهای موس مانند `click` و `mouseover` را بر روی المان‌های منو اعمال کنید تا عملکرد تعاملی را فعال کنید. برای مثال، با استفاده از رویداد `click`، می‌توانید منو را باز و بسته کنید. همچنین، با استفاده از رویداد `mouseover` و `mouseout`، می‌توانید تغییراتی مانند تغییر رنگ یا جلوه‌های دیگر به المان‌های منو اعمال کنید. با استفاده از توابع جاوااسکریپت، می‌توانید وضعیت منو را بررسی کنید و تغییراتی مانند اضافه کردن و حذف کلاس‌ها را اعمال کنید تا جلوه‌ها و رفتارهای مورد نظر را به منو اضافه کنید.

نتیجه‌گیری:

در این مقاله، یک منوی ناوبری جادویی و جذاب با استفاده از HTML، CSS و JavaScript طراحی کردیمو از جلوه‌های خارجی منحنی استفاده کردیم تا ظاهری زیبا و جذاب برای آن ایجاد کنیم. با استفاده از ساختار HTML، عناصر `<ul>` و `<li>` را برای لیست ناوبری و آیتم‌های منوی ناوبری قرار دادیم. سپس با استفاده از استایل CSS، جلوه‌های منحنی را با استفاده از خواص مختلفی مانند `border-radius` و `transform` طراحی کردیم. در نهایت، با استفاده از JavaScript، رفتار و تعامل را به منوی ناوبری اضافه کردیم، مانند تغییر استایل آیتم‌ها در هاور ماوس و نمایش زیرمنوها.

این طراحی منوی ناوبری جادویی با استفاده از HTML، CSS و JavaScript و جلوه‌های خارجی منحنی، به کاربران امکان می‌دهد به راحتی در سایت حرکت کنند و تجربه کاربری زیبا و جذابی را تجربه کنند. با استفاده از این روش‌ها و تکنیک‌ها، شما نیز می‌توانید منوی ناوبری خود را به شکلی جالب و منحصر به فرد طراحی کنید و تجربه کاربری برتری را برای کاربرانتان ایجاد کنید.

اشتراک گذاری این مطلب در:

دسته بندی مقالات ما:

خدمات طراحی سایت و سئو

سایر مقالات ما:

خبر رسان

با وارد کردن ایمل تان، جدیدترین خبرنامه های ما برای شما ارسال می شود.

خدمات طراحی سایت و سئو با مهدی توکلی