Приветствую всех читателей – Sozdaiblog.ru!
В этом уроке я покажу, как сделать вертикальное меню для сайта с эффектом Swipeable.
Примечание: Этот урок требует JQuery библиотеки, поэтому убедитесь, что Вы включили последнюю JQuery библиотеку в HTML страницы, прежде чем продолжить.
1. Структура.
HTML
<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>
</div>
CSS
body, html {
height: 100%;
margin: 0;
overflow:hidden;
font-family: helvetica;
font-weight: 100;
}
.container {
position: relative;
height: 100%;
width: 100%;
}
#sidebar {
position: absolute;
background: #DF314D;
width: 240px;
height: 100%;
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;
}
На первом этапе мы создаём основную структуру вертикального меню и добавляем несколько CSS стилей, которые Вы можете изменить по своему желанию.
2. Сокрытие.
HTML
<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="https://sozdaiblog.ru">ссылку</a>."</p>
</div>
</div>
</div>
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;
}
#sidebar {
position: absolute;
left: -240px;
background: #DF314D;
width: 240px;
height: 100%;
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 {
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: #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;
}
JS
$(document).ready(function() {
$("[data-toggle]").click(function() {
var toggle_el = $(this).data("toggle");
$(toggle_el).toggleClass("open-sidebar");
});
});
Теперь, мы прячем наше меню в левой стороне окна браузера при помощи position:relative и left: -240px (число эквивалентно ширине боковой панели).
Затем добавляем кнопку и JQuery скрипт, который позволит выдвигать наше вертикальное меню для сайта в один клик (горизонтально выпадающее меню).
3. Swipeable для стандартных браузеров и браузеров мобильных устройств.
HTML
<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="https://sozdaiblog.ru">ссылку</a>."</p>
</div>
</div>
</div>
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: #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 {
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: #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;
}
JS
$(document).ready(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;
}
}
});
Наиболее сложная часть этого урока, это сделать в боковом меню эффект Swipeable на браузерах для смартфонов и обычных Веб-браузерах.
Поэтому здесь подключается специальный плагин TouchSwipe, который придумал Мэтт Брайсон. Он позволяет нашему меню работать одинаково правильно, как в смартфонах, так и на стационарных компьютерах.
Заключение.
Теперь у Вас есть собственное вертикальное меню для сайта, которое Вы можете использовать для создания любого Веб-проекта без использования CMS.
На этом урок закончен. В ближайшее время таких уроков будет много. Чтобы их не пропустить советую подписаться на новые статьи блога.
Всем всего наилучшего!
С уважением, Денис Черников!
- Регламент это простыми
- Система в2в что это простыми словами
- Презентация это простыми словами
-
Фрилансер — Удалённая работа на компьютере дома!
- Чистый дисконтированный доход это простыми словами
-
CPL в маркетинге: плати только за результаты
- Демпинг цен это простыми словами
-
Что такое Поведенческие факторы и Как на них повлиять?
- Тимбилдинг для сотрудников что это такое простыми словами
- Менеджер это кто и чем занимается простыми словами
Хорошая статья и проделанная с ней работа! Благодарю
Спасибо, Сергей!
ссупер!!!!!
спасибо
Пожалуйста! Рад, что Вам понравилось!
Меню конечно не пригодится… а где такую стрелку мышки сделать? прикольно!
Есть пост на эту тему, поищите через поиск или карту!
Кнопки «демо / скачать» лучше дублировать в начале статьи, т.к. после того как увидишь демо, станет понятно стоит ли читать (листать) статью до конца или же нет.
Спасибо, за подсказку!
Последние 5-6 часов (ночь почти прошла) искал реализацию этой идеи, или как эту фишку скачать с одного готового сайта…
Спасибо!!!!!!!
Можете отправить код сайта для html5 без css/ Только в html коде
ый взгляд, код выглядит достаточно простым и легким для понимания. С помощью данного кода можно создать вертикальное меню для сайта с эффектом Swipeable.
Структура HTML состоит из контейнера, в котором размещается сайдбар и основное содержимое. В сайдбаре размещается список ссылок в виде списка ul. Ссылки стилизуются с помощью CSS.
В CSS определены стили для body, html, container, sidebar и ссылок внутри сайдбара. Контейнер имеет фиксированную высоту и ширину 100%, а сайдбар занимает 240px слева. Ссылки имеют свои стили, включая фон при наведении.
В целом, данный код выглядит достаточно простым и понятным для использования. Важно убедиться, что в HTML страницу добавлена последняя версия JQuery библиотеки перед продолжением работы с данным кодом.
cURL error 28: SSL connection timeout