1
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1
Для добавления необходима авторизация
Ваша корзина
Ваша корзина пуста
Зона обмена Шапка игрового сайта с категориями от waaka

Автор
waak
написать автору
пожаловаться
ID материала № 53
Авторwaak
CMSuCoz
Просмотров 253
Добавлено 15.08.2018
Комментариев 0

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

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

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

Не много о скрипте:
Простое горизонтальное меню в тёмном стили но с яркими выпадающими списками
а также блоки разделов в виде картинок с категориями которые скрыты по умолчанию и появляются по клику на название раздела количество разделов как и категорий может быть любое но для примера я сделал 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 так жн подчерку тот факт что адаптацию не делал под моб устройства!

После того как вы установите данный код вам нужно будет заменить все строки ТУТ ССЫЛКА НА КАРТИНКУ РАЗДЕЛА на свои а также название да и весь текст и ссылки в меню вам нужно будет так же настроить под себя
0 5
Вимание:
При копирование материалов. указание автора материала и наличие в теле копируемого (перерабатываемого) материала активной ссылки на сайт talantlev.ucoz.ru обязательно!
Уважайте чужой труд!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Гость
Для добавления необходима авторизация