Выпадающее меню за пять минут как пример применения CSS
В данном случае мы делаем выпадающее меню по типу известных всем
сложных менюшек. Вся сложность их заключалась именно в проблеме
совместимости разных броузеров - для Нетскейпов старых писалась одна часть
скрипта, для Эксплореров - другая. Для поддерживающих CSS в
"стандартном" объеме броузеров того-же эффекта можно достичь значительно
более простыми методами.
Что нам требуется для эффекта "выпадающего" меню? Нам надо изменять
своиства некоторых блоков так, чтоб при наведении мышки на определенный
участок того-же блока или на "управляющую" ссылку эти самые блоки
становились видимыми. Это несколько упрощенно, но суть происходящего
вполне описывает.
В данном примере все будет "собранно" с применением свойства
overflow. Почему именно это свойство?
Напоминаю, свойство verflow управляет поведением блока при
его "переполнении" - блок или растягивается, вмещая в себя все содержимое,
или остается заданного размера "срезая" лишнее содержимое, или при
переполнении блока предоставляет нам возможность скроллировать содержимое
возникающей полосой прокрутки. Это не все возможности данного свойства, но
нам этого вполне хватит.
Сама идея "прорисовывается" сразу - или мы видим все содержимое блока,
или мы видим только его верхнюю часть с темой, все остальное срезается.
Нам надо для этого только точно описать два состояния блока и менять одно
на другое по необходимости. Сразу предупреждаю - подобного эффекта можно
достичь применением свойства clip, но оно не
дает нам возможности сохранять рамки при изменении. Кроме того, Опера 5 не
поддерживает overflow. Да и
clip, в общем, тоже...
Сделаем, например, два выпадающих меню. Что нам надо еще для
изготовления? Надо определиться с позиционированием. Если мы оставляем
наши изменяемые блоки в основном потоке документа, то изменение размеров
их будет сказываться на всем документе. Страницу будет "колбасить".
Значит, блоки меню выводим из общего потока, позиционируем
"абсолютно".
Первый прикид:
BODY {
MARGIN: 0px;
PADDING: 0px;
background-color: #A8C228;
}
.men {position: absolute;
left: 10%;
top: 30px;
background-color: #A8C228;
border:
1px solid #000;
width: 20%;
height: 18px;
overflow: hidden;
text-align: left;
}
.men1 {position: absolute;
left:
10%;
top: 30px;
background-color: #ffffff;
border: 1px solid
#000;
width: 20%;
height: auto;
overflow: visible;
text-align: left;
}
.men2 {position: absolute;
left:
31%;
top: 30px;
background-color: #A8C228;
border: 1px solid
#000;
width: 20%;
height: 18px;
overflow: hidden;
text-align: left;
}
.men22 {position: absolute;
left:
31%;
top: 30px;
background-color: #ffffff;
border: 1px solid
#000;
width: 20%;
height: auto;
overflow: visible;
text-align: left;
}
#cont {position: absolute;
left:
10%;
top: 50px;
background-color: #A8C228;
border: 1px solid
#fff;
width: 80%;
height: 400px;
text-align: left;
}
A.m {display: block;
background-color:#fff;
width: 100%;
height: auto;
color:#000000;
font-family: Verdana, sans-serif;
FONT-SIZE: 10px;
text-decoration: none;
text-align: left;
padding: 3px;
}
A.m:hover {
display: block;
background-color:#005CC0;
color:#fff;
} А на странице пишем:
<DIV id=cont>
oooooo
</DIV>
<DIV class=men
ONMOUSEOVER="this.className='men1';"
ONMOUSEOUT="this.className = 'men';">
<a href="#" class=m
>Синие цвета</a>
<a href="#" class=m >Синие
цвета</a>
<a href="#" class=m >Синие цвета</a>
<a href="#" class=m >Синие цвета</a>
<a href="#"
class=m >Синие цвета</a>
<a href="#" class=m >Синие
цвета</a>
</DIV>
<DIV class=men2
ONMOUSEOVER="this.className='men22';"
ONMOUSEOUT="this.className =
'men2';">
<a href="#" class=m >Желтые цвета</a>
<a href="#" class=m >Желтые цвета</a>
<a href="#"
class=m >Желтые цвета</a>
<a href="#" class=m >Желтые
цвета</a>
<a href="#" class=m >Желтые цвета</a>
<a href="#" class=m >Желтые цвета</a>
<a href="#"
class=m >Желтые цвета</a>
<a href="#" class=m >Желтые
цвета</a>
<a href="#" class=m >Желтые цвета</a>
</DIV> Посмотрите результат первой прикидки выпадающего меню,
изготовленного с применением CSS.
Что мы сделали:
Для первого меню мы назначили два класса -
men и men1
Для второго меню - классы men2 и
men22
Рассмотрим все на примере первого меню.
Класс men у нас описывает меню в
"пассивном" состоянии. Обратить внимание стоит на overflow:
hidden; - при данном описании блок "срезается" до
установленных нами размеров, в данном случае - height:
18px; При наведении мышки на блок класс меняется на
men1, в котором у нас прописанно
height: auto; overflow: visible; Высота
блока устанавливается в зависимости от содержимого, виден весь блок
целиком. Управление производится "фразой"
ONMOUSEOVER="this.className='men1';" ONMOUSEOUT="this.className =
'men';"
Обратите внимание! Изменение классов происходит при
наведении мышки на блок, а не на ссылку!
Кроме того, мы прописали явно указания для ссылок, содержащихся в меню,
назначив им отдельный класс .m Кроме того,
стоит обратить внимание на порядок вывода абсолютно позиционированых
блоков - так как блок cont, предназначенный
для содержимого страницы, позиционирован абсолютно, то его мы выводим
первым. Если точнее, то для того, чтоб наши меню были
расположенны поверх всех абсолютно позиционированых блоков, мы должны
"выводить" их на страницу в последнюю очередь, на станице их описание мы
вставляем ниже их всех.
Если вы видели пример в Эксплорере, то вполне могли подумать, что это
все. Ан нет! Не радуйтесь! Если читали предыдущие статьи этого раздела, то
должны знать о том, что Эксплорер не совсем правильно формирует блоки. В
данном случае мы "упираемся" в данный "финт" описанием блоков ссылок - у
нас указанна ширина в сто процентов и при просмотре в Нетскейпе шестом
синий фон ссылок несколько шире ширины блока меню. Для устранения этой
"неприятности" мне пришлось указать все размеры в более "жестких" единицах
- пикселах, вычислить все требуемые размеры для блоков ссылок и ввести
поправку на разночтения.
.men {position: absolute;
left: 50px;
top: 30px;
background-color: #A8C228;
border: 1px solid #000;
width:
200px;
height: 18px;
overflow: hidden;
text-align: left;
voice-family: "\"}\"";
voice-family: inherit;
width:198px;
}
html>body .menDIV {
width:198px;
}
.men1
{position: absolute;
left: 50px;
top: 30px;
background-color:
#ffffff;
border: 1px solid #000;
width: 200px;
height: auto;
overflow: visible;
text-align: left;
voice-family: "\"}\"";
voice-family: inherit;
width:198px;
}
html>body
.men1DIV {
width:198px;
}
.men2 {position: absolute;
left: 260px;
top: 30px;
background-color: #A8C228;
border:
1px solid #000;
width: 200px;
height: 18px;
overflow: hidden;
text-align: left;
voice-family: "\"}\"";
voice-family:
inherit;
width:198px;
}
html>body .men2DIV {
width:198px;
}
.men22 {position: absolute;
left:
260px;
top: 30px;
background-color: #ffffff;
border: 1px solid
#000;
width: 200px;
height: auto;
overflow: visible;
text-align: left;
voice-family: "\"}\"";
voice-family:
inherit;
width:198px;
}
html>body .men22DIV {
width:198px;
}
#cont {position: absolute;
left:
10%;
top: 50px;
background-color: #A8C228;
border: 1px solid
#fff;
width: 80%;
height: 400px;
text-align: left;
}
A.m {display: block;
background-color:#fff;
width: 198px;
height: auto;
color:#000000;
font-family: Verdana, sans-serif;
FONT-SIZE: 10px;
text-decoration: none;
text-align: left;
padding: 3px;
voice-family: "\"}\"";
voice-family: inherit;
width:192px;
}
html>body A.m {
width:192px;
}
A.m:hover {
display: block;
background-color:#005CC0;
color:#fff;
} Что мы изменили:
Мы выставили все размеры в пикселах, в том числе и параметры
расположения блоков, "подправили" размеры для правильного чтения в
Нетскейпе шестом.
В "неактивном" классе блоков мы добавили:
voice-family: "\"}\"";
voice-family: inherit;
width:198px;
}
html>body .menDIV {
width:198px;
}
Ширина блока 198 у нас сформировалась из заданной ширины 200 минус по
одному пикселю с каждого края на рамку, толщиной в 1 пиксель.
Относительно сильно мы изменили описание стилей ссылок:
FONT-SIZE: 10px;
text-decoration: none;
text-align:
left;
padding: 3px;
voice-family: "\"}\"";
voice-family:
inherit;
width:192px;
}
html>body A.m {
width:192px;
} Обратите внимание на формирование размеров - ширина блока ссылки
образуется из ширины блока в 200 минус рамка и минус padding:
3px с обоих сторон. В итоге у нас и получается 192. Размер шрифта я
задал в 10 пикселей, при ширине "неактивного" меню в 18 и отступах для
ссылок в 3 пикселя данный размер более подходящий. Если будет
необходимость увеличить размер шрифта в меню, то нужно будет увеличить и
высоту неактивного меню.
Посмотрите результат адаптированного к разным броузерам
меню, изготовленного с применением CSS, почти без применения
скриптов
Вот так оно и делается... В Эксплорере все работает идеально, в
Нетскейпе шестом возможно некоторое "подтормаживание" при закрытии
подобного меню, видимо, чтение каскадных таблиц стилей в Нетскейпе хоть и
дает правильный итог, но происходит несколько иначе.
Что еще можно сказать по данной теме...
Можно, например, использовать подобную схему для изготовления простого
меню фиксированной ширины с "подсветкой".
Пример
простого меню фиксированной ширины.
Можно использовать всю конструкцию почти без изменений и сделать меню
по типу "каскадного". В этом случае можно абсолютно не позиционировать
сами блоки меню, а просто расположить их по порядку по левому краю
страницы. Блок с основным содержимым расположить на расстоянии в несколько
пикселов правее меню.
Пример
меню, раскрывающегося по типу "каскадного".
Между прочим, этот пример можно использовать как готовый шаблон для
страниц сайта. Интересным может быть описание абсолютно позиционированого
блока с текстом width: auto; При таком стиле блок будет
иметь ширину, позволяющую вместить максимум содержимого и не заходить за
край экрана.
|
