Css меню горизонтальное: Меню для сайта html и css горизонтальное — 11 вариантов меню

alexxlab

Практическая работа 16-17. Создание горизонтального и вертикального динамического меню на веб-странице

Практическая работа 16-17

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

Цель:

ü    научиться вручную создавать горизонтальное и вертикальное css-меню для сайтов.

План:

ü    Теоретические сведения

ü    Ход работы

ü    Контрольные вопросы

Теоретические сведения

Основным понятием CSS является стиль – т. е. набор правил оформления и форматирования, который может быть применен к различным элементам страницы.

Информация о стилях может располагаться либо в отдельном файле, либо непосредственно в коде Web-странички. Расположение описания стилей в отдельном файле имеет смысл в случае, если нужно применять эти стили к большему, чем одна, количеству страниц. Для этого нужно создать обычный текстовый файл, описать с помощью языка CSS необходимые стили, разместить этот файл на Web-сервере, а в коде Web-страниц, которые будут использовать стили из этого файла, нужно будет сделать ссылку на него.

Делается это с помощью тега <LINK>, располагающегося внутри тега <BODY> ваших страниц:

<LINK REL=STYLESHEET TYPE=»text/css» rel=»nofollow ugc» target=»_blank» href=»URL»>

Первые два параметра этого тега являются зарезервированными именами, требующимися для того, чтобы сообщить броузеру, что на этой страничке будет использоваться CSS. Третий параметр – HREF= «URL» – указывает на файл, который содержит описания стилей. Этот параметр должен содержать либо относительный путь к файлу – в случае, если он находится на том же сервере, что и документ, из которого к нему обращаются – или полный URL («http://…») в случае, если файл стилей находится на другом сервере.

Второй вариант, при котором описание стилей располагается в коде Web-странички, внутри тега <BODY>, в теге <STYLE type=»text/css»>… </STYLE>. В этом случае вы можете использовать эти стили для элементов, располагающихся в пределах странички. Параметр type=»text/css» является обязательным и служит для указания броузеру использовать CSS.

И третий вариант, когда описание стиля располагается непосредственно внутри тега элемента, который вы описываете. Это делается с помощью параметра STYLE, используемого при применении CSS с большинством стандартных тегов HTML. Этот метод нежелателен, и понятно почему: он приводит к потере одного из основных преимуществ CSS – возможности отделения информации от описания оформления информации.

Самый простой случай присвоения какому-либо элементу определенного стиля выглядит так:

НАЗВАНИЕ_ЭЛЕМЕНТА {свойство: значение;}

Где НАЗВАНИЕ_ЭЛЕМЕНТА – имя HTML-тега (h2, P, TD, A и т. д.), а параметры в фигурных скобках – список свойств элемента и присвоенных им значений. Более подробно команды языка CSS мы рассмотрим чуть позже.

Пример:

h2 {font-size: 30pt; color: blue;}

В этом примере всем заголовкам на странице, оформленным тегом Н1, присваивается размер шрифта 30 пунктов и синий цвет.

Также элементы страниц, созданные с использованием CSS, используют механизм наследования: т. е. если вы располагаете изображение внутри тега <P>…</P>, оформленного с помощью CSS, с отступами, так, чтобы параграф занимал только определенную часть ширины страницы, изображение также унаследует значения отступов, указанные для этого параграфа.

CSS реализует возможность присваивать стили не всем одинаковым элементам страницы, а избирательно – для этого используется параметр CLASS = «имя класса» или идентификатор ID=«имя элемента», присваивающиеся любому элементу страницы. Рассмотрим эти возможности подробнее.

Параметр CLASS применяется в случае, если необходимо создать одинаковый стиль для нескольких, но не всех элементов страницы (одинаковых или разных).

Пример:

.b-с {font-weight: bold; text-align: center} – описание стиля для класса b-с

Все элементы класса b-с будут отображаться жирным шрифтом с выравниванием по центру страницы (или ячейки таблицы).

<P>Текст параграфа</P> – параграфу присвоен стиль класса b-с.

<TD CLASS=»b-c»>текст</TD> – ячейке таблицы присвоен стиль класса b-c.

Свойства элементов, управляемых с помощью CSS

СВОЙСТВА ШРИФТА

font-family     Используется для указания шрифта или шрифтового семейства, которым будет отображаться элемент.

P {font-family: Times New Roman, sans-serif;}

font-weight    Определяет степень жирности шрифта с помощью трех параметров: lighter, bold, bolder

B {font-weight: bolder;}

font-size          Устанавливает размер шрифта. Параметр может указываться как в относительной (проценты), так и абсолютной величине (пункты, пикселы, сантиметры)

h2 {font-size: 200%;}

h3 {font-size: 150px;}

h4 {font-size: 400pt;}

font-size          Устанавливает размер шрифта. Параметр может указываться как в относительной (проценты), так и абсолютной величине (пункты, пикселы, сантиметры)

h2 {font-size: 200%;}

h3 {font-size: 150px;}

h4 {font-size: 400pt;}

ЦВЕТ ЭЛЕМЕНТА И ЦВЕТ ФОНА

color   Определяет цвет элемента

I {color: yellow;}

background-color     Устанавливает цвет фона для элемента – именно для элемента, а не для странички.

<HTML>

<HEAD>

<TITLE>Пример использования CSS</TITLE>

<STYLE type=”text/css”>

h2 {font-size: 300%;}

</STYLE>

</HEAD>

<BODY bgcolor=white>

<center><BR>

<h2 style=”background-color: teal; color: white;”>Cascading</h2>

<h2 style=”background-color: navy; color: yellow;”>Style</h2>

<h2 style=”background-color: gold; color: brown;”>Sheets</h2>

</BODY></HTML>

В этом примере в разделе <STYLE> всем элементам <Н1> на этой страничке был установлен размер 300 % от нормы. Затем каждому из элементов <h2> были присвоены собственные значения цвета фона и цвета символов.

СВОЙСТВА ТЕКСТА

text-decoration          Устанавливает эффекты оформления шрифта, такие, как подчеркивание или зачеркнутый текст

h5 {text-decoration: underline;}

A {text-decoration: none;}

.

wrong {text-decoration: line-through;}

text-align        Определяет выравнивание элемента.

P {text-align: justify}

h2 {text-align: center}

text-indent      Устанавливает отступ первой строки текста. Чаще всего используется для создания параграфов с табулированной первой строкой.

P {text-indent: 50pt;}

line-height      Управляет интервалами между строками текста.

P {line-height: 50 %}

СВОЙСТВА ГРАНИЦ

margin-left      Устанавливают значения отступов вокруг элемента.

IMG { margin-right: 20pt}

P { margin-left: 2cm}

margin-right

margin-right

margin-top      Устанавливают значения отступов вокруг элемента.

IMG { margin-right: 20pt}

P { margin-left: 2cm}

Откроем наш любимый Web-редактор Notepad (Блокнот) и создадим файл с будущим названием styles.css (название файла может быть любым). Опишем в этом файле стиль параграфа <P>, который будет использоваться на всех страничках нашего сайта:

P {

    font-family: Times New Roman, serif;

    color: #000000;

    margin-left: 15%;

    margin-right: 15%;

    margin-top: 1pt;

    margin-bottom: 1pt;

    text-indent: 1cm;

    text-align: justify;

}

Для того чтобы «привязать» созданные нами стили к нашим страничкам, во все html-файлы в разделе <HEAD> мы должны поместить строку со ссылкой на файл стилей и с указанием об использовании CSS: <LINK REL=STYLESHEET TYPE=»text/css» HREF=»styles. css»>

Поскольку файл со стилями будет находиться в том же каталоге сервера, что и остальные странички, параметр rel=»nofollow ugc» target=»_blank» href=»URL» в нашем случае будет просто именем нашего файла стилей (styles.css).

 

Пример 1 Классическое CSS-меню

 

Код HTML:

<title>Создание базового горизонтального меню для сайта CSS методами</title>
</head>
<body>
<ul class=»css-menu-1″>
<li><a rel=»nofollow ugc» target=»_blank» href=»#»>Главная</a></li>
<li><a rel=»nofollow ugc» target=»_blank» href=»#»>HTML уроки</a></li>
<li><a rel=»nofollow ugc» target=»_blank» href=»#»>CSS уроки</a></li>
<li><a rel=»nofollow ugc» target=»_blank» href=»#» class=»selected»>CSS меню</a></li>
<li><a rel=»nofollow ugc» target=»_blank» href=»#»>Справочник</a></li>
</ul>

 

Код на css:

ul.

css-menu-1 {
list-style: none
}

ul.css-menu-1 li {
display: inline
}

ul.css-menu-1 li a {
font-family: Tahoma, Geneva, sans-serif; 
text-decoration: none;
background: #5c6cb7;
font-weight: bold;
color: #ffaa00; 
padding: 6px 10px 6px 10px
}

ul.css-menu-1 li a:hover {
padding: 6px 10px 6px 10px;
font-weight: bold;
background: #364d95;
color: #ff9900 
}

ul.css-menu-1 li a.selected {
background: #364e95
}

 

 

Пример 2 Меню с подсказкой

 

Код на HTML:

<title>Создание красивого горизонтального CSS меню для сайта</title>
</head>
<body>
<div id=»css-menu»>
<ul>
<li><a rel=»nofollow ugc» target=»_blank» href=»#»>
<span class=»text-top»>Главная</span>
<span class=»text-bottom»>О нашем проекте</span>

</a></li>
<li><a rel=»nofollow ugc» target=»_blank» href=»#»>
<span class=»text-top»>Справочник</span>
<span class=»text-bottom»>CSS справочник</span>
</a></li>
<li><a rel=»nofollow ugc» target=»_blank» href=»#»>
<span class=»text-top»>CSS уроки</span>
<span class=»text-bottom»>Для начинающих</span>
</a></li>
<li><a rel=»nofollow ugc» target=»_blank» href=»#»>
<span class=»text-top»>CSS меню</span>
<span>Коллекция CSS меню</span>
</a></li>
</ul>
</div>

 

Код на css:

#css-menu ul {
list-style: none;
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
line-height: 1. 4em;
border:2px solid #000000;
border-left: 1px solid #000000;
float: left;
padding: 0;
margin: 12px 0 25px 24px
}

#css-menu ul li {
float: left
}

#css-menu ul li a {
display: block;
text-decoration: none;
background-color: #595959;
padding: 5px 10px 0 10px;
color: #fefefe;
width: 120px;
border-right: 1px solid #797979;
border-left: 1px solid #191919
}

#css-menu ul li a span {
display: block
}

#css-menu ul li a span.text-top {
border-bottom: 1px solid #595959
}

#css-menu ul li a:hover span.text-top {
border-bottom: 1px dashed #fefefe;
color: #ffddbb
}

#css-menu ul li a span.text-bottom {
visibility: hidden;
font-size: 11px;
text-align: right
}

#css-menu ul li a:hover span.text-bottom {
visibility: visible 
}

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

Вертикальное меню будет написано на чистом html и CSS. Смена цвета и дорисовка линий по 1px создают эффект жалюзи. А дальше экспериментируйте сами и создавайте своё уникальное и неповторимое вертикальное css меню.

Рисунок 3  — Вертикальное и горизонтальное меню на CSS

Фрагмент html кода:

<table border=»0″ align=»center» cellpadding=»0″ cellspacing=»0″>
<tr>
<td valign=»top»>
<!— Область вертикального меню —>
<div>
<ul>
<li><a rel=»nofollow ugc» target=»_blank» href=»#1″ title=»Обзорные статьи«>Обзоры</a></li>
<li><a rel=»nofollow ugc» target=»_blank» href=»#2″ title=»Теоретический курс«>Теория</a></li>
<li><a rel=»nofollow ugc» target=»_blank» href=»#3″ title=»Пошаговые инструкции«>Практикум </a></li>
<li><a rel=»nofollow ugc» target=»_blank» href=»#4″ title=»Справочная информация«>Спроавочники</a></li>
<li><a rel=»nofollow ugc» target=»_blank» href=»#5″ title=»Что предстоит«>Перспективы</a></li>
<li><a rel=»nofollow ugc» target=»_blank» href=»#6″ title=»Новые разработки«>Проекты</a></li>
<li><a rel=»nofollow ugc» target=»_blank» href=»#7″ title=»Письма«>Контакт</a></li>
<li><a rel=»nofollow ugc» target=»_blank» href=»#8″ title=»Об авторе«>Автора</a></li>
</ul>
</div>
<!— Конец области вертикального меню —>
</td>
<td><font>Создать сайт самостоятельно</font></td>
</tr>
</table>

Область вертикального меню — html файл

<table border=»0″ align=»center» cellpadding=»0″ cellspacing=»0″>.

Границу в таблице убрали: border=»0″ и отредактировали ширину ячеек таблицы, чтобы меню хорошо сидело.

<td width=»17%» valign=»top»> — область вертикального меню css;

<td width=»83%»> — область контента.

Обратите внимание, что в области вертикального меню css есть параметр valign=»top», который необходим для того, чтобы элементы, находящиеся в нём притягивались кверху, т.е. чтобы меню на css не болталось посередине (принято по умолчанию).

Присваиваем блоку div идентификатор «menu-verticalnoe»: <div> и далее используем маркированный список: теги <ul> <li> <li> … </li>  </li> </ul>. Практически всё аналогично построению горизонтального меню css, но здесь вводится параметр <title> в теге ссылки:

<a rel=»nofollow ugc» target=»_blank» href=»#2″ title=»Теоретический курс»>Теория</a>.

Файл каскадных таблиц стилей:

Дописываем в файл style. css следующие директивы

/******    Меню Вертикальное CSS  *********/

Задаём идентификатор для маркированного списка

#menu-verticalnoe ul {

Задаём отступы

margin: 5px;
padding: 0;

Отменяем использование маркеров в маркированном списке.

list-style: none;

Выбираем какие шрифты будут использоваться.

font-family: verdana, arial, Helvetica;
}

Идентификатор для маркера

#menu-verticalnoe li { margin: 0; }

Работаем с кнопками вертикального меню CSS

#menu-verticalnoe a {

Выбираем блочную структуру отображения элементов.

display: block;

Настраиваем отступы вертикального меню css.

padding: 5px 10px;

Задаём размер ширины кнопки.

width: 115px;

Цвет текста ссылки.

color: #fff;

Цвет кнопки вертикального меню css.

background-color: #683906;

Запрещаем все эффекты с текстом.

text-decoration: none;

Создаём эффект кнопкам вертикального меню css, задавая границы в 1px, непрерывными линиями разных цветов.

border-top: 1px solid #ffffff;
border-bottom: 1px solid #444444;
border-left: 1px solid #ffffff;
border-right: 1px solid #444444;

Задаём жирность начертания.

font-weight: bold;

Размер шрифта.

font-size: 13px;
}

Установки идентификатора для вертикального меню при наведении курсора

#menu-verticalnoe a:hover {

Меняем цвет ссылочного текста.

color: #bbb;

Меняем цвет кнопки.

background-color: #572800;

 

Снимаем все эффекты.

text-decoration: none;

Формируем визуальный эффект вжатости.

border-top: 1px solid #444444;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #444444;
border-right: 1px solid #ffffff;
}

 

 

Ход работы

Задание. Разработать горизонтальное и вертикальное css-меню, содержащее не менее 7 пунктов.

 

Контрольные вопросы

1 В чем отличие панели навигации от динамического меню?

2 В каком блоке располагается динамическое меню?

3 С помощью каких тегов создается маркированный список?

4 Какое свойство CSS позволяют убрать маркеры списка?

5 С помощью каких свойств  CSS пункты меню размещаются горизонтально (вертикально)?

 

Панель навигации CSS

Следующая глава >>

Демонстрация: панели навигации

Вертикальный

  • Домашний
  • Новости
  • Контакт
  • О

Горизонтальный

  • Домашний
  • Новости
  • Контакт
  • О

  • Дом
  • Новости
  • Контакт
  • О

Панели навигации

Удобная навигация важна для любого веб-сайта.

С помощью CSS вы можете превратить скучные HTML-меню в красивые панели навигации.

Панель навигации = Список ссылок

В качестве основы для панели навигации требуется стандартный HTML.

В наших примерах мы создадим панель навигации из стандартного HTML-списка.

В наших примерах мы создадим панель навигации из стандартного HTML-списка.

Пример

Попробуйте сами

Теперь давайте удалим маркеры, поля и отступы из списка:

Пример

ul {
   тип-стиль-списка : никто;
   маржа : 0;
   заполнение : 0;
}

Попробуйте сами

Объяснение примера:

  • list-style-type: none; — Удаляет пули. Для панели навигации не нужны маркеры списка
  • Установить поле: 0; и заполнение: 0; для удаления настроек браузера по умолчанию

Вертикальная панель навигации

Чтобы создать вертикальную панель навигации, вы можете стилизовать элементы внутри списка в дополнение к приведенному выше коду:

Пример

li a {
   дисплей : блокировать;
   ширина: 60 ​​пикселей;
}

Попробуйте сами

Объяснение примера:

Вы также можете установить ширину

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *