Блог web-разработчика | HTML+CSS, PHP, MySQL, JavaScript/jQuery

Март/10

28

Меню для сайта. Часть I.

6 коммент. » | Автор admin, рубрики Верстка

Меню при помощи CSS
Современные сайты пестрят обилием различного рода навигационных панелей, меню. Если поискать в сети, то можно найти онлайн сервисы по созданию меню на любой вкус, но этим постом мне хотелось бы начать серию публикаций и показать как можно сделать меню “своими руками”, используя современные методы CSS и JavaScript. В этой части покажу примеры простых горизонтальных и вертикальных меню.

Одно из меню, которое получилось в этом посте.

HTML-разметка

По сути говоря, все меню имеют примерно одинаковую html-разметку, будь то горизонтальное или вертикальное меню, так как стилистическое оформление выносится в отдельный css-файл и уже оттуда редактируется. Поэтому в ниже приведенных примерах Я буду использовать вот такую HTML-разметку:

1
2
3
4
5
6
7

<ul  id="navbar">
	<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>

Как Вы уже наверно заметили, это обычный не маркированный список, в качестве элементов которого проставленны ссылки. Сам список имеет идентификатор navbar. Ничего сложного.

Далее подключаем в заголовке (<head>…</head>) страницы наш css-файл со стилями (сам файл будет рассматриваться ниже, пока просто подключим):

1

<link rel="stylesheet" type="text/css" href="style.css">

Полностью страница с html-разметкой (пусть это будет index.html) будет выглядеть так:

Файл index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Делаем меню вместе с web4develop</title>
<link rel="stylesheet" type="text/css" href="style.css" >
</head>                                                               
<body>
<ul id="navbar">
	<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>
</body>
</html>

Если сейчас открыть данную страницу, то мы увидим просто список ссылок.

Пример 1: простое вертикальное меню

Здесь все просто. По сути меню уже готово, просто осталось придать ему опрятный вид. Для этого опишим стили для меня в нашем css-файле.

Файл style.css для вертикального меню

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

html, body{
	background:#C0C0C0;		/* фон страницы */
	margin:0px auto;        /* выравнивание по центру */
	padding:0px;            /* обнуление полей */
}
ul#navbar{
	border:1px solid white; /* бордюр вокруг всего списка */
	border-top:0;           /* убираем лишний бордюр сверху*/
	list-style:none;        /* отменяем маркер для списка */
	margin:20px auto;       /* выравниваем меню на странице */
	padding:0px;            /* обнуление полей */
	width:120px;            /* задаем ширину меню */
}
ul#navbar li a{
	background:#2492FF;        /* фон элемента меню */
	border-top:1px solid white;/* бордюр сверху */
	color:white;               /* цвет текста */
	display:block;             /* меняем тип отображения */
	font:normal 16px arial;    /* описываем шрифт */
	height:20px;               /* задаем высоту для элемента */
	margin:0px;
	padding:5px 0;
	text-align:center;         /* текст в ячейке "по центру" */
	text-decoration:none;      /* отмена декораций */
	width:120px;
}
ul#navbar li a:hover{
	background:#ff0084;	       /* фон для "подсвеченной" ссылки */
}

Надеюсь комментарии в файле понятны. А теперь смотрим, что получилось. Хотелось бы немного приукрасить наше меню, для этого в качестве фона будем использовать картинку. Для этого в файле стилей поменяем background для элементов li a и li a:hover.

Для li a

1

background:url(bg.png) repeat-x 0 0;

Для li a:hover

1

background:url(bg.png) repeat-x 0px -30px;

Смотрим, что получилось.

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

Для того чтобы сделать горизонтальное меню, нам необходимо задать обтекание для элементов списка. Для задания обтикания в CSS есть свойство float.

1

float:left;

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

Файл style.css для горизонтального меню

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

html, body{
	background:#C0C0C0;		/* фон страницы */
	margin:0px auto;        /* выравнивание по центру */
	padding:0px;            /* обнуление полей */
}
#navbar{
	border:1px solid white; /* бордюр вокруг всего списка */
	border-right:0;         /* убираем лишний бордюр сверху*/
	display:block;
	height:30px;            /* высота списка */
	list-style:none;        /* отменяем маркер для списка */
	margin:20px auto;       /* выравниваем меню на странице */
	padding:0px;            /* обнуление полей */
	width:600px;            /* задаем ширину меню */
}
ul#navbar li, ul#navbar li a{
	display:block;			/* как блочный элемент */
	float:left;				/* обтекание */
}
ul#navbar li a{
	background:url(bg.png) repeat-x 0 0; /* фон элемента меню */
	border-right:1px solid white;        /* бордюр сверху */
	color:white;               /* цвет текста */
	font:normal 16px arial;    /* описываем шрифт */
	height:20px;               /* задаем высоту для элемента */
	margin:0px;
	padding:5px 0;
	text-align:center;         /* текст в ячейке "по центру" */
	text-decoration:none;      /* отмена декораций */
	width:119px;
}
ul#navbar li a:hover{
	background:url(bg.png) repeat-x  0px -30px;/* фон для "подсвеченной" ссылки */
}

Смотрим пример.

Архив с приведенными примерами можно скачать здесь.

В следующем посте Я расскажу о многоуровневых меню.

, ,

RSS Feed

Есть 6 коммент. к Меню для сайта. Часть I.

AndyDragon | 28 Март 2010 | 1:49

Еще бы скрин конечного результат сразу в статью, чтоб по ссылкам не ходить :)

admin | 28 Март 2010 | 12:17

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

Norbi | 18 Январь 2011 | 6:23

Спасибо, благодаря вам стало намного понятней…

Elensar | 5 Апрель 2011 | 14:39

ul#navbar li, ul#navbar li a{
	display:block;			/* как блочный элемент */
	float:left;				/* обтекание */
}

- а зачем повторение ul#navbar li, а потом ul#navbar li a???
и еще по этому пункту вопрос???? зачем здесь еще раз повторять display:block; если выше уже назначено #navbar-> display:block ?

admin | 5 Апрель 2011 | 20:04

Это не повторение. Здесь сразу задаются атрибуты для двух элементов: элемента списка(ul#navbar li) и ссылки внутри этого элемента(ul#navbar li a) – это абсолютно разные элементы на странице.
Насчет второго вопроса: выше было назначено для элемента #navbar, а ниже уже назначается, как я описал выше, для ul#navbar li и ul#navbar li a.
В данном примере, то что задается для родителя не наследуется его ребенком.

Elensar | 20 Апрель 2011 | 10:43

А как включить маркеры? изменение list-style – не помогает(

Написать комментарий

«

»

Найти!

Дизайн devolux
Наверх

Публикация материлов с сайта только с указанием активной ссылки на источник. web4develop.ru. 2010 год.