|
91 / 77 / 6
Регистрация: 08.10.2008
Сообщений: 296
|
|||||||||||
Выделение активного пункта меню18.08.2010, 11:10. Показов 86887. Ответов 20
Метки нет (Все метки)
Всем доброго времени суток, приношу свои извинения, если это уже обсуждалось, собственно суть вопроса - Пункт меню должен подсвечиваться так же как при наведении когда он активен.
Вот код html:
0
|
|||||||||||
| 18.08.2010, 11:10 | |
|
Ответы с готовыми решениями:
20
выделение активного пункта меню Выделение активного пункта меню
|
|
694 / 534 / 40
Регистрация: 22.06.2009
Сообщений: 1,293
|
|
| 18.08.2010, 18:03 | |
|
1. id должен быть в единственном экземпляре на всей странице.
2. хтмл код у вас вообще жесть какая-то. 3. Чтобы активный пункт меню выглядел так же как при наведении нужно: а. Создать любой класс в css. б. Скопировать свойства из :hover в этот класс, то есть сделать примерно так: #main-navigation-top-item:hover, .new-class{все свойства которые применяются для hover} в. Когда пункт меню становится активным, присваивать ему только что созданный класс.
1
|
|
|
91 / 77 / 6
Регистрация: 08.10.2008
Сообщений: 296
|
|
| 18.08.2010, 20:13 [ТС] | |
|
Alorian, Спасибо большое только последний пункт немного не понял, можно поподробнее =)
0
|
|
|
694 / 534 / 40
Регистрация: 22.06.2009
Сообщений: 1,293
|
|
| 18.08.2010, 20:20 | |
|
selevit, что непонятного? Задавайте конкретные вопросы. Я описал полностью весь процесс, подробней это уже не конкретную задачу решать, а объяснять основы css и html.
При наведении к элементу применяются какие то стили, которые вы описали в псевдоклассе :hover, чтобы активный элемент выглядел так же как при наведении, нужно как то выделить этот элемент среди остальных неактивных, например присвоить ему отдельный класс и прописать в этом классе такие же свойства, как при наведении. Как это еще подробнее описать я не знаю.
1
|
|
|
13210 / 6599 / 1041
Регистрация: 10.01.2008
Сообщений: 15,069
|
|||||||||||
| 18.08.2010, 20:32 | |||||||||||
1
|
|||||||||||
|
91 / 77 / 6
Регистрация: 08.10.2008
Сообщений: 296
|
|||
| 18.08.2010, 21:00 [ТС] | |||
|
Добавлено через 2 минуты Vovan-VE, сделал по вашему методу, выделяется активным только один пункт меню, к которому присваиваится этот класс, мне же нужно чтобы при нажатии на пункт меню он оставался, так сказать нажатым.
0
|
|||
|
694 / 534 / 40
Регистрация: 22.06.2009
Сообщений: 1,293
|
|||
| 18.08.2010, 21:04 | |||
|
1
|
|||
|
13210 / 6599 / 1041
Регистрация: 10.01.2008
Сообщений: 15,069
|
||||||||||||
| 18.08.2010, 21:07 | ||||||||||||
1
|
||||||||||||
|
91 / 77 / 6
Регистрация: 08.10.2008
Сообщений: 296
|
|||||||||
| 18.08.2010, 21:29 [ТС] | |||||||||
![]()
Добавлено через 2 минуты Vovan-VE, спасибо большое! Добавлено через 14 минут Опять возникла проблема - когда ссылки вида #blablabla то все работает, но все элементы выделяются если их нажать поочередно, мне же нужно, чтобы страница обновилась при нажатии на ссылку, а выделение осталось.
0
|
|||||||||
|
694 / 534 / 40
Регистрация: 22.06.2009
Сообщений: 1,293
|
||||||||||||||||||||||
| 18.08.2010, 21:42 | ||||||||||||||||||||||
|
У вас статичный сайт, написанный целиком на html+css? У вас динамичный сайт, написанный с использованием серверных языков программирования, например, с использованием php? В зависимости от того как сделан сайт будет меняться и метод выделения активного пункта меню. Пример. Используются только html страницы. Весь сайт это 3 html страницы, соответственно в меню 3 пункта — на каждую из страниц по одной ссылке. Меню на всех страницах дублируется и выглядит примерно так:
В итоге html код меню главной страницы будет выглядеть так:
Это был пример статичного сайта. Сайты работающие с помощью серверных языков программирования формируют меню, например, из массива и пункту меню той страницы которая формируется сейчас присваивается нужный класс на лету. Если объяснять это все с нуля, то пример такого меню выйдет слишком длинным, поэтому я его приводить не буду. Думаю я уже написал достаточно для самостоятельных поисков, еще сильнее разжевывать нет смысла. Удачи.
2
|
||||||||||||||||||||||
|
91 / 77 / 6
Регистрация: 08.10.2008
Сообщений: 296
|
|
| 18.08.2010, 21:47 [ТС] | |
|
Alorian, Спасибо, разобрался, пока что сайт на html - но это только шаблон, далее буду реализовывать на пхп, код php приводить не надо с этим я разберусь =) Всем спасибо за помошь, вопрос закрыт.
0
|
|
|
0 / 0 / 0
Регистрация: 05.06.2013
Сообщений: 3
|
|
| 05.06.2013, 15:55 | |
|
перепробовал все советы, все равно не работает. На сайте http://tur.ukraineit.dp.ua, слева есть серое меню, при наведении, окрашивается в красный, необходимо сделать так , чтобы красный цвет оставался активным после перехода, то есть красным цветом помечался тот пунк меню на котором ты в данный момент находишься. Огромная просьба помочь!
0
|
|
|
2 / 2 / 2
Регистрация: 21.05.2009
Сообщений: 300
|
||||||
| 05.06.2013, 16:02 | ||||||
|
вот так вот это делается :
0
|
||||||
|
0 / 0 / 0
Регистрация: 05.06.2013
Сообщений: 3
|
|
| 05.06.2013, 16:17 | |
|
Вставил данную запись в css. Изменений никаких не произошло...
0
|
|
|
2 / 2 / 2
Регистрация: 21.05.2009
Сообщений: 300
|
||||||
| 05.06.2013, 16:19 | ||||||
|
нет время разбираться что там у тя за структура меню . у меня на ощьдф такая вот была :
0
|
||||||
|
0 / 0 / 0
Регистрация: 05.06.2013
Сообщений: 3
|
|||||||||||
| 05.06.2013, 16:26 | |||||||||||
|
У меня так.
0
|
|||||||||||
|
Zhas469
|
|
| 06.03.2014, 03:03 | |
Сообщение было отмечено Taatshi как решение
Решение
Вот пример готового меню
|
|
|
153 / 126 / 39
Регистрация: 02.05.2012
Сообщений: 573
|
||
| 06.03.2014, 10:54 | ||
|
twins717, a:active - это стиль при нажатии, но для того что бы
0
|
||
| 06.03.2014, 10:54 | |
|
Помогаю со студенческими работами здесь
20
Выделение активного пункта меню. Нужен совет! Выделение пункта меню при наведении - только текст или весь блок пункта Подсветка активного пункта меню Рамка для активного пункта меню Выделение активного меню Искать еще темы с ответами Или воспользуйтесь поиском по форуму: |
|
Новые блоги и статьи
|
|||
|
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image
8Observer8 10.02.2026
Содержание блога
Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .
|
Установка Qt-версии Lazarus IDE в Debian Trixie Xfce
volvo 10.02.2026
В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
|
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer
8Observer8 08.02.2026
Содержание блога
Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .
|
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств
8Observer8 07.02.2026
Содержание блога
Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .
|
|
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве
8Observer8 02.02.2026
Содержание блога
Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
|
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
|
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf
8Observer8 01.02.2026
Содержание блога
В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
|
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога
Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
|