ОТЛИЧНОЕ ГОРИЗОНТАЛЬНОЕ МЕНЮ
17.05.2015, 21:59


Представляю вашему вниманию, простенькое горизонтальное меню цветовой окраски воды... Меню фиксированное и пр наведении на ссылку будет менять цвет...

Установка:
Это в таблицу стилей:

Код
.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="/load">Форум</a>  
  <a href="/load">Фильмы</a>  
  <a href="/load">Мульфильмы</a>  
  <a href="/load">Поиск</a>  
  <a href="/load">Выход</a>  
  <a class="last" href="/load">Добавить материал</a>  
  </nav>
Категория: Скрипты меню | Добавил: Stervo4ka
Просмотров: 347 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]