{"id":1405,"date":"2017-01-27T23:05:49","date_gmt":"2017-01-27T14:05:49","guid":{"rendered":"http:\/\/www.clarenet.co.jp\/column\/engineer\/?p=492"},"modified":"2017-01-27T23:05:49","modified_gmt":"2017-01-27T14:05:49","slug":"dropdown-menu","status":"publish","type":"post","link":"https:\/\/4koma-web.com\/coding\/dropdown-menu\/","title":{"rendered":"dropdown-menu"},"content":{"rendered":"<p>CSS\u306e\u307f\u3067\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u4ed8\u304d\u306e\u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3\u30e1\u30cb\u30e5\u30fc\u3092\u5b9f\u88c5\u3057\u3066\u307f\u307e\u3059\u3002<br \/>\n\u30e1\u30cb\u30e5\u30fc\u30aa\u30fc\u30d7\u30f3\u52d5\u4f5c\u306b\u4f7f\u7528\u3057\u3066\u3044\u308btransition\u30d7\u30ed\u30d0\u30c6\u30a3\u306e\u30b5\u30dd\u30fc\u30c8\u306f\u4e0b\u8a18<br \/>\n\u30d9\u30f3\u30c0\u30fc\u30d7\u30ec\u30d5\u30a3\u30c3\u30af\u30b9\u3068\u3057\u3066-webkit-\u3092\u3064\u3051\u307e\u3057\u3087\u3046\u3002<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.clarenet.co.jp\/column\/engineer\/wp-content\/uploads\/2017\/01\/transiton.png\" alt=\"\" width=\"969\" height=\"336\" class=\"alignnone size-full wp-image-554\" \/><\/p>\n<p>HTML\u30bd\u30fc\u30b9<\/p>\n<pre class=\"lang:default decode:true \" title=\"HTML\" >&lt;div id=\"nav-menu\"&gt;\n&lt;input id=\"dropdown\" type=\"checkbox\"  class=\"dropdown-toggle\"&gt;\n&lt;label for=\"dropdown\"&gt;\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u958b\u304f\u30e1\u30cb\u30e5\u30fc&lt;\/label&gt;\n&lt;ul class=\"dropdown-menu\"&gt;\n&lt;li id=\"menu1\"&gt;&lt;a href=\"#\"&gt;\u30e1\u30cb\u30e5\u30fc1&lt;\/a&gt;&lt;\/li&gt;\n&lt;li id=\"menu2\"&gt;&lt;a href=\"#\"&gt;\u30e1\u30cb\u30e5\u30fc2&lt;\/a&gt;&lt;\/li&gt;\n&lt;li id=\"menu3\"&gt;&lt;a href=\"#\"&gt;\u30e1\u30cb\u30e5\u30fc3&lt;\/a&gt;&lt;\/li&gt;\n&lt;li id=\"menu4\"&gt;&lt;a href=\"#\"&gt;\u30e1\u30cb\u30e5\u30fc4&lt;\/a&gt;&lt;\/li&gt;\n&lt;li id=\"menu5\"&gt;&lt;a href=\"#\"&gt;\u30e1\u30cb\u30e5\u30fc5&lt;\/a&gt;&lt;\/li&gt;\n&lt;\/ul&gt;\n&lt;\/div&gt;<\/pre>\n<p>\nCSS<\/p>\n<pre class=\"lang:css decode:true \" title=\"CSS\">\n#nav-menu label {\nposition: relative;\npadding-left: 15px;\ncursor: pointer;\n}\n\/* \u4e0b\u77e2\u5370 *\/\n#nav-menu label::before {\ncontent: \"\";\ndisplay: inline-block;\nwidth: 0;\nheight: 0;\nborder-style: solid;\nborder-width: 6px 6px 0 6px;\nborder-color: #5e5e5e transparent transparent transparent;\nposition: absolute;\ntop: 8px;\nleft: 0;\n}\n#nav-menu .dropdown-toggle:checked ~ ul {\n    height: 150px;\n    transition: all 0.3s ease-in-out;\n    -webkit-transition: all 0.3s ease-in-out;\n    padding: 15px 0 0 30px;\n}\n#nav-menu .dropdown-toggle ~ ul {\n    height: 0;\n    overflow: hidden;\n    transition: all 0.3s ease-in-out;\n    -webkit-transition: all 0.3s ease-in-out;\n    padding: 0 0 0 30px;\n}\n#nav-menu .dropdown-toggle {\n    display: none;\n}\n<\/pre>\n<p>\u3067\u304d\u305f\u306e\u304c\u3053\u3061\u3089\u2193<\/p>\n<style>\n#nav-menu label {\nposition: relative;\npadding-left: 15px;\ncursor: pointer;\n}\n#nav-menu label::before {\ncontent: \"\";\ndisplay: inline-block;\nwidth: 0;\nheight: 0;\nborder-style: solid;\nborder-width: 6px 6px 0 6px;\nborder-color: #5e5e5e transparent transparent transparent;\nposition: absolute;\ntop: 8px;\nleft: 0;\n}\n#nav-menu .dropdown-toggle:checked ~ ul {\n    height: 150px;\n    transition: all 0.3s ease-in-out;\n    -webkit-transition: all 0.3s ease-in-out;\n    padding: 15px 0 0 30px;\n}\n#nav-menu .dropdown-toggle ~ ul {\n    height: 0;\n    overflow: hidden;\n    transition: all 0.3s ease-in-out;\n    -webkit-transition: all 0.3s ease-in-out;\n    padding: 0 0 0 30px;\n}\n#nav-menu .dropdown-toggle {\n    display: none;\n}\n<\/style>\n<div id=\"nav-menu\">\n<input id=\"dropdown\" type=\"checkbox\"  class=\"dropdown-toggle\"><br \/>\n<label for=\"dropdown\">\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u958b\u304f\u30e1\u30cb\u30e5\u30fc<\/label><\/p>\n<ul class=\"dropdown-menu\">\n<li id=\"menu1\"><a href=\"#\">\u30e1\u30cb\u30e5\u30fc1<\/a><\/li>\n<li id=\"menu2\"><a href=\"#\">\u30e1\u30cb\u30e5\u30fc2<\/a><\/li>\n<li id=\"menu3\"><a href=\"#\">\u30e1\u30cb\u30e5\u30fc3<\/a><\/li>\n<li id=\"menu4\"><a href=\"#\">\u30e1\u30cb\u30e5\u30fc4<\/a><\/li>\n<li id=\"menu5\"><a href=\"#\">\u30e1\u30cb\u30e5\u30fc5<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>CSS\u306e\u307f\u3067\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u4ed8\u304d\u306e\u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3\u30e1\u30cb\u30e5\u30fc\u3092\u5b9f\u88c5\u3057\u3066\u307f\u307e\u3059\u3002 \u30e1\u30cb\u30e5\u30fc\u30aa\u30fc\u30d7\u30f3\u52d5\u4f5c\u306b\u4f7f\u7528\u3057\u3066\u3044\u308btransition\u30d7\u30ed\u30d0\u30c6\u30a3\u306e\u30b5\u30dd\u30fc\u30c8\u306f\u4e0b\u8a18 \u30d9\u30f3\u30c0\u30fc\u30d7\u30ec\u30d5\u30a3\u30c3\u30af\u30b9\u3068\u3057\u3066-webkit-\u3092\u3064\u3051\u307e\u3057\u3087\u3046\u3002 H [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_locale":"","_original_post":"","footnotes":""},"categories":[1],"tags":[],"publishpress_future_action":{"enabled":false,"date":"2026-04-21 23:13:11","action":"change-status","newStatus":"draft","terms":[],"taxonomy":"category"},"_links":{"self":[{"href":"https:\/\/4koma-web.com\/coding\/wp-json\/wp\/v2\/posts\/1405"}],"collection":[{"href":"https:\/\/4koma-web.com\/coding\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/4koma-web.com\/coding\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/4koma-web.com\/coding\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/4koma-web.com\/coding\/wp-json\/wp\/v2\/comments?post=1405"}],"version-history":[{"count":0,"href":"https:\/\/4koma-web.com\/coding\/wp-json\/wp\/v2\/posts\/1405\/revisions"}],"wp:attachment":[{"href":"https:\/\/4koma-web.com\/coding\/wp-json\/wp\/v2\/media?parent=1405"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/4koma-web.com\/coding\/wp-json\/wp\/v2\/categories?post=1405"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/4koma-web.com\/coding\/wp-json\/wp\/v2\/tags?post=1405"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}