ZorNet.Ru — сайт для вебмастера » Меню для сайта » Горизонтальное меню иностранного сайта uCoz

Горизонтальное меню иностранного сайта uCoz

Горизонтальное игровое меню иностранного сайта. Как видим меню сделано в темных тонах, так что лучше ставить, на темные интернет ресурсы. Ну как обычно поставить его можно куда угодно, будь это фирма или игровые новости. Как видим в меню присутствуют социальные сети, собраны почти все известные. Также подключены иконки Font Awesome. Шрифт стоит от Google у данного шрифта, присутствует кириллица.

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

Код

Стили CSS:

Код

a {
  text-decoration:none;
  color:#ef3418;
}

/********************************/
/* Navigation
/********************************/
#navigation {
  height:58px;
  background:#222325;
  border-top:1px solid #343434;
  -webkit-backface-visibility: hidden;
  z-index:9999;
  position:relative;
  font-family: 'Oswald', sans-serif;
}
#navigation .container {
  position:relative;
  z-index:9999;
}
.slicknav_menu { display:none; }

/* Menu *****/
#navigation .menu {
  float:left;
  font-size: 0;
}

#navigation .menu li {
  display:inline-block;
  position:relative;
}

#navigation .menu li a {
  color:#fff;
  line-height:58px;
  font-size:14px;
  font-weight:400;
  letter-spacing:1px;
  text-transform:uppercase;
  display:block;
  padding:0 16px;
}

#navigation .menu li a:hover:after,
#navigation .menu .current-menu-item > a:after {

  position: absolute;
  content: " ";
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #EF3418;
  box-sizing:border-box;
  -o-transition:.22s;
  -ms-transition:.22s;
  -moz-transition:.22s;
  -webkit-transition:.22s;
  transition:.22s;
}

#navigation .menu li a:hover{
  background: #303030;
}

  /* Dropdown */
  #navigation .menu .sub-menu,
  #navigation .menu .children {
  background-color: #222325;
  display: none;
  padding: 0;
  position: absolute;
  margin-top:0;
  left: 0;
  z-index: 99999;
  border:1px solid #000;

  }

  #navigation ul.menu ul a,
  #navigation .menu ul ul a {
  color: #fff;
  height:auto !important;
  border-bottom:none !important;
  box-sizing:content-box !important;
  margin: 0;
  padding:7px 10px;
  min-width: 170px;
  line-height:20px;
  -o-transition:.22s;
  -ms-transition:.22s;
  -moz-transition:.22s;
  -webkit-transition:.22s;
  transition:.22s;
  font-size:11px;
  letter-spacing:1px;
  border-top:1px solid #343434;
  }

  #navigation ul.menu ul li,
  #navigation .menu ul ul li {
  padding-right:0;
  margin-right:0;
  }

  #navigation ul.menu ul a:hover,
  #navigation .menu ul ul a:hover {
  color: #fff;
  background:#303030 !important;
  }

  #navigation ul.menu li:hover > ul,
  #navigation .menu ul li:hover > ul {
  display: block;
  }

  #navigation .menu .sub-menu ul,
  #navigation .menu .children ul {
  left: 100%;
  top: 0;

  }

.container {
  width:1100px;
  margin:0 auto;
}

/* Top Social *****/
.top-social {
  position:absolute;
  right:0;
  top:0;
  background:#141516;
  box-shadow: rgba(225,225,225,0.15) -1px 0 0,rgba(225,225,225,0.15) 1px 0 0,rgba(0,0,0,0.65) 2px 2px 10px inset;
  padding:0 18px;
}
.top-social a {
  line-height:58px;
  color:#fff;
  margin-left:14px;
  font-size:15px;
}
.top-social a:first-child {
  margin-left:0;
}
.top-social a:hover {
  color:#ef3418;
}

(rip Бармен) - он же JoniDen.

04 Апреля 2017 Просмотров: 2994 Комментариев: (7)

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

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

JoniDen

Комментарии: 7
Порядок вывода комментариев: FeStemBer 04 Апреля 2017 03:20¹ 0 Видно сразу игровое, у них вод один формат делают, хотя подойдет на любую тематику, но все же на нем не написано из какого эта навигация рисовалась. JoniDen 04 Апреля 2017 09:38³ 0 Значит вам одного описание мало, ок. Значит так данное меню рипалось, с иностранного игрового сайта, если же увидите где-то в другом месте. То уже вопрос не ко мне, я рипнул работает отлично, нет так нет (исправим). Kosten 04 Апреля 2017 03:28² 0 Не знаю, кто как распознает, от куда и с какой тематике это горизонтальное меню, если только не прочесть описание и не когда бы не подумал, что с игрового, но автоматически бы сказал, что с него. JoniDen 04 Апреля 2017 09:39⁴ 0 Я распознаю от туда от куда рипаю, да в интернете можно найти, не только на игровом. waak 04 Апреля 2017 10:36⁵ 0 Дам маленький совет если вы рипаете не полный дизайн сайта а отдельный элемент то не нужно копировать глобальные стили подобные этой строчки Код a { text-decoration:none; color:#ef3418; } так как эти строки относится ко всем ссылкам на сайте и могут привести к не корректной работе других ссылок на сайте JoniDen 04 Апреля 2017 10:59⁶ 0 Спасибо я знаю про это. Просто я тестирую не на сайте, а в онлайне, ну ты понял про что я. А там без этого подчеркивание будет. Tergran 04 Апреля 2017 17:07⁷ 0 Интересно. кто ставил, при нажатие на социальные кнопки, появляется окно или страница, или они для красоты.