HTML-də açılan siyahıdan seçim. Dəbli Css Açılan Siyahıları Yaradın

Bu gün mən CSS-də siyahı yaratmaq üçün kiçik bir “resept” təqdim etmək istəyirəm. JQuery yoxdur, CSS3 yoxdur - sadəcə köhnə yaxşı cross-brauzer CSS. Nümunə olduqca sadədir, buna görə təcrübəli yoldaşlar maraqlanmaya bilər. Sosial düymələrlə açılan siyahı tətbiq edəcəyik.

Odur ki, uzun-uzadı danışmayaq, düz mətləbə keçək

HTML

Bu postu paylaşın

Facebook
Twitter
Google Plus
ilə təmasda
RSS

Kod böyüməməsi üçün üslubları daxil etmək kimi ümumi məqamları bilərəkdən buraxıram. Səhifənin altındakı mənbələrə keçid verəcəyəm - hər şey oradadır.
HTML-də bizdə olan şey müntəzəm siyahı və qeyri-adi başlıqdır. Onun qeyri-adiliyi ondadır ki, o, hadisəni izləməyə imkan verən hiperlinklə hazırlanır : süpürmək, yəni hidayət. Siz başlığın üzərinə gətirdiyiniz zaman açılan siyahı işləyəcək.

CSS

Əvvəlcə açılan siyahının əsas üslublarına nəzər salaq. Daha aydın olması üçün kodun hər sətrini şərh etməyə çalışdım:

/*Doldurmanı sıfırlayın*/ .droplink ul,.droplink h3,.droplink h3 a( padding:0;margin:0 ) /*Basic wrapper*/ .droplink ( en:200px; mövqe:absolute; margin:10px 0 0) 25px ) /*Hover blok stili*/ .droplink:hover( hündürlük:auto; background-color:#3E403D; haşiyə:solid 1px #3A3C39 ) /*Başlıq normal vəziyyətdə*/ .droplink h3 a( text-align:center width:100%; display:block; padding:12px 0px; çəki: qalın mövqe: mütləq )

Burada xüsusi bir şey yoxdur; biz blokun ölçüsünü və üslubunu, başlığın üslubunu və kursoru gəzdirərkən hər iki element üçün onların üslublarını göstərdik. Davam et:

/*Siyahını hover olmadan gizlədin*/ .droplink ul( list-style:none; display:none ) /*Siyahını hoverdə göstər*/ .droplink:hover ul( display:block; margin-top:40px ) .droplink li( ekran: blok)

Bu kod daha maraqlıdır və necə davrandığını göstərir açılan siyahı kursoru gəzdirərkən. Normal veziyyetdedir ekran: heç biri, yəni göstərilmir. Üzərinə qoyulduqda onu blok kimi göstəririk. Bütün sirr budur. İndi siyahı elementlərini bir az bəzəyib nişanlar daxil edək:

/*Siyahı elementinin üslubu*/ .droplink li a( padding:5px 12px 4px 34px; margin:1px; background-color:#484A47; display:block; color:#FFF; text-decoration:none; font-size:12px ; background-repeat:no-repeat; background-position: 10px 3px ) /*Hover element style*/ .droplink li a:hover( background-color:#999 ) /*Icons*/ .facebook a (fon şəkli) :url("icons/facebook.png")) .twitter a (fon şəkli:url("ikonlar/twitter.png")) .vk a (fon şəkli:url("ikonlar/vk.png")) .rss a (fon şəkli:url("ikonlar/rss.png")) .gplus a (fon şəkli:url("ikonlar/gplus.png"))

Əslində hamısı budur. Açılan siyahı hazırdır və olduqca gözəl görünür. Elementləri öz istəyinizlə tərtib edə, yuvarlaq künclər və digər zənglər və fitlər əlavə edə bilərsiniz.

Siyahının sürüşdürərkən altındakı mətnlə "üst-üstə düşməsini" istəyirsinizsə, yan tərəfə baxın z indeksi.

Bir şey aydın deyilsə və ya işləmirsə, şərhlərdə soruşun və ya "Mesaj göndər" düyməsini istifadə edin, bu var —>

Təsvir

Tag bu siyahının hündürlüyünü təyin edir. Siyahının eni etiketdə göstərilən ən geniş mətnlə müəyyən edilir

Sintaksis

Atributlar

Bəzi klaviatura qısa yolundan istifadə edərək siyahıya keçməyə imkan verir. Səhifə yükləndikdən sonra diqqəti cəlb etmək üçün siyahını təyin edir. Elementə girişi və dəyişdirilməsini bloklayır. Siyahını forma ilə əlaqələndirir. Eyni anda birdən çox siyahı elementi seçməyə imkan verir. Serverə göndəriləcək və ya skriptlər vasitəsilə əldə ediləcək elementin adı. Formanı təqdim etməzdən əvvəl siyahının seçilməsi tələb olunur. Göstəriləcək siyahı sətirlərinin sayı. Tab düyməsini basarkən elementlər arasında keçid ardıcıllığını müəyyən edir

Bağlama etiketi

Tələb olunur.

HTML5 IE Cr Op Sa Fx

SELECT etiketi

Açılan menyu da adlandırılan birləşmiş qutu çevik və rahat forma elementlərindən biridir. Parametrlərdən asılı olaraq siyahıdan bir və ya daha çox dəyər seçə bilərsiniz. Siyahının üstünlüyü onun yığcamlığı və çox yönlü olmasıdır, siyahı bir və ya bir neçə sətir tuta bilər və siz ondan bir və ya bir neçə dəyər seçə bilərsiniz; Kombo qutusu aşağıdakı kimi yaradılır.

Tag , siyahının hündürlüyünü təyin edən siyahının eni daxilindəki mətnin uzunluğuna əsasən avtomatik olaraq müəyyən edilir;

Tag atributları , onun köməyi ilə siyahının təqdimatını dəyişə bilərsiniz.

çoxsaylı

Çoxluğun olması brauzerə elementin məzmununu göstərməyi bildirir

Unikal element adını müəyyən edir çoxlu atribut əlavə olunarsa, birdən çox element seçə bilərsiniz.

dəyər

Serverə göndəriləcək siyahı elementinin dəyərini müəyyən edir. Ad/dəyər cütü serverə göndərilir, burada ad teqin ad atributu ilə müəyyən edilir

Siyahı maddələrinin qruplaşdırılması

Siyahı kifayət qədər genişdirsə, siyahının aydın və asan işləməsini təmin etmək üçün onun elementlərini bloklara qruplaşdırmaq məntiqlidir. Bu məqsədlə etiket istifadə olunur . Bu, içərisində etiketlərin yerləşdiyi bir qabdır ondan ibarətdir ki, o, adi siyahı elementi kimi vurğulanmır, qalın üslubla vurğulanır və bu konteynerə daxil olan bütün elementlər orijinal mövqeyinin sağına köçürülür. Qrup başlığını əlavə etmək üçün Nümunə 3-də göstərildiyi kimi etiket atributundan istifadə edin.

Misal 3: Siyahı maddələrinin qruplaşdırılması

HTML5 IE Cr Op Sa Fx

Siyahı

Nümunənin nəticəsi Şəkildə göstərilmişdir. 1.

düyü. 1. Qruplaşdırılmış siyahı

Üfüqi açılan menyu saytın naviqasiya strukturunu təşkil etmək üçün istifadə olunur. Yuva səviyyələrinin optimal sayı bir və ya ikidir. Qoşmaların səviyyəsi nə qədər az olsa, sayt ziyarətçisinin ehtiyac duyduğu məlumatı tapması bir o qədər asan olar. Adi bir üfüqi menyunun necə yaradılacağı ətraflı təsvir edilmişdir.

Üfüqi açılan menyunu necə etmək olar

1. Bir yuva səviyyəsi ilə açılan menyu üçün HTML işarələməsi və əsas üslublar

Üfüqi açılan menyunun HTML işarələməsi adi menyudan onun istədiyiniz siyahı elementinə keçidi ilə fərqlənir.

iç içə siyahı əlavə olunur

Alt menyunu əsas menyuya nisbətən yerləşdirmək üçün aşağıdakı üslublar elan edilir:
— açılan siyahının yerləşdiyi siyahı elementi üçün: li (mövqe: nisbi;) ;
— açılan menyu üçün ul (mövqe: mütləq;) , həmçinin sol və yuxarı dəyərlər.

Aydınlıq və formatlaşdırma asanlığı üçün sinifin yuxarı menyusunu əsas menyuya və alt menyunu açılan menyuya əlavə edək.

Açılan menyunu gizlətməyin bir neçə yolu var:
1) ekran: heç biri;
2) görünmə: gizli;
3) qeyri-şəffaflıq: 0;
4) çevirmək: scaleY(0);
5) jQuery kitabxanasından istifadə etməklə.

Metod 1. (ekran: heç biri;)

Açılan menyu .submenu (ekran: heç biri;) istifadə edilməklə gizlədilir, hoverdə isə .topmenu li:hover .submenu (ekran: blok;) vasitəsilə göstərilir.

Metod 2. (görünürlük: gizli;)

Menyu .submenu (görünürlük: gizli;) vasitəsilə gizlədilir və .topmenu li:hover .submenu (görünürlük: görünən;) vasitəsilə göstərilir.

Metod 3. (şəffaflıq: 0;)

Menyu .submenu (şəffaflıq: 0;) istifadə edərək gizlədilir və .topmenu li:hover .submenu (şəffaflıq: 1;) vasitəsilə göstərilir. Menyunun yerləşdiyi ərazinin üzərinə gətirdiyiniz zaman onun görünməsinin qarşısını almaq üçün görünürlük əlavə edin: gizli; , və sürüşdürərkən, onu görünməyə dəyişin: görünən; .

Metod 4. (çevir: scaleY(0);)

Menyu .submenu (çevir: scaleY(0);) istifadə edərək gizlədilir və .topmenu li:hover .altmenyu (çevir: scaleY(1);) vasitəsilə göstərilir. Standart element çevrilməsi mərkəzdən baş verdiyi üçün .alt menyu üçün əlavə etməlisiniz (transform-mənşə: 0 0;) , yəni. yuxarı sol küncdən.

Metod 5: jQuery-dən istifadə

2. 3D açılan menyu

Maraqlı effektlər CSS3 transformasiyalarından istifadə etməklə yaradıla bilər, məsələn, ekranın dərinliklərindən menyunun görünməsi.

3. Loqo ilə genişləndirilə bilən açılan menyu

Bu nümunədə səhifənin yuxarı hissəsində loqo və sayt naviqasiyası var. Loqo şəkil və ya mətn ola bilər. Açılan menyu CSS3 çevirmə funksiyasından istifadə edərək yuxarı siyahı elementinin altından tədricən genişlənir.

Logo

4. Açılan menyunun genişləndirilməsi

Açılan menyu üçün başqa bir nümunə. Menyu görünəndə böyüdülmə effekti ilkin ölçüsün kiçildilməsi ilə həyata keçirilir.alt menyu (çevir: miqyas(.8);) , siçan üzərinə qalxdıqda ölçü artır.topmenu > li:hover .alt menyu (çevir: miqyas(1);) .

5. Yuxarı açılan menyu

Mini-animasiya ilə üfüqi menyu: yuxarı menyu keçidlərinin üzərinə gətirdiyiniz zaman kiçik bir dairə görünür, bu da açılan menyunun görünüşünü müşayiət edir.

HTML seçim etiketi istifadəçiyə əvvəlcədən müəyyən edilmiş dəyərlər dəstindən birini seçməyə imkan verən açılan siyahı yaratmaq üçün istifadə olunur.

İstifadəçiyə görünən mətn dəyər atributunda göstərilən mətndən fərqli ola bilər. Aşağı açılan siyahını necə yaratmaq olar:

Açılan siyahı etiketdən istifadə edərək yaradılır seçim variantları etiketdən istifadə etməklə müəyyən edilir
Etiketdə

Açılan siyahıya stil vermək üçün ID istifadə etmək əvəzinə CSS sinifini təyin etmək də mümkündür.

Növbəti hissədə JavaScript/JQuery-də HTML açılan siyahıdan istifadə nümunələrini göstərəcəyəm. Nümunələr üslubların necə təyin olunacağını da göstərəcək

Dəyər atributundan istifadə

Daha əvvəl qeyd edildiyi kimi, dəyər atributunun dəyəri səhifədə göstərilən mətndən fərqli ola bilər. Məsələn, siz istifadəçilər üçün ölkələrin adlarını və ya rənglərini göstərə və dəyər atributunda qısa kodlardan istifadə edə bilərsiniz.

Aşağıdakı misalda biz dəyər atributu ilə açılan siyahı yaradacağıq:

Onlayn demo və kodlara baxın

Etiket üçün

JavaScript-də seçilmiş seçimə daxil olma nümunəsi

İndi seçilmiş variantın dəyərinə daxil olmaq və bəzi hərəkətləri yerinə yetirmək üçün bir nümunə yaradaq. Yuxarıdakı nümunədə olduğu kimi rəng seçimləri ilə eyni siyahını yaradırıq. Seçildikdən sonra həmin rəngi sənədə tətbiq etmək üçün düyməni basın:

Onlayn demo və kodlara baxın

Seçim dəyəri HTML üçün aşağıdakı kod istifadə olunur:

Seçimlərin dəyər atributunun dəyərinə daxil olmaq üçün JavaScript-də aşağıdakı kod sətri istifadə olunur mənası mətndən fərqlidir. Rəng seçdikdən sonra jQuery xəbərdarlıqda görünən mətni göstərir. Etiket kodu

Bu dəyərə necə daxil olmaq olar HTML JavaScript seçimini seçin:

var selectedcolor = $("#jqueryselect variant:selected").text();

Siz həmçinin JQuery $.val() metodundan istifadə edərək dəyərə daxil ola bilərsiniz:

var selectedcolor = $("#jqueryselect").val();

Yuxarıdakı misalda bu sətri dəyişdirin və kod görünən mətndən daha çox dəyər atributunda qısa kod/rəng dəyərini göstərəcək.