... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Слои в CSS. Выпадающее меню. (стр.3)

 

 


Небольшие отступы со всех сторон отодвинут текст от краев блока. Размер шрифта тут уже можно задать в относительных единицах em. Это предоставит пользователю возможность увеличить его в случае необходимости. Размеры шрифта меню и подменю зададим жестко в пикселях, чтобы они "не расползлись".

HTML-код третьего блока будет простым:

<DIV ID="content">
<H1>X-Men 3</H1>
<P>
20th Century Fox и Marvel Studios сдвинулись с места в деле "Люди X 3". Новый сценарий пишет Саймон Кинберг ("Мистер и Миссис Смит", "Электра", "Фантастическая четверка"). Кинберг сообщил, что сюжет пока находится в разработке. "Мне понравились 2 первых фильма сериала, - сказал Кинберг. - Я и раньше работал с Fox и Marvel над другими проектами, и когда они предложили мне поработать над этим проектом, я с удовольствием согласился. Ведь я же вырос на этом комиксе. Я люблю их всей душой. Это будет лучший фильм в трилогии. Это будет нашим "Возвращением короля"."
</P>
<P>
Продюсеры фильма планируют начать съемки летом, а также находятся в поисках режиссера, так как от режиссера двух первых фильмов Брайана Сингера решили отказаться. Актерский же состав предполагается оставить таким, как и раньше.
</P>
<DIV>

Теперь будем создавать и позиционировать блоки подменю, причем размещать их будем на отдельных слоях, используя свойство z-index. Создадим блоки, соответствующие пунктам меню по названию, и определим пункты подменю.

  1. Главная - блок подменю #main:
    • новости;
    • карта сайта.
  2. Фильмы - блок подменю #movie:
    • комедии;
    • мелодрамы;
    • триллеры;
    • ужасы;
    • фантастика;
    • боевики;
    • мультфильмы.
  3. Статьи - блок подменю #issue:
    • о кино;
    • об актерах;
    • о съемках.
  4. Обзоры - блок подменю #survey:
    • кино-новинки;
    • DVD-новинки.
  5. Форум - блок подменю #forum:
    • вход;
    • регистрация.

По строению все эти блоки похожи: светло-фиолетовый фон, темная тонкая граница, позиционирование абсолютное со сдвигом 74 пикселя от верхнего края окна браузера. Смещение от левого края будет у всех разное - в зависимости от блока: 10, 100, 173, 245 и 322 пикселя соответственно. Эти величины подбирались опытным путем, так чтобы меню выглядело аккуратно и однотипно.

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

Приведу код CSS-правил для блоков подменю — имеющиеся комментарии помогут вам легко в них разобраться. Обратите внимание на значения свойств z-index.

#main {
background: #F5F5DC;
border: 1px solid #404082;
width: 100px;
position: absolute;
left: 10px;
top: 74px;
visibility: hidden;
z-index:1;
}

#movie {
background: #F5F5DC;
border: 1px solid #404082;
width: 100px;
position: absolute;
left: 100px;
top: 74px;
visibility: hidden;
z-index:2;
}

#issue { background: #F5F5DC;
border: 1px solid #404082;
width: 100px;
position: absolute;
left: 173px;
top: 74px;
visibility: hidden;
z-index:3;
}

#survey { background: #F5F5DC;
border: 1px solid #404082;
width: 100px;
position: absolute;
left: 245px;
top: 74px;
visibility: hidden;
z-index:4;
}

#forum { background: #F5F5DC;
border: 1px solid #404082;
width: 100px;
position: absolute;
left: 322px;
top: 74px;
visibility: hidden;
z-index:5;
}

 

Страница: - 1 - | - 2 - | - 3 - | - 4 - | - 5 - | - 6 -

 

Наверх страницы

 

Уроки CSS © 2007 - 2018 г. Все права защищены