Правильная реализация меню

146

23 апреля 2021, 16:50

Подскажите, как правильно реализовать два "меню".

Первое меню

Первое меню находится в header и должно менять цвет в зависимости от положения на странице.

Я решил реализовать это через отслеживания http://адрес/#... на сайте.

Вот так выглядит код:

HTML

    <div class="header">
        <div class="header__inner container">
            <div class="header__left">
                <a class="logo" data-menuanchor="intro" href="#intro">
                    <img class="logo__img" src="./img/logo.png" />
                </a>
                <div class="lang-wrap">
                    <div class="lang">
                        <button class="lang__btn" data-toggle="dropdown">Eng</button>
                        <div class="lang__body">
                            <a href="rus.html" class="lang__item">Rus</a>
                            <a href=""class="lang__item">Eng</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="header__right">
                <button class="header-bars" data-toggle="dropdown">
                    <div class="header-bars__line header-bars__line_top"></div>
                    <div class="header-bars__line header-bars__line_middle"></div>
                    <div class="header-bars__line header-bars__line_bottom"></div>
                </button>
                <div class="header-menu">
                    <a class="header-menu__link" data-menuanchor="what-we-do" href="#whatWeDo" id="whatWeDo_2">
                        <div class="box_1"></div><div class="header-menu__text">What  do we do?</div>
                    </a>
                    <a class="header-menu__link" data-menuanchor="work-process" href="#workProcess" id="workProcess_2">
                        <div class="header-menu__text">The process of work</div>
                    </a>
                    <a class="header-menu__link" data-menuanchor="why-us" href="#whyUs" id="whyUs_2">
                        <div class="header-menu__text">Why should you choose us?</div>
                    </a>
                    <a class="header-menu__link" data-menuanchor="prices" href="#Prices" id="Prices_2">
                        <div class="header-menu__text">Price-list</div>
                    </a>
                    <a class="header-menu__link header-menu__link_order" data-menuanchor="order" href="#Order" id="Order_2">
                        <div class="header-menu__text">Make an order</div>
                    </a>
                </div>
            </div>
        </div>

<script type="text/javascript">
        function showMessage() {
    document.getElementById('whatWeDo_2').style.color = '#fff';
    document.getElementById('workProcess_2').style.color = '#fff';
    document.getElementById('whyUs_2').style.color = '#fff';
    document.getElementById('Prices_2').style.color = '#fff';
    document.getElementById('Order_2').style.color = '#fff';
  }
</script>
<script type="text/javascript">
    window.onscroll = function() {
    var BlockName = document.body.className;
    var AllBlock = ["fp-viewing-Intro-0" , "fp-viewing-whatWeDo-0" , "fp-viewing-workProcess-0" , "fp-viewing-whyUs-0" , "fp-viewing-Prices-0" , "fp-viewing-Order-0","fp-viewing-Socials-0"];
    switch (BlockName) {
    case 'fp-viewing-Intro-0':
    showMessage();
    break;
    case 'fp-viewing-whatWeDo-0':
    showMessage();
    document.getElementById('whatWeDo_2').style.color = '#ffd8ff';
    break;
    case 'fp-viewing-workProcess-0':
    showMessage();
    document.getElementById('workProcess_2').style.color = '#ffd8ff';
    break;
    case 'fp-viewing-whyUs-0':
    showMessage();
    document.getElementById('whyUs_2').style.color = '#ffd8ff';
    break;
    case 'fp-viewing-Prices-0':
    showMessage();
    document.getElementById('Prices_2').style.color = '#ffd8ff';
    break;
    case 'fp-viewing-Order-0':
    showMessage();
    document.getElementById('Order_2').style.color = '#ffd8ff';
    break;
    case 'fp-viewing-Socials-0':
    showMessage();
    break;
    default:
}
    }
    </script>

Второе меню

Находиться на одном из слайдов и должно менять текст в окне рядом с ним. (Пример: при нажатии на Логотип, изменить содержимое окна(розового) на другой текст.)

Подскажите технически верную реализацию таких меню.

Answer 1

• type="text/javascript" можно не указывать... в браузерах оно и так по умолчанию стоит.

• Привыкайте к циклам for, forEach... Удобнее задать всем кнопкам один общий класс и привязать код к классу, чем по отдельности тыкать на ID каждой кнопки, а потом дописывать скрипт, если захочется добавить новую кнопку.

• Функции как правило называют так, чтобы не надо было смотреть на код - а по названию сразу стало понятно, что они делают. Ваш showMessage() мог выглядеть так:

function makeFontWhite( elems ){
  for( var i = 0; i < elems.length; i++ ){
    elems[i].style.color = 'white';
    // или
    // elems[i].classList.add('white'); — но тогда не забыть в CSS добавить этот класс.
  }
}
var link = document.querySelectorAll('.header-menu__link');
makeFontWhite( link );

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

• По поводу вашей функции onscroll... насколько понимаю, вы при клике на <a> достаёте #hash из адреса и даете body класс с этим названием. А потом хотите после скролла достать этот класс и по его значению достать другое id и его покрасить? Это выглядит как костыль для костыля из костылей))

Допустим такое решение тут и правда необходмо. Его можно было переписать так:

window.onscroll = function bubu() {
  var BlockName = (document.body.className.match(/fp-viewing-(.*?)-0/) || [0,0] )[1];
  // match возвращает массив совпадений. У него тут будет два элемента. Первый - всё совпадение целиком,
  //второй - то, что совпадет с условием в скобаках (.*?). Берем только его, с помощью [1]  
  if( bubu.prev == BlockName ){ return; } // Если класс не менялся - не делаем лишних вычислений
  makeFontWhite( link );
  var id = document.getElementById('fp-viewing-' + BlockName + '-2');
  if( id ){ // id Intro не существует, условие не выполнится и не будет ошибки.
    id.style.color = '#ffd8ff';
  }
  bubu.prev = BlockName;
}

(.*?) — вот этот кусок в регулярном выражении находит совпадение с любым (минимальным) набором символов, которое окажется между тем, что написано до и после скобок. Таким образом можно отбросить все одинаковые куски класса, и достать только то, что меняется... т.е. отдельно Intro, whatWeDo и т.п. И уже с ними дальше что-то делать.

(... || [0,0] )[1] — а этот кусок... Если match не найдет совпадений и вернет null, будет ошибка Cannot read property '1' of null. А в этом случае - он посмотрит на следующий массив [0,0] и достанет оттуда второй элемент, не будет ошибки.

P.s. Может я чего-то не знаю, но не уверен, что switch вообще где-либо может быть реально нужен. Можно использовать массивы и объекты, и не писать кучу переключений.

А по переключению вкладок вам дали ссылку в комментариях, не буду повторять его содержание)