Палитра цвета в HTML. Коды HTML цветов. Цвет текста, ссылки, фона в HTML
Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел…
Создание CSS меню. Простое меню для сайта. Горизонтальное CSS меню
Мы рассмотрели то, как можно сделать горизонтальное выпадающее CSS меню и вертикальное выпадающее CSS меню. Сегодня мы поговорим о том, как создать горизонтальное CSS меню для сайта. Но в этот раз меню не будет выпадающим, то есть мы планируем, что не потребуются подразделы.
Как и в прошлой публикации, меню сайта будет создано при помощи маркированного HTML списка (при помощи тегов <li> и <ul>). Оформлять горизонтальное меню для сайта мы будем при помощи таблицы стилей (CSS), мы не будем использовать JavaScript для создания горизонтального CSS меню. Как и в прошлый раз, мы не будем использовать изображений для создания горизонтального CSS меню.
Содержание статьи:
Создание меню для сайта. Горизонтальное CSS меню. Шаг 1 -создание HTML макета меню.
И так, начнем мы с создания HTML макета меню сайта. Для этого мы воспользуемся HTML списком, ненумерованным списком:
[php]</p>
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Создание CSS меню</title>
<link rel="stylesheet" href="style.css" type="text/css" >
</head>
<body>
<div id="hmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Ссылка1</a></li>
<li><a href="#">Ссылка2</a></li>
<li><a href="#">Ссылка3</a></li>
<li><a href="#">Ссылка4</a></li>
</ul>
<span style="color: #222222;"><span style="line-height: 18px;"><br></span></span>
</div>
</body>
</html>
<p style="text-align: justify;">[/php]
Сразу подключаем файл таблиц стилей, который называется style.css. При помощи тегов <ul> и <li> создаем HTML макет меню для сайта. Поскольку, пункты нашего горизонтального CSS меню должны куда-нибудь вести, делаем их ссылками при помощи тега <a>, в качестве значения атрибута href устанавливаем #(хэш), ссылки с таким атрибутом никуда не ведут. HTML список меню помещаем в контейнер <div> с идентификатором hmenu, поскольку внутри элемента <body> могут находиться только блочные HTML элементы и элементы <ins> и <del>. После созданного списка стоит тег <br> — перевод строки, он нужен для того, чтобы растянуть меню сайта по горизонтали на всю ширину окна браузера.
Создание меню для сайта. Горизонтальное CSS меню. Шаг 2 — Задаем стили для меню сайта.
Первое, что нужно сделать — это задать цвет фона и ширину контейнера <div> в CSS, хотя вы знаете, что блочные HTML элементы занимают всю доступную ширину, в отличие от строчных HTML элементов:
[php]
#menu{
width: 100%;
background-color: #333;
}
[/php]
Затем нам нужно задать общий стиль для горизонтального CSS меню:
[php]
#menu ul{
margin: 0;
padding: 0;
float: left;}
[/php]
Здесь мы убираем внутренние и внешние отступы, а также «прижимаем» меню сайта к левой границе окна браузера.
Теперь можно задать стиль отображения для всех пунктов меню сайта:
[php]
#menu ul li{
display: inline;}
[/php]
Мы знаем, что элемент <li> относится к блочным, то есть занимает всю область, в которой он стоит, из-за этого наше меню было вертикальным, добавив CSS свойство display: inline, мы сделали элементы <li> строчными, а наше меню стало горизонтальным.
Теперь мы можем задать CSS стили для содержимого контейнеров <li>, то есть стили для навигации горизонтального меню(для тега <a>):
[php]
#menu ul li a{
float: left;
text-decoration: none;
color: white;
padding: 10.5px 11px;
background-color: #333; }
[/php]
CSS свойство float:left выравнивает горизонтальное меню и контейнер <div> по верхней границе. Все ссылки по умолчанию подчеркиваются браузером, чтобы избавиться от этого недоразумения мы используем свойство text-decoration:none. Далее мы задаем цвет ссылок, то есть цвет текста меню сайта. Внутренними отступами мы расширяем наше горизонтальное меню.
Задаем стили для посещенных пунктов меню и то, как будут отображаться пункты меню, при наведение на них курсора мыши:
[php]</p>
#menu ul li a:visited{
color: white;}
#menu ul li a:hover{
color: #fff;
background-color:#0b75b2;}
<p style="text-align: justify;">[/php]
Ну тут все понятно: мы задаем цвет текста и цвет фона для горизонтального CSS меню.
Осталось задать стиль для тега <br>, чтобы выровнять по высоте горизонтальное меню и элемент <div>:
[php]</p>
<p style="text-align: justify;">br{clear:left;}</p>
<p style="text-align: justify;">[/php]
Это горизонтальное CSS меню будет растягиваться на всю ширину окна браузера и при это данное меню корректно отображается во всех браузерах.
Исходные коды примеров вы можете скачать на публичных страницах вконтакте: раз и два.
На этом всё, спасибо за внимание, надеюсь, что был хоть чем-то полезен и до скорых встреч на страницах блога для начинающих вебразработчиков и вебмастеров ZametkiNaPolyah.ru. Не забываем комментировать и делиться с друзьями;)
Мне надо типа такого шаблона и чтобы форум бы с таким же стилями.
Смотреть тут - http://web-j.ru/index.php/forum
Кто нибудь подскажет, может видели.
Спасибо...
Здравствуйте, я новчиек, но либо я такой нуб еще в HTML или я нашел ошибку. Прсмотритесь, название блока hmenu, а стили создаете вы для блока «menu», по идее которого даже нету в коде.
Спасибо, что заметили, обязательно исправлю.
Подскажите что не так делаю. сделал как написано но у меня все менюшки накладываются один на одну как с этим бороться?
Статья очень помогла. Спасибо.
Спасибо за труд , не шедевр (я про объяснение само) но хороша
Борис Борисович, да не за что, знаю, что не шедевр, будем над этим работать.
Исправьте ошибку ! В разметке div — «hmenu» , а в стилях же просто div — «menu»