Створення висувається меню

Сьогодні ми створимо бічне меню, схоже на те, що в смартфонах. Але це меню буде у вас на сайті.

Приклад меню можна побачити тут:

Подивитися прімерСкачать

підключення jQuery

Насамперед підключаємо бібліотеку. Завантажити її можна - тут.

1	lt;script type="Text / javascript" src="Js / jquery.js"gt; lt;/scriptgt;

Відео: Створення меню, що випадає і кошики магазину на CMS 1C-Bitrix

HTML частина

Зараз додамо меню в вигляді списку:

123456789101112131415161718192021

lt;div class="Container"gt;lt;div id="Sidebar"gt;lt;ulgt;lt;ligt; lt;a href="#"gt; Головнаlt;/agt; lt;/ligt;lt;ligt; lt;a href="#"gt; Статтіlt;/agt; lt;/ligt;lt;ligt; lt;a href="#"gt; Відеоlt;/agt; lt;/ligt;lt;ligt; lt;a href="#"gt; Вихідlt;/agt; lt;/ligt;lt;/ulgt;lt;/divgt;lt;div class="Main-content"gt;lt;div class="Swipe-area"gt; lt;/divgt;lt;a href="#" data-toggle=".container" id="Sidebar-toggle"gt;lt;span class="Bar"gt; lt;/spangt;lt;span class="Bar"gt; lt;/spangt;lt;span class="Bar"gt; lt;/spangt;lt;/agt;lt;div class="Content"gt;lt;/divgt;lt;/divgt;lt;/divgt;

CSS частина

CSS коду трохи, а ефект виходить дуже красивим:

Відео: Створення меню, що випадає в uCoz

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960

#sidebar {background: # DF314D-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 # C9223D--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: # C9223D-}.main-content # Sidebar-toggle {background: # DF314D-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-}

javascript частина

І допишемо невеликий код на JS:

123456789101112131415161718192021

lt;script type="Text / javascript"gt; $ (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 -}}}) -}) -lt;/scriptgt;

Отже, ось ми і створили виїжджає меню. Дане меню пристойно заощадить вам місце на сайті, при його використанні.