Тег выпадающего списка. Горизонтальное выпадающее меню. Атрибуты тега option

В этой статье мы с Вами рассмотрим элементы, которые позволяют создавать раскрывающиеся списки, научимся формировать группы в этих списках, рассмотрим как отключать пункты и даже группы списков, познакомимся с элементом, который позволяет создать многострочное текстовое поле, его в дальнейшем вы можете использовать внутри HTML форм (элемент

Раскрывающийся список

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

Давайте

Пример использования элемента <select>

В этом примере мы тегом

В браузере это выглядит следующим образом:

Группировка пунктов меню

Давайте рассмотрим следующий тег , который используется для группировки связанных данных в раскрывающемся списке name = "black&white" > label = "Whitelist" >

В данном примере мы выделили 2 группы тегом . Атрибут label элемента задает наименование выделенной группы, выполненное полужирным начертанием:

В следующем примере с использованием логического атрибута disabled мы отключим одну группу ("Group B "):

Пример использования атрибута disabled HTML тега <optgroup>

Результат нашего примера:

Отключение списка и мультивыбор

Атрибуты disabled и multiple тега <select>

В этом примере мы создали два раскрывающихся списка. Для первого списка мы использовали атрибут disabled , который не дает взаймодействовать со списком (отключает его).

Для второго списка мы использовали атрибут multiple , который указывает, что допускается выбрать в списке несколько вариантов сразу (через Ctrl в Windows и через Command в Mac).

В браузере это выглядит следующим образом:

Текстовая область

Результат нашего примера:

Отключение текстовой области

По аналогии с ранее рассмотренными элементами тег имеет логический атрибут disabled , который указывает, что текстовая область должна быть отключена (недоступна для взаимодействия с пользователем). Атрибут может использоваться совместно со скриптами, например, пока какое-то условие не выполнено элемент неактивен. Рассмотрим пример использования: <!DOCTYPE html> <html> <head> <title> Атрибуты disabled и name тега <textarea></title> </head> <body> <form> <textarea name = "userInfo" > Текстовое поле доступно к заполнению. Текстовое поле не доступно к заполнению.

), для первой и второй области атрибутом name мы задали уникальные имена. Для второй текстовой области атрибутом disabled мы указали, что она будет отключена при загрузке страницы. Кроме того, мы разместили внутри формы кнопку, которая служит для отправки формы (элемент <input> с типом кнопки "отправка формы": type = "submit" ). Результат нашего примера: <h2>Подсказка для текстовой области</h2> И так мы с Вами рассмотрим заключительный пример и перейдем к практическому заданию статьи этого учебника. Благодаря атрибуту (HTML тега <textarea>) допускается указывать текст подсказки, которая описывает ожидаемое значение для ввода пользователем в элемент. Текст подсказки скрывается, когда пользователь вводит значение (любой символ) в текстовое поле, если его убрать, то подсказка будет отображена снова. Рассмотрим пример использования: <!DOCTYPE html> <html> <head> <title> Атрибуты placeholder и readonly тега <textarea></title> </head> <body> <form> <textarea placeholder = "Введите информацию в текстовое поле" > "Поле доступно только для чтения" readonly >
type = "submit" name = "submitInfo" value = "отправить" >

В этом примере мы создали две текстовые области (элемент ), для первой и второй области атрибутом мы задали подсказку для пользователя, которая отображается бледным цветом текста внутри элемента. Для второй текстовой области атрибутом readonly мы указали, что оно будет доступно только для чтения (содержимое не может быть изменено). Обратите внимание на то, что если текстовое поле доступно только для чтения, то при этом содержимое не может быть изменено, но пользователь при этом может перейти к содержимому, выделить и скопировать его. Кроме того, мы разместили внутри формы кнопку, которая служит для отправки формы (элемент <input> с типом кнопки "отправка формы": type = "submit" ). Результат нашего примера: <h2>Вопросы и задачи по теме</h2> Перед тем как перейти к изучению следующей темы пройдите практическое задание: <ul><li>Используя полученные знания составьте следующую форму размещения вакансии:</li> </ul>Прежде чем преступить к выполнению задания откройте пример в новом окне и внимательно рассмотрите форму, чтобы повторить все её моменты. Для выполнения задания Вам потребуются знания из статьи . Если вы пропустили её, то вернитесь для её изучения. После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно. Поле со списком, называемое еще ниспадающее меню, один из гибких и удобных элементов формы. В зависимости от настроек, в списке можно выбирать одно или несколько значений. Преимущество списка в его компактности и универсальности, список может занимать одну или несколько строк, в нём можно выбирать одно или несколько значений. Поле со списком создается следующим образом. <select атрибуты> <option атрибуты>Пункт 1</option> <option атрибуты>Пункт 2</option> </select> Тег <select> выступает контейнером для пунктов списка и определяет его вид, будет ли это раскрывающийся список или же список с одним или множественным выбором. Вид зависит от использования атрибута size тега <select> , который устанавливает высоту списка, ширина списка при этом определяется автоматически исходя из длины текста внутри <option> . Ниже представлен список множественного выбора, в котором пункты выделяются с помощью клавиши Ctrl и Shift и раскрывающийся список. <h2>Атрибуты тега <select></h2> Рассмотрим атрибуты тега <select> , с помощью которых можно изменять представление списка. <h3>multiple</h3> Наличие multiple сообщает браузеру отображать содержимое элемента <select> как список множественного выбора. Конечный вид списка зависит от используемого атрибута size . Если он отсутствует, то высота списка равна количеству пунктов, если значение size меньше числа пунктов, то появляется вертикальная полоса прокрутки. Для выбора нескольких значений списка применяются клавиши Ctrl и Shift совместно с курсором мыши. В примере 1 показано создание списка множественного выбора. Пример 1. Список множественного выбора HTML5 IE Cr Op Sa Fx <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Список</title> </head> <body> <form> <select name="select" size="3" multiple> <option selected value="s1">Чебурашка</option> <option value="s2">Крокодил Гена</option> <option value="s3">Шапокляк</option> <option value="s4">Крыса Лариса</option> </select> <input type="submit" value="Отправить"> </form> </body> </html> <h3>name</h3> Определяет уникальное имя элемента <select> . Как правило, это имя используется для доступа к данным через скрипты или для получения выбранного значения серверным обработчиком. <h3>size</h3> Устанавливает высоту списка. Если значение size равно единице, то список превращается в раскрывающийся. Значение по умолчанию зависит от атрибута multiple . Если он присутствует, то размер списка равен числу элементов. Когда multiple нет, то значение атрибута size равно 1. <h2>Атрибуты тега <OPTION></h2> Тег <option> также имеет атрибуты, влияющие на вид списка, они представлены далее. <h3>selected</h3> Делает текущий пункт списка выделенным. Если у тега <select> добавлен атрибут multiple , то можно выделять более одного пункта. <h3>value</h3> Определяет значение пункта списка, которое будет отправлено на сервер. На сервер отправляется пара «имя/значение», где имя задаётся атрибутом name тега <select> , а значение - атрибутом value выделенных пунктов списка. Значение может как совпадать с текстом пункта, так быть и самостоятельным. <h3>label</h3> Предназначен для указания метки пункта списка, сокращённой по сравнению с текстом внутри <option> . Если атрибут label присутствует, то текст внутри тега <option> игнорируется и в списке выводится значение label . Браузер Firefox не поддерживает этот атрибут. Создание списка показано в примере 2. Пример 2. Использование списка HTML5 IE Cr Op Sa Fx <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Список</title> </head> <body> <form> Выбери персонажа <select name="hero"> <option value="s1">Чебурашка</option> <option value="s2" selected>Крокодил Гена</option> <option value="s3">Шапокляк</option> <option value="s3" label="Лариса">Крыса Лариса</option> </select> <input type="submit" value="Отправить"> </form> </body> </html> <h2>Группирование элементов списка</h2> При достаточно обширном списке имеет смысл сгруппировать его элементы по блокам, чтобы обеспечить наглядность списка и удобство работы с ним. Для этой цели применяется тег <optgroup> . Он представляет собой контейнер, внутри которого располагаются теги <option> объединённые в одну группу. Особенностью тега <optgroup> является то, что он не выделяется как обычный элемент списка, акцентируется с помощью жирного начертания, а все элементы, входящие в этот контейнер, смещаются вправо от своего исходного положения. Для добавления заголовка группы используется атрибут label , как показано в примере 3. Пример 3. Группирование элементов списка HTML5 IE Cr Op Sa Fx <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Список</title> </head> <body> <form> <select name="food"> <optgroup label="Русская кухня"> <option value="r1">Закуска Барская</option> <option value="r2">Раки, фаршированные по-царски</option> <option value="r3">Биточки в горшочке</option> </optgroup> <optgroup label="Украинская кухня"> <option value="u1">Галушки славянские</option> <option value="u2">Пампушки украинские</option> <option value="u3">Жаркое по-харьковски</option> </optgroup> </select> <input type="submit" value="Отправить"> </form> </body> </html> Результат примера показан на рис. 1. Рис. 1. Группированный список В этой статье мы покажем, как создавать красивые выпадающие списки без использования изображений, только при помощи CSS. Также мы добавим немного кода jQuery, чтобы заставить их работать. Обратите внимание на некоторые вещи, прежде чем мы начнем: <ul><li>В примерах кода пропущены префиксы браузеров для CSS-свойств, но вы, конечно, можете найти их в исходных файлах.</li> <li>Лично я использую бокс-модель, где = + + . Чтобы её активировать, необходим следующий фрагмент кода:</li> </ul>*, * :after , * :before { box-sizing: border-box; } <h3>Итак, с чего же мы начнем.</h3> Первый вопрос: что нам нужно для создания выпадающего меню? В общем, мы будем использовать блок DIV с вложенным тегом span и неупорядоченный список для выпадающего меню: <div class ="wrapper-dropdown" > <span> I"m kinda the label!</span> <ul class ="dropdown" > <li> I"m hidden!</li> <li> Me too!</li> <li> So do I.</li> </ul> </div> <h3>JavaScript</h3> Нам нужнен небольшой JavaScript, чтобы наш выпадающий список работал как нужно. Этот фрагмент JS мы будем использовать для всех примеров: //... Obj.dd .on ("click" , function (event) { return false ; } ) ; //... $(function () { var dd = new DropDown( $("#dd" ) ) ; $(document) .click (function () { // all dropdowns $(".wrapper-dropdown-1" ) .removeClass ("active" ) ; } ) ; } ) ; Так что же это скрипт делает? Во-первых, он переключает класс .active , когда вы кликаете на враппер. Это означает, что если враппер не имеет класс .active , то он добавляется, а если этот класс уже присвоен, то он удаляется. Во-вторых, скрипт создает поведение по умолчанию для раскрывающегося списка, закрывая его, если вы щелкните в любом другом месте на экране. Что ж, теперь мы понимаем, как это работает, я думаю, пришло время для создания примеров! <h3>Пример 1</h3> Давайте начнем с чего-нибудь простого: простой раскрывающийся список для указания пола. Давайте сначала посмотрим на разметку: <h3>HTML-разметка</h3> Нам нужно несколько вещей: обертка (div с id#dd), (скрытый) раскрывающийся список и "лейбл", который будет обернут тегом span. Мы используем ссылки-якоря, потому что мне кажется так будет семантически правильно, но вы можете также использовать другой тег. <div id ="dd" class ="wrapper-dropdown-1" tabindex ="1" > <span> Пол</span> <ul class ="dropdown" > <li> <a href ="#" > Мужской</a> </li> <li> <a href ="#" > Женский</a> </li> </ul> </div> <h3>CSS</h3> Давайте теперь перейдем к CSS. Начнем с обертки (враппера): Wrapper-dropdown { /* размер и положение */ position : relative ; width : 200px ; padding : 10px ; margin : 0 auto ; /* цвет и фон */ background : #9bc7de ; color : #fff ; outline : none ; cursor : pointer ; /* шрифт */ font-weight : bold ; } Итак, мы сделали несколько вещей. Сначала мы установили ширину списка и некоторые отступы. Далее, мы задали ему цвет и фон. И, наконец, мы установили параметры для шрифта. Давайте закончим с "лейблом", добавив небольшую стрелку справа при помощи псевдо-элемента. Wrapper-dropdown :after { content : "" ; width : 0 ; height : 0 ; position : absolute ; right : 16px ; top : 50% ; margin-top : -6px ; border-width : 6px 0 6px 6px ; border-style : solid ; border-color : transparent #fff ; } Я думаю, мы все знаем, как создать маленький треугольник на CSS при помощи бордера (границы). Это конечно хак, но если он работает очень хорошо, так почему бы и нет? Там нет ничего особенного: маленькая белая стрелка справа. Итак, у нас есть симпатичная небольшая кнопка, но без раскрывающегося содержания она имеет никакого смысла. Давайте разберемся с нашим списком! Wrapper-dropdown-1 .dropdown { /* Size & position */ position : absolute ; top : 100% ; left : 0 ; /* Size */ right : 0 ; /* Size */ /* Styles */ background : #fff ; font-weight : normal ; /* Overwrites previous font-weight: bold; */ /* Hiding */ opacity: 0 ; pointer-events: none ; } Мы зададим раскрывающемуся списку абсолютное позиционирование и разместим его позади кнопки (top: 100%;). Зададим ему такую же ширину, как для кнопки. И, наконец, скроем его, уменьшив его прозрачность до 0. Теперь зададим стили для элементов списка: Wrapper-dropdown-1 .dropdown li a { display : block ; text-decoration : none ; color : #9e9e9e ; padding : 10px 20px ; } /* Hover state */ .wrapper-dropdown-1 .dropdown li:hover a { background : #f3f8f8 ; } С помощью JavaScript мы будем переключать класс .active , когда мы нажимаем на кнопку, на основе этого класса мы можем изменить наш CSS для отображения раскрывающегося списка. /* Active state */ .wrapper-dropdown-1 .active .dropdown { opacity: 1 ; pointer-events: auto ; } Wrapper-dropdown-1 .active :after { border-color : #9bc7de transparent ; border-width : 6px 6px 0 6px ; margin-top : -3px ; } Wrapper-dropdown-1 .active { background : #9bc7de ; background : linear-gradient(to right , #9bc7de 0% , #9bc7de 78% , #ffffff 78% , #ffffff 100% ) ; } Три вещи, которые необходимо отметить: <ol><li>Во-первых, мы делаем выпадающий список видимым, изменив его прозрачность до 1.</li> <li>Далее, мы меняем направление и цвет маленькой стрелки.</li> <li>Затем мы изменим фон позади стрелки с помощью градиента.</li> </ol><h3>JavaScript</h3> Последнее, но не менее важное, мы также должны добавить еще один фрагмент JavaScript, чтобы кнопка отображала выбранное значение. function DropDown(el) { this .dd = el; this .placeholder = this .dd .children ("span" ) ; this .opts = this .dd .find ("ul.dropdown > li" ) ; this .val = "" ; this .index = - 1 ; this .initEvents () ; } DropDown.prototype = { var obj = this ; $(this ) .toggleClass ("active" ) ; return false ; } ) ; Obj.opts .on ("click" , function () { var opt = $(this ) ; obj.val = opt.text () ; obj.index = opt.index () ; obj.placeholder .text ("Gender: " + obj.val ) ; } ) ; } , getValue : function () { return this .val ; } , getIndex : function () { return this .index ; } } Очень простой код: при нажатии на элемент мы получаем его значение и отображаем его в теге span. <h3>Пример 2</h3> Во втором примере мы создадим красивое меню для регистрации в различных социальных сетях. <h3>HTML-разметка</h3> <div id ="dd" class ="wrapper-dropdown-2" > Регистрация <ul class ="dropdown" > <li> <a href ="#" > </i> Twitter</a> </li> <li> <a href ="#" > </i> Github</a> </li> <li> <a href ="#" > </i> Facebook</a> </li> </ul> </div> Теги используются для отображения маленьких иконок из FontAwesome . Я не буду объяснять что такое FontAwesome здесь, потому как об этом уже было не раз сказано в предыдущих статьях. Просто убедитесь, что это работает. <h3>CSS</h3> Давайте начнем с обертки. В значительной степени она такая же, как и обертка в предыдущем примере. Обратите внимание на левую границу в 5px. Wrapper-dropdown-2 { /* Size and position */ position : relative ; /* Enable absolute positioning for children and pseudo elements */ width : 200px ; margin : 0 auto ; padding : 10px 15px ; /* Styles */ background : #fff ; border-left : 5px solid grey; cursor : pointer ; outline : none ; } Теперь маленькая стрелка. Точно такая же, как раньше: Wrapper-dropdown-2 :after { content : "" ; width : 0 ; height : 0 ; position : absolute ; right : 16px ; top : 50% ; margin-top : -3px ; border-width : 6px 6px 0 6px ; border-style : solid ; border-color : grey transparent ; } А это раскрывающийся список. Опять же, в значительной степени такой же, как и в предыдущем примере: Wrapper-dropdown-2 .dropdown { /* Size & position */ position : absolute ; top : 100% ; left : -5px ; right : 0px ; /* Styles */ background : white ; list-style : none ; /* Hiding */ opacity: 0 ; pointer-events: none ; } Обратите внимание, что мы будем использовать переход, чтобы сделать раскрывающийся список постепенно появляющимся (анимированным), а не просто открывающимся, как в первом демо. Некоторые стили для ссылок и иконок: Wrapper-dropdown-2 .dropdown li a { display : block ; text-decoration : none ; color : #333 ; border-left : 5px solid ; padding : 10px ; transition: all 0.3s ease-out; } Wrapper-dropdown-2 .dropdown li:nth- child(1 ) a { border-left-color : #00ACED ; } Wrapper-dropdown-2 .dropdown li:nth- child(2 ) a { border-left-color : #4183C4 ; } Wrapper-dropdown-2 .dropdown li:nth- child(3 ) a { border-left-color : #3B5998 ; } Wrapper-dropdown-2 .dropdown li i { margin-right : 5px ; color : inherit ; vertical-align : middle ; } /* Hover state */ Wrapper-dropdown-2 .dropdown li:hover a { color : grey; } И теперь, займемся стилями списка в раскрытом состоянии. Изменим направление стрелки, а раскрывающийся список станет видимым. Wrapper-dropdown-2 .active :after { border-width : 0 6px 6px 6px ; } Wrapper-dropdown-2 .active .dropdown { opacity: 1 ; pointer-events: auto ; } <h3>JavaScript</h3> function DropDown(el) { this .dd = el; this .initEvents () ; } DropDown.prototype = { initEvents : function () { var obj = this ; Obj.dd .on ("click" , function (event) { $(this ) .toggleClass ("active" ) ; event.stopPropagation () ; } ) ; } } <h3>Пример 3</h3> Перейдем к третьему примеру, в данном случае выбранный пункт будет заменять собой значение по умолчанию. <h3>HTML-разметка</h3> <div id ="dd" class ="wrapper-dropdown-3" tabindex ="1" > <span> Транспорт</span> <ul class ="dropdown" > <li> <a href ="#" > </i> Почта</a> </li> <li> <a href ="#" > </i> UPS доставка</a> </li> <li> <a href ="#" > </i> Частный самолет</a> </li> </ul> </div> Кода не намного больше, чем раньше. Перейдем к CSS! <h3>CSS</h3> Wrapper-dropdown-3 { /* Size and position */ position : relative ; width : 200px ; margin : 0 auto ; padding : 10px ; /* Styles */ background : #fff ; border-radius: 7px ; border : 1px solid rgba(0 , 0 , 0 , 0.15 ) ; box-shadow: 0 1px 1px rgba(50 , 50 , 50 , 0.1 ) ; cursor : pointer ; outline : none ; /* Font settings */ font-weight : bold ; color : #8AA8BD ; } Здесь мы используем границы, тени для блоков и закругленные углы. Нам также нужна маленькая стрелка: .wrapper-dropdown-3 :after { content : "" ; width : 0 ; height : 0 ; position : absolute ; right : 15px ; top : 50% ; margin-top : -3px ; border-width : 6px 6px 0 6px ; border-style : solid ; border-color : #8aa8bd transparent ; } Тут все также, как и раньше, так что не будем описывать код подробно. .wrapper-dropdown-3 .dropdown { /* Size & position */ position : absolute ; top : 140% ; left : 0 ; right : 0 ; /* Styles */ background : white ; border-radius: inherit ; border : 1px solid rgba(0 , 0 , 0 , 0.17 ) ; box-shadow: 0 0 5px rgba(0 , 0 , 0 , 0.1 ) ; font-weight : normal ; transition: all 0.5s ease-in; list-style : none ; /* Hiding */ opacity: 0 ; pointer-events: none ; } .wrapper-dropdown-3 .dropdown li a { display : block ; padding : 10px ; text-decoration : none ; color : #8aa8bd ; border-bottom : 1px solid #e6e8ea ; box-shadow: inset 0 1px 0 rgba(255 , 255 , 255 , 1 ) ; transition: all 0.3s ease-out; } .wrapper-dropdown-3 .dropdown li i { float : right ; color : inherit ; } .wrapper-dropdown-3 .dropdown li:first-of-type a { border-radius: 7px 7px 0 0 ; } .wrapper-dropdown-3 .dropdown li:last-of-type a { border-radius: 0 0 7px 7px ; border : none ; } /* Hover state */ .wrapper-dropdown-3 .dropdown li:hover a { background : #f3f8f8 ; } Все выглядит замечательно, за исключением маленькой стрелки в верхней правой части раскрывающегося списка. Эта стрелка важна: без неё, выпадающий список выглядит как будто он плавает без какой-либо связи с кнопкой. .wrapper-dropdown-3 .dropdown :after { content : "" ; width : 0 ; height : 0 ; position : absolute ; bottom : 100% ; right : 15px ; border-width : 0 6px 6px 6px ; border-style : solid ; border-color : #fff transparent ; } .wrapper-dropdown-3 .dropdown :before { content : "" ; width : 0 ; height : 0 ; position : absolute ; bottom : 100% ; right : 13px ; border-width : 0 8px 8px 8px ; border-style : solid ; border-color : rgba(0 , 0 , 0 , 0.1 ) transparent ; } Мы использовали два псевдо-элемента для этой стрелки, так как мы хотим создать границу вокруг неё. Теперь стили для раскрытого состояния. Все одно и то же. Тем не менее, обратите внимание, что мы установили переход к .dropdown немного дольше, чем обычно (0,5 вместо 0,3 с). Таким образом, открытие меню будет очень гладким. .wrapper-dropdown-3 .active .dropdown { opacity: 1 ; pointer-events: auto ; } <h3>JavaScript</h3> Чтобы закончить этот демо-пример, мы должны добавить немного JavaScript, чтобы заменить значение выбранной кнопки по умолчанию. Мы видели, как это делается в первом примере, но, поскольку мы не оставляем слово "Транспорт" здесь, то JS немного отличается. function DropDown(el) { this.dd = el; this.placeholder = this.dd .children("span" ) ; this.opts = this.dd .find("ul.dropdown > li" ) ; this.val = "" ; this.index = -1 ; this.initEvents() ; } DropDown.prototype = { initEvents : function() { var obj = this; Obj.dd .on("click" , function(event) { $(this) .toggleClass("active" ) ; return false; } ) ; Obj.opts .on("click" , function() { var opt = $(this) ; obj.val = opt.text () ; obj.index = opt.index() ; obj.placeholder .text (obj.val ) ; } ) ; } , getValue : function() { return this.val; } , getIndex : function() { return this.index; } } <h3>Пример 4</h3> Выглядит по-другому, не так ли? Здесь мы создадим список обязательных дел, которые можно отметить и тем самым вычеркнуть. В общем ничего особенного, но этот пример значительно отличается от предыдущих демонстраций. <h3>HTML-разметка</h3> <div id ="dd" class ="wrapper-dropdown-4" > Сделать <ul class ="dropdown" > <li> <input type ="checkbox" id ="el-1" name ="el-1" value ="donut" > <label for ="el-1" > Съесть пирожок</label> </li> <li> <input type ="checkbox" id ="el-2" name ="el-2" value ="neighbour" > <label for ="el-2" > Следить за соседями</label> </li> <li> <input type ="checkbox" id ="el-3" name ="el-3" value ="T-rex" > <label for ="el-3" > Покормить кота</label> </li> </ul> </div> Здесь нибудет ни ссылок, ни значков. Для каждого элемента, у нас есть две тега: чекбокс с лейблом. <h3>CSS</h3> .wrapper-dropdown-4 { /* Size and position */ position : relative ; width : 270px ; margin : 0 auto ; padding : 10px 10px 10px 30px ; /* Styles */ background : #fff ; border : 1px solid silver ; cursor : pointer ; outline : none ; } Мы используем отступ слева, чтобы создать достаточно места для красных линий. Теперь, маленькая стрелка справа: .wrapper-dropdown-4 :after { content : "" ; width : 0 ; height : 0 ; position : absolute ; right : 10px ; top : 50% ; margin-top : -3px ; border-width : 6px 6px 0 6px ; border-style : solid ; border-color : #ffaa9f transparent ; } Стили для выпадающего списка такие же, как и в предыдущих примерах: .wrapper-dropdown-4 .dropdown { /* Size & position */ position : absolute ; top : 100% ; margin-top : 1px ; /* border of wrapper */ left : -1px ; right : -1px ; /* Styles */ background : white ; border : 1px solid silver ; border-top : none ; list-style : none ; transition: all 0.3s ease-out; /* Hiding */ opacity: 0 ; pointer-events: none ; } Мы должны установить margin-top равный 1px, потому что мы должны немного сдвинуть его вниз из-за границы обертки. .wrapper-dropdown-4 .dropdown li { position : relative ; /* Enable absolute positioning for checkboxes */ } .wrapper-dropdown-4 .dropdown li label { display : block ; padding : 10px 10px 10px 30px ; /* Same padding as the button */ border-bottom : 1px dotted #1ccfcf ; transition: all 0.3s ease-out; } .wrapper-dropdown-4 .dropdown li:last-of-type label { border : none ; } .wrapper-dropdown-4 .dropdown li input /* Checkboxes */ { position : absolute ; display : block ; right : 10px ; top : 50% ; margin-top : -8px ; } /* Hover state */ .wrapper-dropdown-4 .dropdown li:hover label { background : #f0f0f0 ; } /* Checked state */ .wrapper-dropdown-4 .dropdown li input: checked ~ label { color : grey; text-decoration : line-through ; } Чекбоксы имеют абсолютное позиционирование и размещены справа по середине на каждой линии, но так как они связаны с лейблами, то вы можете нажать в любом месте пункта, чтобы отметить их. Когда флажок установлен, текст становится серым и перечеркнутым. Просто, но эффективно. У нас есть еще две тонкие красные линии слева в нашей маленькой записной книжке. Есть два способа сделать это: один с псевдо-элементами и один с градиентами. Давайте посмотрим на оба варианта. /* красные линии с псевдо-элементами */ .wrapper-dropdown-4 .dropdown :before , .wrapper-dropdown-4 :before { content : "" ; width : 4px ; height : 100% ; position : absolute ; top : 0 ; left : 15px ; border : 1px solid #ffaa9f ; border-top : none ; border-bottom : none ; z-index : 2 ; } /* Или: */ /* красные линии при помощи градиента */ .wrapper-dropdown-4 .dropdown, .wrapper-dropdown-4 { background : linear-gradient(left , white 5% , #ffaa9f 5% , #ffaa9f 5.3% , white 5.3% , white 6.5% , #ffaa9f 6.5% , #ffaa9f 6.8% , white 6.8% ) ; } .wrapper-dropdown-4 .dropdown li:hover label { background : linear-gradient(left , #f0F0F0 5% , #ffaa9f 5% , #ffaa9f 5.3% , #f0F0F0 5.3% , #f0F0F0 6.5% , #ffaa9f 6.5% , #ffaa9f 6.8% , #f0F0F0 6.8% ) ; } Так какой из этих способов лучше? Вероятно, первый, потому что, если вы хотите изменить эффект при наведении на элементы списка, вы должны изменить градиент, что довольно непросто. Кроме того, псевдо-элементы лучше поддерживаются браузерами (начиная с IE8), в отличии от градиентов (не поддерживаются до IE10). Теперь стили для раскрытого состояния. Ничего нового здесь нет. /* Active state */ .wrapper-dropdown-4 .active :after { border-width : 0 6px 6px 6px ; } .wrapper-dropdown-4 .active .dropdown { opacity: 1 ; pointer-events: auto ; } <h3>JavaScript</h3> function DropDown(el) { this .dd = el; this .opts = this .dd .find ("ul.dropdown > li" ) ; this .val = [ ] ; this .index = [ ] ; this .initEvents () ; } DropDown.prototype = { initEvents : function () { var obj = this ; Obj.dd .on ("click" , function (event) { $(this ) .toggleClass ("active" ) ; event.stopPropagation () ; } ) ; Obj.opts .children ("label" ) .on ("click" , function (event) { var opt = $(this ) .parent () , chbox = opt.children ("input" ) , val = chbox.val () , idx = opt.index () ; ($.inArray (val, obj.val ) !== - 1 ) ? obj.val .splice ( $.inArray (val, obj.val ) , 1 ) : obj.val .push ( val ) ; ($.inArray (idx, obj.index ) !== - 1 ) ? obj.index .splice ( $.inArray (idx, obj.index ) , 1 ) : obj.index .push ( idx ) ; } ) ; } , getValue : function () { return this .val ; } , getIndex : function () { return this .index ; } } <h3>Пример 5</h3> Наш последний пример будет похож на выпадающее меню в некоторых админ-панелях. Для этого мы будем использовать анимацию, когда мы переключаем его. Вместо появления/исчезновения, он будет скользить вверх и вниз. <h3>HTML-разметка</h3> <div id ="dd" class ="wrapper-dropdown-5" tabindex ="1" > Иван Иванов <ul class ="dropdown" > <li> <a href ="#" > class ="icon-user" > </i> Профиль</a> </li> <li> <a href ="#" > class ="icon-cog" > </i> Настройки</a> </li> <li> <a href ="#" > class ="icon-remove" > </i> Выйти</a> </li> </ul> </div> <h3>CSS</h3> .wrapper-dropdown-5 { /* Size & position */ position : relative ; width : 200px ; margin : 0 auto ; padding : 12px 15px ; /* Styles */ background : #fff ; border-radius: 5px ; box-shadow: 0 1px 0 rgba(0 , 0 , 0 , 0.2 ) ; cursor : pointer ; outline : none ; transition: all 0.3s ease-out; } .wrapper-dropdown-5 :after { /* Little arrow */ content : "" ; width : 0 ; height : 0 ; position : absolute ; top : 50% ; right : 15px ; margin-top : -3px ; border-width : 6px 6px 0 6px ; border-style : solid ; border-color : #4cbeff transparent ; } Это основные стили. Теперь перейдем к раскрывающемуся списку, который немного отличается от обычного. .wrapper-dropdown-5 .dropdown { /* Size & position */ position : absolute ; top : 100% ; left : 0 ; right : 0 ; /* Styles */ background : #fff ; border-radius: 0 0 5px 5px ; border : 1px solid rgba(0 , 0 , 0 , 0.2 ) ; border-top : none ; border-bottom : none ; list-style : none ; transition: all 0.3s ease-out; /* Hiding */ max-height : 0 ; overflow : hidden ; } На этот раз мы не изменяли непрозрачность до 0, чтобы скрыть меню. Мы установили max-height равную 0 и overflow: hidden. Почему установили max-height, а не height? Потому что мы не знаем точную высоту раскрытого списка. Простые стили для элементов списка. .wrapper-dropdown-5 .dropdown li { padding : 0 10px ; } .wrapper-dropdown-5 .dropdown li a { display : block ; text-decoration : none ; color : #333 ; padding : 10px 0 ; transition: all 0.3s ease-out; border-bottom : 1px solid #e6e8ea ; } .wrapper-dropdown-5 .dropdown li:last-of-type a { border : none ; } .wrapper-dropdown-5 .dropdown li i { margin-right : 5px ; color : inherit ; vertical-align : middle ; } /* Hover state */ .wrapper-dropdown-5 .dropdown li:hover a { color : #57a9d9 ; } А теперь, в активном состоянии: /* Active state */ .wrapper-dropdown-5 .active { border-radius: 5px 5px 0 0 ; background : #4cbeff ; box-shadow: none ; border-bottom : none ; color : white ; } .wrapper-dropdown-5 .active :after { border-color : #82d1ff transparent ; } .wrapper-dropdown-5 .active .dropdown { border-bottom : 1px solid rgba(0 , 0 , 0 , 0.2 ) ; max-height : 400px ; } Когда выпадающий список открыт, мы меняем нижние углы кнопки, ее цвет, направление стрелки и цвет стрелки и удаляем её тень и границы. И, чтобы показать меню, мы устанавливаем max-height выпадающего списка равную 400 пикселей. Мы могли бы установить её равную 500px или 1000px, это не имеет значения. <h3>JavaScript</h3> function DropDown(el) { this .dd = el; this .initEvents () ; } DropDown.prototype = { initEvents : function () { var obj = this ; Obj.dd .on ("click" , function (event) { $(this ) .toggleClass ("active" ) ; event.stopPropagation () ; } ) ; } } <h3>Обратная совместимость</h3> Итак, теперь у нас есть 5 раскрывающихся списков, которые замечательно работают, но как насчет старых браузеров? Эти браузеры не понимают, например, свойство opacity. В этом нам поможет библиотека Modernizr . Грубо говоря, для тех, кто не знает, Modernizr это библиотека JavaScript, которая обнаруживает поддерживаемые HTML5 и CSS3 свойства в браузер пользователя. Благодаря этому, мы можем "указать" браузеру, если вы не поддерживаете *это* свойство, то делайте следующее. Ниже приведен пример того, как мы можем управлять стилями для браузеров, которые не поддерживают определенные свойства CSS: /* Нет поддержки CSS3 */ .no-opacity .wrapper-dropdown-1 .dropdown, .no-pointerevents .wrapper-dropdown-1 .dropdown { display : none ; opacity: 1 ; /* If opacity support but no pointer-events support */ pointer-events: auto ; /* If pointer-events support but no pointer-events support */ } .no-opacity .wrapper-dropdown-1 .active .dropdown, .no-pointerevents .wrapper-dropdown-1 .active .dropdown { display : block ; } Если браузер не поддерживает opacity или pointer-events, то используется свойство display: block;. Ну и так далее. Заключение. Я надеюсь, что эта статья помогла вам понять, как создавать пользовательские раскрывающиеся меню. Как вы можете видеть, это довольно просто. <h3>Демонстрация</h3>Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом Тег option HTML используется для создания выпадающего списка, с помощью которого пользователь может выбрать один вариант из заранее определенного набора значений. Текст, видимый пользователю, может отличаться от текста, указанного в атрибуте value . Вот, как можно создать выпадающий список: <select id="selectID"> <option value=”GR”>Green</option> <option value=”YE”>Yellow</option> <option value=”BL”>Black</option> </select> <ul><li>Выпадающий список создается с помощью тега <select>;</li> <li>Внутри тега <select> определяются варианты для выбора с помощью тега <option>;</li> <li>В теге <option> можно использовать атрибут value , чтобы получить доступ к выбранному варианту с помощью PHP , JS , Jquery и т.д.</li> </ul>Также можно задать класс CSS вместо того, чтобы использовать идентификатор для определения стиля выпадающего списка. В следующем разделе я покажу примеры использования выпадающего списка HTML в JavaScript / JQuery . В примерах также будет показано, как задавать стили <select> с помощью CSS / CSS3 и фреймворка Bootstrap . <h2>Пример создания простого выпадающего списка</h2> В этом примере HTML select option используется для создания выпадающего списка с тремя вариантами на выбор: В приведенном выше примере для создания выпадающего списка используется следующая разметка: <select id="selectvalue"> <option>5</option> <option>10</option> <option>15</option> <option>20</option> <option>25</option> </select> <h3>Использование атрибута value</h3> Как упоминалось ранее, значение атрибута value может отличаться от текста, выводимого на странице. Например, можно вывести для пользователей названия стран или цветов, а в атрибуте value использовать шорткоды. В следующем примере мы создадим выпадающий список с атрибутом value : Посмотреть онлайн демо-версию и код Для тега <select> используется следующий код: <select id="selecttheme"> <option value="Mar">Maroon</option> <option value="Gre">Green</option> <option value="Yel">Yellow</option> <option value="Blu">Blue</option> <option value="Red">Red</option> </select> <h3>Пример получения доступа к выбранному варианту в JavaScript</h3> Теперь создадим пример получения доступа к значению выбранного варианта и выполнения некоторых действий. Тот же список, что и в приведенном выше примере, мы создаем с вариантами выбора цвета. После выбора нажмите кнопку, чтобы применить этот цвет к документу: Посмотреть онлайн демо-версию и код Для option value HTML используется следующий код: <select id="selcolor"> <option value="Maroon">Maroon</option> <option value="Green">Green</option> <option value="Yellow">Yellow</option> <option value="Blue">Blue</option> <option value="Red">Red</option> <option value="White">Other</option> </select> Следующая строка кода используется в JavaScript , чтобы получить доступ к значению атрибута value варианта <select>: var seltheme = document.getElementById(“selcolor”).value; При нажатии кнопки вызывается функция JS , которая присваивает выбранное в выпадающем списке значение переменной. Это значение используется для применения цвета к текущему документу. <h3>Получение доступа к видимому тексту в JQuery</h3> На этот раз я буду использовать JQuery , чтобы получить доступ к значению выбранного варианта: как к тексту, так и к value . В этой демо-версии я буду получать доступ к видимому тексту в теге option в HTML : Посмотреть онлайн демо-версию и код В коде для каждого варианта в теге <select> значение отличается от текста. После того, как вы выберете цвет, jQuery отображает видимый текст в предупреждении. Код тега <select> следующий: <select id="jqueryselect"> <option value="MAR">Maroon</option> <option value="GRE">Green</option> <option value="YEL">Yellow</option> <option value="BLU">Blue</option> <option value="RED">Red</option> </select> Вот как обеспечивается доступ к этому значению в HTML select option selected JavaScript : var selectedcolor = $("#jqueryselect option:selected").text(); Также можно получить доступ к значению с помощью JQuery-метода $.val() : var selectedcolor = $("#jqueryselect").val(); Замените эту строку в приведенном выше примере, и код будет отображать шорткод / значение цвета в атрибуте value , а не видимый текст. <h3>Пример получения значения в скрипте PHP</h3> В этом примере получения значения выбранного из выпадающего списка варианта форма создается с помощью тега <select> в разделе разметки. После выбора цвета из выпадающего списка нажмите на кнопку “Submit ”. Данные формы будут передаваться в тот же PHP-файл , после чего отобразится выбранный цвет: Посмотреть онлайн демо-версию и код Метод формы, используемый в примере — POST , поэтому можно получить значения формы с помощью массива PHP $_POST[“”] . Это код формы, используемый в примере: <form action="" method="post"> <div class="seldemo"> <label>Select A Color: </label> <select name="selphp"> <option value="Maroon">Maroon</option> <option value="Green">Green</option> <option value="Yellow">Yellow</option> <option value="Blue">Blue</option> <option value="Red">Red</option> </select> <input type="submit" value="Submit" class="btncls"> </div> </form> А вот как PHP-скрипт используется, чтобы получить значение HTML select option : <?php if($_POST["selphp"] != "") { echo "You selected the following color:". $_POST["selphp"].""; } ?> Если в форме указан метод GET , тогда используйте PHP-массив $_GET[“”] . <h3>Определение стилей выпадающего списка с помощью CSS</h3> Теперь рассмотрим, как определить стили выпадающего списка <select>, используя возможности CSS . В следующей демо-версии я использовал несколько простых свойств CSS и свойства градиента CSS3 : Посмотреть онлайн демо-версию и код Вместе с linear-gradient здесь использовано свойство box-shadow . Полный код CSS выглядит следующим образом: Selcls { padding: 3px; border: solid 1px #517B97; outline: 0; background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #CAD9E3), to(#FFFFFF)); background: -moz-linear-gradient(top, #FFFFFF, #CAD9E3 1px, #FFFFFF 25px); box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; width:150px; } <h3>Закругленные углы с помощью свойства border-radius</h3> Для HTML select option мы зададим свойство CSS3 border-radius , чтобы сделать закругленные углы. Цветовая гамма также изменяется. Вы можете экспериментировать с рамками, шириной, полями и другими свойствами, как захотите: Посмотреть онлайн демо-версию и код <h3>Использование нескольких атрибутов и стилей CSS</h3> Чтобы дать пользователям возможность выбирать из списка несколько вариантов, нужно использовать атрибут multiple . В приведенном выше примере может быть выбран только один вариант. При использовании multiple можно выбрать несколько вариантов, нажав клавишу CTRL : Посмотреть онлайн демо-версию и код <h3>Использование фреймворка Bootstrap и плагинов для создания красивых выпадающих списков</h3> Если вы используете фреймворк Bootstrap , то у вас есть возможность применять плагины для создания крутых option HTML . За последние два года, разработка веб-приложений (сайтов) продвинулась далеко вперед и то, что мы использовали для создания сайта ранее — уже устарело или появились более свежие методы. Ранее, чтобы создать выпадающий список в html (на англ. — dropdown ), мы просто использовали <select> и <option>. Факт в том, что мы и сейчас может его использовать, но зачастую нам нужно менять стили и адаптировать цветовую гамму выпадающего списка под стиль дизайна. К сожалению, не всегда получается стилизовать так как хочется, потому что select и option имеют свои ограничения и плохую поддержку кроссбраузерности. Специально для этой статьи, я нашел 16 разных примеров, которые могут пригодиться во время разработки сайта. И так приступим. <h1>1. Настраиваемый список</h1> Html шаблон, который позволяет настроить собственные цвета на выпадающего списка. <h1>2. Сделанный на CSS3/JavaScript</h1> Написан на CSS3 и JavaScript. Обычный выпадающий список. <img src='https://i0.wp.com/bologer.ru/wp-content/uploads/2015/08/dropdown.jpg' width="100%" loading=lazy> <h1>3. Стиль: станции метро</h1> Прозрачный выпадающий список со стилистикой станций метро. <img src='https://i2.wp.com/bologer.ru/wp-content/uploads/2015/08/tinydrop.jpg' width="100%" loading=lazy> <h1>4. Dropy. Написанное на SCSS & jQuery</h1> <img src='https://i0.wp.com/bologer.ru/wp-content/uploads/2015/08/dropy-scss-dropdown.jpg' width="100%" loading=lazy> <h1>5. Для длинных выдающих списков</h1> Отличное решение для длинных выпадающих меню. <img src='https://i1.wp.com/bologer.ru/wp-content/uploads/2015/08/long-dropdown.jpg' width="100%" loading=lazy> <h1></h1> Выпадающее меню, которое написано на чисто CSS без использования каких-либо скриптов. <img src='https://i1.wp.com/bologer.ru/wp-content/uploads/2015/08/pure-css-dropdown.jpg' width="100%" loading=lazy> <h1></h1> Отлично подойдет для боковых меню на сайте, чтобы визуально показать категории на сайте. <img src='https://i1.wp.com/bologer.ru/wp-content/uploads/2015/08/unfold-effect.jpg' width="100%" loading=lazy> <h1>8. Стильное меню настроек пользователя</h1> <img src='https://i1.wp.com/bologer.ru/wp-content/uploads/2015/08/stylish-css-dropdown.jpg' width="100%" loading=lazy> <h1>9. CSS3 выпадающий список</h1> <img src='https://i2.wp.com/bologer.ru/wp-content/uploads/2015/08/CSS3-Dropdown-Menu.jpg' height="201" width="286" loading=lazy> <h1></h1> Сделано в стиле UI, подойдет под UI стилистику сайта. <img src='https://i0.wp.com/bologer.ru/wp-content/uploads/2015/08/dropdown-menu-ui.jpg' width="100%" loading=lazy> <h1></h1> <img src='https://i0.wp.com/bologer.ru/wp-content/uploads/2015/08/simple-dropdown.jpg' width="100%" loading=lazy> <h1>12. Выбор флага</h1> Dropdown в стиле выбора страны. <img src='https://i2.wp.com/bologer.ru/wp-content/uploads/2015/08/countryflag.jpg' width="100%" loading=lazy> <h1>13. Обычный HTML, CSS dropdown</h1> <img src='https://i1.wp.com/bologer.ru/wp-content/uploads/2015/08/dropdown1.jpg' width="100%" loading=lazy>Надеюсь вам понравилось моя подборка. Оставляйте комментарии, делитесь мнением и присылайте собственные работы! <blockquote>Как сделать выпадающий список в html (подборка ТОП 16) от bologer </blockquote> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> </div> </article> </div> <ul class="default-wp-page clearfix"> <li class="previous"><a href="/kak-raspechatat-dopolnitelnyi-cennik-v-1s-8-nastroiki-pechati.html" rel="prev">Настройки печати ценников номенклатуры Дорогие друзья, печать...</a></li>  <li class="next"><a href="/top-ekshen-igr-na-android-top-ekshen-igr-na-android-skachat-igry-na.html" rel="next">Топ экшен игр на андроид Скачать игры на андроид экшен шутер →</a></li>  </ul> </div> <div id="secondary"> <aside id="colormag_300x250_advertisement_widget-3" class="widget widget_300x250_advertisement clearfix"> </aside> <aside id="colormag_featured_posts_vertical_widget-5" class="widget widget_featured_posts widget_featured_posts_vertical widget_featured_meta clearfix"> <h3 class="widget-title" style="border-bottom-color:#99c24d;">Популярное</h3> <div class="first-post"> </div> <div class="following-post"> <div class="single-article clearfix"> <figure><a href="/skachat-pauk-russkii-yazyk-pasyans-na-android.html" title="Скачать паук русский язык пасьянс на андроид"><img width="130" height="90" src="/uploads/e4f50e3f806eba1f6c086eed939b7ce2.jpg" class="attachment-colormag-featured-post-small size-colormag-featured-post-small wp-post-image" alt="Скачать паук русский язык пасьянс на андроид" title="Скачать паук русский язык пасьянс на андроид" sizes="(max-width: 130px) 100vw, 130px" / loading=lazy></a></figure> <div class="article-content"> <div class="above-entry-meta"> <a href="/category/anonymity/" style="background:#048ba8" rel="category tag">Анонимность</a> </div> <h3 class="entry-title"> <a href="/skachat-pauk-russkii-yazyk-pasyans-na-android.html" title="Скачать паук русский язык пасьянс на андроид">Скачать паук русский язык пасьянс на андроид</a> </h3> </div> </div> <div class="single-article clearfix"> <figure><a href="/kompyutery-sun-microsystems-kompaniya-sun-microsystems-sliyanie-s.html" title="Компания Sun Microsystems"><img width="130" height="90" src="/uploads/8117b5fdc4261e46b63a733c36c42cc0.jpg" class="attachment-colormag-featured-post-small size-colormag-featured-post-small wp-post-image" alt="Компания Sun Microsystems" title="Компания Sun Microsystems" sizes="(max-width: 130px) 100vw, 130px" / loading=lazy></a></figure> <div class="article-content"> <div class="above-entry-meta"> <a href="/category/services/" style="background:#048ba8" rel="category tag">Сервисы</a> </div> <h3 class="entry-title"> <a href="/kompyutery-sun-microsystems-kompaniya-sun-microsystems-sliyanie-s.html" title="Компания Sun Microsystems">Компания Sun Microsystems</a> </h3> </div> </div> <div class="single-article clearfix"> <figure><a href="/internet-1000-mbit-podvodnye-kamni-vysokoskorostnyh-tarifov.html" title="Подводные камни высокоскоростных тарифов интернет-провайдеров"><img width="130" height="90" src="/uploads/d6cbd635c6547bb5635b4d4afdfb7871.jpg" class="attachment-colormag-featured-post-small size-colormag-featured-post-small wp-post-image" alt="Подводные камни высокоскоростных тарифов интернет-провайдеров" title="Подводные камни высокоскоростных тарифов интернет-провайдеров" sizes="(max-width: 130px) 100vw, 130px" / loading=lazy></a></figure> <div class="article-content"> <div class="above-entry-meta"> <a href="/category/graphics/" style="background:#048ba8" rel="category tag">Графика</a> </div> <h3 class="entry-title"> <a href="/internet-1000-mbit-podvodnye-kamni-vysokoskorostnyh-tarifov.html" title="Подводные камни высокоскоростных тарифов интернет-провайдеров">Подводные камни высокоскоростных тарифов интернет-провайдеров</a> </h3> </div> </div> <div class="single-article clearfix"> <figure><a href="/pover-bank-ploho-zaryazhaetsya-chto-delat-esli-power-bank-ne-do-konca-zaryazhaet.html" title="Что делать если Power bank не до конца заряжает аккумулятор смартфона или планшета"><img width="130" height="90" src="/uploads/dfe42b1b6e7f35b065b43cfabd552b54.jpg" class="attachment-colormag-featured-post-small size-colormag-featured-post-small wp-post-image" alt="Что делать если Power bank не до конца заряжает аккумулятор смартфона или планшета" title="Что делать если Power bank не до конца заряжает аккумулятор смартфона или планшета" sizes="(max-width: 130px) 100vw, 130px" / loading=lazy></a></figure> <div class="article-content"> <div class="above-entry-meta"> <a href="/category/education/" style="background:#048ba8" rel="category tag">Образование</a> </div> <h3 class="entry-title"> <a href="/pover-bank-ploho-zaryazhaetsya-chto-delat-esli-power-bank-ne-do-konca-zaryazhaet.html" title="Что делать если Power bank не до конца заряжает аккумулятор смартфона или планшета">Что делать если Power bank не до конца заряжает аккумулятор смартфона или планшета</a> </h3> </div> </div> <div class="single-article clearfix"> <figure><a href="/kak-nazyvaetsya-znachok-end-kak-nazyvaetsya-znak-znaki-na-klaviature.html" title="Как называется значок энд"><img width="130" height="90" src="/uploads/1b925dfa43a4aeac54a38c6f2ee84711.jpg" class="attachment-colormag-featured-post-small size-colormag-featured-post-small wp-post-image" alt="Как называется значок энд" title="Как называется значок энд" sizes="(max-width: 130px) 100vw, 130px" / loading=lazy></a></figure> <div class="article-content"> <div class="above-entry-meta"> <a href="/category/education/" style="background:#048ba8" rel="category tag">Образование</a> </div> <h3 class="entry-title"> <a href="/kak-nazyvaetsya-znachok-end-kak-nazyvaetsya-znak-znaki-na-klaviature.html" title="Как называется значок энд">Как называется значок энд</a> </h3> </div> </div> <div class="single-article clearfix"> <figure><a href="/kakie-formaty-filmov-i-elektronnyh-knig-podderzhivayut-planshety-android.html" title="Какой формат электронных книг лучше выбрать для смартфона?"><img width="130" height="90" src="/uploads/9a417e1a374f2753861157ba41517768.jpg" class="attachment-colormag-featured-post-small size-colormag-featured-post-small wp-post-image" alt="Какой формат электронных книг лучше выбрать для смартфона?" title="Какой формат электронных книг лучше выбрать для смартфона?" sizes="(max-width: 130px) 100vw, 130px" / loading=lazy></a></figure> <div class="article-content"> <div class="above-entry-meta"> <a href="/category/graphics/" style="background:#048ba8" rel="category tag">Графика</a> </div> <h3 class="entry-title"> <a href="/kakie-formaty-filmov-i-elektronnyh-knig-podderzhivayut-planshety-android.html" title="Какой формат электронных книг лучше выбрать для смартфона?">Какой формат электронных книг лучше выбрать для смартфона?</a> </h3> </div> </div> <div class="single-article clearfix"> <figure><a href="/kody-dlya-gta-san-andreas-kod-na-dzhetpak-v-gta-san-andreas-ili-reaktivnyi-ryukzak-gta-sa.html" title="Код на джетпак в гта сан андреас или реактивный рюкзак GTA SA коды на характеристики персонажа"><img width="130" height="90" src="/uploads/7b5d034ce8a6275c67ae8b8de5c7c840.jpg" class="attachment-colormag-featured-post-small size-colormag-featured-post-small wp-post-image" alt="Код на джетпак в гта сан андреас или реактивный рюкзак GTA SA коды на характеристики персонажа" title="Код на джетпак в гта сан андреас или реактивный рюкзак GTA SA коды на характеристики персонажа" sizes="(max-width: 130px) 100vw, 130px" / loading=lazy></a></figure> <div class="article-content"> <div class="above-entry-meta"> <a href="/category/multimedia/" style="background:#048ba8" rel="category tag">Мультимедиа</a> </div> <h3 class="entry-title"> <a href="/kody-dlya-gta-san-andreas-kod-na-dzhetpak-v-gta-san-andreas-ili-reaktivnyi-ryukzak-gta-sa.html" title="Код на джетпак в гта сан андреас или реактивный рюкзак GTA SA коды на характеристики персонажа">Код на джетпак в гта сан андреас или реактивный рюкзак GTA SA коды на характеристики персонажа</a> </h3> </div> </div> <div class="single-article clearfix"> <figure><a href="/igra-dark-souls-3-sistemnye-trebovaniya-svobodnoe-mesto-na-zhestkom-diske.html" title="Свободное место на жестком диске"><img width="130" height="90" src="/uploads/ec473852f59f44167452fe7979425800.jpg" class="attachment-colormag-featured-post-small size-colormag-featured-post-small wp-post-image" alt="Свободное место на жестком диске" title="Свободное место на жестком диске" sizes="(max-width: 130px) 100vw, 130px" / loading=lazy></a></figure> <div class="article-content"> <div class="above-entry-meta"> <a href="/category/multimedia/" style="background:#048ba8" rel="category tag">Мультимедиа</a> </div> <h3 class="entry-title"> <a href="/igra-dark-souls-3-sistemnye-trebovaniya-svobodnoe-mesto-na-zhestkom-diske.html" title="Свободное место на жестком диске">Свободное место на жестком диске</a> </h3> </div> </div> </div> </aside> <aside id="colormag_300x250_advertisement_widget-5" class="widget widget_300x250_advertisement clearfix"> <div class="advertisement_300x250"> <div class="advertisement-content"> </div> </div> </aside> </div> </div> </div> <footer id="colophon" class="clearfix"> <div class="footer-widgets-wrapper"> <div class="inner-wrap"> <div class="footer-widgets-area clearfix"> <div class="tg-footer-main-widget"> <div class="tg-first-footer-widget"> <aside id="fbw_id-3" class="widget widget_fbw_id clearfix"> <img src="/public/logo.svg?3" loading=lazy> ©2024 invamagazin.ru - Компьютерный интернет журнал </aside> </div> </div> <div class="tg-footer-other-widgets"> <div class="tg-second-footer-widget"> <aside id="text-12" class="widget widget_text clearfix"> <h3 class="widget-title">invamagazin.ru</h3> <div class="textwidget"> Компьютерный интернет журнал </div> </aside> </div> <div class="tg-fourth-footer-widget"> <aside id="text-14" class="widget widget_text clearfix"> <h3 class="widget-title">КОНТАКТЫ</h3> <div class="textwidget"> <ul> <li><a href="">О сайте</a></li> <li><a href="/feedback.html">Контакты</a></li> <li><a href="">Реклама</a></li> </ul> </div> </aside> </div> </div> </div> </div> </div> <div class="footer-socket-wrapper clearfix"> </div> </footer> <a href="#masthead" id="scroll-up"></a> </div> <script type='text/javascript' src='/wp-content/themes/colormag/js/jquery.bxslider.min.js?ver=4.1.2'></script> <script type='text/javascript' src='/wp-content/themes/colormag/js/colormag-slider-setting.js?ver=4.6.9'></script> <script type='text/javascript' src='/wp-content/themes/colormag/js/navigation.js?ver=4.6.9'></script> <script type='text/javascript' src='/wp-content/themes/colormag/js/news-ticker/jquery.newsTicker.min.js?ver=1.0.0'></script> <script type='text/javascript' src='/wp-content/themes/colormag/js/news-ticker/ticker-setting.js?ver=20150304'></script> <script type='text/javascript' src='/wp-content/themes/colormag/js/fitvids/jquery.fitvids.js?ver=20150311'></script> <script type='text/javascript' src='/wp-content/themes/colormag/js/fitvids/fitvids-setting.js?ver=20150311'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.6.9'></script> </body> </html>