Главная / Каталог скриптов для uCoz / Бесплатно, Меню

Шапка игрового сайта с категориями от waaka

Добавлено 15-08-2018 в 23:30

Категория Бесплатно, Меню
Авторwaak
Просмотры792
Комментарии0
Понравилось9

Шапка игрового сайта с категориями от waaka

Всем привет! Давно я нечего не публиковал так как были дела да и как я смотрю ucoz теряет свою популярность или просто мой сайт

а может просто все наши пользователи стали профи и сами могут решать любые свои проблемы чему мы очень рабы не смотря на то что теряем посетителей

Данный материал предназначен для тех кто всё ещё с нами!

Не много о скрипте:
Простое горизонтальное меню в тёмном стили но с яркими выпадающими списками
а также блоки разделов в виде картинок с категориями которые скрыты по умолчанию и появляются по клику на название раздела количество разделов как и категорий может быть любое но для примера я сделал 15 разделав и по несколько категорий для примера добавил

В место слов видео демка и несколько скриншотов для тех кто не любит видео!

вид меню

Вид при наведение на пункты меню

вид при наведение на раздел и клик по названию раздела

Если вам понравилось меню то мы можем приступить к установки

Установка

Для начало подключим шрифтовые иконки от font-awesome для этого просто добавим в вашу таблицу стилей в самый вер такую строчку

Код

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css);

Если они у вас уже подключены то пропустите этот шаг!

Теперь пока мы в таблице стилей подключим стили меню в самый низ вашего кода в таблице

Код

.max_width {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

#clr{clear:both}
ul{list-style:none}
.head_bc_top {
  background: #404040;
  position: relative;
  color: #FFF;
}

.head_bc_logo {float: left;padding: 10px 0;margin-right: 30px;}
.head_bc_logo h1 {
  color: rgba(255,255,255,.8);
  font-size: 22px;
  font-weight: 300;
}

.head_bc_logo h2 {
  color: rgba(255,255,255,.7);
  font-size: 12px;
  font-weight: 100;
}

.search {
  position: relative;
  float: left;
  padding: 13px 20px;
  background: rgba(0,0,0,.1);
  width: 300px;
}
input.srch_btn {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

input#searchhead {
  background: none;
  border: none;
  color: rgba(255,255,255,.6);
  padding: 10px 10px 10px 30px;
  width: 100%;
}

input#searchhead:focus {
  color: #FF7D32;
}

.head_bc_nav {
  float: right;
}
.head_bc_nav ul li {
  float: left;
  position: relative;
}
.head_bc_nav ul li a {
  display: block;
  color: rgba(255,255,255,.6);
  font-size: 13px;
  padding: 0 10px;
  line-height: 60px;
}
.head_bc_nav ul li a i {
  margin: 0 5px;
}
.head_bc_nav ul li:hover a{color: #FF7D32;}
.head_bc_nav ul li a:hover {background: rgba(0,0,0,.1);}
.head_bc_nav ul li:hover:before {display: block;}

.head_bc_nav ul li:before {
  width: 0;
  height: 0;
  display: none;
  content: '';
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid #FF7D32;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  margin: 0 auto;
}

.head_ul_dop {
  position: absolute;
  z-index: 100;
  top: 60px;
  right: 0;
  width: 190px;
  display: none;
}

.head_ul_dop span {
  padding: 3px 0;
  background: #FF7D32;
  position: relative;
  display: block;
}
.head_bc_nav ul li .head_ul_dop li {float: none;}
.head_bc_nav ul li .head_ul_dop li:before {display: none;}
.head_bc_nav ul li .head_ul_dop li a {
  line-height: 30px;
  padding: 0 20px;
  color: rgba(255,255,255,.6);
}
.head_bc_nav ul li .head_ul_dop li a h3 {font-size: 12px;font-weight: 100;}
.head_bc_nav ul li .head_ul_dop li a:hover {
  background: #404040;
  color: #FFF;
}

.head_bc_nav ul li:hover .head_ul_dop {display: block;}

.head_bc_cat_list {
  width: calc(100%/5);
  float: left;
  position: relative;
  border: 4px solid #303030;
  height: 100px;
}
.head_bc_cat_list_img {
  width: 100%;
  height: 100px;
  overflow: hidden;
}
.head_bc_cat_list_img img {
  width: 100%;
  height: 100px;
  object-fit: cover;
}
.head_bc_cat_list_nam {
  position: absolute;
  background: #FF7D32;
  right: 0;
  left: 0;
  top: 96px;
  z-index: 11;
  padding: 5px 20px;
  color: rgba(255,255,255,.6);
  font-size: 12px;
  display: none;
  cursor: pointer;
}
.head_bc_cat_list_nam i {
  float: right;
}
.head_bc_cat_list_cat {
  position: absolute;
  bottom: 0px;
  background: rgba(0,0,0,.89);
  left: 0;
  right: 0;
  bottom: 25px;
  z-index: 10;
  display: none;
}
.head_bc_cat_list_cat ul {
  padding: 5px 0;
}
.head_bc_cat_list_cat ul li a {
  display: block;
  padding: 5px 20px;
  color: rgba(255,255,255,.6);
  font-size: 11px;
}
.head_bc_cat_list_cat ul li a:hover {background: #000; color: #FFF;}

.head_bc_cat_list:hover .head_bc_cat_list_nam {display: block;}

.dop_head_bc_cat_list_cat {display: block;}

Отлично не забываем сохранить!

Теперь на нужной странице или в глобальный блок верхняя часть в самый верх ставим код ниже
если в нём находится старое ваше меню которое вы хотите заменить то просто его удалите а в место него вставьте код ниже

Код

<div class="head_bc">

  <div class="head_bc_top">
  <div class="max_width">
  <div class="head_bc_logo"><a href="/"><h1>talantlev.ru</h1><h2>Мир талантлевых людей</h2></a></div>

  <div class="search">

  <form action="/search">
  <input class="srch_btn" type="image" src="search.png">
  <input type="text" id="searchhead" class="searchhead quick searchform" placeholder="поиск...." name="q" maxlength="30" size="30">
  </form>
  </div>

  <div class="head_bc_nav">
  <ul>
  <li><a href=""><i class="fa fa-angle-down" aria-hidden="true"></i> Новости</a>
  <ul class="head_ul_dop">
  <span>
  <div id="triangle-up"></div>
  <li><a href=""><h3>Wreckfest</h3></a></li>
  <li><a href=""><h3>Farming Simulator</h3></a></li>
  <li><a href=""><h3>Cattle and Crops</h3></a></li>
  <li><a href=""><h3>MudRunner</h3></a></li>
  <li><a href=""><h3>Spintires</h3></a></li>
  <li><a href=""><h3>Pure Farming 2018</h3></a></li>
  <li><a href=""><h3>Моддинг программы</h3></a></li>

  </span>
  </ul>
  </li>
  <li><a href=""><i class="fa fa-envelope" aria-hidden="true"></i></a>
  <ul class="head_ul_dop">
  <span>
  <div id="triangle-up"></div>
  <li><a href="">Принятые</a></li>
  <li><a href="">Отправленые</a></li>
  </span>
  </ul>
  </li>
  <li><a href=""><i class="fa fa-bell" aria-hidden="true"></i></a>
  <ul class="head_ul_dop">
  <span>
  <div id="triangle-up"></div>
  <li><a href="#">Нет уведомлений</a></li>
  </span>
  </ul>
  </li>
  <li><a href="/index/8">$USERNAME$<i class="fa fa-angle-down" aria-hidden="true"></i></a>
  <ul class="head_ul_dop">
  <span>
  <div id="triangle-up"></div>
  <li><a href="">Мой профиль</a></li>
  <li><a href="">Сообщения</a></li>
  <li><a href="">Настройки</a></li>
  <li><a href="">Выход</a></li>
  </span>
  </ul>
  </li>
  </ul>
  </div>
  <div id="clr"></div>
  </div>
  </div>

  <div class="max_width">
  <div class="head_bc_cat">

  <div class="head_bc_cat_list">
  <div class="head_bc_cat_list_img"><img src="ТУТ ССЫЛКА НА КАРТИНКУ РАЗДЕЛА"></div>
  <div class="head_bc_cat_list_nam">Farming Simulator 2017 <i class="fa fa-bars" aria-hidden="true"></i>
  <div class="head_bc_cat_list_cat">
  <ul>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  </ul>
  </div>
  </div>

  </div>

  <div class="head_bc_cat_list">
  <div class="head_bc_cat_list_img"><img src="ТУТ ССЫЛКА НА КАРТИНКУ РАЗДЕЛА"></div>
  <div class="head_bc_cat_list_nam">Pure Farming 2018 <i class="fa fa-bars" aria-hidden="true"></i>
  <div class="head_bc_cat_list_cat">
  <ul>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  </ul>
  </div>
  </div>

  </div>

  <div class="head_bc_cat_list">
  <div class="head_bc_cat_list_img"><img src="ТУТ ССЫЛКА НА КАРТИНКУ РАЗДЕЛА"></div>
  <div class="head_bc_cat_list_nam">Cattle and Crops <i class="fa fa-bars" aria-hidden="true"></i>
  <div class="head_bc_cat_list_cat">
  <ul>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  </ul>
  </div>
  </div>

  </div>

  <div class="head_bc_cat_list">
  <div class="head_bc_cat_list_img"><img src="ТУТ ССЫЛКА НА КАРТИНКУ РАЗДЕЛА"></div>
  <div class="head_bc_cat_list_nam">MudRunner <i class="fa fa-bars" aria-hidden="true"></i>
  <div class="head_bc_cat_list_cat">
  <ul>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  </ul>
  </div>
  </div>

  </div>

  <div class="head_bc_cat_list">
  <div class="head_bc_cat_list_img"><img src="ТУТ ССЫЛКА НА КАРТИНКУ РАЗДЕЛА"></div>
  <div class="head_bc_cat_list_nam">Wreckfest <i class="fa fa-bars" aria-hidden="true"></i>
  <div class="head_bc_cat_list_cat">
  <ul>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  </ul>
  </div>
  </div>

  </div>

  <div class="head_bc_cat_list">
  <div class="head_bc_cat_list_img"><img src="ТУТ ССЫЛКА НА КАРТИНКУ РАЗДЕЛА"></div>
  <div class="head_bc_cat_list_nam">DiRT Rally <i class="fa fa-bars" aria-hidden="true"></i>
  <div class="head_bc_cat_list_cat">
  <ul>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  </ul>
  </div>
  </div>

  </div>

  <div class="head_bc_cat_list">
  <div class="head_bc_cat_list_img"><img src="ТУТ ССЫЛКА НА КАРТИНКУ РАЗДЕЛА"></div>
  <div class="head_bc_cat_list_nam">American Truck Simulator <i class="fa fa-bars" aria-hidden="true"></i>
  <div class="head_bc_cat_list_cat">
  <ul>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  </ul>
  </div>
  </div>

  </div>

  <div class="head_bc_cat_list">
  <div class="head_bc_cat_list_img"><img src="ТУТ ССЫЛКА НА КАРТИНКУ РАЗДЕЛА"></div>
  <div class="head_bc_cat_list_nam">Euro Truck Simulator 2 <i class="fa fa-bars" aria-hidden="true"></i>
  <div class="head_bc_cat_list_cat">
  <ul>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  </ul>
  </div>
  </div>

  </div>

  <div class="head_bc_cat_list">
  <div class="head_bc_cat_list_img"><img src="ТУТ ССЫЛКА НА КАРТИНКУ РАЗДЕЛА"></div>
  <div class="head_bc_cat_list_nam">City Car Driving <i class="fa fa-bars" aria-hidden="true"></i>
  <div class="head_bc_cat_list_cat">
  <ul>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  </ul>
  </div>
  </div>

  </div>

  <div class="head_bc_cat_list">
  <div class="head_bc_cat_list_img"><img src="ТУТ ССЫЛКА НА КАРТИНКУ РАЗДЕЛА"></div>
  <div class="head_bc_cat_list_nam">American Truck Simulator <i class="fa fa-bars" aria-hidden="true"></i>
  <div class="head_bc_cat_list_cat">
  <ul>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  </ul>
  </div>
  </div>

  </div>

  <div class="head_bc_cat_list">
  <div class="head_bc_cat_list_img"><img src="ТУТ ССЫЛКА НА КАРТИНКУ РАЗДЕЛА"></div>
  <div class="head_bc_cat_list_nam">Pure Farming 2018 <i class="fa fa-bars" aria-hidden="true"></i>
  <div class="head_bc_cat_list_cat">
  <ul>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  </ul>
  </div>
  </div>

  </div>

  <div class="head_bc_cat_list">
  <div class="head_bc_cat_list_img"><img src="ТУТ ССЫЛКА НА КАРТИНКУ РАЗДЕЛА"></div>
  <div class="head_bc_cat_list_nam">Cattle and Crops <i class="fa fa-bars" aria-hidden="true"></i>
  <div class="head_bc_cat_list_cat">
  <ul>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  </ul>
  </div>

  </div>

  </div>

  <div class="head_bc_cat_list">
  <div class="head_bc_cat_list_img"><img src="ТУТ ССЫЛКА НА КАРТИНКУ РАЗДЕЛА"></div>
  <div class="head_bc_cat_list_nam">
  MudRunner <i class="fa fa-bars" aria-hidden="true"></i>
  <div class="head_bc_cat_list_cat">
  <ul>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  </ul>
  </div>

  </div>

  </div>

  <div class="head_bc_cat_list">
  <div class="head_bc_cat_list_img"><img src="ТУТ ССЫЛКА НА КАРТИНКУ РАЗДЕЛА"></div>
  <div class="head_bc_cat_list_nam">
  Wreckfest <i class="fa fa-bars" aria-hidden="true"></i>
  <div class="head_bc_cat_list_cat">
  <ul>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  </ul>
  </div>
  </div>

  </div>

  <div class="head_bc_cat_list">
  <div class="head_bc_cat_list_img"><img src="ТУТ ССЫЛКА НА КАРТИНКУ РАЗДЕЛА"></div>
  <div class="head_bc_cat_list_nam">
  DiRT Rally <i class="fa fa-bars" aria-hidden="true"></i>

  <div class="head_bc_cat_list_cat">
  <ul>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  <li><a href="">Ссылка</a></li>
  </ul>
  </div>

  </div>

  </div>

<script>
$(document).ready(function(){
$(".head_bc_cat_list_nam").click(function(){
  $(".head_bc_cat_list_cat").removeClass("dop_head_bc_cat_list_cat");
$(".head_bc_cat_list_cat", this).toggleClass("dop_head_bc_cat_list_cat");

});

});
</script>

  </div>
  </div>
</div>

Отлично не забываем сохранить и очистить кеш браузера нажав на клавиатуре комбинацию клавиш Ctrl + f5 так жн подчерку тот факт что адаптацию не делал под моб устройства!

После того как вы установите данный код вам нужно будет заменить все строки ТУТ ССЫЛКА НА КАРТИНКУ РАЗДЕЛА на свои а также название да и весь текст и ссылки в меню вам нужно будет так же настроить под себя

Оставить комментарий

Добавлять комментарии могут только зарегистрированные пользователи.

Регистрация Вход

Создать сайт
Бесплатно

Меню

Полезно

Комментарии

waak

К сожалению, у меня нет сайта, на котором был бы активен данный модуль, чтобы посмотреть, работает он там или нет.

04-03-2024 в 08:01 материал

Fr Frag

Для модуля новости не работает

03-03-2024 в 05:55 материал

web_master

при добавлении комментарии выдает ошибку в консоли:

POST http:сайт/index/ 404 (Not Found)

29-02-2024 в 16:58 материал

web_master

UPD: так будет работать , + в конце будут показывать и проценты...

Код

<?($OTHER2$-$OTHER1$)/$OTHER2$*100 ?>

А так будет без процентов:

Код

<?int(($OTHER2$-$OTHER1$)/$OTHER2$*100)?>

25-02-2024 в 23:06 материал

web_master

Скрипт не работает почему-то

25-02-2024 в 22:09 материал

waak

Не за что! Я бы делал больше но просьб мало а самому сидеть придумывать не всегда есть время по этому и обновления идут редко

07-02-2024 в 18:26 материал

ed edik2009

Спасибо.Поставил все работает. К сожалению эпоха сайтостроения Юкоз прошла. Ваш сайт один из немногих который, хоть что то обновляет материалы для в этой системы (Скрипты, Шаблоны, Графика и т.д)

07-02-2024 в 08:08 материал

waak

Здравствуйте! вы наверное не совсем понимаете смысл данного раздела, Что бы я мог выполнить вашу просьбу я должен понимать что именно вам нужно а в вашей просьбе нет конкретики и по этому выполнить её не получится

27-01-2024 в 15:12 материал

di dinyslamsinger

От души