» »

Горизонтальное Аниме меню v.1 на uCoz


Горизонтальное Аниме меню v.1 на uCoz

Красивое и функциональное горизонтальное меню, специально для поклонников аниме. Как видим вертикальное меню создано в светла темных тонах. И здесь как понимаете, вы можете поставить под темный или светлый сайт. Данное меню имеет один блок с подразделами, который смотрится очень достойна. Но и можно место оставить под поиск на сайте и установить или прозрачный, или под такую же тематику и вывести гамму на стилях.

Что по установке, вам нужно скачать архив.

Верхняя часть сайта:

Код
<script type="text/javascript" src="/engine/classes/js/jquery-ui.min.js"></script>  
<script type="text/javascript" src="/engine/classes/js/dle_js.js"></script>  
<script type="text/javascript" src="/templates/Anime/js/scripts.js"></script>  
<link href="https://fonts.googleapis.com/css?family=Scada" rel="stylesheet">  
<div id="header_h">  
  <div class="wrap">  
  <ul id="h_flow" class="lcol">  
  <li><a href="#"><span>Главная</span></a></li>  
  <li class="h_this"><a href="#"><span>АНИМЕ</span></a>  
  <ul style="display: none;">  
  <div>  
  <li><a href="#">Онгоинги</a></li>  
  <li><a href="#">100+</a></li>  
  <li><a href="#">Законченные</a></li>  
  <li><a href="#">OVA</a></li>  
  <li><a href="#">Фильмы</a></li>  
  </div>  
  </ul>  
  </li>  
  <li><a href="#"><span>Новости</span></a></li>  
  <li><a href="#"><span>Онлайн</span></a></li>  
  <li><a href="#"><span>Форум</span></a></li>  
  <li><a href="#"><span>МАНГА</span></a></li>  
  <li><a href="#"><span>ДОРАМЫ</span></a></li>  
  </ul>


Css:

Код
.wrap {  
  width: 1043px;  
  position: relative;  
  margin: 0 auto;  
}  
#header_h {  
  height: 59px;  
  background: #434855;  
  border-bottom: 0px solid #f4f4f5;  
}  
#header_h ul.lcol {  
  height: 59px;  
  padding: 0 0 0 2px;  
  list-style: none;  
  background: url("http://images.vfl.ru/ii/1477503789/2889ad62/14681128.png") repeat-y left 0;  
}  
#header_h ul.lcol > li {  
  float: left;  
  height: 59px;  
  padding: 0 2px 0 1px;  
  background: url("http://images.vfl.ru/ii/1477503789/2889ad62/14681128.png") repeat-y right 0;  
}  
#header_h ul.lcol > li > a {  
  display: block;  
  color: #dce6e8;  
  text-shadow: 0 1px 0 rgba(0,0,0,0.16);  
  text-transform: uppercase;  
  font-family: 'Scada', sans-serif;  
}  
#header_h ul.lcol > li a span {  
  display: block;  
  height: 59px;  
  line-height: 59px;  
  padding: 0 23px;  
}  
#header_h ul.lcol > li > a:hover, #header_h ul.lcol > li.selected > a {  
  color: #e84c3d;  
  background: #3c414d url("http://images.vfl.ru/ii/1477503812/da266f84/14681136.png") repeat-x;  
  text-decoration: none;  
  height: 59px;  
  -webkit-box-shadow:inset 0 -3px 0 0 #e84c3d;  
  box-shadow:inset 0 -3px 0 0 #e84c3d;  
}  
#header_h ul.lcol > li.h_this a span {  
  padding: 0 42px 0 23px;  
  background: url("http://images.vfl.ru/ii/1477503827/318f8b75/14681151.png") no-repeat 91% 25px;  
}  
#h_flow .h_this {  
  position: relative;  
}  
#h_flow li.h_this ul {  
  width: 163px;  
  margin: 0;  
  top: 59px;  
  left: 0;  
  padding: 9px 0 0 0;  
  position: absolute;  
  z-index: 999;  
  display: none;  
}  
#h_flow li.h_this ul div {  
  -webkit-box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.29);  
  -moz-box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.29);  
  box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.29);  
}  
#h_flow li.h_this ul li a, #h_flow li.h_this ul li {  
  background: none;  
  float: none;  
  font-family: 'Scada', sans-serif;  
  height: auto;  
  display: block;  
  text-transform: none;  
  text-shadow: none;  
  border: none;  
}  
#h_flow li.h_this ul li {  
  padding: 0 6px;  
  height: 41px;  
  font-size: 13px;  
  background: #fafafa;  
  position: relative;  
}  
#h_flow li.h_this ul li:first-child::before {  
  content: '';  
  position: absolute;  
  top: -10px;  
  left: 0;  
  width: 0;  
  height: 0;  
  border-bottom: 7px solid #ca3f31;  
  border-left: 7px solid transparent;  
}  
#h_flow li.h_this ul li:first-child {  
  border-top: 3px solid #e24a3b;  
}  
#h_flow li.h_this ul li:last-child a {  
  border-bottom: none;  
}  
#h_flow li.h_this ul li a {  
  color: #4d6883;  
  height: 40px;  
  line-height: 40px;  
  padding: 0 5px 0 21px;  
  background: url("http://images.vfl.ru/ii/1477503851/9b8a58c5/14681174.png") no-repeat 6px 17px;  
  border-bottom: 1px dashed #eaecee;  
}  
#h_flow li.h_this ul li a:hover {  
  color: #e84c3d;  
  text-decoration: none;  
}


(rip Бармен) - он же JoniDen.
27.10.2016 Загрузок: 3 Просмотров: 424 Комментарий: (8)

Поделиться в социальных сетях

Материал разместил

Комментарий: 8
Сопрано
Сопрано 27.10.2016 21:531
0
Сейчас такое меню очень редко увидишь на сайте, все очень просто, аве нужно подгонять под мобильные устройства. А так не чего, как вижу есть еще и под категорий у него, вод бы полностью посмотреть.
FeStemBer
FeStemBer 27.10.2016 22:053
-2
Да что то про мобильные уже второй год говорят, а так посмотришь по сети, то только ucoz к этому готовится. Даже самые популярные сайты не сделали адаптацию и форумы.
JoniDen
JoniDen 27.10.2016 22:304
+1
Если бы мог сделать под мобилу, то с радостью сделал. А так извиняйте не силен в этом еще.
Kosten
Kosten 27.10.2016 23:097
0
Но если и делать, так уж сразу полный сайт а не по запчастям.
JoniDen
JoniDen 28.10.2016 09:428
0
Шаблон полностью это еще сложнее, чем адаптация по мобилу. Ну мне так кажется, хотя кто его знает)))
Сафрон
Сафрон 27.10.2016 21:572
0
Но здесь можно по коду посмотреть, что на счет всяких плюшек, как эффекты красивые там должны присутствовать.
JoniDen
JoniDen 27.10.2016 22:305
0
Установите на тестовый сайт, и посмотрите что и как работает.
Kosten
Kosten 27.10.2016 23:006
0
Да по ходу будет все шикарно, смотри какие стили идут, но не зря же они прописаны.
avatar