форма для входа

1
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1
15-08-2018 в 23:30 315

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


Шапка игрового сайта с категориями от 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 так жн подчерку тот факт что адаптацию не делал под моб устройства!

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

7

Комментарии

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

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

Автор


Похожие материалы

Реклама



Дополнение

Демонстрация результата либо показана на отдельной странице, либо просто показана на скриншоте. В исключительных случаях, когда нет возможности показать работу даже на скриншоте, используется развернутое описание. Описание есть у каждого материала, этот пункт важен, но иногда описание бывает косвенным, пустословным. Это относится к тем материалам, которым не нужна детальная инструкция.

Установка скриптов – иногда не быстрый процесс. На страницах с описаниями всегда указывается место, куда нужно вставить приложенный код. Если требуется редактирование настроек в Панели управления, то об этом тоже пишется. Если никакой информации об установке нет, значит, код можно ставить в любом месте на сайте, преимущественно в сайдбаре. Прежде чем редактировать страницы, настоятельно рекомендуем делать резервное копирование шаблонов. Этот совет по большей части для новичков.

Гость
Ваша корзина
Ваша корзина пуста
ttalantlev.ucozru