Създаване на вертикално изскачащо меню

Автор - Яровой Р.П.

Нека създадем 2 класа в стиловия лист:

  • горе - елемент от менюто: позициониране - статично, подравняване на текста - ляво, височина и ширина - съответно 20 и 61 пиксела
  • sub - подпозиция: позициониране - абсолютно, подравняване на текста - центрирано, скрито, рамка - 1 пиксел, права линия, цвят на текста - равномерен, фон - син.

За да се създаде ефект на незабавно разширяване на менюто, то трябва да бъде напълно възпроизведено в кода на HTML страницата, като се скрият всички под-елементи и се показват само в момента на щракване с мишката. За да разрешим този проблем, нека създадем функция cl(), която премахва всички поделементи с помощта на цикъл:

функция cl() < за (вар. i=1; i

Сега нека създадем функция за показване, която отваря поделементи:

функция show(num) < cl(); eval('sub'+num+'.style.visibility="visible"'); >

Функцията приема като единствен параметър num, номера на елемента от менюто, за който искате да покажете под-елементи. Функцията show първо затваря всички под-елементи на менюто с помощта на функцията cl(), описана по-рано, и след това отваря желания под-елемент.

Сега пишем „скелета“ на нашето меню:

Забележка

Менюто ще бъде направено на базата на слоеве (

1) Създайте слоеве, съдържащи елементи от менюто:

2) Също така създаваме под-елементи от менюто и ги вмъкваме между слоевете с елементи:

За да проектираме менюто, ще създадем два класа: първият за елемента от менюто, вторият за под-точката. Първият клас ще има син фон, цветът на шрифта ще бъде бял, без подчертаване, рамката ще бъде широка 2 пиксела, долният и десен цвят ще бъдат тъмно син, а горният и ляв цвят ще бъдат светлосин, това създава триизмерен ефект. Когато задържите курсора на мишката върху връзката (задържането на мишката съответства на този момент), ние ще променим тези цветове напротив.

Вторият клас щеимат син фон, син при задържане. Дизайнът е готов, можете да промените цветовете, както желаете.

Сега нека започнем да "съживяваме" менюто си. Това може да стане по следния начин:

  1. Когато задържите курсора на мишката върху елемент от менюто, всички под-елементи се затварят и се отваря желаният.
  2. Когато курсорът напусне поделемент, поделементът изчезва

Моментът, когато курсорът е над обекта, съответства на командата onMouseOver, а когато напусне командата, onMouseOut. Имаме функции за затваряне и отваряне на менюто, нека започнем да създаваме!