• Страница 1 из 2
  • 1
  • 2
  • »
Форум » Веб-разработка » HTML + CSS — коды » Горизонтальное фиксированное меню (Горизонтальное и адаптивное фиксированное меню)
Горизонтальное фиксированное меню
Angerfist
Воскресенье, 28 Августа 2016 | Сообщение 1
Оффлайн
Vip
Сообщений:767
Награды: 21


Попросили рипнуть меню и выложить тут с одного шаблона. Выкладываю как есть и перенастраивать нет желания.
Демо Добавлю только короткое описание по установке:
В архиве есть папка font-awesome, загружаем её в корень сайта и подключаем вверху в head, версия
font-awesome-4.6.3, иконку fa fa-globe наверняка будете менять.
Код

<link rel="stylesheet" href="/font-awesome/css/font-awesome.css">


Дальше в теле сайта body в начале устанавливаем конструкцию самого меню, либо меняем то что уже было в теге header.
Или же меняйте полностью конструкцию в зависимости от шаблона сайта, это меню настроено под определённый шаблон.
Код

<header class="header-fix">
<section class="wrapper">
<a id="logo" href="/">Logo<i class="fa fa-globe"></i>type</a>
<section id="top_right">
<form onsubmit="this.sfSbm.disabled=true" 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;">
<i class="fa fa-search"></i></form>
</section>
<nav id="top_right">
<a href="javascript://" class="mobilemenu"><i class="fa fa-navicon"></i></a>
<div id="uNMenuDiv1" class="uMenuV"><ul class="uMenuRoot">
<li><a href="/index/"><span>Главная</span></a></li>
<li><a href="/news/"><span>Новости</span></a></li>
<li><a href="/photo/"><span>Портфолио</span></a></li>
<li class="uWithSubmenu"><a href="javascript://"><span>Подменю</span></a><ul>
<li><a href="/index/0-3"><span>Контакты</span></a></li>
<li><a href="/index/0-2"><span>О нас</span></a></li>
<li><a href="javascript://"><span>Подменю 2</span></a></li>
<li><a href="javascript://"><span>Подменю 3</span></a></li>
<li><a href="javascript://"><span>Подменю 4</span></a></li>
<li><a href="javascript://"><span>Подменю 5</span></a></li></ul></li>
<li><a href="/forum/"><span>Форум</span></a></li></ul></div>
</nav>
</section>
</header>


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=PT+Sans:300,700,400,600);
@import url(http://fonts.googleapis.com/css?family=Comfortaa:300,700,400,600);
* {
box-sizing: border-box;
moz-box-sizing: border-box;
o-box-sizing: border-box;
}
body,
ul,
li,
p,
menu {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
.wrapper {
margin: 0 auto;
max-width: 1200px;
width: 100%;
}
.mobilemenu {
display: none;
font-size: 32px;
line-height: 50px;
moz-transition: all 0.7s ease;
o-transition: all 0.7s ease;
text-align: center;
transition: all 0.7s ease;
webkit-transition: all 0.7s ease;
}
header .mobileclicked span {
background-color: #000;
}
.mobileclicked + .uMenuV .uMenuRoot {
opacity: 1;
transition: top .3s ease, opacity .3s ease;
visibility: visible;
}
header {    
height: 50px;
line-height: 50px;
position: absolute;
width: 100%;
z-index: 1000;
font-family: 'Open Sans', sans-serif;
}
.header-fix {
position: fixed;
background-color: #2E4051;
margin: 0;
padding: 0;    
}
header #logo {
color: rgba(255, 255, 255, 0.9);
float: left;
font-size: 25px;
font-weight: bold;
left: 20px;
position: relative;
text-decoration: underline;
text-transform: uppercase;
font-family: 'Russo One';
}
header .fa-globe {
-webkit-animation: pulse 1s;
animation: pulse 1s;
color: rgba(255, 255, 255, 0.7);
margin: 5px;
}
header #logo:hover .fa-globe {
-webkit-animation: pulse 1s;
animation: pulse 1s;
}
header #top_right {
float: right;
}
header nav {
float: left;
}
header a {
text-transform: uppercase;
color: #fff;
font-weight: bold;
font-family: 'PT Sans';
font-size: 14px;
}
header nav ul li {
float: left;
padding-right: 8px;
}
header form {
float: right;
}
header form input[type=text] {
color: #fff;
background: rgba(255, 255, 255, 0.1);
border: 2px solid #fff;
border-radius: 15px;
height: 30px;
line-height: 30px;
margin-left: 20px;
moz-transition: width 0.5s ease;
o-transition: width 0.5s ease;
padding: 0 0 0 10px;
transition: width 0.5s ease;
webkit-transition: width 0.5s ease;
width: 30px;
}
header form input[type=text]:hover,
header form input[type=text]:focus,
header form input[type=text]:active {
color: #fff;
background: rgba(255, 255, 255, 0.1);
border: 2px solid #fff;
padding: 0 0 0 10px;
position: relative;
width: 200px;
}
header form .fa-search {
position: relative;
color: #fff;
right: 25px;
top: -1px;
text-align: center;
}

.uMenuRoot {
list-style: none;
float: right;
}
.uMenuRoot > li {
float: left;
margin: 0;
margin-left: 5px;
position: relative;
font-family: 'Open Sans', sans-serif;
}
.uMenuRoot > li > a {
display: inline-block;
line-height: 40px;
text-transform: uppercase;
padding: 0 8px;
letter-spacing: 1px;
transition: background ease .3s;
}
.uMenuRoot > li > a:hover {
background: rgba(255, 255, 255, .1);
color: #fff;
}
.uMenuRoot li a {
text-decoration: none;
color: #fff;
padding: 5px;
}
.uMenuRoot li ul {
margin-top: 0px;
position: absolute;
left: -9999px;
list-style: none;
padding: 0;
z-index: 5;
}
.uMenuRoot li:hover ul {
left: 0;
background: rgba(44, 62, 80, 0.95);
}
.uMenuRoot li {
white-space: nowrap;
}
.uMenuRoot > li:hover ul > a {
transition: background ease .5s;
}
.uMenuRoot ul li {
font-size: 90%;
width: 100%;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
transition: background ease .3s;
}
.uMenuRoot ul li:hover {
background: rgba(255, 255, 255, .1);
}
.uWithSubmenu {
position: relative;
}
li.uWithSubmenu ul {
position: absolute;
width: 240px;
color: #fff;
top: 100px;
left: -99999px;
opacity: 0;
margin: 0;
padding: 0;
list-style: none;
}
.uMenuV .uMenuRoot > li.uWithSubmenu > ul {
transition: top .3s ease, opacity .6s ease;
}
.uMenuV .uMenuRoot > li.uWithSubmenu:hover > ul {
left: 0;
opacity: 1;
top: 50px;
}
.uMenuV .uMenuRoot > li > ul li.uWithSubmenu ul {
left: 240px;
top: -9999px;
transition: left .3s ease, opacity .6s ease;
border-left: 1px solid rgba(255, 255, 255, 0.05)
}
.uMenuV .uMenuRoot > li > ul li.uWithSubmenu:hover > ul {
left: -240px;
opacity: 1;
top: 0;
}
.uWithSubmenu ul a {
display: block;
color: #fff;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
line-height: 40px;
padding: 0 20px;
}
.uWithSubmenu ul li ul {
left: -240px;
top: 0;
}
@media screen and (min-width: 1200px) {
.wrapper {
padding: 0 20px;
}
}
@media screen and (max-width: 1200px) {
.wrapper {
padding: 0 20px;
}
}
@media screen and (max-width: 1024px) {
header .mobilemenu {
display: block;
}
header nav .uMenuRoot {
background: #354758;
height: auto !important;
moz-opacity: 0;
o-transition: all 0.7s ease;
position: absolute;
right: 85px;
padding: 8px;
margin-top: 10px;
transition: all 0.7s ease;
visibility: hidden;
webkit-transition: all 0.7s ease;
width: auto !important;
z-index: 999;
border-radius: 3px;
}
header nav .uMenuRoot:before {
border: 7px solid transparent;
border-bottom: 7px solid #354758;
content: "";
display: block;
height: 0;
margin: -14px 0 0 20px;
position: absolute;
right: 7px;
top: 0;
width: 0;
}
header nav .uMenuRoot:after {
border: 7px solid transparent;
border-bottom: 7px solid #354758;
content: "";
display: block;
height: 0;
margin: -14px 0 0 20px;
position: absolute;
right: 7px;
top: 0;
width: 0;
}
header nav .uMenuRoot li {
display: block !important;
float: none !important;
height: 35px !important;
line-height: 35px !important;
margin: 0 !important;
padding: 0 !important;
width: auto !important;
}
header nav .uMenuRoot li:last-child {
border-bottom: none;
}
header nav .uMenuRoot li a {
height: 35px !important;
line-height: 35px !important;
display: block;
font-weight: normal;
margin: 0 !important;
padding: 0 5px !important;
white-space: nowrap;
}
header nav .uMenuRoot li a:hover {
height: 35px !important;
line-height: 35px !important;
}
header nav:hover {
cursor: pointer;
}
header .uWithSubmenu > ul {
background: #354758;
margin-left: 0px;
margin-top: -16px;
padding: 8px;
}
}
@media screen and (max-width: 800px) {
#main > .wrapper {
display: table;
}
}
@media screen and (max-width: 680px) {
#main > .wrapper {
display: table;
}
}
@media screen and (max-width: 560px) {
#logo {
font-size: 18px;
}
}
@media screen and (max-width: 400px) {
header #logo {
font-size: 24px !important;
}
}
@media (max-width: 991px) {
span.menu-icon {
display: block;
float: right;
line-height: 70px;
font-size: 24px;
color: #212121;
cursor: pointer;
transition: all .3s ease;
}
#menu .uMenuRoot {
padding: 0 50px;
box-sizing: border-box;
margin: 0;
list-style: none;
background: #212121;
position: absolute;
top: 70px;
right: 0;
width: 100%;
text-align: right;
display: none;
}
#menu .uMenuRoot ul {
padding: 0 30px 0 0;
margin: 0;
list-style: none;
}
#menu .uMenuRoot .fa {
display: none;
}
#menu .uMenuRoot > li {
padding: 7px 0;
border-bottom: 1px solid #323232;
}
#menu .uMenuRoot > li > a {
color: #fff;
background: none !important;
padding: 7px 0;
font-family: 'at_onepage';
text-transform: uppercase;
letter-spacing: 1px;
}
#menu .uMenuRoot > li > ul a {
color: #a7a7a7;
}
#menu .uMenuRoot > li > ul a:hover {
color: #fff;
}
#menu .uMenuRoot > li > ul li {
line-height: 30px;
}
}


Ну и в конце перед /body подключаем скрипт из архива:
Код

<script type="text/javascript" src="/js/mainmenu.js"></script>


Прикрепления: 8180269.jpg (6.8 Kb) · 0667895.jpg (6.7 Kb) · 7873812.jpg (4.4 Kb) · menu.rar (535.9 Kb)


No regrets

Сообщение отредактировал
Angerfist - Воскресенье, 28 Августа 2016, 15:02
Страна: (RU)
Start
Воскресенье, 28 Августа 2016 | Сообщение 2
Оффлайн
Проверенные
Сообщений:116
Награды: 2
в конце выложил этот скрин: типо так дложно быть, но сделано по -другому. так что ль?

Добавлено (28.08.2016, 15:21)
---------------------------------------------
licecap- программа делает анимацию с рабочего стола! очень хороша для скринов.gif


Тити*
Страна: (RU)
Angerfist
Воскресенье, 28 Августа 2016 | Сообщение 3
Оффлайн
Vip
Сообщений:767
Награды: 21
Start, скриншотом показал адаптацию меню под мобильные разрешения экрана.
Нажми Ctrl+Shift+M и увидишь


No regrets

Сообщение отредактировал
Angerfist - Воскресенье, 28 Августа 2016, 15:25
Страна: (RU)
Kosten
Воскресенье, 28 Августа 2016 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Angerfist, как понимаю -горизонтальное меню полностью адаптированное.
Страна: (RU)
Angerfist
Воскресенье, 28 Августа 2016 | Сообщение 5
Оффлайн
Vip
Сообщений:767
Награды: 21
Kosten, да, только не выкладывай на главной материал, не охота отвечать на вопросы) охота пиво пить)

No regrets
Страна: (RU)
Start
Воскресенье, 28 Августа 2016 | Сообщение 6
Оффлайн
Проверенные
Сообщений:116
Награды: 2
Цитата Angerfist ()
Нажми Ctrl+Shift+M и увидишь

Ctrl+Shift+M - профиль из гугла выскакивает!


Тити*

Сообщение отредактировал
Start - Воскресенье, 28 Августа 2016, 15:55
Страна: (RU)
Angerfist
Воскресенье, 28 Августа 2016 | Сообщение 7
Оффлайн
Vip
Сообщений:767
Награды: 21
Цитата Start ()
Ctrl+Shift+M - профиль из гугла выскакивает!

Забываюсь что Firefox стал менее популярным среди пользователей) Режим адаптивного дизайна


No regrets
Страна: (RU)
Kosten
Воскресенье, 28 Августа 2016 | Сообщение 8
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Angerfist, только скрин сделал на главную. biggrin
Страна: (RU)
Start
Воскресенье, 28 Августа 2016 | Сообщение 9
Оффлайн
Проверенные
Сообщений:116
Награды: 2
Цитата Kosten ()

biggrin

Добавлено (28.08.2016, 18:52)
---------------------------------------------

Цитата Angerfist ()
Забываюсь что Firefox стал менее популярным среди пользователей)


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

Добавлено (28.08.2016, 18:56)
---------------------------------------------
Angerfist, Ctrl+Shift+M - теперь я понял про что ты говорил, а меню у тебя работает в таком размере? или так должно?


Тити*
Страна: (RU)
Angerfist
Воскресенье, 28 Августа 2016 | Сообщение 10
Оффлайн
Vip
Сообщений:767
Награды: 21
Цитата Start ()
а меню у тебя работает в таком размере? или так должно?

С трудом догоняю в чём суть вопроса, попробую может правильно понял, я сделал скриншоты в самом начале материала с полного экрана, тестировал на сайте с контентом общей шириной 1200px на мониторе 1920*1080, а этот последний скрин я уже сделал не помню каким разрешением, просто потянул браузер до этапа складывания меню без эмуляторов.
Если всмотреться в медиа запросы то видим что складывание начинается с 1024px и при этом замещаем список иконкой, при нажатии же на саму иконку меню появится выпадающий список с категориями меню, там уже подключается скрипт (без него не будет эффекта).

Прикрепления: 9624726.gif (1.2 Kb)


No regrets
Страна: (RU)
Start
Воскресенье, 28 Августа 2016 | Сообщение 11
Оффлайн
Проверенные
Сообщений:116
Награды: 2
Angerfist, вот скрин на фоксе сделал: (Ctrl+Shift+M)

меню не робит в таком размере про это! или это у меня тока так? хз кеш кук не чистил


Тити*

Сообщение отредактировал
Start - Воскресенье, 28 Августа 2016, 23:21
Страна: (RU)
Kosten
Воскресенье, 28 Августа 2016 | Сообщение 12
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Цитата Start ()
меню не робит в таком размере про это! или это у меня тока так? хз кеш кук не чистил

Попробуйте с другого браузера и почистите все история на браузере.
Страна: (RU)
Start
Понедельник, 29 Августа 2016 | Сообщение 13
Оффлайн
Проверенные
Сообщений:116
Награды: 2
Angerfist, а как сделать чтобы оно не ездило? что надо убрать? Зарание Спасибки

Добавлено (29.08.2016, 11:29)
---------------------------------------------
Angerfist, еще один вопрос! в ксс есть такая ветка: box-sizing: border-box; - меню с ней хорошо смотрится, но сдвиг кнопок и др... он мешает, можно как-то заменить или еще что-то?
сейчас тебе пример приведу:
1) если убрать:

2) если не убирать:


Тити*

Сообщение отредактировал
Start - Понедельник, 29 Августа 2016, 11:30
Страна: (RU)
Angerfist
Понедельник, 29 Августа 2016 | Сообщение 14
Оффлайн
Vip
Сообщений:767
Награды: 21
Start,
Цитата Start ()
меню не робит в таком размере

за появление меню отвечает mainmenu.js, ищи там подвох, может путь неправильный указал.

Чтобы форма поиска не ездила а сразу была открытой, найди:
Код

header form input[type=text]

и удали для начала
Код

moz-transition: width 0.5s ease;
o-transition: width 0.5s ease;

transition: width 0.5s ease;
webkit-transition: width 0.5s ease;

а параметру
Код
width: 30px;
пропиши 200px
Ну и в завершении можно полностью удалить следующее:
Код

header form input[type=text]:hover,
header form input[type=text]:focus,
header form input[type=text]:active {
color: #fff;
background: rgba(255, 255, 255, 0.1);
border: 2px solid #fff;
padding: 0 0 0 10px;
position: relative;
width: 200px;
}


No regrets
Страна: (RU)
Angerfist
Понедельник, 29 Августа 2016 | Сообщение 15
Оффлайн
Vip
Сообщений:767
Награды: 21
Start, да это меню под тот шаблон настроено, своими стилями оно где то пересекается с стилями твоего сайта.
Тот же параметр body, так что подстраивай под свой шаблон


No regrets
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Горизонтальное фиксированное меню (Горизонтальное и адаптивное фиксированное меню)
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск: