Как сделать выпадающий список в html при наведении: Выпадающее меню на CSS3

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

Пример можно увидеть здесь:

Посмотреть примерСкачать

HTML часть

Помните как создается обычный список HTML? Он состоит из тегов <select> и <option>:

1
2
3
4
5

<select>
    <option></option>
    <option></option>
    <option></option>
</select>

Но сейчас нам необходимо обычный список сделать из элементов <span> и <div>:

1
2
3
4
5
6
7
8
9

<div>
    <span></span>
    <span>▼</span>
    <div >
        <span value="Option 1">Элемент 1</span>
        <span value="Option 2">Элемент 2</span>
        <span value="Option 3">Элемент 3</span>
    </div>
</div>

CSS часть

Сейчас с помощью стилей придадим вид нашему списку:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

div. selectBox {
    position:relative;
    display:inline-block;
    cursor:default;
    text-align:left;
    line-height:30px;
    clear:both;
    color:#888;
}
span.selected {
    width:167px;
    text-indent:20px;
    border:1px solid #ccc;
    border-right:none;
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
    background:#f6f6f6;
    overflow:hidden;
}
span.selectArrow {
    width:30px;
    border:1px solid #60abf8;
    border-top-right-radius:5px;
    border-bottom-right-radius:5px;
    text-align:center;
    font-size:20px;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    background:	#4096ee;
    color:#fff;
}
 
span.selectArrow,span.selected {
    position:relative;
    float:left;
    height:30px;
    z-index:1;
}
 
div.selectOptions {
    position:absolute;
    top:28px;
    left:0;
    width:198px;
    border:1px solid #ccc;
    border-bottom-right-radius:5px;
    border-bottom-left-radius:5px;
    overflow:hidden;
    background:#f6f6f6;
    padding-top:2px;
    display:none;
}
 
span.


 selectOption {
    display:block;
    width:80%;
    line-height:20px;
    padding:5px 10%;
}
 
span.selectOption:hover {
    color:#f6f6f6;
    background:#4096ee;	
}

jQuery часть

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

1
2
3

$(document).ready(function() {
    enableSelectBoxes();
});

А реализация данной функции находится ниже:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

function enableSelectBoxes(){
    $('div.selectBox').each(function(){
        $(this).children('span.selected').html($(this).children('div.selectOptions').children('span.selectOption:first').html());
        $(this).attr('value',$(this).children('div.selectOptions').children('span.selectOption:first').attr('value'));
 
        $(this).

 children('span.selected,span.selectArrow').click(function(){
            if($(this).parent().children('div.selectOptions').css('display') == 'none')
            {
                $(this).parent().children('div.selectOptions').css('display','block');
            }
            else
            {
                $(this).parent().children('div.selectOptions').css('display','none');
            }
        });
 
        $(this).find('span.selectOption').click(function(){
            $(this).parent().css('display','none');
            $(this).closest('div.selectBox').attr('value',$(this).attr('value'));
            $(this).parent().siblings('span.selected').html($(this).html());
        });
    });				
}

Вывод

Моё личное мнение: на вашем сайте должно быть всё уникальным, даже input-ы и выпадающие списки. Конечно вы можете со мной не согласиться, но это и делает сайт немного особенным.

Успехов!

Источник: http://www.onextrapixel.com/2012/06/20/create-a-custom-select-box-with-jquery/

Как сделать выпадающий список в HTML

Простейший выпадающий список в HTML легко создать, используя тег select. Это тег-контейнер, в него вкладываются теги option – именно они задают элементы списка.

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

Изменять внешний вид и свойства списков можно с помощью универсальных и специальных атрибутов.

Атрибуты тега select

1. Multiple – задает множественный выбор.

2. Size – задает количество видимых строк в списке, то есть высоту. И тут все зависит от того, присутствует атрибут multiple или нет. Если да, и вы не указываете size, то при наличии multiple пользователь увидит все возможные варианты выбора, если же multiple отсутствует, то показана будет всего одна строчка, а остальные посетитель сможет прочитать, когда нажмет на значок лифта с правой стороны. Если же высота size задана и она меньше количества вариантов, то справа появится полоса прокрутки.

3. Name – имя. Выпадающий список может обойтись и без него, но оно может быть необходимым для взаимодействия с программой-обработчиком на сервере. Как правило, имя все-таки указывают.

Тег select не имеет обязательных атрибутов в отличие от тега option.

Атрибуты вложенного тега option

1. Selected – предназначен для выделения пункта списка. Пользователь сможет выделять более одного пункта, если задан атрибут multiple (см. выше).
2. Value – значение. Этот атрибут обязателен. Веб-сервер должен понимать, какие именно пункты списка выбрал пользователь.
3. Label. С помощью этого атрибута можно сокращать слишком длинные элементы списков. Например, на экран будет выводиться «Милан», вместо указанного в теге option «Милан — административный центр Ломбардии. Северная Италия». Этот атрибут также используется для группировки пунктов в списке.

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

Выпадающий список другими способами

Его можно сделать при помощи CSS, например, список будет появляться при наведении курсора на элемент страницы. Отличные возможности для создания списков предоставляет JavaScript , работу которого упрощает библиотека Jquery. Выпадающий список, подключенный с помощью этой библиотеки, может быть очень сложным, например, каскадным. То есть при выборе элемента в одном списке появляется следующий список, например, существует пункт меню «Женская одежда» (при наведении выпадают виды одежды), затем при выборе одного из видов, например, «Верхняя одежда», выпадает список с элементами: куртки, парки, пальто, полупальто, шубы и т. п.

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

Плавно открывающееся меню с помощью CSS

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

Первым делом, давайте напишем HTML код нашего меню. Меню будет простейшим. Для примера у него будет 2 пункта у каждого из которых будет выпадающий список с подпунктами.

<nav>
	<ul>
		<li>
		<a href="#">пункт 1</a>
			<ul>
				<li><a href="#">Выпадающий пункт 1</a></li>
				<li><a href="#">Выпадающий пункт 2</a></li>
				<li><a href="#">Выпадающий пункт 3</a></li>
			</ul>
		</li>
		<li>
		<a href="#">пункт 2</a>
			<ul>
				<li><a href="#">Выпадающий пункт 1</a></li>
				<li><a href="#">Выпадающий пункт 2</a></li>
				<li><a href="#">Выпадающий пункт 3</a></li>
			</ul>
		</li>

	</ul>
</nav>

Думаю тут все понятно, самое простое 2-х уровневое меню. Как и говорил, меню имеет два главных пункта, можете добавить сколько угодно, если нужно. Дальше нужно просто добавить стили, которые и сделают всю магию 🙂

#slow_nav > ul{
	width: 500px;
	margin:25px auto 0;
}

#slow_nav > ul > li{
	list-style: none;
	display: inline-block;
	position:relative;
	padding:0;
}

#slow_nav a{text-decoration:none;}

#slow_nav > ul > li > a{
	font-size:18px;
	padding:5px;
	background-color:#333;
	color:#fff;
}

#slow_nav li ul{
	position:absolute;
	list-style:none;
	text-align:center;
	top:15px;
	font-size:15px;
	left:0;
	margin:0;
	padding:0;

/* Данные строки нужны для правильной работы анимации */
	max-height:0px;
	overflow:hidden;
	-webkit-transition:max-height 0.4s linear;
	-moz-transition:max-height 0.4s linear;
	transition:max-height 0. 4s linear;
/* конец */
}

#slow_nav li:hover ul{
	max-height:300px;
}

#slow_nav li ul li{
	background-color:#333;
	border-bottom:1px solid #888;
}

#slow_nav li ul li:last-child{
	border-bottom:none;
}

#slow_nav li ul li a{
	padding:5px 12px;
	color:#fff;
	display:block;
}

#slow_nav li ul li:hover{
	background-color:#444;
}

#slow_nav li ul li:first-child{
	margin-top:25px;
	position:relative;
}

#slow_nav li ul li:first-child:before{
	content:'';
	position:absolute;
	width:1px;
	height:1px;
	border:5px solid transparent;
	border-bottom-color:#333;
	left:10px;
	top:-10px;
}

Код CSS не маленький., но по своей сути не сложный. Если Вы владеете навыками верстки, то запросто разберетесь что и как. Я лишь остановлюсь на некоторых моментах, которые являются важными.

max-height:0px; и прописываем свойство overflow:hidden;, чтобы скрыть наше дочернее меню, то есть выпадающее. Дальше уже прописываем кроссбраузерное свойство transition, которое совершит анимацию.

-webkit-transition:max-height 0.4s linear;
-moz-transition:max-height 0.4s linear;
transition:max-height 0.4s linear;

Тут можете изменить разве что время анимации. В данный момент время задано 0.4 секунды. Сразу после того как задали анимацию, добавлено свойство , для задания новой высоты при наведении на главные пункты меню:

#slow_nav li:hover ul{
	max-height:300px;
}

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

Далее уже задаем стили для выпадающего меню, так что на них подробно останавливаться не буду. Ту как бы и все. Это и есть весь способ. Он простой и действенный и справляется со своей задачей на все 100%.

Данный способ можно применять не только к самописным меню но и к тем же динамическим меню, которые создаются системами управления сайтом, например WordPress. Для этого нужно немного подправить стили и все. То есть первый HTML код использовать не нужно, только стили. В стилях нужно заменить имя айди #slow_nav на то что будет у Вас, ну и возможно подправить еще что-то по мелочам. Подробно останавливаться не буду. Для каждого случая нужен персональный подход, так что уж извините 🙂 Я дал идею и способ, а Вам решать, применять его или нет.

На этом все, спасибо за внимание. 🙂

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

Тема: HTML / CSSPrev | След.

Ответ: Используйте CSS : hover псевдокласс

Если вы просто хотите показывать и скрывать раскрывающееся меню при наведении курсора мыши, вам не нужен JavaScript. Вы можете сделать это, просто используя свойство CSS display и псевдокласс : hover .

В следующем примере показано, как реализовать простое раскрывающееся меню с помощью CSS.

  




<стиль>
    ul {
        отступ: 0;
        стиль списка: нет;
        фон: # f2f2f2;
    }
    ul li {
        дисплей: встроенный блок;
        положение: относительное;
        высота строки: 21px;
        выравнивание текста: слева;
    }
    ul li a {
        дисплей: блок;
        отступ: 8px 25px;
        цвет: # 333;
        текстовое оформление: нет;
    }
    ul li a: hover {
        цвет: #fff;
        фон: # 939393;
    }
    ul li ul. падать {
        минимальная ширина: 100%; / * Устанавливаем ширину раскрывающегося списка * /
        фон: # f2f2f2;
        дисплей: нет;
        позиция: абсолютная;
        z-индекс: 999;
        слева: 0;
    }
    ul li: hover ul.dropdown {
        дисплей: блок; / * Показать раскрывающийся список * /
    }
    ul li ul.dropdown li {
        дисплей: блок;
    }



    

        
  На главную  
        
  О компании  
        

             Продукты ▾ 
            

                
  Ноутбуки  
                
  Мониторы  
                
  Принтеры  
            
        
        
  Связаться  
    

  

Связанные часто задаваемые вопросы

Вот еще несколько часто задаваемых вопросов по этой теме:

раскрывающихся списков CSS | HTML Собака

Прежде чем начать, подумайте, является ли применение раскрывающихся списков к вашему сайту самым разумным решением. Хотя скрытие основной части вашей навигации может сделать дизайн более чистым, оно добавляет дополнительный уровень сложности для пользователя, чтобы получить доступ к этим скрытым ссылкам. Для большинства это не будет серьезной проблемой, но будет для тех, кто не использует или не может использовать указывающее устройство, такое как мышь. Это может относиться к людям с двигательными или зрительными нарушениями или к тем, кто использует мобильные устройства с сенсорным экраном.Вам следует, по крайней мере, подумать о том, как позволить этим пользователям перемещаться (см. Пункты об использовании ссылок ниже). Если вы решили использовать раскрывающиеся списки, давайте продвинемся вперед и применим их наилучшим образом…

Новый раздел примеров! Посмотрите на весь этот код в действии и поиграйте с ним.

HTML: красиво вложенные списки

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

 

    

         Птицы 
        

            
  Ratites  
            
  Мясо птицы  
            
  Неоавы  
        
    
    

         Млекопитающие 
        

            
  Монотремы  
            
  Сумчатые  
            
  Плаценты  
        
    
    

  

Итак, у нас есть «Птицы» и «Млекопитающие» как предметы верхнего уровня, а «Ratites», «Monotremes» и так далее как предметы второго уровня, подкатегории.

Воспользуйтесь ссылками. Всегда используйте ссылки. Если вас больше всего беспокоят подкатегории (например, «Ratites» и «Monotremes»), подумайте, по крайней мере, о наличии ссылок на основные элементы (например, «Птицы» и «Млекопитающие») на страницу со стандартной навигацией. на страницы подкатегорий. Основная причина этого — доступность — как уже отмечалось, посетители вашей страницы не всегда будут использовать указывающее устройство (которое, конечно, требуется для наведения и открытия подменю).

CSS: самое необходимое

Чтобы настроить все визуально, давайте обнуляем отступы по умолчанию (и поля для старых браузеров) списков:

 
ul {
    отступ: 0;
    маржа: 0;
}
  

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

 
li {
    дисплей: встроенный;
    положение: относительное;
}
  

А теперь займемся списками внутри списка.Мы хотим расположить их абсолютно, размещая их поверх всего, и мы хотим их скрыть:

 
ul ul {
    позиция: абсолютная;
    дисплей: нет;
}
  

Для поддержки старых браузеров вы также можете явно расположить подсписки, добавив к ним left: 0 и top: 100% .

Наконец, чтобы показать эти подсписки при наведении курсора на элемент основного списка:

 
li: hover ul {
    дисплей: блок;
}
  

Первый сопровождающий пример демонстрирует это в действии вместе с пояснительными встроенными комментариями (см. Исходный код).

Многоуровневые раскрывающиеся списки

Размещение более одного уровня раскрывающегося меню потребует большего количества вложенных списков:

 

     Млекопитающие 
    

        

             Монотремы 
            

                
  Ехидны  
                
  Утконос  
            
        
        

             Сумчатые 
            

                
  опоссумы  
                
  Нумбаты и т. д. 
                
  Bandicoots и т. д.  
                
  Кенгуру, коалы, вомбаты и т. д.  
            
        
        

             Плаценты 
            

                
  Приматы, копытные и т. д.  
                
  Муравьеды, ленивцы и т. д.  
                
  слоны и т. д. 
            
        
    

  

Теперь, чтобы немного по-другому относиться к этим новым подподспискам, мы хотим, чтобы они отображались сбоку от элементов родительского списка, а не под ними:

 
ul ul ul {
    осталось: 100%;
    верх: 0;
}
  

Также необходимы небольшие поправки. В его нынешнем виде будут показаны все список потомков наведенного элемента списка. Поэтому, когда в этом примере наведен курсор на «Млекопитающие», будут показаны не только «Однородные», «Сумчатые» и «Плацентарные», но и все виды сумчатых — «Оппоссумы» и так далее.Мы хотим, чтобы был показан только первый потомок — детей и (не внуки). Поэтому мы изменяем li: hover ul , добавляя дочерний селектор :

 
li: hover> ul {
    дисплей: блок;
}
  

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

Довольно красиво

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

Создать DropDownList с помощью HtmlHelper в ASP.Net MVC

• Подписывайтесь на нас