Выпадающее меню для внутренней навигации по закладкам на странице на javascript+css

@rdfhnbhf · Регистрация: 05.07.2012

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

Помогите с решением/подскажите где подсмотреть готовое решение.
Есть большая html страница, содержимое разделено на части, каждая часть предваряется <div id="a01">заголовок</div>, между ними <div id="a00">собственно текст</div>
все страницы будут открываться локально на компьютере без интернета
Требуется решение с минимум кода, вынесенного в script.js и mysite.css, можно + с привлечением jquery.js
Вверху кнопка меню, при клике/наведении - выпадающее одноуровневое подменю
текст элементов подменю - перечитывается всякий раз заново из тегов <div id="a01">заголовок</div> на странице
при щелчке на элемент подменю - переход/скроллирование страницы к выбранному <div id="a01">
при необходимости могу поменять <div id="a01"> на <div name="ID заголовка"> для упрощения перехода по странице
если меню теряет фокус - подменю скрывается

P.s. в инете есть решения с созданием динамических меню с использованием <ul> и <li> Не подходит. Текст подменю должен читаться из содержимого страницы, которое может изменится - меню при этом также должно перестроится, эдакое "динамическое всплывающее оглавление для большой html книги"

@ostgals · 13.07.2012, 12:09

На странице не должно быть элементов с одинаковыми id, иначе javascript не сможет их обработать.
Предполагая, что заголовок располагается в <div class="head"></div>, а текст - в <div class="body"></div>, можно предложить такой простой скриптик:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$('<div class="menu">')
    .html('Select article...')
    .prependTo(document.body)
    .click(function(){
        var list = $('<ul class="list">').appendTo($(this));
        $('div.head').each(function(){
            var top = $(this).offset().top;
            $('<li>')
                .html($(this).html())
                .appendTo(list)
                .click(function(){
                    list.remove();
                    $(window).scrollTop(top);
                    return false;
                });
        });
        return false;
    });

Полный пример гляньте здесь: http://jsfiddle.net/EH8w7/2/

Заголовки перечитываются при каждом клике.

KOPOJI · 13.07.2012, 12:11

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

$('<div class="menu">')

а зачем так если можно просто $('.menu') ? и в других местах тоже

@ostgals · 13.07.2012, 12:35

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

а зачем так если можно просто $('.menu') ? и в других местах тоже

Потому что если вместо селектора указан html-код, то создается новый элемент.

JavaScript
1
2
$('img'); // выбраны все существующие элементы img
$('<img>'); // создан новый элемент img

KOPOJI · 13.07.2012, 12:40

Не по теме:

вы о чем? обращение не к тегу, а к классу или ид. в jquery оно проще - зачем изобретать велосипед
$('#id_name'). .... - обращение к элементу по имени идентификатора
$('.class_name'). .... - обращение к элементу по имени класса
зачем усложнять это? причем тут создание html тегов?

@ostgals · 13.07.2012, 12:44

Не по теме:

Разницу понимаешь между выборкой элементов и их созданием? С фига ли я буду выбирать $('div.menu'), если его еще не существует в DOM? Посмотри пример.

KOPOJI · 13.07.2012, 12:45

Не по теме:

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

Разницу понимаешь между выборкой элементов и их созданием? С фига ли я буду выбирать $('div.menu'), если его еще не существует в DOM? Посмотри пример.

понимаю. понял пример. думал ты обращаешься так к уже созданному элементу

@rdfhnbhf · 13.07.2012, 14:26 **[ТС]**

Предложенное ostgals решение вполне приемлемо, кроме мелких пожеланий:
- как вынести предложенный код из html в отдельный файл скрипта TOC.js (я новичок)
- сделать так чтобы при перемотке странице/переходе к разделу меню Select article... продолжало висеть вверху страницы (position:fixed не подходит, т.к. меню тогда перекрывает часть текста страницы)
- идентификацию заголовков делать все таки не по <div class="head"></div> а по <div id="a01"></div>, т.к. к классу уже подвязан другой скрипт

Новые блоги и статьи Все статьи Все блоги /
делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .

@rdfhnbhf 0 / 0 / 0 Регистрация: 05.07.2012 Сообщений: 6

	Выпадающее меню для внутренней навигации по закладкам на странице на javascript+css 13.07.2012, 11:12. Показов 2146. Ответов 7 Метки нет (Все метки) Помогите с решением/подскажите где подсмотреть готовое решение. Есть большая html страница, содержимое разделено на части, каждая часть предваряется <div id="a01">заголовок</div>, между ними <div id="a00">собственно текст</div> все страницы будут открываться локально на компьютере без интернета Требуется решение с минимум кода, вынесенного в script.js и mysite.css, можно + с привлечением jquery.js Вверху кнопка меню, при клике/наведении - выпадающее одноуровневое подменю текст элементов подменю - перечитывается всякий раз заново из тегов <div id="a01">заголовок</div> на странице при щелчке на элемент подменю - переход/скроллирование страницы к выбранному <div id="a01"> при необходимости могу поменять <div id="a01"> на <div name="ID заголовка"> для упрощения перехода по странице если меню теряет фокус - подменю скрывается P.s. в инете есть решения с созданием динамических меню с использованием <ul> и <li> Не подходит. Текст подменю должен читаться из содержимого страницы, которое может изменится - меню при этом также должно перестроится, эдакое "динамическое всплывающее оглавление для большой html книги" 0

KOPOJI
	13.07.2012, 12:40
	Не по теме: вы о чем? обращение не к тегу, а к классу или ид. в jquery оно проще - зачем изобретать велосипед $('#id_name'). .... - обращение к элементу по имени идентификатора $('.class_name'). .... - обращение к элементу по имени класса зачем усложнять это? причем тут создание html тегов? 0

@ostgals
	13.07.2012, 12:44
	Не по теме: Разницу понимаешь между выборкой элементов и их созданием? С фига ли я буду выбирать $('div.menu'), если его еще не существует в DOM? Посмотри пример. 0

@rdfhnbhf 0 / 0 / 0 Регистрация: 05.07.2012 Сообщений: 6
	13.07.2012, 14:26 [ТС]
	Предложенное ostgals решение вполне приемлемо, кроме мелких пожеланий: - как вынести предложенный код из html в отдельный файл скрипта TOC.js (я новичок) - сделать так чтобы при перемотке странице/переходе к разделу меню Select article... продолжало висеть вверху страницы (position:fixed не подходит, т.к. меню тогда перекрывает часть текста страницы) - идентификацию заголовков делать все таки не по <div class="head"></div> а по <div id="a01"></div>, т.к. к классу уже подвязан другой скрипт 0