Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
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
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
02.02.2016, 16:13
Ответы с готовыми решениями:

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

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

как сотворить с VB
задана тройка чисел X,Y,Z, вывести на печать 1. max(|X|,|Y|), если X*Y*Z<0 2. max(|X|,|Z|,если X*Y*Z>0 3. max (|Y|,|Z|,если...

1
1 / 1 / 0
Регистрация: 13.02.2015
Сообщений: 44
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 строка)

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

первый пункт беды в принципе не критичен, хоть и интересно почему так проскакивает...
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
05.02.2016, 04:42
Помогаю со студенческими работами здесь

Пытаюсь сотворить домашнюю сеть
Есть у меня дома комп, ноут и вайрлес мост Linksys WET54g, мост в режиме Ad-Hoc. Мост через ЛАН подключен к ПК и соответсвенно через ВАН к...

Сборка Li-ion из ноутбука, что сотворить
Итак, был нетбук. Был, да упал с 3 этажа, так вышло. Выжила только оперативка да аккумы. Кейс на аккумах разбился, на плате балансира...

Оборотная ведомость - как сотворить не сотворимое?
Доброго времени суток уважаемые форумчане и Гуру этого форума. С первых строк хочу выразить свою благодарность за тот багаж знаний,...

Как сотворить поиск записи по базе Access???
Подскажите, кто знает как сотворить поиск записи по базе Access?

Таблица выборки из двух тхт файлов.как это сотворить?
Исходные данные: два файла в обменном формате Mapinfo (в архиве во вложении) Первый файл - таблица состоящая из полей: порядковый номер,...


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

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Новые блоги и статьи
Сумматор с применением элементов трёх состояний.
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
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru