HTML Горизонтальное CSS меню 1. VERSION 0.4

Anton.A · 1 Дек 2012

Две новые версии моего горизонтального меню не заставили себя долго ждать. Версию 0.2 я выложил вчера вечером. В ней основным представлением было горизонтальное меню с выпадающими подсписками. На внешний вид меню я вчера не смотрел, вчера главной целью было донести до вас форму этого меню. Сегодня я потратил ровно 1 час и 20 минут на улучшение внешнего вида меню. Да также скажу почему сразу перескочил на 2 версии - Отвечаю: "Сначала я оформил меню простыми RGB цветами - это была версия 0.3. И следом я решил добавить в моё меню изображения. Поэтому получилась версия 0.4. Думаю пришло время перейти не посредственно к самому меню!

DEMO:

Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!

DEMO:

Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!

(Для сравнения)

HTML код:

PHP:

<!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">
<meta http-equiv="Content-Language" content="ru">
<link rel="stylesheet" href="gmenu1.css" type="text/css"/>
<title>GMENU 1. VERSION 0.2</title>
</head>
<body">

<div id="gmenu1">
  <ul>
    <li><a href="#">Раздел 1</a>
      <ul> 
      <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> 
     </li>
    <li><a href="#">Раздел 2</a>
      <ul> 
      <li><a href="#">Подраздел 5</a></li> 
      <li><a href="#">Подраздел 6</a></li> 
      <li><a href="#">Подраздел 7</a></li> 
      <li><a href="#">Подраздел 8</a></li> 
      </ul>
     </li>
    <li><a href="#">Раздел 3</a></li>
    <li><a href="#">Раздел 4</a></li>
  </ul>
</div>

</body>
</html>

CSS код:

PHP:

#gmenu1 {
  width: 100%; /* Задаём ширину для div */
  float: left; /* Добавляем список в div */
  border: 1px solid black;
  font-size: 15px; /* Размер текста в меню */
  font-weight: bold;
  background-color: #F5F5F5;
  padding: 5px 0px 5px 5px; /* отступ ul от края контейнера */
}

#gmenu1 ul {
  margin: 0;
  padding: 0;
}

#gmenu1 li {
  float: left; /* Оформляем наше меню по горизонтали */
  position: relative;
  list-style-type: none; /* Убераем маркеры */
  background: url('images/osnov-normal.png'); /* Задаём фоновой цвет элементов меню */
  border: 1px solid #B9B9B9;
  margin: 1px;
  width: 100px;
  height: 33px;
  line-height: 33px;
  text-align: center;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

#gmenu1 li:first-child {
  border-left: 1px solid #B9B9B9; /* Первая вертикальная линия в меню */
}

#gmenu1 a {
  text-decoration: none; /* Удаляем подчёркивание ссылок */
  padding: 0px 10px 0px 10px; /* Пространство с обеих сторон текста пункта меню */
  color: #F5F5F5; /* задаём цвет шрифта ссылок */
}

#gmenu1 a:hover {
  color: #ff3333; 
}

#gmenu1 li:hover {
  background: url('images/osnov-hover.png');
}

#gmenu1 li:active {
  background: url('images/osnov-active.png');
}

/* Раскрывающееся меню */ 

#gmenu1 ul li ul { 
  margin: 0px;  /* запрещает наследование временного поля ul из горизонтального меню */ 
  position: absolute;
  left: -1px; /* Выравниваем раскрываемое меню */
  width: 10em;  /* задает ширину меню - в сочетании с шириной И в 100% дает нам вертикальное меню */ 
  margin-top: 1px;
} 
#gmenu1 ul li ul li  { 
  width: 125px;  /* заполняет контейнер списка (ul) элементами списка */
  border-left: 1px solid #B9B9B9;  /* три стороны каждого пункта раскрывающегося меню */ 
  border-bottom: 1px solid #B9B9B9; 
  border-right: 1px solid #B9B9B9; 
  background: url('images/podosnov-normal.png');
  opacity: 0.7;
}

#gmenu1 ul li ul li:hover {
  background: url('images/podosnov-hoverr.png');
  opacity: 0.8;
  text-decoration: underline;
  font-size: 16px;
  width: 131px;
  right: 3px;
}

#gmenu1 ul li ul li:active {
  background: url('images/podosnov-active.png');
}

body #gmenu1 ul li ul{
  display: none; /* Прячем раскр. меню, когда мышь на него не наведена */
}

#gmenu1 ul li:hover ul {
  display: block; /* Раскр. меню появляется при наведении на него мышью */
}

#gmenu1 ul li:hover ul, #gmenu1 ul li ul: hover {
  background-color: #B9B9B9;
  display: block;
}

Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!

Переход в группу "Пользователь"

HTML Горизонтальное CSS меню 1. VERSION 0.4

Anton.A

Компетентный