Регистрация Войти
Вход на сайт
» » Простое кроссбраузерное горизонтальное меню

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

Просмотров: 16318
Комментариев: 4
Версия для печати

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

Итак начнем. Создадим список с названиями нашего меню. В качестве названий пунктов пусть будут такие: "Главная", "Новости", "Продукция", "Услуги", "Партнеры", "Контакты". Создаем новый файл под названием menu.html, например, с помощью программы Dreamweawer или используя обычный блокнот. В нем между тегами body размещаем наше меню. Это обычный маркированный список ul с элементами li. Разумеется, каждый пункт меню делаем ссылкой, где вместо URL вставляем решетку #. Используя программу Photoshop создадим изображение размером 3х30 px, с градиентной заливкой как показано на рисунке ниже. Файл сохраним в формате GIF. Назовем его bg.gif. Данный рисунок будет выступать в качестве фонового изображения нашего меню.

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

Вот содержимое файла menu.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Простое кроссбраузерное горизонтальное меню</title>
	<link rel="stylesheet" href="main.css" type="text/css">
	</head>
	<body>
	<!-- наше горизонтальное меню (начало) -->
	<ul>
	  <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>
	<!-- горизонтальное меню (конец) -->
	</body>
	</html>

Теперь отдельно создадим файл стилей под названием main.css. Его листинг приведен полностью ниже.

ul {
	    margin:0; /*обнуляем отступы*/
	    padding:0; /*обнуляем отступы*/
	    float:left; /*выравниваем список по левому краю*/
	    width:auto;/*задаем ширину авто исходя из типа и содержимого списка*/
	    background-image: url(bg.gif); /*устанавливаем фоновое изображение*/
	    background-repeat:repeat-x; /*повторяем наше изображение по горизонтали*/
	    list-style:none; /*удаляем маркеры списка*/
	    background-color:#4778c3; /*задаем цвет фона под изображение*/
	    font-size:13px; /*задаем размер шрифта*/
	    font-family:Arial, Helvetica, sans-serif; /*устанавливаем шрифт*/
	}
	
	ul li {
	       float:left; /*выравниваем элементы списка по левому краю*/
	       }
	
	ul a {
	      display:block; /*представляем ссылки меню как блочные элементы*/
	      width:100px; /*задаем размер блока*/
	      height:30px; /*и высоту блока*/
	      text-align:center; /*надпись по центру*/
	      line-height: 2.1em; /*межстрочный интервал*/
	      text-decoration:none; /*убираем подчеркивание у ссылок*/
	      color:#fff; /*цвет текста ссылок - белый*/
	      border-right:#fff solid 1px; /*бордюр правой стороны блока (белая линия в 1px)*/
	}
	
	ul a:hover {
	            color:#ccc; /*ссылка меняет цвет при наведении указателя*/
	            }

Думаю, что по содержимому файла main.css вопросов возникнуть не должно, подсказки в комментариях я написал достаточно подробно и ясно, поэтому повторяться не буду. Не забываем его подключить к нашей странице menu.html с помощью

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

Подведем итог. В результате мы получили полностью кросбраузерное горизонтальное меню, которое выглядит одинаково не только во всех современных браузерах, но и в таких раритетах, как IE 5.5 и IE 6.0. Все элементы меню представлены как блочные элементы и имеют одинаковые размеры по ширине 100 px и высоте 30px. В качестве разделителя пунктов меню используется оформление блокового элемента с помощью правого бордера белого цвета толщиной в 1px. Это практически самый простой способ реализации горизонтального меню. Разумеется, при желании его можно модифицировать, сделать более красивым и функциональным используя фантазию, свойства css и дополнительные графические элементы. Ну а наше горизонтальное меню выглядит примерно так:

Плюсы этого решения:
Простота выполнения
Простой код
Нет никаких таблиц и javascript
Кроссбраузерность: меню во всех браузерах выглядит одинаково
Используются всего один рисунок
Минимум кода на странице menu.html
Минимум кода для реализации стилей в main.css

Файлы, используемые в данном примере, можно скачать в архиве menu.zip [1,94 Kb]


Рейтинг статьи:
  
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.
Комментарии (4)
Серега 5 марта 2015 14:11
Как теперь выровнять по центру?
Цитировать          1
Пользователь offline Офлайн Alexxey 6 марта 2015 08:10
Цитата: Серега
Как теперь выровнять по центру?

Можно, например, так. Заключаем конструкцию горизонтального меню в <div class="nav"></div>, а для класса nav пишем:
margin: 0 auto;
position: relative;
width: 606px;
Цитировать          2
Николай 6 июня 2015 20:21
А как здесь из него можно сделать

https://artsite.org.ua/
Цитировать          3
Пользователь offline Офлайн Alexxey 18 июня 2015 10:53
Цитата: Николай
А как здесь из него можно сделать

https://artsite.org.ua/

Если нужно именно такое меню, то лучше сохранить страницу данного сайта на локалке - воспользоваться готовым решением и затем подредактировать код под свои нужды... :)
Цитировать          4
Оставить комментарий
Ваше имя: *
Ваш e-mail: *
Текст комментария:
Полужирный Наклонный текст Подчёркнутый текст Зачёркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Введите проверочный код (защита от спама):
код: ----