Итак, приступим к меню, которое отображается в верхней части окна.
Для этого меню вы уже проделали немало работы. Вы, наверное, помните прекрасный градиент, который был сохранен как однопиксельная графика. Именно он сейчас будет использован. Однако прежде всего необходимо создать соответствующую HTML-структуру для области меню. Она может выглядеть примерно так:
<div class="header"> <div class="header-top"> <h1>Ваш бухгалтер</h1> </div> <div class="topmenu"> <ul> <li><a href="index.html">Главная</a></li> <li><a href="#">О нас</a></li> <li><a href="#">Наша работа</a></li> <li><a href="#">Контакты</a></li> <li><a href="#">Импринт</a></li> </ul> </div> <div class="header-img"> </div> </div>
Для оформления фона используется однопиксельная графика, которая повторяется вертикально столько раз, пока вся область не будет заполнена.
.topmenu {
background-image: url(../images/menue.jpg);
background-repeat: repeat-x;
width: 978px;
height: 37px;
float: left;
}
Затем можно форматировать меню. В принципе, здесь нет ничего особенного. Здесь всегда важны только следующие аспекты:
• Скрыть маркеры списка с помощью list-style-type: none;.
• Убедиться, что пункты списка отображаются горизонтально.
Я, как вы уже знаете, работаю с градиентом, реализованным с помощью графики. Между тем для меню сейчас доступно еще множество других вариантов. Например, JavaScript-фреймворки, такие как jQuery. Представить все эти возможности здесь было бы слишком долго. Однако уже сейчас существует множество онлайн-генераторов, с помощью которых можно создать меню всего за несколько кликов. Один из них — без оценки того, является ли он самым гениальным из существующих — можно найти по адресу http://www.cssmenubuilder.com/.
Я, в свою очередь, выбрал следующий вариант:
.topmenu ul {
width: 100%;
height: 37px;
list-style-type: none;
}
.topmenu ul li {
height: 37px;
float: left;
padding-right: 25px;
padding-left: 25px;
}
.topmenu ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 37px;
color: #fff;
text-decoration: none;
display: block;
height: 37px;
float: left;
padding-right: 20px;
padding-left: 20px;
}
.topmenu ul li a:hover {
background-image: url(../images/menue-hover.jpg);
background-repeat: repeat-x;
background-position: left top;
}
Важен, собственно, только состояние при наведении курсора мыши. Когда это происходит, отображается другая фоновая графика.
Правое меню
На сайте есть не только меню вверху, но также меню отображается в правой части окна.
Это меню относится к области div с классом content-right. В процессе разработки страницы там пока находятся только фиктивные данные.
<div class="content-right"> <h2>Главное меню</h2> <ul> <li><a href="#">Ссылка 1</a></li> <li><a href="#">Ссылка 2</a></li> <li><a href="#">Ссылка 3</a></li> <li><a href="#">Ссылка 4</a></li> <li><a href="#">Ссылка 5</a></li> <li><a href="#">Ссылка 6</a></li> <li><a href="#">Ссылка 7</a></li> <li><a href="#">Ссылка 8</a></li> <li><a href="#">Ссылка 9</a></li> <li><a href="#">Ссылка 10</a></li> </ul>
Сначала область размещается в нужном месте и с нужными размерами.
.content-right {
width: 210px;
float: right;
padding-right: 20px;
margin-top: 20px;
border: 1px solid #eee;
}
Далее следует определение самого меню. На этот раз пункты находятся один под другим. Вам достаточно только убедиться, что маркеры списка скрыты. Остальное оформление меню остается на ваше усмотрение.
.content-right ul {
list-style-type: none;
}
.content-right ul li {
padding-left: 45px;
padding-top: 4px;
padding-bottom: 4px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ccc;
}
.content-right ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
text-decoration: none;
text-align: left;
display: block;
}
.content-right ul li a:hover {
color: #0b90d6;
}В браузере должна получиться следующая картинка:
Нижнее меню
В нижней части веб-сайта будет еще одно меню. Здесь на PSD-Tutorials.de также используется подобное меню для предоставления ссылок на общую информацию.
На нашем веб-сайте также есть уведомление об авторских правах. Оба эти элемента на самом деле довольно типичны для веб-сайтов. Сначала структура HTML.
<div class="bottom"> <ul> <li><a href="index.html">Главная</a></li> <li><a href="#">О нас</a></li> <li><a href="#">Новости</a></li> <li><a href="#">Центр управления</a></li> <li><a href="#">Контакты</a></li> <li><a href="#">Импринт</a></li> <li><a href="#">Карта сайта</a></li> </ul> <p>© Авторские права 2014 от PSD-Tutorials.de</p> </div>
Это простой список ul. Каждый элемент списка содержит пункт меню. Под ul есть элемент p, в котором указано уведомление об авторских правах. Теперь не хватает только CSS-синтаксиса.
.bottom {
background-image: url(../images/footer.jpg);
background-repeat: no-repeat;
background-position: left top;
text-align: center;
width: 1000px;
height: 110px;
float: left;
}
Как именно вы оформите нижнюю часть, остается на ваше усмотрение. Я снова использую градиент. Но вы также можете использовать обычный фон или сразу синтаксис CSS3. В случае моего графического варианта важно, чтобы повторение было запрещено с помощью background-repeat: no-repeat;.
Сначала посмотрите на результат:
Здесь бросается в глаза белые линии, которые отображаются рядом с отдельными пунктами меню. Они определяются различными указаниями для border-left, что в конечном итоге означает, что эти указания относятся к левому краю элемента.
В целом синтаксис нижнего меню выглядит следующим образом:
.bottom ul {
margin-top: 30px;
list-style-type: none;
}
.bottom ul li {
display: inline;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #fff;
}
.bottom ul li a {
font-size: 12px;
color: #fff;
text-decoration: none;
padding-right: 15px;
padding-left: 15px;
}
.bottom ul li a:hover {
text-decoration: underline;
}
.bottom p {
font-size: 12px;
color: #fff;
margin-top: 40px;
}
.bottom a {
font-size: 12px;
color: #fff;
margin-top: 40px;
}
.bottom a:hover {
text-decoration: none;
}
Здесь есть отличие по сравнению с верхним меню. Фактически, при наведении курсора не загружается дополнительная графика. Однако для посетителей все же есть индикация того, что они навели курсор на ссылку: отдельные ссылки подчеркиваются при наступлении события наведения.
В конце этого урока выполнены основные шаги к созданию веб-сайта. Что остается, так это улучшить внешний вид страницы. Об этом будет больше в следующих уроках.
