Гарний випадає для сайту
Як ви думаєте, сучасний чи у вас дизайн сайту? Чи використовуєте ви найостанніші технології або боїтеся їх? Можливо, ви думаєте що це занадто складно і навіть лізти не хочете в ці нетрі. Але насправді все йде куди інакше. Адже нові технології (я маю на увазі зараз CSS3) прийшли для того, щоб зробити життя веб-дизайнера легше і привнести свої додаткові можливості при створенні зовнішнього вигляду сайту. Сьогодні поговоримо про те кілька видів дизайну для списку.
Що хочу сказати відразу з приводу демо: кожен окремий вид списку знаходиться в окремому файлі HTML, що дозволяє без праці взяти код, який вам потрібен. Також в окремих файлах розташовані стилі для кожного дизайну списку. Вам лише залишилося вибрати той, який вам найбільше подобається і знайти його файл стилів 🙂.
У розмітці списку нічого незвичайного:
Як кажуть:
У деяких прикладах ви можете побачити незвичайні атрибути, типу data-class або data-link. Тут нема чого бояться, вони потрібні для правильного функціонування відповідного списку, тому що там може зберігатися додаткова інформація.
Пройдемося трохи по стилям.
Основні стилі знаходяться в файлі cs-select.css. Тут знаходяться стилі які надають списку звичайний вид, який ми звикли бачити.
А для того, щоб зробити стиль незвичайним і оригінальним потрібно використовувати додаткові властивості. Наприклад для першого прикладу (перейти і подивитися) використовуються наступні стилі:
А знаходяться ці стилі в окремому файлі (для зручності) cs-skin-border.css.
Чого тільки не зробиш заради неповторного дизайну свого сайту! І головне - не бійтеся експериментувати з дизайном, постійно покращуйте його. Раптом ви створите (шляхом експериментів) саме той, який сподобається вашим користувачам і вони скажуть «Вау, мені подобається цей дизайн, що ж ще цікавого є на цьому сайті!» 😉.
Ви хочете виводити опис обраного елемента в довільний блок (наприклад, div)? Якщо так, то вам необхідно використовувати jQuery, за допомогою цієї бібліотеки це зробити найпростіше.
1) Можна додати data- * атрибут для кожного елемента списку
2) Визначаєте який з елементів списку був обраний
3) За допомогою jQuery підставляєте інформацію з data- * атрибута в блок div.