Верхняя часть сайта для uCoz

Верхняя часть сайта для uCoz

22.11.2017 1313 1 milan_shubin Все для uCoz Меню для Сайта
Описание меню сайта:


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

Установка:

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

удалите весь код и ставьте этот:
Код
<header class="header-fix">
<div class="wrapper">
<a id="logo" href="/" title="Главная страница">Mega<img src="http://mega-game.org/img/mg_logo_face.png" class="logoimg" alt="Логотип" title="Mega-Game">Game</a>  
<div id="top_right">
  <form method="get" style="margin:0" action="/search/">
  <input type="text" name="q" maxlength="30" size="20" class="topqueryfield">
  <input type="submit" class="searchSbmFl" name="sfSbm" value="Найти" style="display:none;">
  </form>
</div>
   
  <div class="navi">  
  <div class="navi-menu">  
  <a href="#" title="Страница регистрации" class="navi-button"><span class="navi-avatar"><img src="http://mega-game.org/img/noava.png" alt="Avatar"></span> Войти <i class="fa fa-caret-down"></i></a>  
  <div class="navi-list">  
  <div class="navi-list-in">  
  <a href="/register" title="Страница регистрации">Регистрация</a>  
  <a href="javascript://" rel="nofollow" onclick="new _uWnd('LF',' ',-250,-110,{autosize:1,closeonesc:1,resize:1},{url:'/index/40'});return false;" class="last" title="авторизация на сайте">Вход</a>  
  </div>  
  </div>  
  </div>  
  </div>  
   
  </div>
</header>


2) В таблицу стилей (CSS) добавляем код самый вниз:
Код
.wrapper {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;  
  position: relative;  
}
header {
  width: 100%;  
  height: 50px;
  line-height: 50px;
  position: fixed;
  top: 0px;  
  z-index: 12;  
  display: block;
  color:#fff;  
  background-color: rgba(0,0,0,0.6);
}

header #logo {
  font-family: 'Russo One', Verdana, sans-serif;
  float: left;
  font-size: 25px;
  font-weight: 700;
  left: 20px;
  position: relative;
  text-decoration: underline;
  text-transform: uppercase;
  color:#fff;  
}
header #top_right {
  float: right;
}

.logoimg {margin-bottom: -4px; padding-left: 3px; padding-right: 4px;}
.more {position: absolute; margin-left: 430px; margin-top: -6px; }
   
.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:pointer;
}

.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;
}

.text3 {width: 340px;}

.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(46, 46, 46);
  width: 100%!important;
  max-width: 400px!important;
  box-shadow: 0 8px 6px rgba(0, 0, 0, 0.67);
  padding: 7px 7px 2px;
  border: 1px solid #3e3d3d;
}

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

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

.navi-list-in a {
  display: block;
  line-height: 42px!important;
  text-decoration: none;
  text-align: left;
  padding: 0 20px!important;
  margin-bottom: 5px;
}

header .navi-list-in {
  background: #2e2e2e;
  width: 100%!important;
  max-width: 400px!important;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.65);
  padding: 7px 7px 2px;
}

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

header .navi-list-in a:hover {
color: #fff;
}

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

header .navi-menu {
  background:none!important;
  border:0 solid #000;
  margin-left:15px;
  position:relative!important;
  margin-top: -5px;
}

header .navi-button,.navi-button:hover {
  font-weight:400;
  color:#fff;
  display:inline-block;
  position:relative;
  line-height:40px!important;
  padding-right:15px;
  padding-left:15px;
  text-decoration:none;
}

header .navi-button i.fa {
  color:#ccc;
  font-size:13px;
  padding-left:8px;
}
Верхняя часть сайта для uCoz
Файлы для скачивания отсутствуют.
Поблагодарить автора Автор: milan_shubin
Комментарии (1)
Добавить комментарий
class="add-comm-form clearfix add-shadow2" id="add-comm-form">
avatar
avatar
0
1.
Есть кое какие ошибки...