Выезжающий поверх страницы блок сообщений при помощи CSS и jQuery

В этом уроке мы покажем, как создать полупрозрачный слой, который накрывает всю страницу, и блок сообщений, который может быть закрыт. Затем мы добавим библиотеку jQuery, которая заставит появляться накрывающий слой и выезжать из верхнего края страницы блок сообщений. Посмотрите демонстрацию работы по ссылке.

Демонстрация работы – Скачать исходный код

HTML

Нам нужно всего два элемента в нашем html-коде: блок для накрывающего слоя и блок для блока сообщений. В блоке сообщений будет ссылочный элемент для уменьшенного изображения закрывающей кнопки и текст. И вот что получается:

<div></div>

<div>

<a></a>

<h2>Important message</h2>

<p>

Here comes a very important message for your user.

Turn this window off by clicking the cross.

</p>
</ 

Так как мы будем ссылаться на эти два основных элемента позже в JavaScript, нам нужно дать им идентификаторы.

У накрывающего слоя есть тэг стиля display:none, так как мы хотим, чтобы изначально он был невидимым. Со свойством видимости блока сообщений мы разберемся в CSS.

Давайте добавим стилей.

CSS

Для накрывающего слоя мы просто используем повторяющееся прозрачное изображения. Мы также можем просто задать ему темный цвет фона и сделать его прозрачным с помощью свойств CSS, но здесь мы будем использовать изображение:

.overlay{

background:transparent url(images/overlay.png) repeat top left;

position:fixed;

top:0px;

bottom:0px;

left:0px;

right:0px;

z-index:100;
}

Здесь мы растягиваем этот блок, задавая ему позицию 0 со всех сторон. Так что не важно, насколько широкое окно у браузера, эти свойства всегда растянут его на всю страницу. Использование свойства position:fixed будет всегда держать блок на одном месте, вне зависимости от прокрутки страницы. Если бы мы использовали свойство position:absolute, наш блок накрывал бы только верхнюю видимую часть страницы, но не включал нижнюю часть страницы, видимую после прокрутки. Значение свойства z-index

У блока сообщений будут такие свойства CSS:

.box{

position:fixed;

top:-200px;

left:30%;

right:30%;

background-color:#fff;

color:#7F7F7F;

padding:20px;

border:2px solid #ccc;

-moz-border-radius: 20px;

-webkit-border-radius:20px;

-khtml-border-radius:20px;

-moz-box-shadow: 0 1px 5px #333;

-webkit-box-shadow: 0 1px 5px #333;

z-index:101;
}

Мы снова задаем фиксированное положение блока, так как нам нужно, чтобы блок сдвигался, когда мы прокручиваем страницы. Мы устанавливаем отрицательное значение свойству top, так как нам нужно, чтобы блок сообщений был вне нашего окна, т. е., чтобы он был невидим вначале.

Чтобы поместить элемент в центр страницы, мы просто задаем ему одинаковые расстояния справа и слева. Использование процентов позволяет хорошо адаптировать элемент ко всем размерам экрана, не забывайте, что они могут сильно отличаться.

Свойства CSS3 добавят скругления углам и тени блоку сообщений. Но они будут работать не во всех браузерах.

Значение свойства

У закрывающего крестика блока сообщений будут такие стили:

a.boxclose{

float:right;

width:26px;

height:26px;

background:transparent url(images/cancel.png) repeat top left;

margin-top:-30px;

margin-right:-30px;

cursor:pointer;
}

Этот маленький элемент должен наполовину высовываться из блока сообщений, и, так как у блока сообщений есть внутренний отступ 20 пикселей, мы вытолкнем элемент выше и правее, установив ему отрицательное значение внешнего отступа -30 пикселей для этих сторон.

У элементов с тегом h2 будут следующие свойства:

.box h2{

border-bottom: 1px dashed #7F7F7F;

margin:-20px -20px 0px -20px;

padding:10px;

background-color:#FFEFEF;

color:#EF7777;

-moz-border-radius:20px 20px 0px 0px;

-webkit-border-top-left-radius: 20px;

-webkit-border-top-right-radius: 20px;

-khtml-border-top-left-radius: 20px;

-khtml-border-top-right-radius: 20px;
}

Мы снова устанавливаем здесь отрицательные внешние отступы, чтобы вытолкнуть элемент. Заметьте, что свойства CSS3 для браузера Mozilla могут быть записаны кратко.

Это все, что касается CSS, теперь давайте приступим к классному JavaScript.

JavaScript

Следующий код добавляется в конце файла html, прямо перед закрытием тега body:

$(function() {

$('#activator'). click(function(){

$('#overlay').fadeIn('fast',function(){

$('#box').animate({'top':'160px'},500);

});

});

$('#boxclose').click(function(){

$('#box').animate({'top':'-200px'},500,function(){

$('#overlay').fadeOut('fast');

});

});
});

Элемент #activator применяется к каждому элементу на странице, который должен вызвать накрывающий слой и появление блока сообщений. В примере мы просто добавили ссылочный элемент со стилями с таким идентификатором.

Когда на запускающий элемент нажимают, накрывающий слой должен появиться очень быстро, и после этого другая функция должна выполниться, заставляя блок сообщений выехать из верхнего края. Это то, что делает функция animate(). Дальше мы указываем, что значение свойства top должно быть 160 пикселей, что означает, что мы хотим, чтобы блок сообщений передвинулся с его текущего положения на положение

После того, как накрывающий слой и блок сообщений появились, мы хотим иметь возможность закрыть блок сообщений, нажимая на уменьшенное изображение крестика. Функция, которая это делает, сначала заставит блок сообщений уехать вверх на его старое положение top:-200px, а после этого заставит исчезнуть накрывающий слой.

Имейте ввиду, что начальное положение блока сообщений -200px зависит от высоты блока. Если Ваш блок сообщений длиннее, убедитесь, что значение его начального положения меньше, например, -500px, если Ваш блок сообщений 500px в высоту.

И это все! Попробуйте поэкспериментировать со скоростью появления элементов. Вы также можете заменить значение

Наслаждайтесь!

Демонстрация работы – Скачать исходный код

Автор урока Mary Lou

Перевод — Дежурка

Смотрите также:

Анимированная выдвижная боковая блок-панель на CSS

Вставляем следующие блоки в код

Код HTML

<div id="panel"> >>>

    <div id="hidden_panel">

        Содержание блока

    </div>

</div>

Код CSS

/* ВНЕШНИЙ БЛОК */

#panel {

    position: fixed; /* положение */

    top: 100px; /* отступ сверху */

    left: 0; /* отступ слева */

    background: green; /* цвет фона */

    width: 30px; /* ширина блока */

    height: 40px; /* высота блока */

    font: 14px Arial; /* размер и тип шрифта */
 
    color: #fff; /* цвет текста */

    text-align: center; /* выравнивание текста по центру */

    padding: 5px; /* отступы от границ внутри блока */
    -webkit-transition-duration: 0.3s; /* анимационное выдвижение для всех браузеров*/

    -moz-transition-duration: 0.3s;

    -o-transition-duration: 0.3s;

    transition-duration: 0.3s;
    -webkit-border-radius: 0 5px 5px 0; /* закругление границ для всех браузеров*/

    -moz-border-radius: 0 5px 5px 0;

    border-radius: 0 5px 5px 0;

    }
/* СКРЫТЫЙ БЛОК */

#hidden_panel {

    position: fixed; /* положение */
 
    top: 100px; /* отступ сверху */

    left: -220px; /* отступ слева */

    background: lavender; /* цвет фона */

    color: #000; /* цвет текста */

    width: 200px; /* ширина блока */

    height: 150px; /* высота блока */

    padding: 10px; /* отступы от границ внутри блока */

    text-align: left; /* выравнивание текста */
    -webkit-transition-duration: 0.3s; /* анимационное выдвижение для всех браузеров*/

    -moz-transition-duration: 0.3s;

    -o-transition-duration: 0.3s;

    transition-duration: 0.3s;
    -webkit-border-radius: 0 5px 5px 0; /* закругление границ для всех браузеров*/

    -moz-border-radius: 0 5px 5px 0;

    border-radius: 0 5px 5px 0;

    }

#panel:hover {

    left: 220px; /* при наведении выдвигается на скрытые 200px + 20px отступы */

}

#panel:hover #hidden_panel {

    left: 0; /* отступ слева */

}

8 выезжающих панелей для сайта на jquery и CSS

1. Плагин jQuery «Floater»

Плавающий блок на jQuery. Для просмотра эффекта необходимо прокрутить демонстрационную страницу вниз, при этом блок всегда будет оставаться в поле зрения посетителя. Плавающий блок можно фиксировать в любом подходящем месте на странице.

2. jQuery плагин «Slick»

Плагин для формирования выезжающих блоков на странице. Эти блоки можно раскрывать и скрывать нажатием на ссылку и они могут содержать в себе любую статическую информацию. Идеально подойдет для создания дополнительной навигации или формы обратной связи выезжающей на странице. Возможен вывод нескольких выезжающих блоков на одной странице, при этом их расположение вы можете задать как угодно.

3. Всплывющая анимированная jQuery UI панель

jQuery панель с содержимым, которая всплывает в заданном положении прокрутки. Плагин можно использовать для реализации контейнера с похожими статьями или товарами. Чтобы просмотреть все доступные похожие блоки на одной странице необходимо нажать на пиктограмму со стрелкой в верхнем правом углу jQuery панели. Для просмотра плагина в действии на демонстрационной странице прокрутите колесо мыши до упора вниз. 

4. Всплывающая jQuery CSS3 панель

На демонстрационной странице нажмите на кнопку «infos» слева.

5. Выпадающие jQuery панели

jQuery панели, выпадающие с различных сторон экрана.

6. Выезжающая Mootools панель

Выпадающая сверху экрана Mootools панель.

7. Всплывающий блок

Сообщение появится при прокрутке страницы. Отличный плагин для привлечения внимания посетителя к какой-нибудь информации.

8. Выплывающий блок при прокрутке страницы

При прокрутке страницы внизу экрана выезжает блок с информацией, который можно закрыть, нажав на крестик. Для просмотра эффекта прокрутите вниз демонстрационную страницу.

Подготовлено по материалам

Примеры CSS меню c анимацией с ресурса Codepen

Возможно, вы слышали о ресурсе Codepen, на котором можно создавать файлы примеров для использования их в проектах.  В данной статье мы рассмотрим примеры различных меню, авторы которых разместили свой код на codepen.io.

Простые меню вы можете разобрать с помощью статьи «Виды горизонтальных меню для сайта». Здесь же будут рассмотрены примеры различных меню, появляющихся по клику на кнопке. В этих меню, помимо css-форматирования, используется код на JavaScript/jQuery.

Flexbox-меню с перекрытием экрана

Верстка меню основана на модели Flexbox. При появлении элементов меню происходит перекрытие экрана.  Используются трансформации и анимация с помощью свойства transition. Также используется код на jQuery.

See the Pen Fullscreen flexbox overlay navigation by Mirko Zorić (@fluxus) on CodePen.18892

Меню со слайд-эффектом

При клике на элементах этого меню используется плавный переход подчеркивания для активной ссылки. Здесь есть не только css-форматирование, но и код на jQuery.

В примере используются html-, css- и  js-препроцессоры. Если код вам непонятен, нажмите на стрелку в правом верхнем углу соответствующей вкладки и выберите пункт «View compiled HTML» и т.п. при редактировании этого примера на Codepen.

See the Pen A clean navigation slider by Roemerdt (@Roemerdt) on CodePen.18892

Цветное навигационное меню на основе CSS и jQuery

В этом css-меню используется эффект изменения цвета активной точки при наведении на один из пунктов. Как и в предыдущих  меню, без jQuery здесь не обошлось.

See the Pen Colourful navigation by Lewi Hussey (@Lewitje) on CodePen.18892

Еще один вариант:

See the Pen css3 Responsive menu effect by Bogdan Blinnikov (@bonkalol) on CodePen.18892

Скошенное меню

В этом меню внешний вид обеспечивается с помощью CSS3-свойства transform: skew(). Очень интересный вид, полученный путем трансформации списка ссылок.

See the Pen Skewed Menu by Claudio Holanda (@kazzkiq) on CodePen.18892

CSS меню с эффектами при прокручивании и наведении

В этом меню использованы эффекты при прокручивании (скроллинге), связанные с 3d-трансформациями и увеличении масштаба при наведении. Также не обошлось без JavaScript.

Интересное меню с различными цветами и иконками для пунктов меню. Оно предполагает разворачивание на весь экран.

See the Pen Menu with scroll & hover effects by Ivan Bogachev (@sfi0zy) on CodePen.18892

Меню для мобильной версии сайта или приложения

Это меню «заточено» под мобильную версию сайта или мобильное приложение. Используется не только css-форматирование, но и JavaScript-код.

See the Pen App Navigation by Ian Turner (@iamturner) on CodePen.18892

Боковое выезжающее меню с эффектом размытости стекла

Разметка с использованием CSS и нативного JS-кода

See the Pen Frosted Glass Menu | [best in chrome] by Dev Loop (@dev_loop) on CodePen.18892

Анимационное меню с SVG (UI Navigation Concept)

Меню, предназначенное опять-таки либо для мобильной версии сайта, либо для мобильного приложения. В нем используются анимации SVG и CSS3 без подключения сторонних библиотек + код на JavaScript.

See the Pen SVG UI Navigation Concept by Alex Permyakov (@alexdevp) on CodePen.18892

Желеобразное меню для мобильных устройств

Очень интересное меню с приятной анимацией при скроллинге и прикосновении на мобильных устройствах. Требует подключения множества библиотек.

See the Pen Touch device jelly menu concept by LegoMushroom (@sol0mka) on CodePen.18892

Иконочное меню для мобильных

See the Pen Mobile Menu by Ricardo Oliva Alonso (@ricardoolivaalonso) on CodePen.18892

Меню с иконками для мобильных

See the Pen Fancy tab bar active animation by Aymen Mohammed (@aymen-mohammed) on CodePen.18892

CSS меню с кнопкой по центру header

See the Pen Pure CSS Header Menu by Nikolay Talanov (@suez) on CodePen.18892

Социальное меню с выезжающими иконками

See the Pen Mobile Menu by Ricardo Oliva Alonso (@ricardoolivaalonso) on CodePen.18892

Верхнее выезжающее css-меню c иконкой-гамбургером

Приятное боковое выезжающее меню с CSS-анимацией появления самого меню и изменения иконки-гамбургера. Подойдет как для основной версии сайта, так и для мобильной версии. Помимо CSS, используется минимальный код на JS.

See the Pen Toggle menu by Tristan White (@triss90) on CodePen.18892

Еще один вариант с небольшими 3D-трансформациями.

See the Pen 3D Rotating Navigation by Elen (@ambassador) on CodePen.18892

Боковая панель с меню

Меню расположено на боковой выезжающей панели справа. При появлении меню основной контент сдвигается влево. Использован код на JS.

See the Pen CSS3 side panel with menu by Darren Huskie (@Huskie) on CodePen.0

Еще один пример для панели администратора

See the Pen Sidebar template by Mohamed Azouaoui (@azouaoui-med) on CodePen.18892

Интересное боковое меню для лэндинга или одноэкранной презентации

See the Pen One Page Navigation CSS Menu by Alberto Hartzet (@hrtzt) on CodePen.18892

Неоновая анимация при наведении на горизонтальное и вертикальное меню

See the Pen Menu Or Nav Hover Styles by Dev Loop (@dev_loop) on CodePen.18892

Выезжающее сбоку меню

В коде используется не только css, но и JS-код

See the Pen Sliding Menu by Dev Loop (@dev_loop) on CodePen.18892

Второй вариант выезжающего сбоку меню основан только на CSS:

See the Pen Pure CSS Hamburger fold-out menu by Erik Terwan (@erikterwan) on CodePen.18892

Боковое css-меню с анимацией

See the Pen Pure CSS3 Mega Dropdown Menu With Animation (Vertical) by Rizky Kurniawan Ritonga (@rizkykurniawanritonga) on CodePen.18892

Выезжающее сверху CSS меню

При нажатии на кнопку-гамбургер сверху с анимацией появляется меню. Контент смещается вниз с отступами слева и справа. Помимо css-transition использован несложный код на jQuery.

See the Pen Off canvas menu by Mark Murray (@markmurray) on CodePen.0

Навигационное меню в стиле Material Design

Приятное меню, которое появляется со слайд-эффектом с помощью  css-transition и небольшого jQuery-кода.

See the Pen Material design navigation by Lewi Hussey (@Lewitje) on CodePen.0

Еще один вариант в стиле Material Design с круглыми кнопками

See the Pen CSS Gooey Menu (Version 3) by Lucas Bebber (@lbebber) on CodePen.18892

Вторая версия меню с круглыми кнопками.

See the Pen Floatting Draggable Menu (Messenger like) by Andy Pagès (@andyNroses) on CodePen.18892

Раскрывающееся вниз (Dropdown) меню

В примере использованы CSS и JS-код.

See the Pen CSS3/Javascript Pure Dropdown Menu by Pedro Nauck (@pedronauck) on CodePen.18892

Еще один вариант dropdown-меню

See the Pen Swanky Pure CSS Drop Down Menu V2.0 by Jamie Coulter (@jcoulterdesign) on CodePen.18892

Вариант с интересной анимацией при наведении

See the Pen Solution for Long Drop Down Items by Larry Geams Parangan (@larrygeams) on CodePen.18892

Трансформация скоса в выпадающем меню при наведении курсора мыши

See the Pen CSS Swinging Panel Menu by Seth Abbott (@sethabbott) on CodePen.18892

Выпадающее (Dropdown) меню на CSS

See the Pen Pure CSS DropDown Menu by Andor Nagy (@andornagy) on CodePen.18892

Выпадающее по клику меню в стиле Bootstrap

See the Pen OnClick Dropdown by Sazzad (@sazzad) on CodePen.18892

Выезжающее меню слева в стиле Bootstrap 3

See the Pen Awesome Bootstrap 3 Sidebar Navigation by Jay Holtslander (@j_holtslander) on CodePen.dark

Выезжающее меню с CSS-анимацией

Только CSS, без JS-кода

See the Pen CSS Drop-Down Menu Transitions by Shaw (@shshaw) on CodePen.18892

Выезжающее сверху меню с анимацией

Есть переключатель для темной/светлой темы и анимация в виде круга, перемещающегося за курсором мыши. CSS+JS-код.

See the Pen Overlay menu by Ivan Grozdic (@ig_design) on CodePen.18892

Отзывчивое мега-меню с использованием jQuery

See the Pen Responsive and Mega menu by Arjun Amgain (@arjunamgain) on CodePen.18892

CSS-меню с несколькими уровнями вложенности

See the Pen Multi level css only push menu by Shven (@Shven) on CodePen.18892

Отзывчивое меню с несколькими уровнями вложенности

Использует не только CSS, но и jQuery.

See the Pen CSS3 Responsive Menu Dropdown + Submenu width Logo by emre (@emredenx) on CodePen.18892

CSS-меню с вкладками

Стоит, наверное, отключить видимость radio-переключателей в конечной версии меню.

See the Pen No JS: Tabs that scale down to menu by Jake Albaugh (@jakealbaugh) on CodePen.18892

Варианты анимации иконки-гамбургера

See the Pen Hamburger Menu Animations by Tamino Martinius (@Zaku) on CodePen.18892

SVG-Анимация при наведении на иконку гамбургера в боковой панели

See the Pen SVG Gooey Hover Menu Concept by Michael Leonard (@mikel301292) on CodePen.18892

Еще варианты анимации иконки-гамбургера.

See the Pen CSS Menu Icon Animation: Know Your Menu by Olivia Ng (@oliviale) on CodePen.18892

Различные варианты оформления меню вы можете найти также на freefrontend.com, onaircode.com и navnav.co.

Просмотров: 7 328

Как Создать Выпадающее Меню CSS

Для сайта время его загрузки и удобство использования являются одними из самых важных аспектов. Поэтому, вы не должны загромождать ваш сайт дополнительными JavaScript и большими изображениями. Но что, если вы хотите красивое выпадающее CSS меню? Для этого не нужно использовать JavaScript, сегодня выпадающее меню можно сделать используя только CSS. В этом руководстве вы научитесь, как создать выпадающее меню CSS.

Нужен недорогой, но надёжный хостинг для вашего нового проекта? Обратите внимание, что в Hostinger действуют скидки на все тарифы хостинга. Воспользуйтесь предложением и разместите сайт до 90% дешевле!

К предложению

Перед тем, как мы начнем это руководство, вам понадобится следующее:

• Доступ к контрольной панели вашего хостинга

Во-первых, вам нужно создать пустой HTML-файл. В этом руководстве мы создадим новый файл под названием menu.html. Для этого мы будем использовать Файловый менеджер. Однако тот же результат может быть достигнут с использованием FTP-клиента (создайте файл menu.html на вашем компьютере и загрузите его на ваш хостинг).

Наше меню будет сделано из одного родительского элемента под названием Главное меню и пяти подразделов. Изменяя адрес внутри атрибута href, вы можете связать каждый подраздел с разными страницами вашего сайта. Вы наверное заметили, что каждый элемент имеет разный класс — dropdown, mainmenubtn и dropdown-child. Классы необходимы для применения правил CSS.

<div>
  <button>Главное меню</button>
  <div>
    <a href="http://www.вашдомен.ru/page1.html">Подраздел 1</a>
    <a href="http://www.вашдомен.ru/page2.html">Подраздел 2</a>
    <a href="http://www.вашдомен.ru/page3.html">Подраздел 3</a>
    <a href="http://www.вашдомен.ru/page4.html">Подраздел 4</a>
    <a href="http://www.вашдомен.ru/page5.html">Подраздел 5</a>
  </div>
</div>

Вот, как это выглядит без применения каких-либо CSS-правил:

Как вы видите обычное HTML меню не оптимизировано и выглядит не очень красиво. Однако мы применим CSS правила и изменим это в следующем шаге.

Мы стилизуем наш HTML код используя следующие CSS правила:

.mainmenubtn {
    background-color: red;
    color: white;
    border: none;
    cursor: pointer;
    padding:20px;
    margin-top:20px;
}

.mainmenubtn:hover {
    background-color: red;
    }
    
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-child {
    display: none;
    background-color: black;
    min-width: 200px;
}
.dropdown-child a {
    color: white;
    padding: 20px;
    text-decoration: none;
    display: block;
}
.dropdown:hover .dropdown-child {
    display: block;
}

Как вы видите, класс .dropdown-child имеет CSS правило display: none. Однако, как только пользователь проведет курсором (.dropdown:hover) по родительскому элементу, это правило изменит его отображение на display: block. Это и создаст эффект выпадающего меню.

Ниже представлен финальный результат нашего файла menu.html:

<html>
<head>
<style>
.mainmenubtn {
    background-color: red;
    color: white;
    border: none;
    cursor: pointer;
    padding:20px;
    margin-top:20px;
}
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-child {
    display: none;
    background-color: black;
    min-width: 200px;
}
.dropdown-child a {
    color: white;
    padding: 20px;
    text-decoration: none;
    display: block;
}
.dropdown:hover .dropdown-child {
    display: block;
}
</style>
</head>
<body>
<div class="dropdown">
  <button class="mainmenubtn">Главное меню</button>
  <div class="dropdown-child">
    <a href="http://www.вашдомен.ru/page1.html">Подраздел 1</a>
    <a href="http://www.вашдомен.ru/page2.html">Подраздел 2</a>
    <a href="http://www.вашдомен.ru/page3.html">Подраздел 3</a>
    <a href="http://www.вашдомен.ru/page4.html">Подраздел 4</a>
    <a href="http://www.вашдомен.ru/page5.html">Подраздел 5</a>
  </div>
</div>
</body>
</html>

В этом примере мы используем внутренние таблицы стилей, что означает CSS стили находятся в самом файле HTML. Однако существует множество способов для подключения CSS стилей к HTML документу.

Как только вы закончите, финальный результат должен быть похож на это:

Не бойтесь экспериментировать c CSS стилем, изменяя цвета и размер. Адаптируйте меню под ваши нужды.

Закончив данное руководство вы научились, как создать выпадающее меню CSS. Код приведенный в данном руководстве достаточно легок и не повлияет на время загрузки вашего сайта.

Выдвижная боковая панель на CSS

/* Оформление панели */

#side-checkbox {

    display: none;

}

.side-panel {

    position: fixed;

    z-index: 999999;

    top: 0;

    left: -360px;

    background: #337AB7;

    transition: all 0.5s;  

    width: 320px;

    height: 100vh;

    box-shadow: 10px 0 20px rgba(0,0,0,0.4);

    color: #FFF;

    padding: 40px 20px;

}

.side-title {

    font-size: 20px;

    padding-bottom: 10px;

    margin-bottom: 20px;

    border-bottom: 2px solid #BFE2FF;

}

/* Оформление кнопки на странице */

.side-button-1-wr {

    text-align: center; /* Контейнер для кнопки, чтобы было удобнее ее разместить */

}

.side-button-1 {

    display: inline-block;

}

.side-button-1 .side-b {

    margin: 10px;

    text-decoration: none;

    position: relative;

    font-size: 20px;

    line-height: 20px;

    padding: 12px 30px;

    color: #FFF;

    font-weight: bold;

    text-transform: uppercase;

    font-family: ‘Roboto Condensed’, Тahoma, sans-serif;

    background: #337AB7;

    cursor: pointer;

    border: 2px solid #BFE2FF;

}

.side-button-1 .side-b:hover,

.side-button-1 .side-b:active,

.side-button-1 .side-b:focus {

    color: #FFF;

}

.side-button-1 .side-b:after,

.side-button-1 .side-b:before {

    position: absolute;

    height: 4px;

    left: 50%;

    bottom: -6px;

    content: «»;

    transition: all 280ms ease-in-out;

    width: 0;

}

.side-button-1 .side-open:after,

.side-button-1 .side-open:before {

    background: green;

}

.side-button-1 .side-close:after,

.side-button-1 .side-close:before {

    background: red;

}

.side-button-1 .side-b:before {

    top: -6px;

}

.side-button-1 .side-b:hover:after,

.side-button-1 .side-b:hover:before {

    width: 100%;

    left: 0;

}

/* Переключатели кнопки 1 */

.side-button-1 .side-close {

    display: none;

}

#side-checkbox:checked + .side-panel + .side-button-1-wr .side-button-1 .side-open {

    display: none;

}

#side-checkbox:checked + .side-panel + .side-button-1-wr .side-button-1 .side-close {

    display: block;

}

#side-checkbox:checked + .side-panel {

    left: 0;

}

/* Оформление кнопки на панеле */

.side-button-2 {

    font-size: 30px;

    border-radius: 20px;

    position: absolute;

    z-index: 1;

    top: 8px;

    right: 8px;

    cursor: pointer;

    transform: rotate(45deg);

    color: #BFE2FF;    

    transition: all 280ms ease-in-out;    

}

.side-button-2:hover {

    transform: rotate(45deg) scale(1.1);    

    color: #FFF;

}

Выпадающие элементы. Компоненты · Bootstrap. Версия v4.0.0

Переключайте контекстные оверлеи для отображения списков ссылок и многого другого с помощью модуля выпадающих меню Bootstrap.

Обзор

Выпадающие элементы — это переключаемые, контекстные элементы поверхностного наложения для отображения списков ссылок и т.п. Они интерактивны благодаря плагину JavaScript в BS4. Функциональность toggle в выпадающих элементах запускается по клику, а не по наведению – это сделано умышленно.

Выпадающие элементы «построены» на сторонней библиотеке Popper.js, которая обеспечивает динамическое позиционирование и определение размера окна просмотра. Обязательно включите popper.min.js перед JavaScript Bootstrap или используйте bootstrap.bundle.min.js / bootstrap.bundle.js, который содержит Popper.js.

Если вы компилируете наши JS файлы, необходим util.js.

Доступность

Стандарт WAI ARIA описывает и определяет виджет role="menu" как настоящий виджет, но лишь для меню «а-ля приложение», запускающих действия или функции. Меню ARIA могут содержать лишь пункты меню, чекбоксы, «радио-кнопки», группы «радио-кнопок» и подменю.

Выпадающие элементы Bootstrap, с другой стороны, спроектированы для решения множества задач и могут работать в разных структурах разметки. Например, можно создать выпадающие элементы, содержащие дополнительные поля ввода и элементы контроля форм, такие как поиск или поле ввода логина. По этой причине BS4 не «ожидает» (и не добавляет автоматически) ни один из атрибутов (role и aria-), необходимых для меню согласно стандарту ARIA.

Однако Bootstrap всегда добавляет встроенную поддержку для большинства стандартных взаимодействий меню и клавиатуры, таких как возможность двигаться через отдельные элементы класса .dropdown-item кнопками курсора на клавиатуре и закрывать меню кнопкой ESC.

Примеры

Оберните «контролирующий» элемент (ссылку или кнопку) выпадающего элемента и выпадающее меню классом .dropdown или другим элементом с position: relative;. При необходимости выпадающие элементы можно запускать из элементов <a> или <button>.

Выпадающие элементы одинарных кнопок

Любую одинарную кнопку .btn можно превратить в «контролирующий» элемент (кнопка открытия\скрытия) при помощи некоторых изменений разметки. Вот как вы можете это сделать также и с элементами <button>:

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Кнопка выпадающего списка
  </button>
  <div aria-labelledby="dropdownMenuButton">
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
  </div>
</div>

А вот так — с <a> элементами:

<div>
  <a href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Выпадающая ссылка
  </a>

  <div aria-labelledby="dropdownMenuLink">
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
  </div>
</div>

Самое забавное, что это можно сделать с любым из вариантов кнопок: «главная, вторичная, успех, инфо, предупреждение, опасность»:

<!-- Example single danger button -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div>
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
    <div></div>
    <a href="#">Separated link</a>
  </div>
</div>

Выпадающие элементы кнопок с разделенными зонами

По такому же принципу создавайте выпадающие элементы в кнопках с разделенными зонами, используя почти такую же разметку, как в пункте выше, но с добавлением класса .dropdown-toggle-split для правильного спейсинга вокруг выпадающего элемента.

Тут используется дополнительный класс, который уменьшает на 25% горизонтальный паддинг padding с обеих сторон выпадающей «каретки» и удаляет margin-left, добавленный для выпадающих элементов обычных кнопок. Эти изменения позволяют центрировать выпадающую «каретку» в разделенной кнопке и обеспечивают более подходящий размер «зоны клика» вблизи главной кнопки.

<!-- Example split danger button -->
<div>
  <button type="button">Action</button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
    <div></div>
    <a href="#">Separated link</a>
  </div>
</div>

Размеры

Выпадающие элементы кнопок работают с кнопками любых размеров, включая кнопки по умолчанию и кнопки с выпадающими элементами с разделенными зонами.

<!-- Large button groups (default and split) -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div>
    ...
  </div>
</div>
<div>
  <button type="button">
    Large button
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div>
    ...
  </div>
</div>
<div>
  <button type="button">
    Small button
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    ...
  </div>
</div>

«Выпадающий вверх»

Добавьте класс .dropup и выпадающий элемент будет «выпадать» вверх.

<!-- Default dropup button -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropup button -->
<div>
  <button type="button">
    Split dropup
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

«Выпадающий вправо»

Добавьте класс .dropright и выпадающий элемент будет «выпадать» вправо.

<!-- Default dropright button -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropright button -->
<div>
  <button type="button">
    Split dropright
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropright</span>
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

«Выпадающий влево»

Добавьте класс .dropleft и выпадающий элемент будет «выпадать» влево.

<!-- Default dropleft button -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div>
  <div role="group">
    <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span>Toggle Dropleft</span>
    </button>
    <div>
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button">
    Split dropleft
  </button>
</div>

Исторически содержимым выпадающих элементов всегда были ссылки, но BS4 изменил это. Сейчас вы можете использовать в качестве содержимого выпадающих элементов <button>, а не только <a>.

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div aria-labelledby="dropdownMenu2">
    <button type="button">Action</button>
    <button type="button">Another action</button>
    <button type="button">Something else here</button>
  </div>
</div>

По умолчанию выпадающее меню автоматически расположено в 100% от вершины и на левой стороне родителя. Добавьте класс .dropdown-menu-right к элементу класса .dropdown-menu для выравнивания выпадающего меню по правой стороне.

Внимание! Выпадающие элементы позиционируются благодаря Popper.js (за исключением случаев, когда они содержатся в navbar).

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div>
    <button type="button">Action</button>
    <button type="button">Another action</button>
    <button type="button">Something else here</button>
  </div>
</div>

Добавьте заголовок, чтобы обозначить секции действий любого выпадающего меню.

<div>
  <h6>Dropdown header</h6>
  <a href="#">Action</a>
  <a href="#">Another action</a>
</div>

Разделяйте группы родственных элементов меню разделителем.

<div>
  <a href="#">Action</a>
  <a href="#">Another action</a>
  <a href="#">Something else here</a>
  <div></div>
  <a href="#">Separated link</a>
</div>

Расположите форму внутри выпадающего меню, и используйте утилиты паддинга или марджина для ее уплотнения.

<div>
  <form>
    <div>
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" placeholder="[email protected]">
    </div>
    <div>
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" placeholder="Password">
    </div>
    <div>
      <input type="checkbox">
      <label for="dropdownCheck">
        Remember me
      </label>
    </div>
    <button type="submit">Sign in</button>
  </form>
  <div></div>
  <a href="#">New around here? Sign up</a>
  <a href="#">Forgot password?</a>
</div>

<form>
  <div>
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" placeholder="[email protected]">
  </div>
  <div>
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" placeholder="Password">
  </div>
  <div>
    <input type="checkbox">
    <label for="dropdownCheck2">
      Remember me
    </label>
  </div>
  <button type="submit">Sign in</button>
</form>

Добавьте класс .active к элементу выпадающего меню для его стилизации как «активированного».

<div>
  <a href="#">Regular link</a>
  <a href="#">Active link</a>
  <a href="#">Another link</a>
</div>

Добавьте класс .disabled к элементу выпадающего меню для его стилизации как «деактивированного».

<div>
  <a href="#">Regular link</a>
  <a href="#">Disabled link</a>
  <a href="#">Another link</a>
</div>

Использование

Через атрибуты или JavaScript, плагин выпадающих элементов изменяет (показывает скрытоесодержимое) состояние содержимого (выпадающие меню) изменением класса .show элемента родительского списка. Атрибут data-toggle="dropdown" отвечает за закрытие выпадающих меню на уровне приложения, так что будет неплохой идеей всегда использовать данный атрибут.

На устройствах, активируемых касанием, открытие выпадающего элемента добавляет пустые обработчики ($.noop) mouseover к непосредственным «детям» элемента <body>. Этот, по общему мнению, некрасивый хак (без которого любое касание в iOS вне выпадающего элемента не закроет выпадающий элемент) необходим для обработки проблемы с делегированием событий в iOS. Как только выпадающий элемент закрыт, эти дополнительные пустые обработчики удаляются.

Через атрибуты

Добавьте к ссылке или кнопке атрибут data-toggle="dropdown" для скрытия\показа выпадающего элемента.

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div aria-labelledby="dLabel">
    ...
  </div>
</div>

Через JS

Управляйте выпадающими элементами с помощью JavaScript:

$('.dropdown-toggle').dropdown()

Независимо от того, управляете вы выпадающим элементом через JavaScript или атрибутами, атрибут data-toggle="dropdown" всегда необходим в элементе, запускающем выпадающий элемент.

Параметры

Передавайте параметры через JavaScript или атрибуты. Если используются атрибуты, добавляйте название параметра к data- как в data-offset="".

Обратите внимание, что если для boundary установлено значение, отличное от 'scrollParent', позиция position: static применяется к контейнеру .dropdown.

Методы

События

Все события выпадающих элементов наступают в родительском элементе класса .dropdown-menu и несут свойство relatedTarget, значение которого равно элементу «якоря» (ссылка, т.е. <a>), запускающего функциональность toggle.

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

дисплей | CSS-уловки

Каждый элемент на веб-странице представляет собой прямоугольную рамку. Свойство display в CSS определяет, как ведет себя этот прямоугольный блок. Обычно используются лишь несколько значений:

  div {
  дисплей: встроенный; / * По умолчанию для всех элементов, если таблица стилей UA не переопределяет * /
  дисплей: встроенный блок; / * Характеристики блока, но сидит на строке * /
  дисплей: блок; / * Таблица стилей UA делает такие вещи, как 
 
  и   блок * /
  дисплей: обкатка; / * Не очень хорошо поддерживаются или распространены * /
  дисплей: нет; /* Скрывать */
}  
 

Значение по умолчанию для всех элементов встроено.Большинство «Таблиц стилей пользовательского агента» (стили по умолчанию, применяемые браузером ко всем сайтам) сбрасывают многие элементы на «блокировку». Давайте рассмотрим каждый из них, а затем рассмотрим некоторые другие, менее распространенные ценности.

Рядный

Значение по умолчанию для элементов. Подумайте о таких элементах, как , или , и о том, как перенос текста в эти элементы в текстовую строку не нарушает поток текста.

 .header {
  дисплей: гибкий;
}  

 .группа {
  дисплей: поток-корень;
}  

 кузов  {
  дисплей: сетка;
}  

  div {
  дисплей: таблица;
  дисплей: таблица-ячейка;
  дисплей: таблица-столбец;
  дисплей: таблица-colgroup;
  отображение: таблица-заголовок-группа;
  отображение: таблица-строка-группа;
  дисплей: таблица-нижний колонтитул-группа;
  дисплей: таблица-строка;
  display: table-caption;
}  

  





      Грубо, но иногда полезно.




  

  кузов {
  маржа: 0;
  отступ: 0;
  ширина: 100%;
  семейство шрифтов: Helvetica, Arial, sans-serif;
  / * выравнивание текста: центр; * /
}

.container {
  маржа: 50 пикселей авто 0;
  отступ: 0;
  ширина: 75%;
  высота: 200 пикселей;
  положение: относительное;
}

.box-vert {
  маржа: -10px 0;
  отступ: 0;
  перелив: видимый;
  высота: 200 пикселей;
  позиция: абсолютная;
  граница: 1px solid # C5C5C5;
  граница-верх: нет;
  нижняя граница: нет;
}

.box-horz {
  высота: 180 пикселей;
  маржа: 10px -10px;
  перелив: видимый;
  граница: 1px solid # C5C5C5;
  граница слева: нет;
  граница справа: нет;
  отступ: 0;
}

.box-inner {
  маржа: 0 10 пикселей;
  отступ: 20 пикселей;
  цвет фона: #ECECEC;
  высота: 140 пикселей;
  плыть налево;
  переполнение: скрыто;
}

.box-inner h2 {
  маржа: 0 0 10px;
  преобразование текста: прописные буквы;
  font-weight: 200;
  межбуквенный интервал: 3 пикселя;
  размер шрифта: 30 пикселей;
  цвет: # 009688;
}

.box-inner p {
  маржа: 0;
  высота строки: 1,4;
  размер шрифта: 14 пикселей;
  цвет: # 666;
}  

  

  

    

      

         
 Текст заголовка здесь 
 
        
 Энеан eu leo ​​quam.Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis conctetur purus sit amet fermentum. Praesentmodo cursus magna, vel scelerisque nisl conctetur et. Vestibulum id ligula porta felis euismod semper.