Как оформить раскрывающийся список с помощью только css?

5 последних уроков рубрики «Для сайта»

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


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

  • Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.

  • Эффекты на то и существуют чтобы впечатлять наших посетителей. В этой подборке собрано несколько десятков ресурсов, чьи создатели очень постарались впечатлить своих посетителей.

  • 45+ бесплатных материалов для веб дизайнеров за август 2016

Атрибуты¶

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

Также для этого элемента доступны универсальные атрибуты.

autofocus

Атрибут устанавливает, что список получает фокус после загрузки страницы, при этом список становится доступным для выбора пунктов, например, с помощью клавиатуры.

Синтаксис

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

disabled

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

Синтаксис

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

form

Связывает список с формой по её идентификатору. Такая связь необходима в случае, когда список располагается за пределами .

Синтаксис

Значения

Идентификатор формы (значение атрибута элемента ).

Значение по умолчанию

Нет.

multiple


Наличие атрибута сообщает браузеру отображать содержимое элемента как список множественного выбора. Конечный вид списка зависит от используемого атрибута и браузера.

Для выбора нескольких значений списка применяются клавиши Ctrl и Shift совместно с курсором мыши.

Чтобы на сервер отправлялся массив данных, значение атрибута следует писать с квадратными скобками — , к примеру.

Синтаксис

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

name

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

Синтаксис

Значения

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

Значение по умолчанию

Нет.

required

Устанавливает список обязательным для выбора перед отправкой формы на сервер. Если пункт списка не выбран, браузер выведет сообщение, а форма отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может.

Синтаксис

Значения

Нет.

Значение по умолчанию

По умолчанию атрибут выключен.

size

Устанавливает высоту списка. Если значение атрибута равно 1, то список превращается в раскрывающийся. При добавлении атрибута к элементу при список отображается как «крутилка». Во всех остальных случаях получается список с одним или множественным выбором.

Синтаксис

Значения


Любое целое положительное число.

Значение по умолчанию

Зависит от атрибута . Если он присутствует, то размер списка равен количеству элементов. Когда атрибута нет, то по умолчанию значение атрибута равно 1.

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function

backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing break-after break-before break-inside

caption-side caret-color @charset clear clip clip-path color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor

direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-feature-settings font-kerning font-size font-size-adjust font-stretch font-style font-variant font-variant-caps font-weight

grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows

hanging-punctuation height hyphens @import isolation justify-content @keyframes left letter-spacing

line-height list-style list-style-image list-style-position list-style-type

margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width mix-blend-mode

object-fit object-position opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y

padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position quotes

resize right

scroll-behavior

tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top

transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function

unicode-bidi user-select

vertical-align visibility

white-space width word-break word-spacing word-wrap writing-mode

z-index

jQuery

При обработке события document.ready jQuery проверяет элемент select, и, используя атрибуты данных, строит разметку, которая добавляется сразу за элементом select:

<div style="width: 356px;" class="tzSelect">
	<div class="selectBox expanded">Выберите продукт</div>
	<ul class="dropDown">
		<li><img src="img/products/js.png"><span>JavaScript + jQuery для начинающих в видеоформате<i>посмотреть видеопрезентацию</i></span></li>
		<li><img src="img/products/php.png"><span>PHP + MySQL для начинающих<i>купить</i></span></li>
		<li><img src="img/products/wp.png"><span>WordPress - профессиональный блог за один день<i>скачать</i></span></li>
		<li><img src="img/products/joomla.png"><span>Joomla - профессиональный сайт за один день<i>купить</i></span></li>
	</ul>
</div>

Строится неупорядоченный список с элементами li, которые представляют каждый пункт option из элемента select. А сам элемент select будет представлен элементом div с классом .selectBox.

Теперь можно взглянуть на код JavaScript.

js/script.js

$(document).ready(function(){
	
	// Элемент select, который будет замещаться:
	var select = $('select.makeMeFancy');

	var selectBoxContainer = $('<div>',{
		width		: select.outerWidth(),
		className	: 'tzSelect',
		html		: '<div class="selectBox"></div>'
	});

	var dropDown = $('<ul>',{className:'dropDown'});
	var selectBox = selectBoxContainer.find('.selectBox');
	
	// Цикл по оригинальному элементу select
	
	select.find('option').each(function(i){
		var option = $(this);
		
		if(i==select.attr('selectedIndex')){
			selectBox.html(option.text());
		}
		
		// Так как используется jQuery 1.4.3, то мы можем получить доступ 
		// к атрибутам данных HTML5 с помощью метода data().
		
		if(option.data('skip')){
			return true;
		}
		
		// Создаем выпадающий пункт в соответствии
		// с иконкой данных и атрибутами HTML5 данных:
		
		var li = $('<li>',{
			html:	'<img src="'+option.data('icon')+'" /><span>'+
					option.data('html-text')+'</span>'
		});
				
		li.click(function(){
			
			selectBox.html(option.text());
			dropDown.trigger('hide');
			
			// Когда происходит событие click, мы также отражаем
			// изменения в оригинальном элементе select:
			select.val(option.val());
			
			return false;
		});
		
		dropDown.append(li);
	});
	
	selectBoxContainer.append(dropDown.hide());
	select.hide().after(selectBoxContainer);
	
	// Привязываем пользовательские события show и hide к элементу dropDown:
	
	dropDown.bind('show',function(){
		
		if(dropDown.is(':animated')){
			return false;
		}
		
		selectBox.addClass('expanded');
		dropDown.slideDown();
		
	}).bind('hide',function(){
		
		if(dropDown.is(':animated')){
			return false;
		}
		
		selectBox.removeClass('expanded');
		dropDown.slideUp();
		
	}).bind('toggle',function(){
		if(selectBox.hasClass('expanded')){
			dropDown.trigger('hide');
		}
		else dropDown.trigger('show');
	});
	
	selectBox.click(function(){
		dropDown.trigger('toggle');
		return false;
	});

	// Если нажать кнопку мыши где-нибудь на странице при открытом элементе dropDown,
	// он будет спрятан:
	
	$(document).click(function(){
		dropDown.trigger('hide');
	});
});

После загрузки страницы, скрипт сканирует опции элемента select и генерирует разметку, соответствующую атрибутам данных HTML5, которые содержатся в пунктах элемента select. Так как используется jQuery 1.4.3, то доступ к значениям в данных атрибутах возможен с помощью метода jQuery data(). Это действительно полезная опция, которая существенно облегчает доступ к привязанным данным.

Оригинальный элемент select сохраняется, он будет скрыт с помощью метода hide()

Это важно, потому что все изменения отражаются и в нем. Таким образом, когда вы используете элемент select в форме, значения будут корректно сохранены и переданы вашему скрипту-обработчику

Теперь наш код на месте и стоит взглянуть на код CSS3.

Changelog

Version 0.5.1 (19/03/2013)

Merge fix for #60 by gu3st (Fixes issue when select box moves from display:none; to display:block;)

Version 0.5.0 (19/03/2013)

  • Namespaced events
  • API Change: ‘update’ event changed to ‘render’ to fix some compatibility issues

Version 0.4.1 (26/05/2013)

  • Fixed multiple handling in FF
  • & key support

Version 0.4.0 (26/04/2013)

  • Some optimizations for better compression/minification
  • If you specify a , that classname will be used for all states.
  • eg. will produce class names like , ,
  • The only exception is the class, which will maintain the plugin’s default namespace since it is applied to the select box to distinguish it from an unstyled select.

Version 0.3.7 (26/04/2013)

Support for disabled via customSelectDisabledOption class

Version 0.3.6 (16/04/2013)

Calls change function instead of invoking change event to fix double-fire

Version 0.3.5 (16/04/2013)

  • Much improved logic for
  • Bug fix for Firefox keyboard selection

Version 0.3.4 (15/04/2013)

Toggle customSelectOpen class on mouseup to resolve issue #29 (http://git.io/jztAlQ)


Version 0.3.3 (04/03/2013)

Pass original customSelectSpan reference to changed() function

Version 0.3.2 (28/02/2013)

  • Patch for incorrect select height caused by 0.3.0
  • Support for select boxes via class

Version 0.3.0 (12/02/2013)

  • Refactored coding style
  • Changed filenames to standard jQuery plugin naming conventions
  • Fixed IE6 Filtering
  • Added component.json for bower
  • Moved method ‘changed’ to local scope
  • Update to Dual GPL/MIT license

Version 0.2.5 (04/02/2013)

  • Updates/fixes to .customSelectChanged class usage
  • customSelectChanged class is added to span when select value changes
  • customSelectChanged class is removed on mousedown or on blur

Version 0.2.4 (03/02/2013)

Supports hover via .customSelectHover class on customSelect span

Version 0.2.3 (30/01/2013)

  • Fixes change event not firing for Firefox keyboard users
  • customSelect no longer triggers the change event on initiation

Version 0.2.1 (17/12/2012)

  • Select box listens for ‘update’ event which can be triggered to update the size and content if needed
  • Removed dependency on $.browser

Version 0.2.0

CHANGES IN 0.2.0

  • Streamlined creation/selection of span elements
  • Renamed span classes to «customSelect» and «customSelectInner» to coinside with plugin name
  • You can now have styles for when select box is open or focused via the classes .customSelectOpen and .customSelectFocus
  • ability to set a custom class by passing in {customClass:’myClassName’}

Copyright 2013 Adam Coulombe

Dual licensed under the MIT and GPL licenses:

This lightweight, unintrusive technique uses the native select box functionality of the web browser, and overlays a stylable element in order to acheive your desired look. Since it makes use of default browser functionality,it can be treated just like any ordinary HTML select box.

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

Getting started

$(document).ready(function(){$('#someSelectBox').customSelect();});
.customSelect { /* This is the default class that is used *//* Put whatever custom styles you want here */}.customSelect.customSelectHover {/* Styles for when the select box is hovered */}.customSelect.customSelectOpen {/* Styles for when the select box is open */}.customSelect.customSelectFocus {/* Styles for when the select box is in focus */}.customSelect.customSelectDisabledOption {/* Styles for when the selected item is a disabled one */}.customSelect.customSelectDisabled {/* Styles for when the select box itself is disabled */}.customSelectInner {/* You can style the inner box too */}

Styling

For styling of dropdown, SCSS or CSS can be written as global styles for uniform styling across the project, or you write styles inside your parent component styles using selector. Don’t forget to add your css classnames in property of .

Note: Please maintain the hierarchy(selectBoxClass > selectMenuClass > optionsClass) of classes while writing style and don’t forget to add before in case you are writing styles inside your parent component. You can use your own classnames for select box, just pass the classnames in property of .

sample.style.scss

.dropdown-wrapper{padding12px 16px;border1pxsolidrgb(206, 205, 201);cursorpointer;outlinenone;colorrgb(110, 108, 105);&focus{border1pxsolid#80bdff;}.dropdown{background#fff;border-radius 5px 5px;border1pxsolidrgb(206, 205, 201);border-topnone;box-sizingborder-box;max-height400px;border-bottom1pxsolidrgb(206, 205, 201);.optionhover{color#d15947;}.option{padding0.8em;border-bottom1pxsolidrgb(206, 205, 201);text-decorationnone;colorrgb(110, 108, 105);}}}.caret{&::after{content"▼";text-aligncenter;}}
styleGuide{caretClass'caret',selectBoxClass'dropdown-wrapper',selectMenuClass'dropdown',optionsClass'option'}

Installation

The easiest way to use react-select is to install it from npm and build it into your app with Webpack.

You can then import react-select and its styles in your application as follows:

importSelectfrom'react-select';import'react-select/dist/react-select.css';

You can also use the standalone UMD build by including and in your page. If you do this you’ll also need to include the dependencies. For example:

<scriptsrc="https://unpkg.com/react@15.6.1/dist/react.js"><script><scriptsrc="https://unpkg.com/react-dom@15.6.1/dist/react-dom.js"><script><scriptsrc="https://unpkg.com/prop-types@15.5.10/prop-types.js"><script><scriptsrc="https://unpkg.com/classnames@2.2.5/index.js"><script><scriptsrc="https://unpkg.com/react-input-autosize@2.0.0/dist/react-input-autosize.js"><script><scriptsrc="https://unpkg.com/react-select@1.2.1/dist/react-select.js"><script><linkrel="stylesheet"href="https://unpkg.com/react-select@1.2.1/dist/react-select.css">

Create a Custom Select Menu

Step 1) Add HTML:

<!— Surround the select box within a «custom-select» DIV element.Remember to set the width: —><div class=»custom-select» style=»width:200px;»>  <select>    <option value=»0″>Select car:</option>    <option value=»1″>Audi</option>    <option value=»2″>BMW</option>    <option value=»3″>Citroen</option>    <option value=»4″>Ford</option>    <option value=»5″>Honda</option>    <option value=»6″>Jaguar</option>    <option value=»7″>Land Rover</option>    <option value=»8″>Mercedes</option>    <option value=»9″>Mini</option>    <option value=»10″>Nissan</option>    <option value=»11″>Toyota</option>    <option value=»12″>Volvo</option>  </select></div>

Step 2) Add CSS:

/* The container must be positioned relative: */.custom-select {  position: relative;  font-family: Arial;}.custom-select select {  display: none; /*hide original SELECT element: */}.select-selected {  background-color: DodgerBlue;}/* Style the arrow inside the select element: */.select-selected:after {  position: absolute;  content: «»;  top: 14px;  right: 10px;  width: 0;  height: 0;  border: 6px solid transparent;  border-color: #fff transparent transparent transparent;} /* Point the arrow upwards when the select box is open (active): */.select-selected.select-arrow-active:after {  border-color: transparent transparent #fff transparent;  top: 7px;} /* style the items (options), including the selected item: */.select-items div,.select-selected {  color: #ffffff;  padding: 8px 16px;  border: 1px solid transparent;  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;  cursor: pointer;}/* Style items (options): */ .select-items {  position: absolute;  background-color: DodgerBlue;  top: 100%;  left: 0;  right: 0;  z-index: 99;}/* Hide the items when the select box is closed: */.select-hide {  display: none; } .select-items div:hover, .same-as-selected {  background-color: rgba(0, 0, 0, 0.1);}

Step 3) Add JavaScript:

var x, i, j, l, ll, selElmnt, a, b, c;/* Look for any elements with the class «custom-select»: */x = document.getElementsByClassName(«custom-select»); l = x.length; for (i = 0; i < l; i++) {  selElmnt = x.getElementsByTagName(«select»);  ll = selElmnt.length;  /* For each element, create a new DIV that will act as the selected item: */  a = document.createElement(«DIV»);  a.setAttribute(«class», «select-selected»);  a.innerHTML = selElmnt.options.innerHTML;  x.appendChild(a);  /* For each element, create a new DIV that will contain the option list: */  b = document.createElement(«DIV»);  b.setAttribute(«class», «select-items select-hide»);  for (j = 1; j < ll; j++) {    /* For each option in the original select element,    create a new DIV that will act as an option item: */    c = document.createElement(«DIV»);    c.innerHTML = selElmnt.options.innerHTML;    c.addEventListener(«click», function(e) {        /* When an item is clicked, update the original select box,        and the selected item: */        var y, i, k, s, h, sl, yl;        s = this.parentNode.parentNode.getElementsByTagName(«select»);        sl = s.length;        h = this.parentNode.previousSibling;        for (i = 0; i < sl; i++) {          if (s.options.innerHTML == this.innerHTML) {            s.selectedIndex = i;            h.innerHTML = this.innerHTML;            y = this.parentNode.getElementsByClassName(«same-as-selected»);            yl = y.length;            for (k = 0; k < yl; k++) {              y.removeAttribute(«class»);            }            this.setAttribute(«class», «same-as-selected»);            break;          }        }        h.click();    });    b.appendChild(c);  }  x.appendChild(b);  a.addEventListener(«click», function(e) {    /* When the select box is clicked, close any other select boxes,    and open/close the current select box: */    e.stopPropagation();    closeAllSelect(this);    this.nextSibling.classList.toggle(«select-hide»);    this.classList.toggle(«select-arrow-active»);  });}function closeAllSelect(elmnt) {  /* A function that will close all select boxes in the document,  except the current select box: */  var x, y, i, xl, yl, arrNo = [];  x = document.getElementsByClassName(«select-items»);  y = document.getElementsByClassName(«select-selected»);  xl = x.length;  yl = y.length;  for (i = 0; i < yl; i++) {    if (elmnt == y) {      arrNo.push(i)    } else {      y.classList.remove(«select-arrow-active»);    }  }  for (i = 0; i < xl; i++) {    if (arrNo.indexOf(i)) {      x.classList.add(«select-hide»);    }  }}/* If the user clicks anywhere outside the select box,then close all select boxes: */document.addEventListener(«click», closeAllSelect);

Images

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider


С этим читают