Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
0 / 0 / 0
Регистрация: 05.02.2018
Сообщений: 33
1

фиксированное меню

03.03.2020, 13:32. Показов 223. Ответов 0
Метки нет (Все метки)

Нужно сделать меню фиксированным в фуллскрин слайдере, ниже код скинул для менюшки и собственно js код для слайдера
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="main_page">
            <ul class="main_section">
                <li class="main__item mainButton"><a class="textA" href="#">Главная</a> </li>
                <li class="main__item mainButton"><a class="textA" href="#">Проекты</a> </li>
                <li class="main__item mainButton"><a class="textA" href="#">О нас</a> </li>
                <li class="main__item mainButton"><a class="textA" href="#">Контакты</a> </li>
            </ul>
            <div class="mini_logo"><img src="image/logo.png" alt="src"></div>
        </div>
 
<script>
    var MySlider = slider('.slides');
 
    $(document).ready(function(){
        $('#nav-icon1').click(function(){
            $(this).toggleClass('open');
            $('#menu_list').animate({
                direction: "left",
                width: "toggle"
            }, 1000);
        });
    });
</script>
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
.main_page {
     position: sticky;
     display: flex;
     justify-content: space-between;
     padding: 15px;
     background: #ffffff;
     color: #ffffff;
     opacity: 1;
     top: 0;
     z-index: 999;
 }
.main_section {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-decoration: none;
    width: 100%;
    z-index: 9999;
    opacity: 1;
    margin: 21px 0 0 0;
}
.main_page.out {
    transform: translateY(-100%);
}
.main__item {
    padding: 10px 10px;
    font-size: 20px;
    margin-left: 50px;
    font-family: Montserrat-Black, sans-serif, cursive;
}
Javascript
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
var slider = function (sliderElement) {
 
  var pages = [];
  var currentSlide = 1;
  var isChanging = false;
  var keyUp = {38:1, 33:1};
  var keyDown = {40:1, 34:1};
 
  var init = function () {
 
    document.body.classList.add('slider__body');
 
    whatWheel = 'onwheel' in document.createElement('div') ? 'wheel' : document.onmousewheel !== undefined ? 'mousewheel' : 'DOMMouseScroll';
    window.addEventListener(whatWheel, function (e) {
      var direction = e.wheelDelta || e.deltaY;
      if (direction > 0) {
        changeSlide(-1);
      } else {
        changeSlide(1);
      }
    });
 
    window.addEventListener('keydown', function (e) {
      if (keyUp[e.keyCode]) {
        changeSlide(-1);
      } else if (keyDown[e.keyCode]) {
        changeSlide(1);
      }
    });
 
    detectChangeEnd() && document.querySelector(sliderElement).addEventListener(detectChangeEnd(), function () {
      if (isChanging) {
        setTimeout(function() {
          isChanging = false;
          window.location.hash = document.querySelector('[data-slider-index="' + currentSlide + '"]').id;
        }, 200);
      }
    });
 
    document.querySelector(sliderElement).classList.add('slider__container');
    var indicatorContainer = document.createElement('div');
    indicatorContainer.classList.add('slider__indicators');
 
    var index = 1;
    [].forEach.call(document.querySelectorAll(sliderElement + ' > *'), function (section) {
 
      var indicator = document.createElement('a');
      indicator.classList.add('slider__indicator')
      indicator.setAttribute('data-slider-target-index', index);
      indicatorContainer.appendChild(indicator);
 
      section.classList.add('slider__page');
      pages.push(section);
      section.setAttribute('data-slider-index', index++);
    });
 
    document.body.appendChild(indicatorContainer);
    document.querySelector('a[data-slider-target-index = "' + currentSlide +'"]').classList.add('slider__indicator--active');
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
03.03.2020, 13:32
Ответы с готовыми решениями:

Раскрывающееся меню - при открытии/закрытии вложенного меню закрывается все меню
Проблема во вложенном меню. При открытии/закрытии вложенного меню закрывается все меню. Надо, чтобы...

Можно ли изменить ссылки по классу в меню (поменять домен в конкретном меню)?
Всем привет. Есть два меню на странице: &lt;ul class=&quot;menu-head&quot;&gt; &lt;li&gt;&lt;a...

Текст меню должен уменьшаться вместе с меню
Текст меню должен уменьшаться вместе с меню. Ниже представлена верстка меню. Через css я сделал...

Не работает меню. Должно скрывать меню и раскрывать.
Беда в том, что меню не работает в JS. Должно скрывать меню и раскрывать. &lt;!DOCTYPE html&gt;...

__________________

Записывайтесь на профессиональные курсы Fullstack-разработчиков на JavaScript‌
Обучение в Java Mentor с оплатой после трудоустройства
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
03.03.2020, 13:32

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Sticky как остановить блок
Как можно остановить блок чтобы он не залезал на футер?

Sticky sidebar — изменение логики
Имеется скрипт http://www.profilepicture.co.uk/demos/stickybox/ Работает он следующим образом:...

Sticky-kit плагин. установка и использование
Помогите установить и сделать список, чтоб шапки, оставались фиксироваными пока активно поле...

Работа с меню. При клике на кнопке меню или вне его, меню должно закрываться
Добрый вечер! Изучаю JQuery. Вот ради развития решил написать меню, практически такое же как на...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.