» »

Прозрачное горизонтальное меню на uCoz


Прозрачное горизонтальное меню на uCoz

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

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

Код
<div class="menuba">  
<div class="wrapper">  
<div class="cats-box">  

<ul id="nav7">  
  <li><a href="/" title="Главная страница"><i class="fa fa-home" aria-hidden="true"></i></a></li>  
  <li><a href="#" title="Игровые новости">Новости</a></li>  
  <li><a href="#" title="Скачать игры">Игры</a></li>  
  <li><a href="#" title="Скачать моды и модификации">Моды</a></li>  
  <li><a href="#" title="Блог">Статьи</a></li>  
  <li><a href="#" title="Игровой форум">Форум</a></li>  
  <li><a href="#" title="Узнать больше">Ещё <i class="fa fa-caret-down" aria-hidden="true"></i></a>  
   
<ul>  
  <li class="navzzz"><a href="#" title="Даты выхода игр на ПК">Даты выхода игр</a> </li>  
  <li class="navzzz"><a href="#" title="Игры которые еще не вышли">Скоро на сайте</a> </li>  
  <li class="navzzz"><a href="#" title="Рейтинг игр">ТОП 100 Игр</a> </li>  
  <li class="navzzz"><a href="#" title="Связь с администрацией">Контакты</a> </li>  
  <li class="navzzz"><a href="#" title="Часто задаваемые вопросы">FAQ</a> </li>  
  <li class="navzzz"><a href="#" title="Правила сайта">Правила сайта</a></li>  
  <li class="navzzz"><a href="#" title="Информация о сайте">О нас</a> </li>  
</ul>  
</li>  
</ul>  
   
<div class="float_right">  
  <div class="navi">  
  <div class="navi-menu">  
  <div style="margin-top:13px;">  
<script src="https://yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script>  
<script src="https://yastatic.net/share2/share.js"></script>  
<div class="ya-share2" data-services="collections,vkontakte,facebook,odnoklassniki,moimir,gplus" data-counter=""></div>  
  </div>  
  </div>  
  </div>  
  </div>

Css:

Код
@charset "utf-8";  
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,700,400,600);  
@import url(http://fonts.googleapis.com/css?family=Russo+One:300,700,400,600);  
@import url(http://fonts.googleapis.com/css?family=Comfortaa:300,700,400,600);  
@import url(/css/animate.css);  
@import url(/css/font-awesome.css);  
::-webkit-scrollbar-track{background-color: #f5f8fa;webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9)}::-webkit-scrollbar{height: 8px;width: 8px;-webkit-border-radius: 5px 5px 5px 5px;border-radius: 5px 5px 5px 5px}::-webkit-scrollbar-thumb{background-color: #ccc;-webkit-border-radius: 5px 5px 5px 5px;border-radius: 5px 5px 5px 5px}*{box-sizing: border-box;moz-box-sizing: border-box;o-box-sizing: border-box}html,body{height: 100%}@-webkit-keyframes fade-in{0%{opacity: 0}100%{opacity: 1}}@-moz-keyframes fade-in{0%{opacity: 0}100%{opacity: 1}}@-o-keyframes fade-in{0%{opacity: 0}100%{opacity: 1}}@keyframes fade-in{0%{opacity: 0}100%{opacity: 1}}  

.menuba {  
  background-color: rgba(0, 0, 0, 0.55);  
  height: 50px;  
}  
.wrapper {  
  max-width: 1160px;  
  width: 100%;  
  margin: 0 auto;  
  position: relative;  
}  
.cats-box .navi-button, .navi-button:hover {color:#fff; font-weight:normal; display:inline-block;position:relative;line-height:35px;padding-right: 15px;padding-left: 15px;text-decoration:none}  

.cats-box {  
  padding: 5px 8px 0px 8px;  
  height: 50px;  
  line-height: 50px;  
  position: relative;  
  width: 100%;  
  display: table;  
  margin-bottom: 0px;  
  border-top-right-radius: 4px;  
  border-top-left-radius: 4px;  
}  

.cats-box .float_right {  
  right: 5px;  
  top:0px;  
  position: absolute;  
}  

.cats-box a {  
  font-size:15px;  
  color: white;  
  text-shadow: 1px 1px 1px #212121;  
}  

.cats-box a:hover {  
  color: #C94C4E;  
  text-shadow: 1px 1px 1px #212121;  
}  

#nav7, #nav7 ul, #nav7 li {  
  margin: 0;  
  padding: 0 10px;  
}  

#nav7 {  
  position: relative;  
  display: table;  
  margin-left: -20px;  
}  
#nav7 ul {  
  position: absolute;  
  z-index: 5;  
  display: none;  
}  
#nav7 li:hover ul {  
  display: block;  
}  
#nav7 li {  
  display: table-cell;  
  text-align: center;  
}  
#nav7 ul li {  
  display: block;  
  text-align: left;  
}  
#nav7 .right {  
  direction: rtl;  
}  
#nav7 .right ul {  
  right: 0;  
}  
#nav7 .right li {  
  direction: ltr;  
}  
#nav7 a {  
  display: block;  
  color: #fff;  
  text-decoration: none;  
  font-family: 'Russo One', Verdana, sans-serif;  
  line-height: 42px;  
}  
#nav7 ul a {  
  padding: 3px 15px;  
}  

#nav7 li:hover {  
  background: rgba(56, 56, 56, 0.56);  
}  

.navzzz {  
  background: rgba(39, 39, 39, 0.93);  
  width: 100%!important;  
  min-width: 200px!important;  
  box-shadow: 0 8px 35px rgba(0,0,0,0.1);  
  padding: 0;  
}  

.navi {  
  margin-top:1px;  
  float:right;  
  position:relative;  
}  

.navi-button,.navi-button:hover {  
  position:relative;  
  line-height:40px;  
  text-decoration:none;  
  font-size: 15px; font-family: 'Russo One', Verdana, sans-serif;  
  cursor <img src="/.s/sm/23/tongue.gif" border="0" align="absmiddle" alt="tongue" /> ointer;  
}  

.navi-button i.fa {  
  font-size:13px;  
  padding-left:8px;  
}  

.navi-avatar,.navi-avatar img {  
  -webkit-border-radius:100px;  
  -moz-border-radius:100px;  
  border-radius:100px;  
}  

.navi-avatar {  
  margin-right:8px;  
  width:40px;  
  height:40px;  
  border-radius:40px;  
}  

.navi-avatar img {  
  margin-right: 8px;  
  width: 40px;  
  float: left;  
  height: 40px;  
  object-fit: cover;  
  border: 1px solid #325677;  
}  

.navi-menu:hover .navi-list {  
  visibility:visible;  
}  

.navi-list {  
  position:absolute;  
  min-width:230px;  
  max-width:400px;  
  right:0!important;  
  top:28px;  
  padding-top:18px;  
  visibility:hidden;  
  z-index:8;  
}  

.navi-list-in {  
  background:rgb(48, 55, 60);  
  width:100%!important;  
  max-width:400px!important;  
  box-shadow:0 8px 35px rgba(0,0,0,0.1);  
  -webkit-border-radius:3px;  
  -moz-border-radius:3px;  
  border-radius:3px;  
  padding:3px 0;  
}  

.navi-list-in a {  
  display:block;  
  line-height:42px!important;  
  text-decoration:none;  
  text-align:left;  
  border-bottom: 1px solid #495156;  
  padding:0 20px!important;  
}  

.navi-list-in a.last {  
  border-bottom:0!important;  
}  

.navi-menu:hover .navi-list {  
  visibility:visible;  
}

(rip Бармен) - он же JoniDen.
08.10.2016 Загрузок: 4 Просмотров: 432 Комментарий: (11)

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

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

Комментарий: 11
Kosten
Kosten 08.10.2016 19:581
0
Меню как всегда оригинально смотрится, да плюс идут еще социальные закладки, все по теме. Если кто хочет посмотреть как примерно в реале оно будет, то Клик и обозреваем.)
JoniDen
JoniDen 08.10.2016 20:002
0
Да социальные кнопки пришлось добавить, а то было бы много пустого места.
Kosten
Kosten 08.10.2016 20:053
0
Так удачно добавил, можно вообще по сути их убрать, само меню сделать немного шире и поставить мини профиль как здесь на сайте, на форуме его скинул, если что. Так что меню идет как рабочие, с поправкой, что можно переделать, то что нужно.
JoniDen
JoniDen 08.10.2016 20:104
0
Переделать можно все, главное чтобы желание было, и чтобы знал что менять wink
Kosten
Kosten 08.10.2016 20:125
0
Это просто мысли в слух, возможно кто то захочет поставить профиль, и убрать социалку, и в комментариях узнает, что это возможно, так как материал предоставлен, только осталось его принять как есть или переделать.
FeStemBer
FeStemBer 08.10.2016 20:186
0
А почему оно прозрачное, на скрине не заметно, лучше КОстен сделай DEMO и все видно будет.
tsakonter
tsakonter 08.10.2016 20:217
0
Так видно сколько стилей идет, думаю красиво должно смотреться на сайте. А что по профили как здесь, то оно не подойдет, там другой нужно ставить.
JoniDen
JoniDen 08.10.2016 20:248
0
А что задний фон не видно на скриншоте?
FeStemBer
FeStemBer 08.10.2016 20:299
0
Просто подумал, что он другим должен, а здесь как видно фотошоп наложено. Прозрачность можно регулировать, если да, то напишите где, думаю многим интересно будет.
JoniDen
JoniDen 08.10.2016 20:4210
0
В CSS вот этот класс .menuba, строка background-color
Kosten
Kosten 08.10.2016 20:4811
0
Это правильно, чтоб лишних вопросов не было.
avatar