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

[Anton.A]

Процесс моего изучения CSS идёт полным ходом. Если вы хоть 5 секунд посмотрели на главную страницу моего сайта, то должны были заметить, что две темы по поводу этого меню уже были созданы. Всё это были предыдущие версии этого меню. Те версии выпускались на основе моих знаний, которые я получил за 7 дней. Сегодня я встретился с интересной функцией TRANSITION. Эта функция очень простая, но очень эффективная. Углу***ться в её подробности я сейчас не буду т.к тема создана для другого. Ну а если по этой функции, то в ближайшие дни я её буду изучать более углублённо и выложу описание этой функции у себя на сайте, а также на форуме Pawno-Info.Ru. Ну а теперь перейдём к самому меню:

DEMO:

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

DEMO. VERSION 0.4:

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

DEMO. VERSION 0.2:

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

Просто посмотрите на 0.2 версию и на 0.5 Из какой "какашки" получилось вот такое, на мой взгляд, симпатичное и, ещё можно даже сказать, деловое меню.

Коды:

Спойлер

HTML код:

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

</body>
</html>

CSS код:

#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-color: #404040; /* Задаём фоновой цвет элементов меню */
  border: 1px solid #B9B9B9;
  margin: 0.9px;
  width: 100px;
  height: 33px;
  line-height: 33px;
  text-align: center;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
  -webkit-transition: background 0.5s ease-in-out;
  -moz-transition: background 0.5s ease-in-out;
  -o-trasition: background 0.5s ease-in-out;
  -ms-transition: background 0.5s ease-in-out;
}

#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-color: #6d6d6d;
}

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

#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-color: #6d6d6d;
  opacity: 0.8;
}

#gmenu1 ul li ul li:hover {
  background-color: #404040;
  opacity: 0.9;
  text-decoration: underline;
  font-size: 16px;
  width: 131px;
  right: 3px;
}

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;
}

Скачать:

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

Изменения в версии 0.5:
1. Поменял фон кнопок с картинок на обычные RGB цвета
2. Поправил отступы между кнопками
3. Создание плавного перехода цветов на кнопках анимации

*На время прекращаю работу над меню, пока не найду чем его ещё можно преобразить

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

​