Как синхронизировать два меню?

@sergey-nv · Регистрация: 15.04.2019

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

Есть сайт лендинг. В нем два меню - одно в шапке, другое в подвале. Они совпадают. Когда переходишь, выбираешь пункт меню в шапке, он в шапке становится bold. Когда переходишь, выбираешь пункт меню в подвале, в шапке этот пункт меню не становится bold. А по задумке должен. То есть нужно как-то синхронизировать меню в подвале с меню в шапке. Можно это как-то сделать? Меню в шапке, если что, зафиксировано, движется вместе со скроллом.

@gogolik · 02.12.2021, 08:46

Сайт на какой CMS?

@sergey-nv · 02.12.2021, 08:47 **[ТС]**

Да, вроде ни на какой. Просто адаптивная верстка.

@Para bellum · 02.12.2021, 12:33

Сообщение от sergey-nv

выбираешь пункт меню в шапке, он в шапке становится bold

Как производятся изменения? На стороне браузера или сервера?
Покажите код.

@sergey-nv · 02.12.2021, 13:22 **[ТС]**

Просто в css для пунктов меню в шапке прописано:
main-nav__link.active{font-weight:700}

@Para bellum · 02.12.2021, 14:39

Это понятно. Но вот этот класс "active" -- он как-то программно присваивается нажатой ссылке.
Надо вам либо самому найти кусок кода, выполняющий эту функцию, либо дать хотя-бы ссылку на сайт (если действие происходит на стороне клиента, то найти этот кусок кода зашедшему сайт будет легко).

@sergey-nv · 02.12.2021, 14:53 **[ТС]**

Не понимаю. Есть меню:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
                                              <nav class="main-nav">
                            <ul class="main-nav__list">
                                <li class="main-nav__item">
                                    <a href="#about" class="main-nav__link">О студии</a>
                                </li>
                                <li class="main-nav__item">
                                    <a href="#pricelist" class="main-nav__link">Цены</a>
                                </li>
                                <li class="main-nav__item">
                                    <a href="#works" class="main-nav__link">Работы</a>
                                </li>
                                <li class="main-nav__item">
                                    <a href="#stages" class="main-nav__link">Порядок работы</a>
                                </li>
                                <li class="main-nav__item">
                                    <a href="#contacts" class="main-nav__link">Контакты</a>
                                </li>
                            </ul>
                        </nav>

Каждой ссылке назначен класс main-nav__link. В css прописано:

CSS
1
main-nav__link.active{font-weight:700}

Сайт вот:
http://objective.testfrontend.ru/index.html

@mr_dramm · 02.12.2021, 14:59

Я думаю тут подойет вариант с IntersectionObserver

Тогда даже при скроле меню будет автоматом переключаться

@sergey-nv · 02.12.2021, 15:16 **[ТС]**

А, вот, нашел:

JavaScript
1
2
3
4
$('.main-nav__link').on('click touch', function() {
        $('.main-nav__link').removeClass('active');
         $(this).addClass('active');
    });

Добавлено через 13 минут
А меню в подвале, вот:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
                                         <div class="footer__nav-inner">
                            <div class="footer__title">О компании</div>
                            <ul class="footer__list">
                                <li class="footer__item">
                                    <a href="#about" class="footer__link">Студия</a>
                                </li>
                                <li class="footer__item">
                                    <a href="#pricelist" class="footer__link">Цены</a>
                                </li>
                                <li class="footer__item">
                                    <a href="#works" class="footer__link">Готовые проекты</a>
                                </li>
                                <li class="footer__item">
                                    <a href="#stages" class="footer__link">Как мы работаем</a>
                                </li>
                                <li class="footer__item">
                                    <a href="#contacts" class="footer__link">Обратная связь</a>
                                </li>
                            </ul>
                        </div>

Добавлено через 2 минуты
То есть, как-то нужно завязать событие клик по footer__link на чтобы в main-nav__link происходило выделение font-weight:700.

@mr_dramm · 02.12.2021, 16:23

Сообщение от mr_dramm

Я думаю тут подойет вариант с IntersectionObserver

PHP/HTML
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
    .box {
        height: 100vh;
    }
 
    header {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
    }
    footer {
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
    }
    .active {
        font-weight: 700;
    }
 
    a {
        text-decoration: none;
    }
    </style>
</head>
 
<body>
    <header>
        <menu class="main-nav">
            <a class="about" href="#about">about</a>
            <a class="pricelist" href="#pricelist">pricelist</a>
            <a class="works" href="#works">works</a>
            <a class="stages" href="#stages">stages</a>
            <a class="contacts" href="#contacts">contacts</a>
        </menu>
    </header>
    <div class="box" id="about">about</div>
    <div class="box" id="pricelist">pricelist</div>
    <div class="box" id="works">works</div>
    <div class="box" id="stages">stages</div>
    <div class="box" id="contacts">contacts</div>
    <footer>
        <menu class="main-nav">
            <a class="about" href="#about">about</a>
            <a class="pricelist" href="#pricelist">pricelist</a>
            <a class="works" href="#works">works</a>
            <a class="stages" href="#stages">stages</a>
            <a class="contacts" href="#contacts">contacts</a>
        </menu>
    </footer>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
    $(".main-nav").click(function(e) {
        if (e.target.tagName.toUpperCase() !== "A")
            return false
        e.preventDefault()
        e.stopPropagation()
        $([document.documentElement, document.body]).animate({
            scrollTop: $(`${$(e.target).attr("href")}`).offset().top
        }, 2000);
    });
    const options = {
        root: null,
        rootMargin: '0px',
        threshold: 0.5
    }
 
    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                $(`.main-nav .${$(entry.target).attr("id")}`).addClass("active")
            } else {
                $(`.main-nav .${$(entry.target).attr("id")}`).removeClass("active")
            }
        })
    }, options)
 
    const arr = document.querySelectorAll('#about, #pricelist, #works, #stages, #contacts')
    arr.forEach((i) => {
        observer.observe(i)
    })
    </script>
</body>
 
</html>

@Para bellum · 02.12.2021, 16:58

sergey-nv, попробуйте ещё такой вариант (этим нужно заменить приведённый вами выше кусок JS-кода):

JavaScript
1
2
3
4
5
6
7
8
$('.main-nav__link,.footer__link').on('click touch', function() {
    let href = $(this).attr('href');
 
    $('.main-nav__link')
        .removeClass('active')
        .filter('[href="'+ href +'"]')
        .addClass('active');
});

@sergey-nv · 21.12.2021, 08:59 **[ТС]**

Да, сработало. Спасибо большое.

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .

@sergey-nv 2 / 2 / 0 Регистрация: 15.04.2019 Сообщений: 215

	Как синхронизировать два меню? 02.12.2021, 08:20. Показов 1862. Ответов 11 Метки нет (Все метки) Есть сайт лендинг. В нем два меню - одно в шапке, другое в подвале. Они совпадают. Когда переходишь, выбираешь пункт меню в шапке, он в шапке становится bold. Когда переходишь, выбираешь пункт меню в подвале, в шапке этот пункт меню не становится bold. А по задумке должен. То есть нужно как-то синхронизировать меню в подвале с меню в шапке. Можно это как-то сделать? Меню в шапке, если что, зафиксировано, движется вместе со скроллом. 0

@gogolik Супер-модератор 3949 / 2056 / 829 Регистрация: 13.03.2010 Сообщений: 6,768
	02.12.2021, 08:46
	Сайт на какой CMS? 0

@sergey-nv 2 / 2 / 0 Регистрация: 15.04.2019 Сообщений: 215
	02.12.2021, 08:47 [ТС]
	Да, вроде ни на какой. Просто адаптивная верстка. 0

@sergey-nv 2 / 2 / 0 Регистрация: 15.04.2019 Сообщений: 215
	02.12.2021, 13:22 [ТС]
	Просто в css для пунктов меню в шапке прописано: main-nav__link.active{font-weight:700} 0

@Para bellum 5755 / 4134 / 1508 Регистрация: 06.01.2011 Сообщений: 11,276
	02.12.2021, 14:39
	Это понятно. Но вот этот класс "active" -- он как-то программно присваивается нажатой ссылке. Надо вам либо самому найти кусок кода, выполняющий эту функцию, либо дать хотя-бы ссылку на сайт (если действие происходит на стороне клиента, то найти этот кусок кода зашедшему сайт будет легко). 0

@mr_dramm Молодой техлид) 1818 / 1056 / 329 Регистрация: 17.07.2021 Сообщений: 2,147 Записей в блоге: 14
	02.12.2021, 14:59
	Я думаю тут подойет вариант с IntersectionObserver Тогда даже при скроле меню будет автоматом переключаться 0

@sergey-nv 2 / 2 / 0 Регистрация: 15.04.2019 Сообщений: 215
	21.12.2021, 08:59 [ТС]
	Да, сработало. Спасибо большое. 0

Как синхронизировать два меню?

Решение