Це підручник про те, щоб створити чистий CSS меню, що випадає без використання JavaScript. Я помітив, однак, що люди часто використовують JavaScript для досягнення цього ефекту. Насправді, існує простий спосіб зробити це тільки з CSS.

Ось приклад

Крок перший: ми створюємо основні структури HTML.

 > <h1> Developer's Paradise demos </h1> <ul id = "menu" > <li> <span> Home </span> <ul> <li> <a href = "#" > Menu item 1 </a> </li> <li> <a href = "#" > Menu item 2 </a> </li> <li> <a href = "#" > Menu item 3 </a> </li> </ul> </li> <li> <span> About Us </span> <ul> <li> <a href = "#" > Menu item 1 </a> </li> <li> <a href = "#" > Menu item 2 </a> </li> <li> <a href = "#" > Menu item 3 </a> </li> </ul> </li> <li> <span> Products </span> <ul> <li> <a href = "#" > Menu item 1 </a> </li> <li> <a href = "#" > Menu item 2 </a> </li> <li> <a href = "#" > Menu item 3 </a> </li> </ul> </li> </ul> </div> <DIV ID = "заголовок"> <h1> розробника Рай демонстраційні ролики </ h1> <вулиця ID = "Меню"> <LI> <span> Головна сторінка </ SPAN> <UL> <LI> < HREF = "#" > Пункт меню 1 </ A> </ LI> <li> < HREF = "#"> Пункт меню 2 </ A> </ LI> <li> < HREF = "#"> Пункт меню 3 </ > </ LI> </ UL> </ LI> <LI> <span> Про компанію </ SPAN> <UL> <LI> < HREF = "#"> Пункт меню 1 </ A> </ LI > <li> < HREF = "#"> Пункт меню 2 </ A> </ LI> <li> < HREF = "#"> Пункт меню 3 </ A> </ LI> </ UL> < / LI> <LI> <span> Продукція </ SPAN> <UL> <LI> < HREF = "#"> Пункт меню 1 </ A> </ LI> <li> < HREF = "#"> Пункт меню 2 </ A> </ LI> <li> < HREF = "#"> Пункт меню 3 </ A> </ LI> </ UL> </ LI> </ UL> </ DIV> 

Крок другий: Тепер ми створимо чарівний CSS коду

  ; padding : 0 ; } * {Маржа: 0; оббивка: 0;}

 BODY {
 ; Довідкова інформація: # 222;
 Arial, Helvetica, sans-serif ; Шрифт: 100% нормального Arial, Helvetica, без зарубок;
 }

 : #fff ; } h1 {колір: # FFF;}

 # {Заголовок
 ; Висота: 120px; положення: відносна;
 ; Довідкова інформація: # 333;
 }

 # {Меню
 поле: 0px;
 додаток: 0px;
 Позиція: абсолютна;
 ; Top: 70px;
 Дисплей: блок;
 }

 # Меню> LI {
 Список стилі типу: немає;
 плавати: ліворуч;
 Дисплей: блок;
 ; поле: 0px 10px;
 Посада: відносна;
 оббивка: 10px;
 ширина: 100px;
 }

 ul { # Меню> Li: наведіть вулиця {
 Дисплей: блок;
 }

 { # Меню> Li: наведіть {
 ; фонового кольору: # 808080;
 -МОЗ кордону радіуса: 10px;
 -WebKit кордону радіуса: 10px;
 }

 # Меню Li вулиця {
 поле: 0px;
 додаток: 0px;
 Дисплей: немає;
 }
 # Меню Li Li {вулиця
 Список стилі типу: немає;
 ; поле: 10px 0 0 0;
 Розмір шрифту: 11px;
 }

 # Меню Li Li вулиця {
 Дисплей: блок;
 ; оббивка: 5px 10px;
 ; колір: # FFF;
 текст-оздоблення: немає;
 накреслення шрифту: жирний;
 }

 a { # Меню Li Li вулиця: наведіть {
 ; фонового кольору: # 606060;
 -МОЗ кордону радіуса: 5px;
 -WebKit кордону радіуса: 5px;
 }

 # Меню Li Span {
 Курсор: покажчик;
 ; поле: 0px 10px;
 накреслення шрифту: жирний;
 ; font-size : 11px ; колір: # FFF; Розмір шрифту: 11px;
 } 

Будь ласка, зверніть увагу, що цей код не працює в IE6 (ця бідна браузер просто не знає, що вулиця> означає, Li).

Я був би вдячний, якби ви могли взяти другу, щоб допомогти просунути мій блог і поділитися посилання з будь-яким з ваших сприяння мереж за посиланням нижче. Ось посилання на наш партнер сайт, якщо ви хочете зареєструвати доменне ім'я .

Рубрики: Css , Підручники по адміністратора