Оформлення списку

Призначені для користувача стилі для списку

Як власник сайту, кожен намагається зробити будь-який елемент на сайті особливим, щоб не бути схожим на сайти конкурентів. Принаймні мені не подобається щоб мій сайт був схожий ще на чийсь. Хочеться щоб навіть маленька кнопочка була унікальною! І тому в цьому уроці ми розглянемо як використовувати призначені для користувача стилі для випадаючих списків. Це також один з елементів на сайті, який можна стилізувати як подобається вам і так щоб стиль списку підходив під основний стиль сайту.

Приклад можна побачити тут:

Подивитися прімерСкачать

HTML частина

Пам`ятайте як створюється звичайний список HTML? Він складається з тегів і :

lt;selectgt;lt;optiongt; lt;/optiongt;lt;optiongt; lt;/optiongt;lt;optiongt; lt;/optiongt;lt;/selectgt;

Але зараз нам необхідно звичайний список зробити з елементів і:

123456789

lt;div class=`SelectBox`gt;lt;span class=`Selected`gt; lt;/spangt;lt;span class="SelectArrow `gt; lt;/spangt;lt;div class="SelectOptions" gt;lt;span class="SelectOption" value="Option 1"gt; Елемент 1lt;/spangt;lt;span class="SelectOption" value="Option 2"gt; Елемент 2lt;/spangt;lt;span class="SelectOption" value="Option 3"gt; Елемент 3lt;/spangt;lt;/divgt;lt;/divgt;

Відео: випадає МЕНЮ на чистому CSS / HTML

CSS частина

Зараз за допомогою стилів додамо вид нашому списку:

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667

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 частина

У цій частині додамо функціонал для нашого списку. За допомогою функції нижче ми визначаємо що запуститися наступна функція коли сторінка буде завантажена:

Відео: CSS3 для початківців | # 11 Меню, що випадає на CSS

123	$(document).ready(function() {enableSelectBoxes()-})-

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

Відео: Стилізація select на CSS

1234567891011121314151617181920212223

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())-})-})-}

Відео: Як зробити випадаючий список в Excel?

висновок

Моя особиста думка: на вашому сайті має бути все унікальним, навіть input-и і випадають списки. Звичайно ви можете зі мною не погодитися, але це і робить сайт трохи особливим.

Успіхів!

джерело: https://onextrapixel.com/2012/06/20/create-a-custom-select-box-with-jquery/

Поділися в соц мережах: