Войти на сайт Регистрация
Добавить файлВ каталоге: 678
Синее горизонтальное меню
21.10.2018
Синее горизонтальное меню
  • 546 Просмотров:
  • 0 Скачиваний:
  • 0 Комментариев:
  • 3.0 Рейтинг:
  • (Голосов: 1)
Описание:
Представляю вашему вниманию, простенькое горизонтальное меню цветовой окраски воды... Меню фиксированное и при наведении на ссылку будет менять цвет..
Демо материала:

Установка:

В Таблица стилей (CSS):
Код
.menu a {
text-decoration: none;
color: #fff;
  text-shadow: 0 1px #2b6a83;
font-weight: bold;
float: left;
display: block;
  }
  .menu a:hover { color: #276a85; text-shadow: 0 1px #e1eff5; }
  .drop-down a {
float: none;
min-width: 90px;
  }

  .menu a {
display: block;
padding: 10px 15px;
  }

  .drop-down-menu {
float: left;
display: block;
  }

  .menu-title {
cursor: default;
padding: 10px 15px;
  }

  .activate {
display: none;

position: absolute;
cursor: pointer;
width: 100%;
height: 40px;
margin: 0 0 0 -15px;
opacity: 0;
  }

  @media only screen and (min-width: 800px) {

.drop-down-menu:hover .drop-down {
display: block;
}

.drop-down {
position: absolute;
}

  }

  @media only screen and (max-width: 799px) {

.menu a, .drop-down-menu {
float: none;
}

.activate {
display: block;
}

  }

  /* Skin */

  .menu a, .drop-down-menu {
background: #44a7cf;
background: -webkit-gradient(linear, left top, left bottom, from(#44a7cf), to(#317794));
background: -moz-linear-gradient(top, #44a7cf, #317794);
  }

  .menu a:hover, .drop-down-menu:hover {
background: #5a6470;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffff), color-stop(100%,#a2cfe0));
background: -moz-linear-gradient(top, #feffff 0%, #a2cfe0 100%);
  }

  .drop-down a {
background: #222;
  }

  .drop-down a:hover {
background: #111;
  }

  @media only screen and (min-width: 800px) {

.first {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}

.last {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}

.drop-down .last {
border-radius: 0;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}

  }

  @media only screen and (max-width: 799px) {

.menu {
  background: #44a7cf;
background: -webkit-gradient(linear, left top, left bottom, from(#44a7cf), to(#317794));
background: -moz-linear-gradient(top, #44a7cf, #317794);
  }
:checked ~ .menu-title {
background: #495261;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#495261), color-stop(100%,#38404b));
background: -moz-linear-gradient(top, #495261 0%, #38404b 100%);
}

.menu a, .drop-down-menu {
background: none;
}

.drop-down a {
background: #222;
}

  }

  /* IE */

  .ie8 .drop-down-menu:hover .drop-down { display: block; }
  .ie8 .drop-down { position: absolute; }

  .drop-down {
max-height: 0;
overflow: hidden;
  }

  .ie8 .drop-down-menu:hover .drop-down {
max-height: 200px;
  }

  @media only screen and (min-width: 800px) {

.drop-down-menu:hover .drop-down {
max-height: 200px;
}

  }

  @media only screen and (max-width: 799px) {

.activate:checked ~ .drop-down {
max-height: 200px;
}

  }

  .drop-down, .menu a, .drop-down-menu {
-webkit-transform: translateZ(0);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
  }


Где будет меню вставляем код:
Код
<nav class="menu">
  <a class="first" href="/">Главная</a>
<a href="/forum">Форум</a>
<a href="/publ">Каталог статей</a>
<a href="/load">Каталог файлов</a>
<a href="/video">Видео</a>
<a href="/faq">FAQ</a>
<a class="last" href="/news">Новости</a>
</nav>


На этом всё
Синее горизонтальное меню" title="Скачать Синее горизонтальное меню бесплатно, без смс и регистрации" target="_blank">Сервер Скачать файл
Источник: Неизвестно
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]