Shaman Daniels Posted July 24, 2015 Report Share Posted July 24, 2015 HTML <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Вертикальное меню для сайта</title> <script type="text/javascript" src="jquery-1.9.1.js"></script> <script type="text/javascript" src="jquery.touchSwipe.min.js"></script> <script type="text/javascript"> $(window).load(function(){ $("[data-toggle]").click(function() { var toggle_el = $(this).data("toggle"); $(toggle_el).toggleClass("open-sidebar"); }); $(".swipe-area").swipe({ swipeStatus:function(event, phase, direction, distance, duration, fingers) { if (phase=="move" && direction =="right") { $(".container").addClass("open-sidebar"); return false; } if (phase=="move" && direction =="left") { $(".container").removeClass("open-sidebar"); return false; } } }); }); </script> </head> <body> <div class="container"> <div id="sidebar"> <ul> <li><a href="#">Главная</a></li> <li><a href="#">Разделы</a></li> <li><a href="#">Регистрация</a></li> <li><a href="#">Выход</a></li> </ul> </div> <div class="main-content"> <div class="swipe-area"></div> <a href="#" data-toggle=".container" id="sidebar-toggle"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </a> <div class="content"> <h1>Вертикальное меню для сайта.</h1> <p>"Чтобы увидеть меню, необходимо нажать на квадратную иконку в верхнем левом углу! Для возвращения на сайт нажмите на <a href="http://sozdaiblog.ru">ссылку</a>."</p> </div> </div> </div> </body> </html> CSS body, html { height: 100%; margin: 0; overflow:hidden; font-family: helvetica; font-weight: 100; } .container { position: relative; height: 100%; width: 100%; left: 0; -webkit-transition: left 0.4s ease-in-out; -moz-transition: left 0.4s ease-in-out; -ms-transition: left 0.4s ease-in-out; -o-transition: left 0.4s ease-in-out; transition: left 0.4s ease-in-out; } .container.open-sidebar { left: 240px; } .swipe-area { position: absolute; width: 50px; left: 0; top: 0; height: 100%; background: #f3f3f3; z-index: 0; } #sidebar { background: #6699CC; position: absolute; width: 240px; height: 100%; left: -240px; box-sizing: border-box; -moz-box-sizing: border-box; } #sidebar ul { margin: 0; padding: 0; list-style: none; } #sidebar ul li { margin: 0; } #sidebar ul li a { padding: 15px 20px; font-size: 16px; font-weight: 100; color: white; text-decoration: none; display: block; border-bottom: 1px solid #336699; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; -ms-transition: background 0.3s ease-in-out; -o-transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out; } #sidebar ul li:hover a { background: #336699; } .main-content { width: 100%; height: 100%; padding: 10px; box-sizing: border-box; -moz-box-sizing: border-box; position: relative; } .main-content .content{ box-sizing: border-box; -moz-box-sizing: border-box; padding-left: 60px; width: 100%; } .main-content .content h1{ font-weight: 100; } .main-content .content p{ width: 100%; line-height: 160%; } .main-content #sidebar-toggle { background: #6699CC; border-radius: 3px; display: block; position: relative; padding: 10px 7px; float: left; } .main-content #sidebar-toggle .bar{ display: block; width: 18px; margin-bottom: 3px; height: 2px; background-color: #fff; border-radius: 1px; } .main-content #sidebar-toggle .bar:last-child{ margin-bottom: 0; } PS: Можно легко адаптировать под мобильную версию Vii Engine jquery.rar Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.