{"id":579,"date":"2017-02-17T09:56:01","date_gmt":"2017-02-17T00:56:01","guid":{"rendered":"http:\/\/www.clarenet.co.jp\/column\/engineer\/?p=579"},"modified":"2017-02-17T09:56:01","modified_gmt":"2017-02-17T00:56:01","slug":"jquery-slidemenu","status":"publish","type":"post","link":"https:\/\/4koma-web.com\/coding\/jquery-slidemenu\/","title":{"rendered":"jQuery: slideMenu"},"content":{"rendered":"

jQuery\u306eslideToggle\u3068toggleClass\u3092\u4f7f\u3063\u3066\u3001\u30b9\u30de\u30db\u7528\u30b9\u30e9\u30a4\u30c9\u30e1\u30cb\u30e5\u30fc\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002
\n\u30e9\u30a4\u30d6\u30e9\u30ea\u306f\u3053\u3053<\/a>\u304b\u3089CDN\u3067\u8aad\u307f\u8fbc\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n

<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.12.4\/jquery.min.js\"><\/script><\/pre>\n
 [jQuery]<\/p>\n
$(function () {\n    $('#menu_toggle').click(function () {\n        $(this).next('ul').slideToggle(200);\n        $(this).toggleClass('active');\n    });\n    $(document).click(function() {\n        $('#menu_toggle').removeClass('active');\u3000\/\/\u30a8\u30ea\u30a2\u5916\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u9589\u3058\u308b\n    });\n    $('#header').click(function() {\n        event.stopPropagation();\u3000\/\/\u30d8\u30c3\u30c0\u30fc\u9818\u57df\u3067\u306f\u30a4\u30d9\u30f3\u30c8\u3092\u505c\u6b62\n    });\n});\n<\/pre>\n
 [HTML]<\/p>\n
<nav id=\"slide_nav\">\n       <a id=\"menu_toggle\" class=\"active\"> <span><\/span> <span><\/span> <span><\/span> <\/a>\n        <ul id=\"nav_menu\">\n          <li id=\"nav01\"><a href=\"#\">menu1<\/a><\/li>\n          <li id=\"nav02\"><a href=\"#\">menu2<\/a><\/li>\n          <li id=\"nav03\"><a href=\"#\">menu3<\/a><\/li>\n          <li id=\"nav04\"><a href=\"#\">menu4<\/a><\/li>\n          <li id=\"nav05\"><a href=\"#\">menu5<\/a><\/li>\n          <li id=\"nav06\"><a href=\"#\">menu6<\/a><\/li>\n        <\/ul>\n <\/nav><\/pre>\n
[CSS]<\/p>\n
\/* Menu Button *\/\n#menu_toggle {\n    position: fixed;\n    top: 34px;\n    right: 10px;\n    width: 40px;\n    height: 34px;\n}\n#menu_toggle span {\n    position: absolute;\n    left: 0;\n    width: 100%;\n    height: 4px;\n    background-color: #333;\n    border-radius: 4px;\n}\n#menu_toggle span:nth-of-type(1) {\n    top: 0;\n}\n#menu_toggle span:nth-of-type(2) {\n    top: 15px;\n}\n#menu_toggle span:nth-of-type(3) {\n    bottom: 0;\n}\n\n\/* Nav Menu *\/\n#menu_toggle + #nav_menu {\n    height: 100%;\n    position: fixed;\n    right: -240px;\n    width: 240px;\n    z-index: 999;\n    -webkit-transition: all .5s ease;\n    -o-transition: all .5s ease;\n    transition: all .5s ease;\n}\n#menu_toggle.active + #nav_menu {\n    position: fixed;\n    right: 0;\n    width: 240px;\n    background-color: rgba(0,0,0,0.8);\n    -webkit-transition: all .5s ease;\n    -o-transition: all .5s ease;\n    transition: all .5s ease;\n}\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
jQuery\u306eslideToggle\u3068toggleClass\u3092\u4f7f\u3063\u3066\u3001\u30b9\u30de\u30db\u7528\u30b9\u30e9\u30a4\u30c9\u30e1\u30cb\u30e5\u30fc\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002 \u30e9\u30a4\u30d6\u30e9\u30ea\u306f\u3053\u3053\u304b\u3089CDN\u3067\u8aad\u307f\u8fbc\u307f\u307e\u3057\u3087\u3046\u3002 <script src=”https:\/\/ajax.go […]<\/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:51:26","action":"change-status","newStatus":"draft","terms":[],"taxonomy":"category"},"_links":{"self":[{"href":"https:\/\/4koma-web.com\/coding\/wp-json\/wp\/v2\/posts\/579"}],"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=579"}],"version-history":[{"count":0,"href":"https:\/\/4koma-web.com\/coding\/wp-json\/wp\/v2\/posts\/579\/revisions"}],"wp:attachment":[{"href":"https:\/\/4koma-web.com\/coding\/wp-json\/wp\/v2\/media?parent=579"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/4koma-web.com\/coding\/wp-json\/wp\/v2\/categories?post=579"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/4koma-web.com\/coding\/wp-json\/wp\/v2\/tags?post=579"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}