{"id":39913,"date":"2024-05-25T13:30:06","date_gmt":"2024-05-25T09:00:06","guid":{"rendered":"https:\/\/wpadmin.maktabkhooneh.org\/mag\/?p=39913"},"modified":"2026-04-06T15:42:02","modified_gmt":"2026-04-06T12:12:02","slug":"menu-with-js","status":"publish","type":"post","link":"https:\/\/maktabkhooneh.org\/mag\/menu-with-js\/","title":{"rendered":"\u0622\u0645\u0648\u0632\u0634 \u0633\u0627\u062e\u062a \u0645\u0646\u0648 \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0647 \u0632\u0628\u0627\u0646 \u0633\u0627\u062f\u0647"},"content":{"rendered":"\n<p>\u0627\u0645\u0631\u0648\u0632 \u0628\u0627 \u0622\u0645\u0648\u0632\u0634 \u0633\u0627\u062e\u062a \u06cc\u06a9 \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u06a9\u0627\u0645\u0644\u0627\u064b \u0648\u0627\u06a9\u0646\u0634\u200c\u06af\u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 HTML\u060c CSS \u0648 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0645\u06cc\u0647\u0645\u0627\u0646 \u0647\u0645\u0631\u0627\u0647\u0627\u0646 \u0647\u0645\u06cc\u0634\u06af\u06cc \u0645\u062c\u0644\u0647 \u0645\u06a9\u062a\u0628 \u062e\u0648\u0646\u0647 \u0647\u0633\u062a\u06cc\u0645. \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u06cc\u06a9 \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u0634\u06cc\u06a9 \u0648 \u0647\u0645\u0647\u200c\u06a9\u0627\u0631\u0647 \u06a9\u0647 \u0628\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0633\u0627\u06cc\u0632 \u0635\u0641\u062d\u0647 \u062a\u0628\u062f\u06cc\u0644 \u0628\u0647 \u0645\u0646\u0648\u06cc \u0647\u0645\u0628\u0631\u06af\u0631\u06cc \u0634\u0648\u062f \u062f\u0627\u0646\u0634 \u0641\u0646\u06cc \u0632\u06cc\u0627\u062f\u06cc \u0644\u0627\u0632\u0645 \u0646\u06cc\u0633\u062a. \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0622\u0645\u0648\u0632\u0634\u06cc \u06a9\u0647 \u0633\u0627\u062e\u062a \u0645\u0646\u0648 \u0647\u0645\u0628\u0631\u06af\u0631\u06cc \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0631\u0627 \u0646\u06cc\u0632 \u062f\u0631 \u0628\u0631 \u0645\u06cc\u200c\u06af\u06cc\u0631\u062f\u060c \u0627\u062f\u0639\u0627\u06cc \u0645\u0627 \u0645\u0628\u0646\u06cc \u0628\u0631 \u0633\u0627\u062f\u06af\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u062b\u0627\u0628\u062a \u062e\u0648\u0627\u0647\u062f \u06a9\u0631\u062f. \u067e\u0633 \u0628\u0627 \u0645\u0627 \u0647\u0645\u0631\u0627\u0647 \u0628\u0627\u0634\u06cc\u062f \u062a\u0627 \u062a\u0646\u0647\u0627 \u062f\u0631 \u0686\u0646\u062f \u062f\u0642\u06cc\u0642\u0647 \u0633\u0627\u062e\u062a \u0645\u0646\u0648 \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u062d\u0631\u0641\u0647\u200c\u0627\u06cc \u06cc\u0627\u062f \u0628\u06af\u06cc\u0631\u06cc\u062f.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u062a\u0648\u0636\u06cc\u062d \u06a9\u0644\u06cc \u0622\u0645\u0648\u0632\u0634 \u067e\u0631\u0648\u0698\u0647 \u0645\u062d\u0648\u0631 \u0633\u0627\u062e\u062a \u0645\u0646\u0648 \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/h2>\n\n\n\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0628\u0647 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u0645\u06cc\u200c\u067e\u0631\u062f\u0627\u0632\u06cc\u0645 \u06a9\u0647 \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0627\u06cc\u0646 \u06a9\u0647 \u062f\u0627\u0631\u0627\u06cc \u062c\u0630\u0627\u0628\u06cc\u062a \u0628\u0635\u0631\u06cc \u0628\u0627\u0644\u0627\u06cc\u06cc \u0627\u0633\u062a\u060c \u062f\u0631 \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u062f\u0633\u062a\u06af\u0627\u0647\u06cc \u06a9\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f \u0648\u0627\u06a9\u0646\u0634\u200c\u06af\u0631\u0627 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f. \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 HTML \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a\u0627\u0631 \u0635\u0641\u062d\u0647\u060c \u0628\u0627 \u06a9\u0645\u06a9 CSS \u0627\u0633\u062a\u0627\u06cc\u0644 \u0635\u0641\u062d\u0647 \u0648 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062d\u0627\u0644\u062a \u067e\u0648\u06cc\u0627\u06cc\u06cc \u0628\u0647 \u0645\u0646\u0648\u06cc \u062e\u0648\u062f \u0645\u06cc\u200c\u0628\u062e\u0634\u06cc\u0645.<\/p>\n\n\n<div class=\"jet-listing-grid--50121\" style=\"\"><div class=\"jet-listing-dynamic-field-block zht-maktab-khooneh-course cb-fb2qc30r\"data-is-block=\"jet-engine\/dynamic-field\"><div class=\"jet-listing-dynamic-field__content\" >\n<div class=\"course-card\">\n    <div class=\"course-card-img\">\n        <img decoding=\"async\" \n            data-src=\"https:\/\/media1.maktabkhooneh.org\/CACHE\/images\/courses\/images\/javascript-oop_1403-08-16-164350653\/6c307197a074dffea3bc17df00c0f463.webp?expire=4893471932&#038;token=c9a63f578ed0f0be04d9300e2fcec400&#038;md5=yaY_V47Q8L4E2TAOL87EAA==\" \n            alt=\"\u0622\u0645\u0648\u0632\u0634 \u0634\u06cc \u06af\u0631\u0627\u06cc\u06cc \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u067e\u0631\u0648\u0698\u0647 \u0645\u062d\u0648\u0631\" \n            title=\"\u0622\u0645\u0648\u0632\u0634 \u0634\u06cc \u06af\u0631\u0627\u06cc\u06cc \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u067e\u0631\u0648\u0698\u0647 \u0645\u062d\u0648\u0631\" \n            width=\"100%\" \n            height=\"auto\"\n           \n         src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\">\n    <\/div>\n\n    <div class=\"course-details\">\n        <a href=\"https:\/\/maktabkhooneh.org\/course\/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B4%DB%8C-%DA%AF%D8%B1%D8%A7%DB%8C%DB%8C-%D8%AF%D8%B1-%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-mk1106\/\" class=\"course-title\" target=\"_blank\" rel=\"noopener noreferrer\">\n            \u0622\u0645\u0648\u0632\u0634 \u0634\u06cc \u06af\u0631\u0627\u06cc\u06cc \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u067e\u0631\u0648\u0698\u0647 \u0645\u062d\u0648\u0631        <\/a>\n\n        <div class=\"course-price\">\n            \n                <span class=\"real-price\">\n                                            \u06f7\u06f9\u06f9,\u06f0\u06f0\u06f0                                    <\/span>\n\n                <span>\n                    <span class=\"discounted-price\">\n                        \u06f2\u06f3\u06f9,\u06f7\u06f0\u06f0                    <\/span>\n                    <span class=\"price-currency\">\u062a\u0648\u0645\u0627\u0646<\/span>\n                <\/span>\n\n                                    <div class=\"discount-percentage\">\n                        \u06f7\u06f0%                    <\/div>\n                \n                    <\/div>\n        <button class=\"course-cta-button\" data-course-url=\"https:\/\/maktabkhooneh.org\/course\/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B4%DB%8C-%DA%AF%D8%B1%D8%A7%DB%8C%DB%8C-%D8%AF%D8%B1-%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-mk1106\/\">\n            \u0645\u0634\u0627\u0647\u062f\u0647 \u0648 \u062e\u0631\u06cc\u062f        <\/button>\n    <\/div>\n<\/div>\n<\/div><\/div><\/div>\n\n\n<p>\u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u0627\u06cc\u0646 \u06a9\u0647 \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u06cc\u06a9 \u0646\u0645\u0648\u0646\u0647 \u0622\u0645\u0648\u0632\u0634\u06cc \u0627\u0633\u062a \u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u06cc\u0686\u06cc\u062f\u0647\u200c\u0627\u06cc \u0628\u0631\u0627\u06cc \u0622\u0646 \u0646\u0633\u0627\u062e\u062a\u06cc\u0645. \u062a\u0646\u0647\u0627 \u06cc\u06a9 \u0645\u0646\u0648 \u0628\u0627 \u0627\u0633\u062a\u0627\u06cc\u0644\u06cc \u0632\u06cc\u0628\u0627 \u062f\u0627\u0631\u06cc\u0645 \u06a9\u0647 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0631\u0648\u06cc\u062f\u0627\u062f\u200c\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u06a9\u0644\u06cc\u06a9 \u0648 \u062a\u063a\u06cc\u06cc\u0631 \u0633\u0627\u06cc\u0632 \u0635\u0641\u062d\u0647 \u0648\u0627\u06a9\u0646\u0634\u06cc \u0645\u062a\u0641\u0627\u0648\u062a \u0646\u0634\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f. \u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u0627\u0648\u0644\u06cc\u0647 \u06a9\u0627\u0641\u06cc \u0627\u0633\u062a.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/word-image-39913-1-1024x512.png.webp\" alt=\"\u0622\u0645\u0648\u0632\u0634 \u067e\u0631\u0648\u0698\u0647 \u0645\u062d\u0648\u0631 \u0633\u0627\u062e\u062a \u0645\u0646\u0648 \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\" class=\"wp-image-39914\" title=\"\" srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/word-image-39913-1-1024x512.png.webp 1024w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/word-image-39913-1-300x150.png.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/word-image-39913-1-768x384.png.webp 768w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/word-image-39913-1.png 1280w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption><\/figcaption><\/figure>\n\n\n\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0633\u0631\u0627\u063a \u06a9\u062f\u200c\u0647\u0627 \u0628\u0631\u0648\u06cc\u0645. \u0627\u0628\u062a\u062f\u0627 \u0628\u0627 \u06a9\u062f\u200c\u0647\u0627\u06cc html \u0634\u0631\u0648\u0639 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span class=\"token doctype\"><span class=\"token punctuation\">&lt;!<\/span><span class=\"token doctype-tag\">DOCTYPE<\/span> <span class=\"token name\">html<\/span><span class=\"token punctuation\">&gt;<\/span><\/span> \n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>html <span class=\"token attr-name\">lang<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>en<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span> \n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>head<span class=\"token punctuation\">&gt;\n &lt;meta <span class=\"token attr-name\">charset<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span>\"UTF-8\"<\/span>&gt;\n &lt;meta <span class=\"token attr-name\">name<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span>\"viewport\"<\/span> <span class=\"token attr-name\">content<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span>\"width=device-width, initial-scale=1.0\"<\/span>&gt;\n &lt;title&gt;Drop Down Menu&lt;\/title&gt; \n&lt;link <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span>\"stylesheet\"<\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span>\"styles.css\"<\/span>&gt; \n&lt;\/head&gt;\n&lt;body&gt;\n &lt;nav <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span>\"navbar\"<\/span>&gt;\n &lt;div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span>\"logo\"<\/span>&gt;\n &lt;img <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span>\".\/navbar-icon.png\"<\/span> <span class=\"token attr-name\">alt<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span>\"\"<\/span>&gt;\n &lt;\/div&gt;\n &lt;div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span>\"toggle-btn\"<\/span>&gt;\n &lt;div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span>\"icon\"<\/span>&gt;\n&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;ul <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span>\"menu\"<\/span>&gt; &lt;li&gt;&lt;a <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span>\"#\"<\/span>&gt;home&lt;\/a&gt;&lt;\/li&gt; &lt;li&gt;&lt;a <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span>\"#\"<\/span>&gt;About&lt;\/a&gt;&lt;\/li&gt; &lt;li <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span>\"submenu-wrapper\"<\/span>&gt; &lt;a <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span>\"#\"<\/span>&gt;Skills&lt;span&gt; &gt; &lt;\/span&gt; &lt;\/a&gt;\n &lt;ul <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span>\"submenu\"<\/span>&gt; &lt;li&gt;&lt;a <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span>\"#\"<\/span>&gt;HTML&lt;\/a&gt;&lt;\/li&gt; &lt;li&gt;&lt;a <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span>\"#\"<\/span>&gt;CSS&lt;\/a&gt;&lt;\/li&gt; &lt;li&gt;&lt;a <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span>\"#\"<\/span>&gt;JavaScript&lt;\/a&gt;&lt;\/li&gt; &lt;li&gt;&lt;a <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span>\"#\"<\/span>&gt;React.js&lt;\/a&gt;&lt;\/li&gt; &lt;li&gt;&lt;a <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span>\"#\"<\/span>&gt;Node.js&lt;\/a&gt;&lt;\/li&gt; &lt;\/ul&gt; &lt;\/li&gt; &lt;li&gt;&lt;a <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span>\"#\"<\/span>&gt;Background&lt;\/a&gt;&lt;\/li&gt; &lt;li&gt;&lt;a <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span>\"#\"<\/span>&gt;Blog&lt;\/a&gt;&lt;\/li&gt; &lt;li&gt;&lt;a <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span>\"#\"<\/span>&gt;About&lt;\/a&gt;&lt;\/li&gt; &lt;\/ul&gt; &lt;\/nav&gt;\n &lt;script <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span>\".\/script.js\"<\/span>&gt;&lt;\/script&gt;\n &lt;\/body&gt;\n &lt;\/html&gt;\n<\/span><\/span><\/pre>\n\n\n\n<p>\u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u0627\u06cc\u0646 \u06a9\u0647 \u0645\u0648\u0636\u0648\u0639 \u0645\u0628\u062d\u062b \u0645\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0633\u062a \u062f\u0631 \u0645\u0648\u0631\u062f \u06a9\u062f\u200c\u0647\u0627\u06cc \u0627\u0686 \u062a\u06cc \u0627\u0645 \u0627\u0644 \u0632\u06cc\u0627\u062f \u0635\u062d\u0628\u062a \u0646\u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645. \u062f\u0631 \u0627\u06cc\u0646 \u06a9\u062f \u062a\u0646\u0647\u0627 \u062f\u0648 \u062e\u0637 \u0631\u0627 \u0645\u0648\u0631\u062f \u0628\u0631\u0631\u0633\u06cc \u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u062f\u0647\u06cc\u0645. \u0627\u0648\u0644 \u06a9\u062f \u0632\u06cc\u0631 \u06a9\u0647 \u0641\u0627\u06cc\u0644 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0631\u0627 \u0628\u0647 \u0641\u0627\u06cc\u0644 html \u0648\u0635\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n\n\n\n<p class=\"has-text-align-left\">&lt;script src=&#8221;.\/script.js&#8221;&gt;&lt;\/script&gt;<\/p>\n\n\n\n<p>\u062e\u0637 \u0628\u0639\u062f\u06cc \u06a9\u062f \u0632\u06cc\u0631 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0627\u062a\u0635\u0627\u0644 \u0641\u0627\u06cc\u0644 css \u0628\u0647 html \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n\n\n\n<p class=\"has-text-align-left\">&lt;link rel=&#8221;stylesheet&#8221; href=&#8221;styles.css&#8221;&gt;<\/p>\n\n\n\n<p>\u062f\u0631 \u0627\u062f\u0627\u0645\u0647 \u0628\u0647 \u06a9\u062f\u200c\u0647\u0627\u06cc css \u0628\u0631\u0646\u0627\u0645\u0647 \u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span class=\"token atrule\"><span class=\"token rule\">@import<\/span> <span class=\"token function\">url<\/span><span class=\"token punctuation\">(<\/span>'<span class=\"token property\">https<\/span><span class=\"token punctuation\">:<\/span>\/\/fonts.googleapis.com\/css2?family=<span class=\"token property\">Poppins<\/span><span class=\"token punctuation\">:<\/span>ital<span class=\"token punctuation\">,<\/span>wght<span class=\"token rule\">@\u06f0<\/span><span class=\"token punctuation\">,<\/span>\u06f1\u06f0\u06f0<span class=\"token punctuation\">;<\/span><\/span>\u06f0<span class=\"token punctuation\">,<\/span>\u06f2\u06f0\u06f0<span class=\"token punctuation\">;<\/span>\u06f0<span class=\"token punctuation\">,<\/span>\u06f3\u06f0\u06f0<span class=\"token punctuation\">;<\/span>\u06f0<span class=\"token punctuation\">,<\/span>\u06f4\u06f0\u06f0<span class=\"token punctuation\">;<\/span>\u06f0<span class=\"token punctuation\">,<\/span>\u06f5\u06f0\u06f0<span class=\"token punctuation\">;<\/span>\u06f0<span class=\"token punctuation\">,<\/span>\u06f6\u06f0\u06f0<span class=\"token punctuation\">;<\/span>\u06f0<span class=\"token punctuation\">,<\/span>\u06f7\u06f0\u06f0<span class=\"token punctuation\">;<\/span>\u06f0<span class=\"token punctuation\">,<\/span>\u06f8\u06f0\u06f0<span class=\"token punctuation\">;<\/span>\u06f0<span class=\"token punctuation\">,<\/span>\u06f9\u06f0\u06f0<span class=\"token punctuation\">;<\/span>\u06f1<span class=\"token punctuation\">,<\/span>\u06f1\u06f0\u06f0<span class=\"token punctuation\">;<\/span>\u06f1<span class=\"token punctuation\">,<\/span>\u06f2\u06f0\u06f0<span class=\"token punctuation\">;<\/span>\u06f1<span class=\"token punctuation\">,<\/span>\u06f3\u06f0\u06f0<span class=\"token punctuation\">;<\/span>\u06f1<span class=\"token punctuation\">,<\/span>\u06f4\u06f0\u06f0<span class=\"token punctuation\">;<\/span>\u06f1<span class=\"token punctuation\">,<\/span>\u06f5\u06f0\u06f0<span class=\"token punctuation\">;<\/span>\u06f1<span class=\"token punctuation\">,<\/span>\u06f6\u06f0\u06f0<span class=\"token punctuation\">;<\/span>\u06f1<span class=\"token punctuation\">,<\/span>\u06f7\u06f0\u06f0<span class=\"token punctuation\">;<\/span>\u06f1<span class=\"token punctuation\">,<\/span>\u06f8\u06f0\u06f0<span class=\"token punctuation\">;<\/span>\u06f1<span class=\"token punctuation\">,<\/span>\u06f9\u06f0\u06f0&amp;amp<span class=\"token punctuation\">;<\/span>display=swap'<span class=\"token punctuation\">)<\/span><span class=\"token selector\">;\n\n*,\n\n::before,\n\n::after<\/span><span class=\"token punctuation\">{<\/span>\n\n<span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> 0<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">margin<\/span><span class=\"token punctuation\">:<\/span> 0<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">box-sizing<\/span><span class=\"token punctuation\">:<\/span> border-box<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token selector\">html<\/span><span class=\"token punctuation\">{<\/span>\n\n<span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span>13px<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token selector\">body<\/span><span class=\"token punctuation\">{<\/span>\n\n<span class=\"token property\">font-family<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">\"Poppins\"<\/span><span class=\"token punctuation\">,<\/span> sans-serif<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span>1rem<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">background<\/span><span class=\"token punctuation\">:<\/span> #222f37<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span>#d6e0f9<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token selector\">.navbar<\/span><span class=\"token punctuation\">{<\/span>\n\n<span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span>\u06f1\u06f0\u06f0%<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">position<\/span><span class=\"token punctuation\">:<\/span>fixed<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">top<\/span><span class=\"token punctuation\">:<\/span>\u06f0<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">left<\/span><span class=\"token punctuation\">:<\/span>\u06f0<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">background<\/span><span class=\"token punctuation\">:<\/span> #101d23<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span>\u06f0 \u06f5%<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span>flex<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">align-items<\/span><span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">justify-content<\/span><span class=\"token punctuation\">:<\/span> space-between<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token selector\">.logo<\/span><span class=\"token punctuation\">{<\/span>\n\n<span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span>5rem\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token selector\">.logo img<\/span><span class=\"token punctuation\">{<\/span>\n\n<span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span>\u06f1\u06f0\u06f0%<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token selector\">.menu<\/span><span class=\"token punctuation\">{<\/span>\n\n<span class=\"token property\">list-style<\/span><span class=\"token punctuation\">:<\/span> none<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token selector\">.menu li<\/span><span class=\"token punctuation\">{<\/span>\n\n<span class=\"token property\">position<\/span><span class=\"token punctuation\">:<\/span> relative<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">float<\/span><span class=\"token punctuation\">:<\/span>left<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token selector\">.menu li a<\/span><span class=\"token punctuation\">{<\/span>\n\n<span class=\"token property\">font-family<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">\"Poppins\"<\/span><span class=\"token punctuation\">,<\/span> sans-serif<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span>\u06f1.2rem<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span>#d6e0f9<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span>block<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">text-decoration<\/span><span class=\"token punctuation\">:<\/span> none<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span>1rem 1.5rem<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token selector\">.menu li a:hover<\/span><span class=\"token punctuation\">{<\/span>\n\n<span class=\"token property\">background<\/span><span class=\"token punctuation\">:<\/span> #495ca8<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token selector\">.submenu<\/span><span class=\"token punctuation\">{<\/span>\n\n<span class=\"token property\">position<\/span><span class=\"token punctuation\">:<\/span> absolute<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">left<\/span><span class=\"token punctuation\">:<\/span>\u06f0<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">background<\/span><span class=\"token punctuation\">:<\/span> #101d23<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span>none<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">transition<\/span><span class=\"token punctuation\">:<\/span> all .3s ease-in-out<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token selector\">.submenu-wrapper:hover .submenu,\n\n.submenu-wrapper:focus-within .submenu<\/span><span class=\"token punctuation\">{<\/span>\n\n<span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> initial<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token selector\">.submenu li<\/span><span class=\"token punctuation\">{<\/span>\n\n<span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span>\u06f1\u06f0\u06f0%<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">border-top<\/span><span class=\"token punctuation\">:<\/span>.1rem solid #222f37<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">list-style<\/span><span class=\"token punctuation\">:<\/span> none<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token selector\">.toggle-btn<\/span> <span class=\"token punctuation\">{<\/span>\n\n<span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> none<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* Initially hide the toggle button *\/<\/span>\n\n<span class=\"token property\">z-index<\/span><span class=\"token punctuation\">:<\/span>\u06f1\u06f0\u06f0\u06f0<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token selector\">.icon<\/span> <span class=\"token punctuation\">{<\/span>\n\n<span class=\"token property\">position<\/span><span class=\"token punctuation\">:<\/span> relative<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> 1.5rem<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">height<\/span><span class=\"token punctuation\">:<\/span> .8rem<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">cursor<\/span><span class=\"token punctuation\">:<\/span> pointer<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">z-index<\/span><span class=\"token punctuation\">:<\/span>\u06f1\u06f0\u06f0<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token selector\">.icon::before<\/span> <span class=\"token punctuation\">{<\/span>\n\n<span class=\"token property\">top<\/span><span class=\"token punctuation\">:<\/span> 0<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">right<\/span><span class=\"token punctuation\">:<\/span>\u06f0<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">content<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">''<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">position<\/span><span class=\"token punctuation\">:<\/span> absolute<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> 2rem<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">height<\/span><span class=\"token punctuation\">:<\/span> .2rem<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> #d6e0f9<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">transition<\/span><span class=\"token punctuation\">:<\/span> all 0.3s ease-in-out<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token selector\">.icon::after<\/span> <span class=\"token punctuation\">{<\/span>\n\n<span class=\"token property\">bottom<\/span><span class=\"token punctuation\">:<\/span> 0<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">right<\/span><span class=\"token punctuation\">:<\/span>\u06f0<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">content<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">''<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">position<\/span><span class=\"token punctuation\">:<\/span> absolute<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> 1.5rem<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">height<\/span><span class=\"token punctuation\">:<\/span> .2rem<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> #d6e0f9<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">transition<\/span><span class=\"token punctuation\">:<\/span> transform 0.3s ease-in-out<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token comment\">\/* Rotate the before and after lines to create the close icon effect *\/<\/span>\n\n<span class=\"token selector\">.icon.active::before<\/span> <span class=\"token punctuation\">{<\/span>\n\n<span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span>\u06f1.5rem<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">transform<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">rotate<\/span><span class=\"token punctuation\">(<\/span>-45deg<span class=\"token punctuation\">)<\/span> <span class=\"token function\">translate<\/span><span class=\"token punctuation\">(<\/span>-\u06f0.21rem<span class=\"token punctuation\">,<\/span> 0.21rem<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token selector\">.icon.active::after<\/span> <span class=\"token punctuation\">{<\/span>\n\n<span class=\"token property\">transform<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">rotate<\/span><span class=\"token punctuation\">(<\/span>45deg<span class=\"token punctuation\">)<\/span> <span class=\"token function\">translate<\/span><span class=\"token punctuation\">(<\/span>-\u06f0.21rem<span class=\"token punctuation\">,<\/span> -\u06f0.21rem<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token atrule\"><span class=\"token rule\">@media<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token property\">max-width<\/span><span class=\"token punctuation\">:<\/span> 991px<span class=\"token punctuation\">)<\/span><\/span><span class=\"token punctuation\">{<\/span>\n\n<span class=\"token selector\">.toggle-btn<\/span><span class=\"token punctuation\">{<\/span>\n\n<span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> block<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token selector\">.menu<\/span><span class=\"token punctuation\">{<\/span>\n\n<span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span>\u06f1\u06f0\u06f0%<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">position<\/span><span class=\"token punctuation\">:<\/span>absolute<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">top<\/span><span class=\"token punctuation\">:<\/span>\u06f1\u06f0\u06f0%<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">left<\/span><span class=\"token punctuation\">:<\/span>\u06f0<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">background<\/span><span class=\"token punctuation\">:<\/span> #101d23<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">border-top<\/span><span class=\"token punctuation\">:<\/span> .1rem solid #222f37<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span>none<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token selector\">.menu.active<\/span><span class=\"token punctuation\">{<\/span>\n\n<span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span>initial\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token selector\">.menu li<\/span><span class=\"token punctuation\">{<\/span>\n\n<span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span>\u06f1\u06f0\u06f0%<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">border-top<\/span><span class=\"token punctuation\">:<\/span> .1rem solid #222f37<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token selector\">.submenu<\/span><span class=\"token punctuation\">{<\/span>\n\n<span class=\"token property\">position<\/span><span class=\"token punctuation\">:<\/span> relative<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span>\u06f1\u06f0\u06f0%<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token selector\">.submenu li<\/span><span class=\"token punctuation\">{<\/span>\n\n<span class=\"token property\">background<\/span><span class=\"token punctuation\">:<\/span> #222f37<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token property\">border-top<\/span><span class=\"token punctuation\">:<\/span> .1rem solid #101d23<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token selector\">.submenu li a<\/span><span class=\"token punctuation\">{<\/span>\n\n<span class=\"token property\">padding-left<\/span><span class=\"token punctuation\">:<\/span>2rem<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span><\/code><\/pre>\n\n\n\n<p>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a \u0633\u0631\u0627\u063a \u0627\u0635\u0644 \u0645\u0648\u0636\u0648\u0639 \u0645\u06cc\u200c\u0631\u0648\u06cc\u0645. \u06a9\u062f \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0633\u0627\u062e\u062a \u0645\u0646\u0648 \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0631\u0627 \u062f\u0631 \u0627\u062f\u0627\u0645\u0647 \u0645\u06cc\u200c\u0628\u06cc\u0646\u06cc\u062f.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const icon = document.querySelector('.icon');\n\nconst menu = document.querySelector('.menu');\n\nconst span = document.querySelector('.span')\n\nfunction toggleNavbar() {\n\nmenu.classList.toggle('active');\n\nicon.classList.toggle('active');\n\n}\n\ndocument.querySelector('.toggle-btn').addEventListener('click', function () {\n\ntoggleNavbar();\n\n});<\/code><\/pre>\n\n\n\n<p>\u06a9\u062f \u0641\u0648\u0642 \u0631\u0627 \u062e\u0637 \u0628\u0647 \u062e\u0637 \u062a\u0648\u0636\u06cc\u062d \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u062f\u061b \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0627\u062f\u0627\u0645\u0647 \u0645\u0637\u0644\u0628 \u0645\u0647\u0645\u200c\u062a\u0631\u06cc\u0646 \u0628\u062e\u0634 \u0627\u06cc\u0646 \u0646\u0648\u0634\u062a\u0647 \u0645\u062d\u0633\u0648\u0628 \u0645\u06cc\u200c\u0634\u0648\u062f. \u067e\u0633 \u0628\u0647 \u062f\u0642\u062a \u0628\u0647 \u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u0632\u06cc\u0631 \u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n\n\n<div class=\"jet-listing-grid--50121\" style=\"\"><div class=\"jet-listing-dynamic-field-block zht-maktab-khooneh-course cb-fb2qc30r\"data-is-block=\"jet-engine\/dynamic-field\"><div class=\"jet-listing-dynamic-field__content\" >\n<div class=\"course-card\">\n    <div class=\"course-card-img\">\n        <img decoding=\"async\" \n            data-src=\"https:\/\/media1.maktabkhooneh.org\/CACHE\/images\/courses\/images\/jquery_1403-08-16-164358917\/0df3ce0474a7045ab41308bd7f081720.webp?expire=4893471932&#038;token=a9dca3bd851d5df4c56a4d95813dae4b&#038;md5=qdyjvYUdXfTFak2VgT2uSw==\" \n            alt=\"\u0622\u0645\u0648\u0632\u0634 JQuery\" \n            title=\"\u0622\u0645\u0648\u0632\u0634 JQuery\" \n            width=\"100%\" \n            height=\"auto\"\n           \n         src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\">\n    <\/div>\n\n    <div class=\"course-details\">\n        <a href=\"https:\/\/maktabkhooneh.org\/course\/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-jquery-mk1098\/\" class=\"course-title\" target=\"_blank\" rel=\"noopener noreferrer\">\n            \u0622\u0645\u0648\u0632\u0634 JQuery        <\/a>\n\n        <div class=\"course-price\">\n            \n                <span class=\"real-price\">\n                                            \u06f7\u06f9\u06f9,\u06f0\u06f0\u06f0                                    <\/span>\n\n                <span>\n                    <span class=\"discounted-price\">\n                        \u06f2\u06f3\u06f9,\u06f7\u06f0\u06f0                    <\/span>\n                    <span class=\"price-currency\">\u062a\u0648\u0645\u0627\u0646<\/span>\n                <\/span>\n\n                                    <div class=\"discount-percentage\">\n                        \u06f7\u06f0%                    <\/div>\n                \n                    <\/div>\n        <button class=\"course-cta-button\" data-course-url=\"https:\/\/maktabkhooneh.org\/course\/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-jquery-mk1098\/\">\n            \u0645\u0634\u0627\u0647\u062f\u0647 \u0648 \u062e\u0631\u06cc\u062f        <\/button>\n    <\/div>\n<\/div>\n<\/div><\/div><\/div>\n\n\n<p><strong>\u0645\u062a\u063a\u06cc\u0631\u200c\u0647\u0627:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u062f\u0631 \u0633\u0637\u0631 \u0627\u0648\u0644 \u06cc\u06a9 \u0645\u062a\u063a\u06cc\u0631 \u0628\u0627 \u0646\u0627\u0645 icon \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u06a9\u0647 \u0639\u0646\u0635\u0631 html \u0628\u0627 \u06a9\u0644\u0627\u0633 .icon \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0627\u06cc\u0646 \u06a9\u0644\u0627\u0633 \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0622\u06cc\u06a9\u0648\u0646 \u0645\u0646\u0648\u06cc \u0647\u0645\u0628\u0631\u06af\u0631\u06cc \u0627\u0633\u062a.<\/li>\n\n\n\n<li>\u062f\u0631 \u0633\u0637\u0631 \u0628\u0639\u062f\u06cc \u0628\u0647 \u06a9\u0645\u06a9 \u06a9\u0644\u0627\u0633 .menu \u0628\u0647 \u062a\u06af ul \u06a9\u0647 \u06a9\u0644 \u0645\u0646\u0648 \u0631\u0627 \u062f\u0631 \u0628\u0631 \u062f\u0627\u0631\u062f \u062f\u0633\u062a\u0631\u0633\u06cc \u067e\u06cc\u062f\u0627 \u06a9\u0631\u062f\u06cc\u0645.<\/li>\n\n\n\n<li>\u062f\u0631 \u0633\u0637\u0631 \u0633\u0648\u0645 \u0646\u06cc\u0632 \u0628\u0647 \u062a\u06af span \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0633\u0637\u0631 \u0632\u06cc\u0631 \u062f\u0631 hdml \u062f\u0633\u062a\u0631\u0633\u06cc \u062f\u0627\u0631\u06cc\u0645.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-left\">&lt;a href=&#8221;#&#8221;&gt;Skills&lt;span&gt; &gt; &lt;\/span&gt;&lt;\/a&gt;<\/p>\n\n\n\n<p><strong>\u062a\u0627\u0628\u0639 toggleNavbar:<\/strong><\/p>\n\n\n\n<p>\u0627\u06cc\u0646 \u062a\u0627\u0628\u0647 \u0628\u0627 \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u0622\u06cc\u062a\u0645\u200c\u0647\u0627\u06cc\u06cc \u0627\u0632 html \u06a9\u0647 \u062f\u0631 \u0627\u0628\u062a\u062f\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0631\u062f\u06cc\u0645 \u0633\u0627\u062e\u062a\u0647 \u0634\u062f\u0646 \u0639\u0646\u0627\u0635\u0631 \u0631\u0627 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u06cc\u0639\u0646\u06cc \u0627\u06af\u0631 \u0648\u062c\u0648\u062f \u062f\u0627\u0634\u062a \u0646\u0634\u0627\u0646 \u0645\u06cc\u200c\u200c\u062f\u0647\u062f \u0627\u06af\u0631 \u0646\u0628\u0648\u062f \u0645\u06cc\u200c\u0633\u0627\u0632\u062f.<\/p>\n\n\n\n<p><strong>Event Listener:<\/strong><\/p>\n\n\n\n<p>\u062f\u0631 \u0627\u0646\u062a\u0647\u0627\u06cc \u06a9\u062f \u0646\u06cc\u0632 Event Listener \u0631\u0627 \u062f\u0627\u0631\u06cc\u0645. \u06cc\u0639\u0646\u06cc \u06a9\u062f\u06cc \u0646\u0648\u0634\u062a\u06cc\u0645 \u06a9\u0647 \u0645\u0646\u062a\u0638\u0631 \u0631\u0648\u06cc\u062f\u0627\u062f \u06a9\u0644\u06cc\u06a9 \u0627\u0633\u062a. \u062f\u0631 \u0646\u062a\u06cc\u062c\u0647 \u0627\u06af\u0631 \u0631\u0648\u06cc \u0622\u06cc\u062a\u0645 \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u06a9\u0644\u06cc\u06a9 \u0634\u0648\u062f \u062a\u0627\u0628\u0639 toggleNavbar()\u200e \u0631\u0627 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0647\u0645\u0627\u0646\u200c\u0637\u0648\u0631 \u06a9\u0647 \u062a\u0648\u0636\u06cc\u062d \u062f\u0627\u062f\u06cc\u0645 \u0639\u0645\u0644 \u062e\u0648\u0627\u0647\u062f \u06a9\u0631\u062f. \u062e\u0631\u0648\u062c\u06cc \u06a9\u062f\u0647\u0627\u06cc \u0646\u0648\u0634\u062a\u0647 \u0634\u062f\u0647 \u062f\u0631 \u062d\u0627\u0644\u062a \u062f\u0633\u06a9\u062a\u0627\u067e \u0628\u0647 \u0634\u06a9\u0644 \u0632\u06cc\u0631 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" width=\"1000\" height=\"420\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/word-image-39913-2.jpeg\" alt=\"\" class=\"wp-image-39915 lazyload\" title=\"\" data-srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/word-image-39913-2.jpeg 1000w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/word-image-39913-2-300x126.jpeg 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/word-image-39913-2-768x323.jpeg.webp 768w\" data-sizes=\"(max-width: 1000px) 100vw, 1000px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1000px; --smush-placeholder-aspect-ratio: 1000\/420;\" \/><figcaption><\/figcaption><\/figure>\n\n\n\n<p>\u0628\u0627 \u0646\u0645\u0627\u06cc\u0634\u06af\u0631\u0647\u0627\u06cc \u06a9\u0648\u0686\u06a9\u200c\u062a\u0631 \u0646\u06cc\u0632 \u0645\u0646\u0648\u06cc \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0634\u06a9\u0644 \u0632\u06cc\u0631 \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" width=\"612\" height=\"465\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/word-image-39913-3.jpeg\" alt=\"\" class=\"wp-image-39916 lazyload\" title=\"\" data-srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/word-image-39913-3.jpeg 612w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/word-image-39913-3-300x228.jpeg 300w\" data-sizes=\"(max-width: 612px) 100vw, 612px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 612px; --smush-placeholder-aspect-ratio: 612\/465;\" \/><figcaption><\/figcaption><\/figure>\n\n\n\n<p>\u0647\u0645\u0627\u0646\u200c\u0637\u0648\u0631 \u06a9\u0647 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0631\u062f\u06cc\u062f \u062a\u0646\u0647\u0627 \u0628\u0627 \u0686\u0646\u062f \u0633\u0637\u0631 \u06a9\u062f \u0645\u0648\u0641\u0642 \u0628\u0647 \u0633\u0627\u062e\u062a \u0645\u0646\u0648 \u0645\u062a\u062d\u0631\u06a9 \u0628\u0631\u0627\u06cc \u0633\u0627\u06cc\u062a \u0634\u062f\u06cc\u0645. \u0622\u0645\u0648\u0632\u0634 \u0645\u0627 \u0627\u06cc\u0646\u062c\u0627 \u0628\u0647 \u067e\u0627\u06cc\u0627\u0646 \u0631\u0633\u06cc\u062f. \u062f\u0631 \u0627\u062f\u0627\u0645\u0647 \u0628\u0627 \u0628\u0631\u062e\u06cc \u0627\u0632 \u062f\u06cc\u06af\u0631 \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0622\u0634\u0646\u0627 \u062e\u0648\u0627\u0647\u06cc\u0645 \u0634\u062f. \u0645\u0646\u0648\u06cc \u0633\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u0641\u0648\u0642 \u0631\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u0637\u0627\u0628\u0642 \u0645\u06cc\u0644 \u062e\u0648\u062f \u06a9\u0627\u0645\u0644\u0627 \u0633\u0641\u0627\u0631\u0634\u06cc \u0633\u0627\u0632\u06cc \u06a9\u0631\u062f\u0647 \u0648 \u062f\u0631 \u0648\u0628\u0633\u0627\u06cc\u062a \u062e\u0648\u062f \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0627\u062f\u0627\u0645\u0647 \u0686\u0646\u062f\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062f\u06cc\u06af\u0631 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u062a\u0645\u0631\u06cc\u0646 \u0628\u0647 \u0634\u0645\u0627 \u0645\u0639\u0631\u0641\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n\n\n<div class=\"jet-listing-grid--50192\" style=\"\"><style><\/style><section class=\"zht-related-post\" itemscope=\"\" itemtype=\"https:\/\/schema.org\/Article\" role=\"region\"\n  aria-label=\"Related article\">\n  <div class=\"zht-related-post-section-label\">\n    \u0645\u0637\u0627\u0644\u0628 \u0645\u0631\u062a\u0628\u0637\n  <\/div>\n  <img decoding=\"async\" width=\"300\" height=\"221\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/f25db4d4-1242-45f5-91cc-e304464a9dc6-300x221.jpg.webp\" class=\"attachment-medium size-medium wp-post-image lazyload\" alt=\"\u0639\u0645\u0644\u06af\u0631 \u062a\u0648\u0627\u0646 \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\" data-srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/f25db4d4-1242-45f5-91cc-e304464a9dc6-300x221.jpg.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/f25db4d4-1242-45f5-91cc-e304464a9dc6-768x566.jpg.webp 768w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/f25db4d4-1242-45f5-91cc-e304464a9dc6.jpg 1024w\" data-sizes=\"(max-width: 300px) 100vw, 300px\" title=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/221;\">\n  <a href=\"https:\/\/maktabkhooneh.org\/mag\/power-operator-in-javascript\/\" class=\"zht-related-post-title\"\n    itemprop=\"headline\" target=\"_blank\">\u0639\u0645\u0644\u06af\u0631 \u062a\u0648\u0627\u0646 \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a: \u0628\u0647 \u0632\u0628\u0627\u0646 \u0633\u0627\u062f\u0647 + \u0645\u062b\u0627\u0644 \u0648 \u06a9\u062f<\/a>\n<\/section><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u0633\u0627\u062e\u062a \u0645\u0646\u0648 \u0633\u0647 \u0633\u0637\u062d\u06cc<\/h3>\n\n\n\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0637\u0644\u0628 \u0628\u0627 \u0633\u0627\u062e\u062a \u0645\u0646\u0648 \u0628\u0627 \u062f\u0648 \u0633\u0637\u062d \u0622\u0634\u0646\u0627 \u0634\u062f\u06cc\u0645. \u0627\u06af\u0631 \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0641\u06cc \u062f\u0631 \u06a9\u0627\u0631 \u06a9\u0631\u062f\u0646 \u0628\u0627 \u06a9\u062f\u200c\u0647\u0627\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062f\u0627\u0631\u06cc\u062f \u0628\u0627 \u0627\u06cc\u062c\u0627\u062f \u0686\u0646\u062f \u062a\u063a\u06cc\u06cc\u0631 \u06a9\u0648\u0686\u06a9 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u0646\u0648\u06cc \u0633\u0647 \u0633\u0637\u062d\u06cc \u0631\u0627 \u0646\u06cc\u0632 \u0628\u0627 \u06a9\u0645\u06a9 \u0627\u06cc\u0646 \u0632\u0628\u0627\u0646 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0646\u0648\u06cc\u0633\u06cc \u0628\u0633\u0627\u0632\u06cc\u062f.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/h3>\n\n\n\n<p>\u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0628\u062e\u0634 \u062c\u062f\u0627\u06cc\u06cc \u0646\u0627\u067e\u0630\u06cc\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0633\u062a. \u0627\u0645\u0627 \u062a\u0648\u062c\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u0628\u06cc\u0634\u062a\u0631 \u0631\u0648\u06cc\u062f\u0627\u062f\u200c\u0647\u0627 \u0648 \u062d\u0631\u06a9\u062a\u200c\u0647\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u06af\u0648\u0646\u0647 \u062f\u0631 \u0635\u0641\u062d\u0627\u062a \u0648\u0628 \u062a\u0648\u0633\u0637 css \u0633\u0627\u062e\u062a\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f. \u062a\u0631\u06a9\u06cc\u0628 \u0627\u06cc\u0646 \u062f\u0648 \u0627\u0628\u0632\u0627\u0631 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u0628\u0633\u06cc\u0627\u0631 \u0632\u06cc\u0628\u0627\u06cc\u06cc \u0628\u0647 \u0648\u062c\u0648\u062f \u0645\u06cc\u200c\u0622\u0648\u0631\u062f. \u062a\u0645\u0631\u06cc\u0646 \u0628\u0633\u06cc\u0627\u0631 \u062c\u0630\u0627\u0628 \u0648 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0628\u0631\u0627\u06cc \u0632\u0628\u0627\u0646 \u0622\u0645\u0648\u0632\u0627\u0646 \u0627\u0633\u062a.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0633\u0627\u062e\u062a \u0641\u0631\u0645 \u0644\u0627\u06af\u06cc\u0646 \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/h3>\n\n\n\n<p>\u06cc\u06a9\u06cc \u0627\u0632 \u06a9\u0627\u0631\u0628\u0631\u062f\u0647\u0627\u06cc \u06af\u0633\u062a\u0631\u062f\u0647 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0633\u0627\u062e\u062a \u0645\u0646\u0648\u06cc \u0644\u0627\u06af\u06cc\u0646 \u0627\u0633\u062a. \u0627\u06a9\u062b\u0631\u06cc\u062a \u063a\u0631\u06cc\u0628 \u0628\u0647 \u0627\u062a\u0641\u0627\u0642 \u0641\u0631\u0645\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u062f\u0631 \u0633\u0637\u062d \u0627\u06cc\u0646\u062a\u0631\u0646\u062a \u0645\u06cc\u200c\u0628\u06cc\u0646\u06cc\u062f \u0628\u0627 \u0627\u06cc\u0646 \u0632\u0628\u0627\u0646 \u0646\u0648\u0634\u062a\u0647 \u0634\u062f\u0647\u200c\u0627\u0646\u062f.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0633\u0627\u062e\u062a \u0633\u0627\u0639\u062a \u0639\u0642\u0631\u0628\u0647\u200c\u0627\u06cc \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/h3>\n\n\n\n<p>\u0633\u0627\u062e\u062a \u0633\u0627\u0639\u062a \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u06cc\u06a9\u06cc \u0627\u0632 \u0633\u0631\u06af\u0631\u0645\u06cc\u200c\u0647\u0627\u06cc \u0644\u0630\u062a \u0628\u062e\u0634 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u0627\u0646 \u0628\u0647 \u0634\u0645\u0627\u0631 \u0645\u06cc\u200c\u0631\u0648\u062f. \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0686\u0646\u0627\u0646\u0686\u0647 \u0627\u0632 \u0646\u0627\u0645 \u0622\u0646 \u0645\u0634\u062e\u0635 \u0627\u0633\u062a \u06cc\u06a9 \u0632\u0628\u0627\u0646 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0646\u0648\u06cc\u0633\u06cc \u0627\u0633\u062a. \u0633\u0627\u062e\u062a \u0639\u0646\u0627\u0635\u0631\u06cc \u0645\u0627\u0646\u0646\u062f \u0633\u0627\u0639\u062a \u0639\u0642\u0631\u0628\u0647\u200c\u0627\u06cc \u062a\u0646\u0647\u0627 \u0627\u0632 \u0627\u06cc\u0646 \u0646\u0648\u0639 \u0632\u0628\u0627\u0646\u200c\u0647\u0627 \u0628\u0631 \u0645\u06cc\u200c\u0622\u06cc\u062f.<\/p>\n\n\n<div class=\"jet-listing-grid--50192\" style=\"\"><section class=\"zht-related-post\" itemscope=\"\" itemtype=\"https:\/\/schema.org\/Article\" role=\"region\"\n  aria-label=\"Related article\">\n  <div class=\"zht-related-post-section-label\">\n    \u0645\u0637\u0627\u0644\u0628 \u0645\u0631\u062a\u0628\u0637\n  <\/div>\n  <img decoding=\"async\" width=\"300\" height=\"228\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/f494f7df-2f75-4253-9b90-e9558a3b7563-300x228.jpg.webp\" class=\"attachment-medium size-medium wp-post-image lazyload\" alt=\"\u0639\u0645\u0644\u06af\u0631\u0647\u0627\u06cc \u0645\u0646\u0637\u0642\u06cc \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\" data-srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/f494f7df-2f75-4253-9b90-e9558a3b7563-300x228.jpg.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/f494f7df-2f75-4253-9b90-e9558a3b7563-768x584.jpg.webp 768w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/f494f7df-2f75-4253-9b90-e9558a3b7563.jpg 1024w\" data-sizes=\"(max-width: 300px) 100vw, 300px\" title=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/228;\">\n  <a href=\"https:\/\/maktabkhooneh.org\/mag\/logical-operators-in-javascript\/\" class=\"zht-related-post-title\"\n    itemprop=\"headline\" target=\"_blank\">\u0639\u0645\u0644\u06af\u0631\u0647\u0627\u06cc \u0645\u0646\u0637\u0642\u06cc \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a: \u06a9\u0646\u062a\u0631\u0644 \u062c\u0631\u06cc\u0627\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627<\/a>\n<\/section><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u0633\u0627\u062e\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/h3>\n\n\n\n<p>\u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u06cc\u06a9 \u0632\u0628\u0627\u0646 \u0628\u0633\u06cc\u0627\u0631 \u067e\u0631\u0642\u062f\u0631\u062a \u0648 \u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631 \u0627\u0633\u062a \u06a9\u0647 \u0627\u0645\u0631\u0648\u0632\u0647 \u062d\u062a\u06cc \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u06cc \u0628\u06a9\u200c\u0627\u0646\u062f \u0647\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f. <a href=\"https:\/\/maktabkhooneh.org\/mag\/cart-with-javascript\/\">\u0633\u0627\u062e\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/a> \u062a\u0646\u0647\u0627 \u06af\u0648\u0634\u0647\u200c\u0627\u06cc \u0627\u0632 \u062a\u0648\u0627\u0646\u0627\u06cc\u06cc\u200c\u0647\u0627\u06cc \u0627\u06cc\u0646 \u0632\u0628\u0627\u0646 \u0627\u0633\u062a.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u0633\u062e\u0646 \u067e\u0627\u06cc\u0627\u0646\u06cc<\/h2>\n\n\n\n<p>\u0633\u0627\u062e\u062a \u0645\u0646\u0648 \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u06cc\u06a9\u06cc \u0627\u0632 \u062f\u063a\u062f\u063a\u0647\u200c\u0647\u0627\u06cc \u0628\u0632\u0631\u06af \u0627\u0641\u0631\u0627\u062f \u0645\u0628\u062a\u062f\u06cc \u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0648\u0628 \u0628\u0647 \u0634\u0645\u0627\u0631 \u0645\u06cc\u200c\u0631\u0648\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0646\u0648\u0634\u062a\u0647 \u0627\u0632 \u0633\u0631\u06cc \u0645\u0637\u0627\u0644\u0628 \u0645\u062c\u0644\u0647 \u0622\u0645\u0648\u0632\u0634\u06cc \u0645\u06a9\u062a\u0628 \u062e\u0648\u0646\u0647 \u062f\u0631 \u0632\u0645\u06cc\u0646\u0647 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0633\u0627\u062e\u062a \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u0648 \u0645\u062a\u062d\u0631\u06a9 \u0628\u0627 \u0627\u06cc\u0646 \u0632\u0628\u0627\u0646 \u0631\u0627 \u0622\u0645\u0648\u0632\u0634 \u062f\u0627\u062f\u06cc\u0645. \u0627\u0645\u06cc\u062f \u0627\u0633\u062a \u0645\u0641\u06cc\u062f \u0648 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0628\u0627\u0634\u062f.<\/p>\n\n\n<div class=\"jet-listing-grid--56206\" style=\"\"><div class=\"jet-listing-dynamic-field-block zht-maktab-khooneh-learn cb-ud1ng69u\"data-is-block=\"jet-engine\/dynamic-field\"><div class=\"jet-listing-dynamic-field__content\" >\r\n<div class=\"zht-learn-card\">\r\n    <div class=\"zht-learn-title-section\">\r\n        <div class=\"zht-learn-card-icon\">\r\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"24\" height=\"24\">\r\n                <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\" \/>\r\n            <\/svg>\r\n        <\/div>\r\n        \r\n        <!-- \u0639\u0646\u0648\u0627\u0646 \u062a\u0628\u062f\u06cc\u0644 \u0634\u062f\u0647 \u0628\u0647 \u0644\u06cc\u0646\u06a9 -->\r\n        <a href=\"https:\/\/maktabkhooneh.org\/learn\/web-design\/\" class=\"zht-learn-card-title\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n            \u062f\u0648\u0631\u0647\u200c\u0647\u0627\u06cc \u0622\u0645\u0648\u0632\u0634 \u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a        <\/a>\r\n    <\/div>\r\n\r\n    <!-- \u062f\u06a9\u0645\u0647 \u062a\u0628\u062f\u06cc\u0644 \u0634\u062f\u0647 \u0628\u0647 \u062a\u06af button -->\r\n    <!-- \u0627\u0632 onclick \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u062f\u0647 \u062a\u0627 \u0628\u0647 \u0645\u062d\u0636 \u06a9\u0644\u06cc\u06a9 \u0644\u06cc\u0646\u06a9 \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u062f -->\r\n    <button class=\"zht-learn-card-btn\" data-course-url=\"https:\/\/maktabkhooneh.org\/learn\/web-design\/\" onclick=\"window.open(this.getAttribute('data-course-url'), '_blank');\">\r\n        \u0634\u0631\u0648\u0639 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc\r\n    <\/button>\r\n<\/div><\/div><\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\">\u0622\u0645\u0648\u0632\u0634 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062f\u0631 \u0645\u06a9\u062a\u0628 \u062e\u0648\u0646\u0647<\/h2>\n\n\n\n<p>\u0645\u06a9\u062a\u0628 \u062e\u0648\u0646\u0647 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9\u06cc \u0627\u0632 \u0645\u0631\u0627\u062c\u0639 \u0622\u0645\u0648\u0632\u0634 \u0645\u062c\u0627\u0632\u06cc \u0627\u0631\u0627\u0626\u0647 \u062f\u0648\u0631\u0647\u200c\u0647\u0627\u06cc \u062a\u062e\u0635\u0635\u06cc \u062f\u0631 \u0632\u0645\u06cc\u0646\u0647 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u06cc \u0648 \u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a \u0631\u0627 \u06cc\u06a9\u06cc \u0627\u0632 \u0645\u0623\u0645\u0648\u0631\u06cc\u062a\u200c\u0647\u0627\u06cc \u0627\u0635\u0644\u06cc \u062e\u0648\u062f \u0645\u06cc\u200c\u062f\u0627\u0646\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0637\u0644\u0628 \u0628\u0627 \u06cc\u06a9 \u0631\u0648\u0634 \u0633\u0627\u062f\u0647 \u0627\u0645\u0627 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u0622\u0634\u0646\u0627 \u0634\u062f\u06cc\u062f. \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u0622\u0645\u0648\u0632\u0634\u200c\u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631 \u0648 \u062d\u0631\u0641\u0647\u200c\u0627\u06cc \u0633\u0631\u06cc \u0628\u0647 \u0635\u0641\u062d\u0627\u062a <a href=\"https:\/\/maktabkhooneh.org\/learn\/java-script\">\u0622\u0645\u0648\u0632\u0634 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/a> \u0648 <a href=\"https:\/\/maktabkhooneh.org\/learn\/programming\">\u0622\u0645\u0648\u0632\u0634 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc<\/a> \u062f\u0631 \u0645\u06a9\u062a \u062e\u0648\u0646\u0647 \u0628\u0632\u0646\u06cc\u062f.<\/p>\n\n\n\n<p>\u0645\u0646\u0628\u0639: <a href=\"https:\/\/hackernoon.com\/how-to-build-a-dropdown-menu-with-html-css-and-javascript\" rel=\"nofollow noopener\" target=\"_blank\">&nbsp;HackerNoon<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0627\u0645\u0631\u0648\u0632 \u0628\u0627 \u0622\u0645\u0648\u0632\u0634 \u0633\u0627\u062e\u062a \u06cc\u06a9 \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u06a9\u0627\u0645\u0644\u0627\u064b \u0648\u0627\u06a9\u0646\u0634\u200c\u06af\u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 HTML\u060c CSS \u0648 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0645\u06cc\u0647\u0645\u0627\u0646 \u0647\u0645\u0631\u0627\u0647\u0627\u0646 \u0647\u0645\u06cc\u0634\u06af\u06cc \u0645\u062c\u0644\u0647 \u0645\u06a9\u062a\u0628 \u062e\u0648\u0646\u0647 \u0647\u0633\u062a\u06cc\u0645. \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u06cc\u06a9 \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u0634\u06cc\u06a9 \u0648 \u0647\u0645\u0647\u200c\u06a9\u0627\u0631\u0647 \u06a9\u0647 \u0628\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0633\u0627\u06cc\u0632 \u0635\u0641\u062d\u0647 \u062a\u0628\u062f\u06cc\u0644 \u0628\u0647 \u0645\u0646\u0648\u06cc \u0647\u0645\u0628\u0631\u06af\u0631\u06cc \u0634\u0648\u062f \u062f\u0627\u0646\u0634 \u0641\u0646\u06cc \u0632\u06cc\u0627\u062f\u06cc \u0644\u0627\u0632\u0645 \u0646\u06cc\u0633\u062a. \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0622\u0645\u0648\u0632\u0634\u06cc \u06a9\u0647 \u0633\u0627\u062e\u062a \u0645\u0646\u0648 \u0647\u0645\u0628\u0631\u06af\u0631\u06cc \u0628\u0627 [&hellip;]<\/p>\n","protected":false},"author":28,"featured_media":39917,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,30,12],"tags":[],"class_list":["post-39913","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming-and-it-training","category-web-programming-articles","category-java-script-articles"],"_links":{"self":[{"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/posts\/39913","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/users\/28"}],"replies":[{"embeddable":true,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/comments?post=39913"}],"version-history":[{"count":4,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/posts\/39913\/revisions"}],"predecessor-version":[{"id":65557,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/posts\/39913\/revisions\/65557"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/media\/39917"}],"wp:attachment":[{"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/media?parent=39913"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/categories?post=39913"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/tags?post=39913"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}