Kompüter, Proqram
Açılan CSS menyular etmək üçün necə
Bu gün biz "Mən açılan CSS menyular yaratmaq üçün nə etməliyəm?" Sualına baxacaq. Bu maddə hər hansı bir əlavə vəsait qoşulma olmadan ediləcək ki, bir dəfə demək lazımdır. Bu menyu yalnız CSS və HTML ilə yaradılacaq edir.
təlim
tam məqalədə bu nə anlamaq üçün, nəzəri material ilə tanış olmaq bir az lazımdır. Siz yalançı dərsləri ilə tanış əgər Lakin, bu paraqraf atlayabilirsiniz. «: Hover» Belə ki, bir şaquli açılan CSS menyular yaratmaq üçün biz bir element lazımdır. yalançı «: hover» hər hansı bir təyin edilə bilər HTML tag. Bu bir maddə siçan hover an müəyyən etməyə imkan verir. «A: hover {: qırmızı rəng;}» Məsələn, biz əmlak etdik. Bu giriş uçanda o deməkdir ki, siçan hər hansı bir tag məzmunu qırmızı çevrilir. Bu yalançı element də təsirsiz hala ki, qeyd dəyər. Yeri gəlmişkən, «: hover» bənzər elementlər bağlı olub. Amma bu biz yalançı CSS açılan menyu yaradacaq.
təlim
Birincisi, bir açılan menyu nə anlamaq imkan verir. bu anlayış altında müxtəlif layouts inşa müxtəlif üsulları bir çox olur. Bu halda, biz bir neçə daim görünən maddələr və (gizli) bir neçə əlavə ibarət strukturu təhlil edəcəklər. nəzəriyyəsi ilə bitirmək və təcrübə başlasın.
- Biz menyu susmaya yaratmaq. , HTML-kodu etiketleme Bunu etmək üçün. bir nested siyahısı yaradın:
-
- < / ul>. bu kimi bir şey sizin açılan menyu kimi baxmaq lazımdır. CSS sonra müdaxilə edir. Bu halda əsas siyahısı əlavə üç əsas sahələri və iki ibarətdir.
- sub-menyu gizlət. biz stil istifadə Bunun üçün aşağıdakı xüsusiyyətləri müəyyən: ul ul {display: none;} Bu ekran ikinci siyahısı elementləri aradan qaldırılması.
- Bir menyu CSS yaratmaq əsas siyahıdan açılır. kaskad stillər aşağıdakı qayda yazın: ul li: ul hover {display: block;}. Bu giriş-də siçan ul siyahısına yerləşir element li, ekran Ul görünür artıq olduqda (əlavə olunur) deməkdir. İlk baxışdan belə bir sxem mürəkkəb və confusing görünə bilər. Amma əslində, hər şey çox sadədir.
- tags
- content soxaraq bu layout özünüzü istifadə edin. Siz siyahısı elementlərinin sayı dəyişə bilərsiniz.
dekorativ dəyişikliklər
Kimi tezliklə əsas menyu layout hazır olduğu kimi, siz qeydiyyatı davam edə bilərsiniz. Yəqin ki, istəyən ilk növbədə çox elementi ifadə markerlər qurtarmaq üçün. Bu bir əmlak CSS, yəni list-style-type istifadə edilir. li {list-style-type: none;} aşağıdakı giriş əlavə etmək lazımdır. Sonra çərçivəsində daxil edin və edə bilərsiniz fon. sərhəd və fon bu sizə kömək edir. Yəqin ki, bəzi açılan menyu eyni əsas elementləri basmaqla əlavə siyahısı görünür kimi deyil. Bunu düzeltmek üçün, siz onu yerləşdirilməlidir bilər. Bunu etmək üçün, kaskad stillər aşağıdakı giriş yazmaq: ul ul {mövqeyini: mütləq; Sol: 15px; Doğru: 15px; top: 15px; bottom: 15px;}. Əlbəttə ki, dəyərlər öz istifadə edəcək. Siz açılan menyular görmək istədiyiniz asılı olaraq, CSS müxtəlif effektləri əlavə və siyahıları bəzəyəcək bilər bir çox xüsusiyyətləri təklif edir.
nəticə
Bir daha menyu layout tikintisi diqqəti çəkir. Məsələn, ul ul bu halda əlaqədar dəyəri istifadə CSS qaydaları təyin etmək üçün. digər oxşar strukturu görüşmək üçün sənəd varsa, böyük problemlər ola bilər. Bu hallarda, siz, məsələn, seçiciler və ya id-kimlikleri üçün xüsusi məqsədi istifadə etmək lazımdır. Yuxarıda maddə layout açılan menyu general dizayn tanış üçün nəzərdə tutulmuşdur. iş qalan üzərinə düşür.
Similar articles
Trending Now