» »

Горизонтальное меню LanGar в 3D для uCoz


Горизонтальное меню LanGar в 3D для uCoz

Решил не делать дубль и менять оттенок в коде Горизонтальное меню LanGar в 3D для uCoz и оставить как есть, а точнее по умолчанию. Это у него будет 3 под меню под разделы на категорий, который вы прописывать будете. И с ними оно станет очень функциональное по своей схеме. Вы можете прописать вашу тему и в нее еще поставить сколько нужно информации разной, но лучше безусловно чтоб отвечало ней. Это для пользователя будет очень отличное решение по поиску материала. Там где видите стрелки, там и будет этот эффект. Так очень простое и тематика ему не важна, но было изначально создано под игровую. Хорошее и большое окно с правой стороны поиска по сайту с кликам на него.

Код:

Код
<div id="headmenu" class="headmenu">
<li><a href="/">Главная</a></li>

<li><a href="http://zornet.ru/forum">Форум</a></li>

<li><a href="http://zornet.ru/">ZORNET.RU</a></li>

<li class="activeA"><a href="http://zornet.ru/news">Новости сайта</a>
<ul>
<li><a href="/">Новости портала</a></li>
<li><a href="/">Новости игр для PC</a></li>
<li><a href="/">Новости игр для консолей</a></li>
<li><a href="/">Даты выхода новых игр</a></li>
<li><a href="/">Индустрия</a>
  </li></ul>
</li>

<li class="activeA"><a href="/load">Скрипты для uCoz</a>
<ul>
<li><a href="/">Карты к играм</a></li>
<li><a href="/">Русификаторы</a></li>
<li><a href="http://zornet.ru/load/7">Моды и Патчи</a></li>
<li><a href="http://zornet.ru/load/sokhranenija/10">Сохранения</a></li>
<li><a href="http://zornet.ru/load/15">Чит программы</a></li>

</ul>
</li>
   
<li class="activeA"><a href="/photo">Шаблоны для uCoz</a>
<ul>
<li><a href="/">Комиксы и Мемы</a></li>
<li><a href="/">Игровые фото</a></li>
<li><a href="/">Игровые</a></li>
</ul></li>

<li class="activeA"><a href="/video">О сайте</a>
<ul>
<li><a href="/">Видео обзоры</a></li>
<li><a href="/">Трейлеры</a></li>
<li><a href="/">Обучающие видео</a>
</li>
</ul>

</li>
<script>
// Проверка на то что пользователь что-то ввел
  $(function () {
  $('.banHUser').parent().remove();
  // Создаем функцию, которая будет обновляться каждый раз, тем самым организуем проверку.
  setInterval(function () {
  // Деактивируем кнопку поиска, убрав от туда значение type="submit"
  // Получаем текст поля поиска
  var search_text = $('.queryField').attr('value');
  if(search_text == 'Введите текст для поиска') {
  $('.schBtn input[type="submit"]').replaceWith('<input value="Искать" name="sfSbm" class="searchSbmFl">');
  } else {
  $('.schBtn input').replaceWith('<input type="submit" value="Искать" name="sfSbm" class="searchSbmFl">');
  }
  });
  });
</script>
<div class="searchForm">
  <form onsubmit="document.getElementById('sfSbm').disabled=true" method="get" style="margin:0px" action="/search/">
  <div class="schQuery">
  <input type="text" name="q" class="queryField" size="20" maxlength="40" value="Введите текст для поиска.." onfocus="if(this.value == 'Введите текст для поиска..'){this.value = ''}" onblur="if(this.value == ''){this.value = 'Введите текст для поиска..'}">
  </div>
  <div class="schBtn">
  <input type="submit" value="Искать" name="sfSbm" class="searchSbmFl">
  </div>
  </form>
  </div>

</div>


CSS:

Код
#headmenu {
width:1200px;
height:55px;
margin:auto;
padding: 0px;
clear: both;
overflow: hidden;
font-size:13px;
display:table;
background:#9e2323;
box-shadow:inset 0 -5px 0 #7e1c1c;
}

body, td {font-family:Tahoma; font-size:11px; color:#6596b5;}

#headmenu a {
text-decoration:none;
border: 0;
float: left;
color: #fff;
line-height:55px;
height:55px;
padding-left:25px;
padding-right:25px;
list-style: none;
text-shadow:0 -1px 0 #6e1818;
}

#headmenu a:hover {
background:#842122;
box-shadow:inset 0 -5px 0 #6a1c1d;
}

#headmenu li:hover>a {
background:#842122;
box-shadow:inset 0 -5px 0 #6a1c1d;
}

#headmenu li:hover ul {
display:block;
float:none;
}
  .activeA a {background: url('http://zornet.ru/CSS-ZORNET/Grety/Menu-2/sub.png') right 26px no-repeat;}  
#headmenu li.activeA:hover>a{background: #842122 url('http://upgame.org/images/sub.png') right 26px no-repeat;}

#headmenu li ul {
position: absolute;
display: none;
margin-top: 55px;
list-style: none;
float:none;
z-index: 1000;
}

#headmenu ul {
background:#6a1c1d;
list-style: none;
margin: 0;
padding:0px;
float:none;
}

#headmenu ul li a {
background:#6a1c1d;
height:40px;
line-height:40px;
border-bottom:1px solid #7e1c1c;
width:200px;
display:block;
float:none;
}

#headmenu ul li a:hover {
float:none;
box-shadow:none;
background:#5f191a;
}

#headmenu > li {
float:left;
}

.headmenu {
margin: 0;
padding:0;
}

.headmenu li {
list-style: none;
float:none;
}
.searchForm {float:right;margin-top:7px;margin-right:7px;height: 40px;width: 300px; background: url(http://zornet.ru/CSS-ZORNET/Grety/Menu-2/search.png);}
.schQuery {float: left;}
.schQuery input {box-shadow:inset 0 0 1px #fff;outline:none;padding-left: 15px; height: 40px; width: 230px !important;background: none !important; border: none !important; font-size: 13px !important; font-family: 'OpenSans' !important; color: #696969 !important;padding: 0 15px !important;}
.schBtn {float: right;}
.schBtn input {margin: 0 !important;width:32px;height: 32px;background: none !important; border: none !important; font-size: 0 !important; color: transparent !important;cursor: pointer;padding: 0 6px;text-indent: -9999px !important;box-shadow: none !important;}


Вот небольшой пример, на синею гамму.



Безусловно смотрится где то оригинально, но все таки оно похоже на остальные, просто вам представил, чтоб вы могли сами его сделать как вам нужно. Здесь нет автоматики и оно не установиться сразу как вам нужно.

В начале стилей находим width:1200px и выставляем ширину какая вам нужна.

01.06.2015 Просмотров: 453 Комментарий: (0)

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

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

Комментарий: 0
avatar