{"id":5767,"date":"2015-07-23T15:20:28","date_gmt":"2015-07-23T11:20:28","guid":{"rendered":"http:\/\/www.idg.net.ua\/blog\/?p=5767"},"modified":"2016-09-28T16:47:54","modified_gmt":"2016-09-28T12:47:54","slug":"slide-menu-jquery","status":"publish","type":"post","link":"https:\/\/idg.net.ua\/blog\/slide-menu-jquery","title":{"rendered":"\u041f\u0440\u043e\u0441\u0442\u043e\u0435 \u0431\u043e\u043a\u043e\u0432\u043e\u0435 \u0441\u043b\u0430\u0439\u0434-\u043c\u0435\u043d\u044e \u043d\u0430 jQuery"},"content":{"rendered":"

\u0412 \u044d\u0442\u043e\u043c \u0443\u0440\u043e\u043a\u0435 \u043c\u044b \u043f\u043e\u043a\u0430\u0436\u0435\u043c, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0435 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0435 \u043c\u0435\u043d\u044e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f CSS \u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a jQuery. \u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c jQuery, \u0447\u0442\u043e\u0431\u044b \u0431\u043e\u043a\u043e\u0432\u043e\u0435 \u0441\u043b\u0430\u0439\u0434-\u043c\u0435\u043d\u044e \u043f\u043b\u0430\u0432\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u043b\u043e\u0441\u044c \u0441 \u043b\u0435\u0432\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n

\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0434\u0435\u043c\u043e, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0430\u0440\u0445\u0438\u0432 \u0441 \u0444\u0430\u0439\u043b\u0430\u043c\u0438 \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f \u0438 \u0440\u0430\u0431\u043e\u0442\u044b.<\/p>\n

\u0414\u0435\u043c\u043e<\/a> \u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0430\u0440\u0445\u0438\u0432 RAR (690 kB)<\/a><\/p>\n

1. HTML<\/h3>\n

\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u0439\u043c\u0435\u043c\u0441\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439 HTML, \u0433\u0434\u0435 \u043f\u043e\u043c\u0438\u043c\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0431\u0443\u0434\u0443\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0434\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <script><\/code>, \u043f\u0435\u0440\u0435\u0434 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u043c \u0442\u0435\u0433\u043e\u043c <\/body><\/code>. \u041f\u0435\u0440\u0432\u044b\u0439 \u0441\u043a\u0440\u0438\u043f\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 jQuery, \u0430 \u0432\u0442\u043e\u0440\u043e\u0439 \u2014 \u043d\u0430\u0448 \u0444\u0430\u0439\u043b menu.js<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0441\u043a\u043e\u0440\u043e \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u043c \u043a\u043e\u0434\u043e\u043c.<\/p>\n

\r\n<body>\r\n\t<div class="menu">\r\n      \r\n\t\t<!-- \u0418\u043a\u043e\u043d\u043a\u0430 \u043c\u0435\u043d\u044e -->\r\n\t\t<div class="icon-close">\r\n\t\t\t<img src="images\/close-btn.png">\r\n\t\t<\/div>\r\n\r\n\t\t<!-- \u041c\u0435\u043d\u044e -->\r\n\t\t<ul>\r\n\t\t\t<li><a href="#">About<\/a><\/li>\r\n\t\t\t<li><a href="#">Blog<\/a><\/li>\r\n\t\t\t<li><a href="#">Help<\/a><\/li>\r\n\t\t\t<li><a href="#">Contact<\/a><\/li>\r\n\t\t<\/ul>\r\n\t<\/div>\r\n\r\n\t<!-- Main body -->\r\n\t<div class="background">\r\n\r\n\t\t<div class="icon-menu">\r\n\t\t\t<img src="images\/menu-ham-icon.png">\r\n\t\t\tMenu\r\n\t\t<\/div>\r\n\t<\/div>\r\n\t<script src="http:\/\/code.jquery.com\/jquery-latest.min.js"><\/script>\r\n\t<script src="menu.js"><\/script>\r\n<\/body>\r\n<\/pre>\n
2. CSS<\/h3>\n
\u041d\u0430 \u0432\u0442\u043e\u0440\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b style.css<\/code> \u0438 \u0437\u0430\u043f\u0438\u0448\u0435\u043c \u0432 \u043d\u0435\u0433\u043e \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u0431\u043e\u043a\u043e\u0432\u043e\u0433\u043e \u043c\u0435\u043d\u044e:<\/p>\n
\r\n\/* Body *\/\r\n\r\nbody {\r\n  left: 0;\r\n  margin: 0;\r\n  overflow: hidden;\r\n  position: relative;\r\n}\r\n\r\n\r\n\/* Menu *\/\r\n\r\n.menu {\r\n  background: #555 url('images\/menu-bg.jpg') repeat left top;\r\n  left: -285px; \/* \u043f\u0440\u044f\u0447\u0435\u043c \u043c\u0435\u043d\u044e *\/\r\n  height: 100%;\r\n  position: fixed;\r\n  width: 285px;\r\n}\r\n\r\n\r\n\/* Basic CSS *\/\r\n\r\n.background {\r\n  background-image: url('images\/chicago-night.jpg'); \r\n  height: 100%;\r\n  width: 100%;\r\n  -webkit-background-size: cover;\r\n     -moz-background-size: cover;\r\n       -o-background-size: cover;\r\n          background-size: cover;\r\n}\r\n\r\n.menu ul {\r\n  border-top: 1px solid #555;\r\n  list-style: none;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n.menu li {\r\n  border-bottom: 1px solid #555;\r\n  font-family: 'Open Sans', sans-serif;\r\n  line-height: 45px;\r\n  padding-bottom: 3px;\r\n  padding-left: 20px;\r\n  padding-top: 3px;\r\n}\r\n\r\n.menu li:hover {\r\n  cursor: pointer;\r\n  background-color: #555;\r\n  }\r\n\r\n.menu a {\r\n  color: #fff;\r\n  font-size: 15px;\r\n  text-decoration: none;\r\n  text-transform: uppercase;\r\n}\r\n\r\n.icon-close {\r\n  cursor: pointer;\r\n  padding-left: 10px;\r\n  padding-top: 10px;\r\n  padding-bottom: 6px;\r\n}\r\n\r\n.icon-menu {\r\n  color: #fff;\r\n  cursor: pointer;\r\n  font-family: 'Open Sans', sans-serif;\r\n  font-size: 20px;\r\n  padding-bottom: 25px;\r\n  padding-left: 25px;\r\n  padding-top: 25px;\r\n  text-decoration: none;\r\n  text-transform: uppercase;\r\n}\r\n\r\n.icon-menu img {\r\n  margin-right: 5px;\r\n}\r\n<\/pre>\n
3. jQuery<\/h3>\n
\u0422\u0440\u0435\u0442\u0438\u0439 \u044d\u0442\u0430\u043f \u2014 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 \u043d\u0435\u0441\u043b\u043e\u0436\u043d\u044b\u0439 \u043a\u043e\u0434 jQuery, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u043e\u0436\u0438\u0432\u0438\u043c \u043d\u0430\u0448\u0435 \u043c\u0435\u043d\u044e, \u0447\u0442\u043e\u0431\u044b \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0438 \u0437\u0430\u043a\u0440\u044b\u0442\u044c. \u041a\u0430\u0436\u0434\u0430\u044f \u0441\u0442\u0440\u043e\u0447\u043a\u0430 \u043a\u043e\u0434\u0430 \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u044f\u0441\u043d\u0435\u043d\u0438\u044f\u043c\u0438.<\/p>\n
\r\n\/* \u041e\u0442\u043a\u0440\u044b\u0442\u0438\u0435 \u043c\u0435\u043d\u044e *\/\r\n\r\nvar main = function() { \/\/\u0433\u043b\u0430\u0432\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f\r\n\r\n    $('.icon-menu').click(function() { \/* \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u043a\u043b\u0430\u0441\u0441 icon-menu \u0438\r\n               \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043c\u0435\u0442\u043e\u0434 click \u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c\u043e\u0439 \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 *\/\r\n\r\n        $('.menu').animate({ \/\/\u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u043a\u043b\u0430\u0441\u0441 menu \u0438 \u043c\u0435\u0442\u043e\u0434 animate\r\n\r\n            left: '0px' \/* \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043f\u043e \u0438\u043a\u043e\u043d\u043a\u0435, \u043c\u0435\u043d\u044e, \u0441\u043a\u0440\u044b\u0442\u043e\u0435 \u0437\u0430\r\n               \u043b\u0435\u0432\u043e\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u0435\u0439 \u043d\u0430 285px, \u0438\u0437\u043c\u0435\u043d\u0438\u0442 \u0441\u0432\u043e\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 0px \u0438 \u0441\u0442\u0430\u043d\u0435\u0442 \u0432\u0438\u0434\u0438\u043c\u044b\u043c *\/\r\n\r\n        }, 200); \/\/\u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043c\u0435\u043d\u044e \u0432 \u043c\u0441\r\n        \r\n        $('body').animate({ \/\/\u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0442\u0435\u0433 body \u0438 \u043c\u0435\u0442\u043e\u0434 animate\r\n\r\n            left: '285px' \/* \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0451 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0442\u0430\u043a\u0436\u0435 \u0441\u0434\u0432\u0438\u0433\u0430\u043b\u043e\u0441\u044c \u0432\u043f\u0440\u0430\u0432\u043e\r\n               \u043f\u0440\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0438 \u043c\u0435\u043d\u044e, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0435\u043c\u0443 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 285px *\/\r\n\r\n        }, 200); \/\/\u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043c\u0435\u043d\u044e \u0432 \u043c\u0441\r\n    });\r\n\r\n\r\n\/* \u0417\u0430\u043a\u0440\u044b\u0442\u0438\u0435 \u043c\u0435\u043d\u044e *\/\r\n\r\n    $('.icon-close').click(function() { \/\/\u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u043a\u043b\u0430\u0441\u0441 icon-close \u0438 \u043c\u0435\u0442\u043e\u0434 click\r\n\r\n        $('.menu').animate({ \/\/\u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u043a\u043b\u0430\u0441\u0441 menu \u0438 \u043c\u0435\u0442\u043e\u0434 animate\r\n\r\n            left: '-285px' \/* \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u043a\u0440\u0435\u0441\u0442\u0438\u043a \u043c\u0435\u043d\u044e \u0432\u0435\u0440\u043d\u0435\u0442\u0441\u044f \u043d\u0430\u0437\u0430\u0434 \u0432 \u0441\u0432\u043e\u0435\r\n               \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u0441\u043a\u0440\u043e\u0435\u0442\u0441\u044f *\/\r\n\r\n        }, 200); \/\/\u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043c\u0435\u043d\u044e \u0432 \u043c\u0441\r\n        \r\n    $('body').animate({ \/\/\u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0442\u0435\u0433 body \u0438 \u043c\u0435\u0442\u043e\u0434 animate\r\n\r\n            left: '0px' \/\/\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441\u043d\u043e\u0432\u0430 \u0432\u0435\u0440\u043d\u0435\u0442\u0441\u044f \u0432 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 0px\r\n\r\n        }, 200); \/\/\u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043c\u0435\u043d\u044e \u0432 \u043c\u0441\r\n    });\r\n};\r\n\r\n$(document).ready(main); \/* \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f, \u0431\u0443\u0434\u0435\u0442\r\n               \u0432\u044b\u0437\u0432\u0430\u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f main, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0430\u044f \u0437\u0430 \u0440\u0430\u0431\u043e\u0442\u0443 \u043c\u0435\u043d\u044e *\/\r\n<\/pre>\n
\u0412\u043e\u0442 \u0438 \u0432\u0441\u0451 \u2014 \u0443\u0434\u043e\u0431\u043d\u043e\u0435 \u0431\u043e\u043a\u043e\u0432\u043e\u0435 \u0432\u044b\u0435\u0437\u0436\u0430\u044e\u0449\u0435\u0435 \u043c\u0435\u043d\u044e \u043d\u0430 jQuery \u0433\u043e\u0442\u043e\u0432\u043e!<\/p>\n","protected":false},"excerpt":{"rendered":"
\u0412 \u044d\u0442\u043e\u043c \u0443\u0440\u043e\u043a\u0435 \u043c\u044b \u043f\u043e\u043a\u0430\u0436\u0435\u043c, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0435 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0435 \u043c\u0435\u043d\u044e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f CSS \u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a jQuery. \u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c jQuery, \u0447\u0442\u043e\u0431\u044b \u0431\u043e\u043a\u043e\u0432\u043e\u0435 \u0441\u043b\u0430\u0439\u0434-\u043c\u0435\u043d\u044e \u043f\u043b\u0430\u0432\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u043b\u043e\u0441\u044c \u0441 \u043b\u0435\u0432\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n
\u0427\u0438\u0442\u0430\u0442\u044c \u0434\u0430\u043b\u0435\u0435<\/a><\/span><\/p>\n","protected":false},"author":6,"featured_media":5785,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,11],"tags":[],"_links":{"self":[{"href":"https:\/\/idg.net.ua\/blog\/wp-json\/wp\/v2\/posts\/5767"}],"collection":[{"href":"https:\/\/idg.net.ua\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/idg.net.ua\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/idg.net.ua\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/idg.net.ua\/blog\/wp-json\/wp\/v2\/comments?post=5767"}],"version-history":[{"count":13,"href":"https:\/\/idg.net.ua\/blog\/wp-json\/wp\/v2\/posts\/5767\/revisions"}],"predecessor-version":[{"id":8348,"href":"https:\/\/idg.net.ua\/blog\/wp-json\/wp\/v2\/posts\/5767\/revisions\/8348"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/idg.net.ua\/blog\/wp-json\/wp\/v2\/media\/5785"}],"wp:attachment":[{"href":"https:\/\/idg.net.ua\/blog\/wp-json\/wp\/v2\/media?parent=5767"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/idg.net.ua\/blog\/wp-json\/wp\/v2\/categories?post=5767"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/idg.net.ua\/blog\/wp-json\/wp\/v2\/tags?post=5767"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}