Красивое меню

@dicktorinc51 · Регистрация: 02.11.2018

Студворк — интернет-сервис помощи студентам

Доброго времени суток, форумчане. Хотелось бы попросить помощи, как сделать вот такое : https://ya.free-browser.ru/ навигационное меню на Bootstrap 4 с такой же анимацией при прокрутке страницы вниз?

Qwerty_Wasd · 02.11.2018, 20:03

****torinc51, открываете документацию фреймворка - http://bootstrap-4.ru/docs/4.1... roduction/
Ищем как сделать меню, там же смотрим как подключить bootstrap и его зависимости.

Сообщение от ****torinc51

с такой же анимацией при прокрутке страницы вниз?

это лишь пример, как допилить разберетесь сами - https://codepen.io/qwerty_wasd/pen/OaLdpe

HTML5
1
2
3
4
5
6
7
8
9
10
<nav class="navbar navbar-expand-md navbar-light bg-light"><a class="navbar-brand" href="#">LOGO</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav">
      <li class="nav-item active"><a class="nav-link" href="#">Blablabla</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Blablabla</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Blablabla</a></li>
    </ul>
  </div>
</nav>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
*,
*:after,
*:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}
 
/*стили выше добавлены только для этого примера, в реальном проекте используйте normilize.css\reset.css*/
html,
body {
  width: 100%;
}
 
body {
  height: 1500px;
  background: #607D8B;
}
 
.bg-light {
  background-color: transparent !important;
}
@media (max-width: 768px) {
  .bg-light {
    background-color: #f8f9fa !important;
  }
}
 
nav {
  transition: all 1s;
}
 
#navbarSupportedContent {
  justify-content: flex-end !important;
}
 
.fixed {
  position: fixed !important;
  background-color: #f8f9fa !important;
  width: 100%;
  top: 0;
  transition: all .5s ease-in-out;
}

JavaScript
1
2
3
4
5
6
$(document).ready(function() {
  $(document).scroll(function(){
    if ($(document).scrollTop() > 0) $('nav.navbar').addClass('fixed');
    else $('nav.navbar').removeClass('fixed');
  });
});

Новые блоги и статьи Все статьи Все блоги /
Перемещение выделенных строк ТЧ из одного документа в другой Maks 30.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .	Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .	Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .
Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .

@dicktorinc51 0 / 0 / 0 Регистрация: 02.11.2018 Сообщений: 1

	Красивое меню 02.11.2018, 18:03. Показов 1334. Ответов 1 Метки bootstrap 4, css, html, меню (Все метки) Доброго времени суток, форумчане. Хотелось бы попросить помощи, как сделать вот такое : https://ya.free-browser.ru/ навигационное меню на Bootstrap 4 с такой же анимацией при прокрутке страницы вниз? 0