Jump to content
  • 0

Получить из подменю ещё одно


drew
 Share

Question

Доброго времени суток!

Решил зарегистрироваться наконец на этом форуме, после нескольких месяцев просмотра его :rolleyes:

Появился вопрос один, касающийся css деталей.

Вкратце, есть стандартное меню, при наведении на один из пунктов ("Каталог"),

появляется ещё одно меню - подменю, который содержит ещё два пункта,

и вот в чём вопрос, хочу получить из одно из этих двух пунктов ещё одно меню - подподменю ;)

Создать его могу, а как обеспечить выбор пунктов уже в нём никак не могу сообразить.

Исходничек с этой проблемой здесь.

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

Link to comment
Share on other sites

20 answers to this question

Recommended Posts

  • 0

ссылку на сайт, где ведутся работы, давайте.

Проблема не понятна.

Делается просто вложенный список.

Настолько вложенный, насколько нужно по логике сайта.

Вся работа по функционалу сводится к паре строк в css:


li ul { display: none; }
li:hover > ul { display: block; }

Link to comment
Share on other sites

  • 0

Доброго времени суток!

Решил зарегистрироваться наконец на этом форуме, после нескольких месяцев просмотра его ;)

Появился вопрос один, касающийся css деталей.

Вкратце, есть стандартное меню, при наведении на один из пунктов ("Каталог"),

появляется ещё одно меню - подменю, который содержит ещё два пункта,

и вот в чём вопрос, хочу получить из одно из этих двух пунктов ещё одно меню - подподменю :)

Создать его могу, а как обеспечить выбор пунктов уже в нём никак не могу сообразить.

Исходничек с этой проблемой здесь.

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

1. выкладывать искодничек архивом на файлообменник моветон. может там зараза какая? можно это сделать прямо в сообщении, с помощью спойлеров, если код большой, в чём сомневаюсь, т.к. проблему всегда можно локализовать.

2. в гугле вас забанили? не изобретайте велосипед. только сегодня скопикоммуниздил для одного клиента отсюда решение: http://css-framework.ru/demo/css-framework-content.html

ЗЫ опять Светлана опередила :rolleyes:

Edited by Быколай
Link to comment
Share on other sites

  • 0

да, теперь понятно.

У вас в стилях что:


ul.nav-main li:hover > ul {
visibility: visible;
}

то есть, пока мышь над li, вложенный ul показывается.

теперь обратите внимание, что между li и вложенным ul у вас большое расстояние.

Чтобы попасть на вложенный ul, мышу надо уйти с li и пройти достаточное расстояние.

Как только мышь уходит с li, перестаёт действовать правило для li:hover.

Совершенно закономерное поведение.

Нужно привести в порядок отступы, тогда будет всё как ожидается.

  • Like 1
Link to comment
Share on other sites

  • 0

по тому же адресу теперь живёт 403.

А чтобы понять смысл ошибки, надо её увидеть.

Увижу опять — скорее всего смогу подсказать.

Обновлял в тот момент страницу я, теперь можно посмотреть.

Link to comment
Share on other sites

  • 0

А что в опере?

Работает как надо. Только дооформить надо.

И ещё: может всё же имеет смысл заменить visibility: hidden на более традиционный display: none?

В той же опере некоторые неожиданности вроде нескрывающихся маркеров тогда уйдут.

Link to comment
Share on other sites

  • 0

А что в опере?

Работает как надо. Только дооформить надо.

И ещё: может всё же имеет смысл заменить visibility: hidden на более традиционный display: none?

В той же опере некоторые неожиданности вроде нескрывающихся маркеров тогда уйдут.

а можно узнать что необходимо ещё к display: none, т.к. простая замена его на visibility: hidden ни к чему не приводит?

Link to comment
Share on other sites

  • 0

а можно узнать что необходимо ещё к display: none, т.к. простая замена его на visibility: hidden ни к чему не приводит?

Не может быть, display: none должно класть на лопатки любого, кто посмеет нам возразить! Покажи код.

Link to comment
Share on other sites

  • 0

по прежнему адресу пока всё так же visibility.

попробуй поменять способ скрытия на display: none.

ну и display: block соответственно, чтобы отобразить.

Если после этого не встанет всё на свои места, то значит я ничего не знаю о css, блоках и вложенных меню.

Будем тогда учиться вместе.

Link to comment
Share on other sites

  • 0

по прежнему адресу пока всё так же visibility.

попробуй поменять способ скрытия на display: none.

ну и display: block соответственно, чтобы отобразить.

Сделал так, часть этих странных точек ушла, а при наведении на подменю вновь появляются...

Что я упустил?

Link to comment
Share on other sites

  • 0

как занятно!

Вот уж нет, не пропустил. А наоборот, обратил внимание, своё и общественности.

Даже если сказать ul ul { list-style: none; }, всё равно для вложенного списка появляется маркер. Хотя по идее не должен.

Или я не понимаю почему.

Вот такое странно повердение у Оперы.

И особенно ничего и не находится по данной проблеме.

Может, её и не замечал раньше никто?

Ведь традиционно в менюшках маркеры списков не используются, убирают их, а если задумка дизайнера велит поставить маркер, то его делают обычно фоном.

Вот и не было широко известно о данной проблеме.

Link to comment
Share on other sites

  • 0

как занятно!

Вот уж нет, не пропустил. А наоборот, обратил внимание, своё и общественности.

Даже если сказать ul ul { list-style: none; }, всё равно для вложенного списка появляется маркер. Хотя по идее не должен.

Или я не понимаю почему.

Вот такое странно повердение у Оперы.

И особенно ничего и не находится по данной проблеме.

Может, её и не замечал раньше никто?

Ведь традиционно в менюшках маркеры списков не используются, убирают их, а если задумка дизайнера велит поставить маркер, то его делают обычно фоном.

Вот и не было широко известно о данной проблеме.

думаю тогда новую тему создать, т.к. проблема теперь другого рода.

Link to comment
Share on other sites

  • 0


ul.nav-main li:hover > ul {
visibility: visible;
}

Случайно в тему зашел и вопрос у меня возник - а зачем в приведенном коде символ "больше" (>)?

У меня без него нормально такие конструкции отрабатывают.

Link to comment
Share on other sites

  • 0

без него нормально отрабатывают конструкции с минимальной вложенностью.

В данном же случае этот символ вполне уместен.

Обратите внимание, что у автора темы менюха с тремя уровнями вложенности.

то есть, если наводим мыша на пункт первого уровня, то селектор ul.nav-main li:hover ul затронет все ul, расположенные в ul.nav-main li при наведении.

Все — это означает, что все независимо от вложенности. То есть подменю и все подподменю.

Чтобы такого не было, и ограничивается действие селектора только прямым потомком.

Так что тут всё нормально.

Link to comment
Share on other sites

  • 0

ограничивается действие селектора только прямым потомком.

А вот как раз этого я и не знал. Вопрос мой, собственно, был задан именно из-за пробела в знаниях, а не с целью подискутировать насчет изящности решения.

Спасибо,буду применять. А то уже замучился прописывать вложенным пунктам стили.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy