В рамках нашего курса изучения HTML/CSS и на основе создания сайта рекламы кофе предлагаю изучить списки HTML. В данной статье мы сделаем еще несколько страничек, и ссылки на них будут оформлены в виде списка. Это и будет наше главное меню сайта.

 

Структура сайта

Меню - это навигация пользователей по основным разделам сайта, это отражение структуры сайта. Меню должно быть понятным, чтобы у пользователя не возникало вопросов где искать информацию.

 

В рамках этой статьи мы не будем рассматривать проектирование структуры сайта, а просто воспользуемся самыми популярными разделами меню.

Мой список таков (Кстати, в статье используются списки HTML):

  • Главная страница
  • Статьи
  • Контакты
  • Ссылки
  • FAQ

Вы вправе дать волю своему воображению в формировании списка, но я рекомендую уделить большее внимание изучения самих списков и не тратить время, оно вам еще пригодится.

Итак, создаем в корне сайта еще четыре гипертекстовых файла: articles.html, contacts.html, links.html faq.html. Пусть они будут пока пустые, нам их содержимое пока не важно. Создайте их копированием файла index.html

Теперь пока не будем трогать эти файлы, а изучим списки HTML.

Создание вертикального и горизонтального меню сайта

На практике используется несколько видов меню. Как правило это вертикальное или горизонтальное меню. Еще меню сайта может быть сложным - содержать подпункты, которые представлены вложенными списками, но это мы рассмотрим на другом занятии.

Построение вертикального меню

Вертикальное меню представляет собой список, элементы которого расположены друг под другом от первому к последнему. Без применения определенных стилей при построении списка по умолчанию его элементы выведутся вертикально. Такие меню располагают чаще всего в боковых колонках сайта.

Всего есть два вида списков. Из опыта использования MS Word вы, я подозреваю, уже знаете, что списки бывают нумерованными и ненумерованными. Так и здесь списки HTML — контейнеры нумерованного списка (ordered list) <ol></ol> и ненумерованного (unordered list) <ul></ul>.

Элементы списка обозначаются <li></li> (list item). Все, что между ними и есть один элемент списка, следовательно, новые элементы также заключаются в такие теги.

Расположим меню в левой части сайта (в левой колонке). Наш список главного меню сайта будет ненумерованным:

<div id="left">
    <h3>Навигация</h3>
    <ul id="mmenu">
        <li>Главная</li>
        <li>Статьи</li>
        <li>Контакты</li>
        <li>Ссылки</li>
        <li>FAQ</li>
    </ul>
</div>

Вы заметили, что я название меню поместил между <h3> и </h3>. Это теги заголовка. Всего их шесть: от 1 до 6 уровней в порядке уменьшения. То есть h1 (header 1) самый большой. Такие заголовки уже имеют отступ сверху и снизу, как у параграфа, образуют новую строку, как параграф, но еще увеличивают размер шрифта у помещаемого внутрь текста. Такие заголовки очень хорошо индексируются поисковиками, так как должны отражать краткую суть дальнейшего текста.

Что же касается списка HTML, то тег <ul>тоже имеет внешние отступы сверху и снизу, но еще и есть и внутренний отступ (padding). Это свойство схоже с внешним (margin) отступом, но расстояние до текста изменяется относительно края самого контейнера. Обратите внимание, что элементы списка далеки от края контейнера <ul>. Теперь наведем на него firebug. В firebug подсветка внешнего отступа обозначается желтым, а внутренних – синим цветом, к то время как само содержимое контейнера подсвечивается голубым. На картинке контейнер списка содержит меню сайта.

Создание вертикального меню сайта

У каждого пункта меню (элемента списка) проставлен маркер. По умолчанию он есть и отображен диском. Теперь мы научимся управлять маркерами. Допишите в таблицу стилей следующий текст:

#mmenu {
    list-style-type:none;
}

При таком раскладе исчезнут маркеры списка. Существует несколько вида маркеров: circle, disc, square и другие, но на практике, я чаще вообще отключаю маркеры. А вот вместо зарегистрированных маркеров можно использовать свой, который сам придумал. Для такого дела есть свойство list-style-images, путь прописывается как при объявлении фонового изображения блока. Это мы уже проходили. Чтобы задать позицию воспользуемся свойством list-style-position: inside | outside.

  • outside — маркер вынесен за границу элемента списка
  • inside — маркер обтекается текстом

Давайте слегка уменьшим внутренний отступ. Для этого дополните стиль меню:

#mmenu {
    list-style-type:none;
    padding-left:10px;
}

Теперь осталось только присвоить ссылки нашим элементам списка.

<ul id="mmenu">
    <li><a href="/" title="Главная"> Главная</a></li>
    <li><a href="/articles.html" title="Статьи">Статьи</a></li>
    <li><a href="/contacts.html" title="Контакты">Контакты</a></li>
    <li><a href="/links.html" title="Ссылки">Ссылки</a></li>
    <li><a href="/faq.html" title="FAQ">FAQ</a></li>
</ul>

Стили пропишем для ссылок следующим образом:

#mmenu a{
    color:#FDE38C;
}
#mmenu a:hover{
    color:red;
}

Мы построили вертикальное меню и расположили его в левой колонке. Это позволит пользователю беспрепятственно попасть на страницы, на которые мы сослались в меню.

Создание вертикального меню сайта

Построение горизонтального меню

Горизонтальное меню - это список, элементы которого расположены рядом друг с другом. Достигается этот эффект при помощи специальных стилей.

Горизонтальное меню очень капризное и доставляет множество хлопот при сайте с адаптирующейся шириной элементов. Так как пункты меню могут вести себя непредсказуемо, если не предусмотреть правильное назначение стилей. У нас здесь шаблон фиксированный, однако это говорит о том, что мы сможем уместить конечное количество элементов списка в одну строку.

Горизонтальное меню очень популярно и для его создания нам поможет уже знакомое свойство css float.

Дополните индексный файл следующими строками в разделе top перед логотипом:

<div id="top">
  <div id="top-menu">
      <ul id="tmenu">
        <li><a href="/" title="Главная"> Главная</a></li>
        <li><a href="/articles.html" title="Статьи">Статьи</a></li>
        <li><a href="/contacts.html" title="Контакты">Контакты</a></li>
        <li><a href="/links.html" title="Ссылки">Ссылки</a></li>
        <li><a href="/faq.html" title="FAQ">FAQ</a></li>
      </ul>  
  </div>    
<div class="clear"></div>

У нас добавился новый блок top-menu и новый список tmenu. Давайте пропишем для них следующий код в таблицы стилей:

#top-menu {
    width:900px;
    height:50px;
}
#tmenu {
    width:900px;
    height:50px;
    padding:0;
    margin:0;
    background-color:#4d2001;
    list-style-type:none;
}
#tmenu li{
    float:left;
    width:100px;
}
#tmenu li a{
    color:#ff0000;
    text-decoration:none;
    display:block;
    line-height:50px;
    padding:0 10px;
}
#tmenu li a:hover{
    background-color:#FDE38C;
}

Посмотрите что получилось и проанализируем код. В самом построении меню списком ничего не изменилось, а вот в стилях основному блоку мы задали ширину и высоту. Те же самые параметры задали и для ненумерованного списка, только убрали все отступы и раскрасили в темно-коричневый цвет (чтобы было видно границы) и убрали маркеры.

Сами элементы списка прижали  слева друг к другу при помощи  float:left и задали ширину в 100 пикселов. А вот ссылки мы сделали блоками при помощи свойства display:block. Это нужно для того, чтобы ссылкой считалась вся область, а не только текст, то есть нажать можно на любую область прямоугольника. Кроме того ссылкам задали межстрочный интервал и отступы. А вот при наведении на ссылку блок будет окрашиваться в другой цвет при помощи параметров в a:hover.

С цветом поиграйте, так как у меня получилось хоть и наглядно, но некрасиво.

Важным при работе со списками является обращение к свойствам первого и последнего элемента, я когда-то даже не мог предположить, что такие возможности есть и поэтому не пользовался, но вам расскажу. Допишите в стили строки:

#tmenu li:first-child a:hover{
    background-color:#ffffff;
}
#tmenu li:last-child a:hover{
    background-color:#00ff00;
}

 First - первый, last - последний. Зная эти свойства, можно еще более гибко настроить меню, например задать отступ только для первого элемента.

Создание горизонтального  меню сайта

 Следующим этапом у нас будет создание выпадающего меню, ну а данный урок будем считать законченным. В приложении снова исходники проекта со списками.

Добавить комментарий

Защитный код

Введите код с картинки в текстовое поле