{"id":15549,"date":"2024-05-06T21:58:21","date_gmt":"2024-05-06T18:28:21","guid":{"rendered":"https:\/\/www.itpiran.net\/blog\/?p=15549"},"modified":"2024-05-06T21:58:21","modified_gmt":"2024-05-06T18:28:21","slug":"howto_css_dropdown","status":"publish","type":"post","link":"https:\/\/www.itpiran.net\/blog\/en\/tutorials\/howto_css_dropdown\/","title":{"rendered":"How to create a drop-down menu with CSS"},"content":{"rendered":"<h2 id=\"%d9%85%d9%82%d8%af%d9%85%d9%87\">Introduction<\/h2>\n<p>Create a drop-down menu that appears when the user hovers the mouse over an element.<\/p>\n<h2 id=\"%d9%85%d8%b1%d8%ad%d9%84%d9%87-1-%d8%a7%d8%b6%d8%a7%d9%81%d9%87-%da%a9%d8%b1%d8%af%d9%86-html\">Step 1) Add HTML:<\/h2>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;div class=\"dropdown\"&gt;\r\n&lt;button class=\"dropbtn\"&gt;Dropdown&lt;\/button&gt;\r\n&lt;div class=\"dropdown-content\"&gt;\r\n&lt;a href=\"#\"&gt;Link 1&lt;\/a&gt;\r\n&lt;a href=\"#\"&gt;Link 2&lt;\/a&gt;\r\n&lt;a href=\"#\"&gt;Link 3&lt;\/a&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n<\/div>\n<h5 id=\"%d9%85%d8%ab%d8%a7%d9%84-%d8%aa%d9%88%d8%b6%db%8c%d8%ad-%d8%af%d8%a7%d8%af%d9%87-%d8%b4%d8%af\">Example explained.<\/h5>\n<p>Use any element to open a drop-down menu, e.g. an element &lt;button&gt;, &lt;a&gt; Or &lt;p&gt;.<\/p>\n<p>From a container element (such as &lt;div&gt;) to create a drop-down menu and add drop-down links inside it.<\/p>\n<p>An element &lt;div&gt; around the button and &lt;div&gt; Wrap so that the dropdown menu is positioned correctly with CSS.<\/p>\n<h2 id=\"%d9%85%d8%b1%d8%ad%d9%84%d9%87-2-css-%d8%b1%d8%a7-%d8%a7%d8%b6%d8%a7%d9%81%d9%87-%da%a9%d9%86%db%8c%d8%af\">Step 2) Add CSS:<\/h2>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>\/* Dropdown Button *\/\r\n.dropbtn {\r\nbackground-color: #04AA6D;\r\ncolor: white;\r\npadding: 16px;\r\nfont-size: 16px;\r\nborder: none;\r\n}\r\n\/* The container &lt;div&gt; - needed to position the dropdown content *\/\r\n.dropdown {\r\nposition: relative;\r\ndisplay: inline-block;\r\n}\r\n\/* Dropdown Content (Hidden by Default) *\/\r\n.dropdown-content {\r\ndisplay: none;\r\nposition: absolute;\r\nbackground-color: #f1f1f1;\r\nmin-width: 160px;\r\nbox-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\r\nz-index: 1;\r\n}\r\n\/* Links inside the dropdown *\/\r\n.dropdown-content a {\r\ncolor: black;\r\npadding: 12px 16px;\r\ntext-decoration: none;\r\ndisplay: block;\r\n}\r\n\/* Change color of dropdown links on hover *\/\r\n.dropdown-content a:hover {background-color: #ddd;}\r\n\/* Show the dropdown menu on hover *\/\r\n.dropdown:hover .dropdown-content {display: block;}\r\n\/* Change the background color of the dropdown button when the dropdown content is shown *\/\r\n.dropdown:hover .dropbtn {background-color: #3e8e41;}<\/code><\/pre>\n<\/div>\n<h5 id=\"%d9%85%d8%ab%d8%a7%d9%84-%d8%aa%d9%88%d8%b6%db%8c%d8%ad-%d8%af%d8%a7%d8%af%d9%87-%d8%b4%d8%af%d9%87\">Example explained<\/h5>\n<p>We have styled the slider button with background color, padding, etc.<\/p>\n<p>The .dropdown class uses position:relative when it is necessary to position the dropdown content directly below the dropdown button (using position:absolute).<\/p>\n<p>The .dropdown-content class holds the actual dropdown menu. It is hidden by default and is displayed in float mode (see below). Note that the minimum width is set to 160px. Feel free to change this. Tip: If you want the width of the dropdown content to be the same as the dropdown button, set the width to 100% (and overflow: auto to enable scrolling on small screens).<\/p>\n<p>Instead of using a border, we&#039;ve used the box-shadow property to make the dropdown menu look like a &quot;card.&quot; We&#039;re also using z-index to position the dropdown in front of other elements.<\/p>\n<p>The :hover selector is used to show the drop-down menu when the user hovers the mouse over the drop-down button.<\/p>","protected":false},"excerpt":{"rendered":"Introduction Create a drop-down menu that appears when the user hovers the mouse over an element\u2026","protected":false},"author":1,"featured_media":15550,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_focuskw":"\u0622\u0645\u0648\u0632\u0634 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0645\u0646\u0648\u06cc \u0628\u0627\u0632\u0634\u0648 \u0628\u0627 CSS","_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","_yoast_wpseo_canonical":"","_yoast_wpseo_opengraph-description":"","_yoast_wpseo_opengraph-image":"","_yoast_wpseo_twitter-description":"","_yoast_wpseo_twitter-image":"","_yoast_wpseo_focuskeywords":"","_yoast_wpseo_primary_category":"193","footnotes":""},"categories":[193,363,375],"tags":[374,373,418],"class_list":{"0":"post-15549","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-tutorials","8":"category-programming","9":"category-375","10":"tag-css","11":"tag-html","12":"tag-website"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>\u0622\u0645\u0648\u0632\u0634 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0645\u0646\u0648\u06cc \u0628\u0627\u0632\u0634\u0648 \u0628\u0627 CSS - \u0628\u0644\u0627\u06af ITPiran<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.itpiran.net\/blog\/en\/tutorials\/howto_css_dropdown\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u0622\u0645\u0648\u0632\u0634 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0645\u0646\u0648\u06cc \u0628\u0627\u0632\u0634\u0648 \u0628\u0627 CSS - \u0628\u0644\u0627\u06af ITPiran\" \/>\n<meta property=\"og:description\" content=\"\u0645\u0642\u062f\u0645\u0647 \u06cc\u06a9 \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0648\u0642\u062a\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0645\u0627\u0648\u0633 \u0631\u0627 \u0631\u0648\u06cc \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u062d\u0631\u06a9\u062a \u0645\u06cc \u062f\u0647\u062f \u0638\u0627\u0647\u0631&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.itpiran.net\/blog\/en\/tutorials\/howto_css_dropdown\/\" \/>\n<meta property=\"og:site_name\" content=\"\u0628\u0644\u0627\u06af ITPiran\" \/>\n<meta property=\"article:published_time\" content=\"2024-05-06T18:28:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.itpiran.net\/2024\/05\/06215712\/css.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1793\" \/>\n\t<meta property=\"og:image:height\" content=\"1110\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/howto_css_dropdown\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/howto_css_dropdown\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/person\\\/04ed27b919baca468a2273f8e4318f81\"},\"headline\":\"\u0622\u0645\u0648\u0632\u0634 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0645\u0646\u0648\u06cc \u0628\u0627\u0632\u0634\u0648 \u0628\u0627 CSS\",\"datePublished\":\"2024-05-06T18:28:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/howto_css_dropdown\\\/\"},\"wordCount\":32,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/howto_css_dropdown\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/05\\\/06215712\\\/css.jpg\",\"keywords\":[\"css\",\"html\",\"website\"],\"articleSection\":[\"\u0622\u0645\u0648\u0632\u0634\u06cc\",\"\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc\",\"\u0648\u0628 \u0633\u0627\u06cc\u062a\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/howto_css_dropdown\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/howto_css_dropdown\\\/\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/howto_css_dropdown\\\/\",\"name\":\"\u0622\u0645\u0648\u0632\u0634 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0645\u0646\u0648\u06cc \u0628\u0627\u0632\u0634\u0648 \u0628\u0627 CSS - \u0628\u0644\u0627\u06af ITPiran\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/howto_css_dropdown\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/howto_css_dropdown\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/05\\\/06215712\\\/css.jpg\",\"datePublished\":\"2024-05-06T18:28:21+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/howto_css_dropdown\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/howto_css_dropdown\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/howto_css_dropdown\\\/#primaryimage\",\"url\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/05\\\/06215712\\\/css.jpg\",\"contentUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/05\\\/06215712\\\/css.jpg\",\"width\":1793,\"height\":1110},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/howto_css_dropdown\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u0622\u0645\u0648\u0632\u0634\u06cc\",\"item\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/category\\\/tutorials\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"\u0622\u0645\u0648\u0632\u0634 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0645\u0646\u0648\u06cc \u0628\u0627\u0632\u0634\u0648 \u0628\u0627 CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\",\"name\":\"\u0628\u0644\u0627\u06af ITPiran\",\"description\":\"\u0627\u062e\u0628\u0627\u0631 \u0648 \u0645\u0642\u0627\u0644\u0627\u062a \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\",\"name\":\"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\",\"alternateName\":\"ITPIran Blog\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/cdn.itpiran.net\\\/2023\\\/12\\\/27150508\\\/cropped-ITPIRAN-BLOG-LOGO-2.png\",\"contentUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2023\\\/12\\\/27150508\\\/cropped-ITPIRAN-BLOG-LOGO-2.png\",\"width\":512,\"height\":512,\"caption\":\"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/person\\\/04ed27b919baca468a2273f8e4318f81\",\"name\":\"admin\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/en\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create a Dropdown Menu with CSS - ITPiran Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.itpiran.net\/blog\/en\/tutorials\/howto_css_dropdown\/","og_locale":"en_US","og_type":"article","og_title":"\u0622\u0645\u0648\u0632\u0634 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0645\u0646\u0648\u06cc \u0628\u0627\u0632\u0634\u0648 \u0628\u0627 CSS - \u0628\u0644\u0627\u06af ITPiran","og_description":"\u0645\u0642\u062f\u0645\u0647 \u06cc\u06a9 \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0648\u0642\u062a\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0645\u0627\u0648\u0633 \u0631\u0627 \u0631\u0648\u06cc \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u062d\u0631\u06a9\u062a \u0645\u06cc \u062f\u0647\u062f \u0638\u0627\u0647\u0631&hellip;","og_url":"https:\/\/www.itpiran.net\/blog\/en\/tutorials\/howto_css_dropdown\/","og_site_name":"\u0628\u0644\u0627\u06af ITPiran","article_published_time":"2024-05-06T18:28:21+00:00","og_image":[{"width":1793,"height":1110,"url":"https:\/\/cdn.itpiran.net\/2024\/05\/06215712\/css.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/howto_css_dropdown\/#article","isPartOf":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/howto_css_dropdown\/"},"author":{"name":"admin","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/person\/04ed27b919baca468a2273f8e4318f81"},"headline":"\u0622\u0645\u0648\u0632\u0634 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0645\u0646\u0648\u06cc \u0628\u0627\u0632\u0634\u0648 \u0628\u0627 CSS","datePublished":"2024-05-06T18:28:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/howto_css_dropdown\/"},"wordCount":32,"commentCount":0,"publisher":{"@id":"https:\/\/www.itpiran.net\/blog\/#organization"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/howto_css_dropdown\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.itpiran.net\/2024\/05\/06215712\/css.jpg","keywords":["css","html","website"],"articleSection":["\u0622\u0645\u0648\u0632\u0634\u06cc","\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc","\u0648\u0628 \u0633\u0627\u06cc\u062a"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/howto_css_dropdown\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/howto_css_dropdown\/","url":"https:\/\/www.itpiran.net\/blog\/tutorials\/howto_css_dropdown\/","name":"How to Create a Dropdown Menu with CSS - ITPiran Blog","isPartOf":{"@id":"https:\/\/www.itpiran.net\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/howto_css_dropdown\/#primaryimage"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/howto_css_dropdown\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.itpiran.net\/2024\/05\/06215712\/css.jpg","datePublished":"2024-05-06T18:28:21+00:00","breadcrumb":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/howto_css_dropdown\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/howto_css_dropdown\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/howto_css_dropdown\/#primaryimage","url":"https:\/\/cdn.itpiran.net\/2024\/05\/06215712\/css.jpg","contentUrl":"https:\/\/cdn.itpiran.net\/2024\/05\/06215712\/css.jpg","width":1793,"height":1110},{"@type":"BreadcrumbList","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/howto_css_dropdown\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.itpiran.net\/blog\/"},{"@type":"ListItem","position":2,"name":"\u0622\u0645\u0648\u0632\u0634\u06cc","item":"https:\/\/www.itpiran.net\/blog\/category\/tutorials\/"},{"@type":"ListItem","position":3,"name":"\u0622\u0645\u0648\u0632\u0634 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0645\u0646\u0648\u06cc \u0628\u0627\u0632\u0634\u0648 \u0628\u0627 CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.itpiran.net\/blog\/#website","url":"https:\/\/www.itpiran.net\/blog\/","name":"ITPiran Blog","description":"Iranian Sustainable Trade News and Articles","publisher":{"@id":"https:\/\/www.itpiran.net\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.itpiran.net\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.itpiran.net\/blog\/#organization","name":"Sustainable Iranian Business Blog","alternateName":"ITPIran Blog","url":"https:\/\/www.itpiran.net\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdn.itpiran.net\/2023\/12\/27150508\/cropped-ITPIRAN-BLOG-LOGO-2.png","contentUrl":"https:\/\/cdn.itpiran.net\/2023\/12\/27150508\/cropped-ITPIRAN-BLOG-LOGO-2.png","width":512,"height":512,"caption":"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/person\/04ed27b919baca468a2273f8e4318f81","name":"admin","url":"https:\/\/www.itpiran.net\/blog\/en\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/posts\/15549","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/comments?post=15549"}],"version-history":[{"count":1,"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/posts\/15549\/revisions"}],"predecessor-version":[{"id":15551,"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/posts\/15549\/revisions\/15551"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/media\/15550"}],"wp:attachment":[{"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/media?parent=15549"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/categories?post=15549"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/tags?post=15549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}