Сотворить меню

@kazakru · Регистрация: 13.02.2015

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

Нашел на просторах прекрасное меню для одностраничного сайта по якорям. И подсветка и плавный скроллинг.
Вот оно - http://jsfiddle.net/up4nu/5407/
Но оно горизонтальное, а мне надо вертикальное.
Вот здесь идеальное меню как мне надо - http://www.avangard-direct.ru/service/
Только хотелось что бы не одна и та же иконка рядом с активным меню была, а своя для каждого пункта.
Ищу помощи в создании такого меню... Готов оплатить на телефон в разумных пределах....

Добавлено через 2 минуты
и еще возможно глупый вопрос...
реально ли менять TITLE страницы в зависимости от якоря?

@kazakru · 05.02.2016, 04:42 **[ТС]**

на просторах нашел нужное мне меню, переделал в части оформления под себя, все прекрасно, но есть неприятности:
1. в эксплорере обрабатывается нормально, а в опере и хроме при нажатии на пункт скроллит в нужное место, но active как то иногда не срабатывает, такое ощущение что на пару пикселов промазывает... хз как это объяснить, если мышкой чуть сдвинуть экран - все загорается...
2. во всех браузерах при прокручивании мышкой экрана активный пункт меню иногда пропадает в местах перехода, хотя между </section> и следующим <section id=" "> нет ни пробелов ни текста.

Думаю что оба пункта взаимосвязаны, но так как дуб в скриптах прошу помощи разобраться...
вот исходники:

HTML5
1
2
3
4
5
6
7
8
<nav class="kazakru_menu">
        <ul>
        <li><a href="#pozharnaja_bezopasnost">Пожарная безопасность</a></li>
        <li><a href="#sistemy_opoveshhenija">Системы оповещения</a></li>
        <li><a href="#ohrannaja_signalizacija">Охранная сигнализация</a></li>
        <li><a href="#ohrannoe_televidenie">Охранное телевидение</a></li>
        </ul>
</nav>

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<section id="pozharnaja_bezopasnost">
1
1
1
</section>
<section id="sistemy_opoveshhenija">
2
2
2
</section>
<section id="ohrannaja_signalizacija">
3
3
3
</section>
<section id="ohrannoe_televidenie">
4
4
4
</section>

Java
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
var menu_selector = ".kazakru_menu"; 
function onScroll(){
    var scroll_top = $(document).scrollTop();
    $(menu_selector + " a").each(function(){
        var hash = $(this).attr("href");
        var target = $(hash);
        if (target.position().top <= scroll_top && target.position().top + target.outerHeight() > scroll_top) {
            $(menu_selector + " a.active").removeClass("active");
            $(this).addClass("active");
        } else {
            $(this).removeClass("active");
        }
    });
}
 
$(document).ready(function () {
 
    $(document).on("scroll", onScroll);
 
    $("a[href^=#]").click(function(e){
        e.preventDefault();
 
        $(document).off("scroll");
        $(menu_selector + " a.active").removeClass("active");
        $(this).addClass("active");
        var hash = $(this).attr("href");
        var target = $(hash);
 
        $("html, body").animate({
            scrollTop: target.offset().top
        }, 500, function(){
            window.location.hash = hash;
            $(document).on("scroll", onScroll);
        });
 
    });
 
});

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
.kazakru_menu {
      position: fixed;
      left: 0.567em;
      margin-left: -2.667em;
      top: 11.333em;
}
.kazakru_menu li {
    list-style: none ;
}
 
.kazakru_menu a {
    padding: 0.35em 0 0.35em 1.50em;
    display: block;
    font: bold 1.067em Arial; /*text-transform: uppercase;*/
    color: #9c5959; text-decoration: none;
}
.kazakru_menu li a:hover,
.kazakru_menu li a.active {
color: #000;
background: url("/images/poj.svg") no-repeat 0 0.1em; /* Путь к файлу с исходным  рисунком */
background-size: 1.333em 1.333em;
}
.kazakru_menu li+li a:hover,
.kazakru_menu li+li a.active {
background: url("/images/opov.svg") no-repeat 0 0.25em; /* Путь к файлу с исходным  рисунком */
background-size: 1.333em 1.333em;
}
.kazakru_menu li+li+li a:hover,
.kazakru_menu li+li+li a.active {
background: url("/images/oxr.svg") no-repeat 0 0.2em; /* Путь к файлу с исходным  рисунком */
background-size: 1.333em 1.333em;
}
.kazakru_menu li+li+li+li a:hover,
.kazakru_menu li+li+li+li a.active {
background: url("/images/video.svg") no-repeat 0 0.22em; /* Путь к файлу с исходным  рисунком */
background-size: 1.333em 1.333em;
}

Добавлено через 32 минуты
со вторым пунктом бед справился так:

Java
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
var menu_selector = ".kazakru_menu"; 
function onScroll(){
    var scroll_top = $(document).scrollTop();
    $(menu_selector + " a").each(function(){
        var hash = $(this).attr("href");
        var target = $(hash);
        if (target.position().top <= scroll_top && target.position().top + target.outerHeight() > scroll_top) {
            $(menu_selector + " a.active").removeClass("active");
            $(this).addClass("active");
        } else {
            $(this).removeClass("active");
        }
    });
}
 
$(document).ready(function () {
 
    $(document).on("scroll", onScroll);
 
    $("a[href^=#]").click(function(e){
        e.preventDefault();
 
        $(document).off("scroll");
        $(menu_selector + " a.active").removeClass("active");
        $(this).addClass("active");
        var hash = $(this).attr("href");
        var target = $(hash);
 
        $("html, body").animate({
            scrollTop: target.offset().top +1
        }, 500, function(){
            window.location.hash = hash;
            $(document).on("scroll", onScroll);
        });
 
    });
 
});

добавив +1 в scrollTop: target.offset().top (30 строка)

и стало нормально

первый пункт беды в принципе не критичен, хоть и интересно почему так проскакивает...

Новые блоги и статьи Все статьи Все блоги /
Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита, которое может. . .	Команды "Заполнить" и "Очистить" на форме документа Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". На примере нетипового документа разработанного в конфигурации КА2. В качестве источника данных указан регистр накопления, в который записываются данные о. . .	Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .
Отправка уведомления на почту при изменении наименования справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере изменения наименования типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной. . .	модель ЗдравоСохранения 5. Меньше увольнений- больше дохода! anaschu 24.03.2026 Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .	Midnight Chicago Blues kumehtar 24.03.2026 Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .	SDL3 для Desktop (MinGW): Вывод текста со шрифтом TTF с помощью библиотеки SDL3_ttf на Си и C++ 8Observer8 24.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-text-sdl3-c. zip finish-text-sdl3-cpp. zip

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

	Сотворить меню 02.02.2016, 16:13. Показов 433. Ответов 1 Метки нет (Все метки) Нашел на просторах прекрасное меню для одностраничного сайта по якорям. И подсветка и плавный скроллинг. Вот оно - http://jsfiddle.net/up4nu/5407/ Но оно горизонтальное, а мне надо вертикальное. Вот здесь идеальное меню как мне надо - http://www.avangard-direct.ru/service/ Только хотелось что бы не одна и та же иконка рядом с активным меню была, а своя для каждого пункта. Ищу помощи в создании такого меню... Готов оплатить на телефон в разумных пределах.... Добавлено через 2 минуты и еще возможно глупый вопрос... реально ли менять TITLE страницы в зависимости от якоря? 0