Главная / Каталог скриптов для uCoz / Меню

Зелёное фиксированное адаптивно горизонтальное меню

Добавлено 07-04-2022 в 00:34

Категория Меню
Авторwaak
Просмотры471
Комментарии2
Понравилось14

Зелёное фиксированное адаптивно горизонтальное меню

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

Подробнее о меню

Меню выполнено в зелёном цвете и фиксируется при скроле так же полностью адаптивное под разные размеры экрана так же содержит в себе поиск и выпадающий список в виде трёх столбиков со списком ссылок и четвёртый для рекламы или для вывода какой небудь другой информации в виде картинки или текста вообщем смотрим скриншоты с примером меню

Скриншоты меню

Полный вид с выпавшим меню

вид меню при адаптации

вид при маленьком размере экрана

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

Установка меню

Для начала нам нужно скопировать код который представлен ниже затем перейти в панель администратора далее управление дизайном ну и в верхнюю часть сайта вставить код

Код

Отлично не забываем сохранить!

Обратите внимание в коде есть картинки но они не будут выводиться так как ссылки на них вы должны указать свои я этого не делал так как на их месте может быть информер баннер или что вы там захотите а я просто прописал html что бы обозначить место

Теперь нам нужно подключить стили данного меню а для этого нам нужно перейти в таблицу стилей css и в самый её конец добавить код что представлен ниже

Таблица стилей css

Код

header {
  background: #329965;
  position: sticky;
  width: 100%;
  top: 0;
  z-index: 100;
}
.header {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.logo {float: left;}

.logo a {
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: rgb(255 255 255 / 90%);
  line-height: 70px;
  display: inline-block;
}
.logo a:hover {
  color: #FFF;
}

.searchbc {
  float: left;
  padding: 16px 10px 0;
  width: calc(100% - 370px);
  position: relative;
}
.searchbctext {
  width: 100%;
  padding: 10px 20px;
  background: rgba(0, 0, 0, .2);
  box-shadow: none;
  border: none;
  color: #FFF;
  font-size: 12px;
  padding-left: 40px;
  margin-left: 20px;
}

.searchbctext::placeholder {
  color: rgb(255 255 255 / 80%);
}
.searchSbmFl {
  position: absolute;
  left: 35px;
  top: 18px;
}

.miniprof {
  width: 90px;
  float: right;
  margin: 12px 0;
}
.miniprof span {
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  font-size: 14px;
  color: #FFF;
  text-align: center;
  line-height: 30px;
  display: inline-block;
  margin: 5px;

}
.userminiprof {background: rgba(0, 0, 0, .2);}
.miniprof span:hover {
  background: rgba(0, 0, 0, .5);
}

.havheadbcw {
  max-width: 1140px;
  margin: 0 auto;
}
.navwaak {
  list-style: none;
}
.navwaak li {
  float: left;
}
.navwaak li a {
  text-decoration: none;
  display: inline-block;
  padding: 10px 10px;
  color: #FFF;
  font-size: 13px;
}
.navwaak li a i {
  margin-left: 10px;
}
.navwaak li:hover {
  background: rgba(0, 0, 0, .9);
}
.navwaak li:hover .havheadbc {
  display: block;
}
.havheadbc {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #000;
  display: none;
}
.havheadbc ul {
  width: 25%;
  float: left;
  list-style: none;
  padding: 20px;
}
.havheadbc ul li {
  float: none;
}
.havheadbc ul li a {
  line-height: 30px;
  color: #999;
  padding: 0 10px;
}
.havheadbc ul li a i {
  margin-left: 0;
  margin-right: 10px;
  font-size: 10px;
  color: #329965;
}
.havheadbc ul li a:hover {color: #329965;}
.havheadbc ul li.namehavhead a {
  font-size: 18px;
  font-weight: bold;
  color: #329965;
  padding: 10px 10px 20px;
}

.dopingban {
  overflow: hidden;
  color: #FFF;
  font-size: 13px;
}
.dopingban img {
  max-width: 100%;
}
.dopingban p {
  display: block;
  padding: 10px;
}
.dopingban p a {
  color: #329965!important;
  font-size: 13px;
  padding: 0;
}

span.mobmenuss {
  line-height: 40px;
  font-size: 30px;
  color: #FFF;
  margin-right: 15px;
  cursor: pointer;
  display: none;
}

@media screen and (max-width: 650px){
  span.mobmenuss {display: inline-block;}
  .searchbc {width: calc(100% - 200px);}
  .headnav {
  position: fixed;
  width: 87%;
  max-width: 300px;
  left: 0;
  top: 70px;
  bottom: 0;
  background: #191a1f;
  z-index: 99;
  display: none;
}
.navwaak li {float: none;}
.havheadbc {
  position: relative;
  top: 0;
  background: #000;
}
.havheadbc ul {
  width: 100%;
  float: none;
}
.dop_bodyvm {overflow: hidden;}
.mobbg {
  position: fixed;
  z-index: 90;
  background: rgba(0, 0, 0, .7);
  left: 0;
  right: 0;
  top: 70px;
  bottom: 0;
  display: none;
}
.block {display: block;}
.navwaak {
  padding: 30px 10px;
  overflow-x: hidden;
  position: relative;
  height: calc(100vh - 70px);
}
.dopingban {display: none;}
.navwaak li a {padding: 10px 30px;}
.logo a {font-size: 0;}
.logo a i {font-size: 30px;}
.logo i {
  line-height: 70px;
}
}
@media screen and (max-width: 400px){
  .logo a {font-size: 30px;}
  .logo {float: none;}
  .searchbc {
  padding: 16px 0px 0;
  width: calc(100% - 120px);
}
.searchbctext {margin-left: 0px; }
.searchSbmFl {left: 10px;}

  }

Отлично не забываем сохранить!

Ну и пока мы в таблице стилей давайте подключим шрифтовые иконки от font-awesome если они у вас ещё не подключены а для этого копируем строку ниже и прописываем её в таблицу стилей css в самый верх то есть первой строчкой

Код

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css);

Отлично не забываем сохранить!

Ну и конечно же не забываем почистить кеш у браузера для этого можно просто нажать комбинацию клавиш Ctrl+F5 и на этом всё готова осталось только настроить его под себя заменив - указав ссылки и текст.

И вам спасибо за поддержку! Если бы каждый немного помог то сайт был популярнее ведь 10 - 20 да и 50р это сейчас не большие деньги а для меня стимул писать и помогать вам с вашими задумками и сайтами бесплатно

Оставить комментарий

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

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

Создать сайт
Бесплатно

Меню

Полезно

Комментарии

waak

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

04-03-2024 в 08:01 материал

Fr Frag

Для модуля новости не работает

03-03-2024 в 05:55 материал

web_master

при добавлении комментарии выдает ошибку в консоли:

POST http:сайт/index/ 404 (Not Found)

29-02-2024 в 16:58 материал

web_master

UPD: так будет работать , + в конце будут показывать и проценты...

Код

<?($OTHER2$-$OTHER1$)/$OTHER2$*100 ?>

А так будет без процентов:

Код

<?int(($OTHER2$-$OTHER1$)/$OTHER2$*100)?>

25-02-2024 в 23:06 материал

web_master

Скрипт не работает почему-то

25-02-2024 в 22:09 материал

waak

Не за что! Я бы делал больше но просьб мало а самому сидеть придумывать не всегда есть время по этому и обновления идут редко

07-02-2024 в 18:26 материал

ed edik2009

Спасибо.Поставил все работает. К сожалению эпоха сайтостроения Юкоз прошла. Ваш сайт один из немногих который, хоть что то обновляет материалы для в этой системы (Скрипты, Шаблоны, Графика и т.д)

07-02-2024 в 08:08 материал

waak

Здравствуйте! вы наверное не совсем понимаете смысл данного раздела, Что бы я мог выполнить вашу просьбу я должен понимать что именно вам нужно а в вашей просьбе нет конкретики и по этому выполнить её не получится

27-01-2024 в 15:12 материал

di dinyslamsinger

От души