Как сделать такой эффект меню?

@filinakat · Регистрация: 06.02.2013

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

Приветствую всех!
Прошу подсказать или направить по нужным ссылкам вот с какой задачей:
у меня существует меню и надо его привести в соответствие с макетом. Как обстоят дела сейчас можно увидеть по ссылке http://danilamaster1.ru/ (стоматологические услуги) как нужно в прикрепленном файле.
По задумке режиссера, при клике на категорию, терапия например, должны выехать все пункты содержащиеся в ней.

Заранее всем спасибо!

@Lovrentiy · 20.02.2013, 12:51

для начала, думаю, надо создать подкатегории в пунктах меню
1. муню--
2-терапия
3--Пародонтия
3--Ортодонтия
3--Импланталогия

@filinakat · 20.02.2013, 12:57 **[ТС]**

Да, сейчас так:
-терапия
--анестезия
--кариес
...итд
-хирургия
--удаление зуба
--имплантология
ну тоесть то, что должно быть скрыто и выезжать по клику сейчас получается третьего уровня

@Lovrentiy · 20.02.2013, 13:39

по вашей ссылке я не увидел ниодного дочернего меню третьего уровня, только
1. Стоматологические услуги
2. Терапия
2. Анастезия
2. Кариес
2. И т.д.

если вы не хотите, чтобы список был таким длинны, зафиксируйте размеры элементов.

@filinakat · 20.02.2013, 14:18 **[ТС]**

Я наверно не понимаю)
вот код меню

HTML5
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
39
40
41
42
43
44
45
<ul id="bar">
<li class="menu menu-hover"><a class="button" href="http://danilamaster1.ru/">Главная</a></li>
<li class="menu menu-hover"><a class="button" href="licensia.html">Лицензия</a></li>
<li class="menu menu-hover"><a class="button" href="#">Стоматологические услуги</a>
<ul class="submenu">
<li class="menu menu menu-click"><a href="#">Терапия</a></li>
<ul class="submenu2">
<li><a href="terapiya/anesteziya.html">Анестезия</a></li>
<li><a href="terapiya/karies.html">Кариес</a></li>
<li><a href="terapiya/pulpit.html">Пульпит</a></li>
<li><a href="terapiya/periodontit.html">Периодонтит</a></li>
<li><a href="terapiya/endodontiya.html">Эндодонтическое лечение</a></li>
</ul>
<li class="menu menu menu-click"><a href="#">Хирургия</a></li>
<ul class="submenu2">
<li><a href="khirurgiya/udalenie-zuba.html">Удаление зуба</a></li>
<li><a href="khirurgiya/implantologiya.html">Имплантология</a></li>
</ul>
<li class="menu menu menu-click"><a href="#">Парадонтология</a></li>
<ul class="submenu2">
<li><a href="parodontologiya/gingivit.html">Гингивит</a></li>
<li><a href="parodontologiya/parodontit.html">Пародонтит</a></li>
<li><a href="parodontologiya/parodontoz.html">Пародонтоз</a></li>
<li><a href="parodontologiya/lechenie.html">Лечение</a></li>
</ul>
<li class="menu menu menu-click"><a href="#">Ортопедия</a></li>
<ul class="submenu2">
<li><a href="ortopediya/viniry.html">Виниры</a></li>
<li><a href="ortopediya/vkladky.html">Вкладки</a></li>
<li><a href="ortopediya/nesyemnoe-protezirovanie.html">Несъемное протезирование</a></li>
<li><a href="ortopediya/semnoe-protezirovanie.html">Съемное протезирование</a></li>
<li><a href="ortopediya/protezirovanie-implanty.html">Протезирование на имплантах</a></li>
</ul>
<li class="menu menu menu-click"><a href="#">Ортодонтия</a></li>
<ul class="submenu2">
<li><a href="ortodontiya/ispravlenie-prikusa.html">Исправление прикуса</a></li>
</ul>
</ul>
</li>
<li class="menu menu-hover"><a class="button" href="nashi-doktora.html">Наши врачи</a></li>
<li class="menu menu-hover"><a class="button" href="galereya-rabot.html">Галерея работ</a></li>
<li class="menu menu-hover"><a class="button" href="otzivy.html">Отзывы</a></li>
<li class="menu menu-hover"><a class="button" href="tseny.html">Прейскурант</a></li>
<li class="menu menu-hover"><a class="button" href="contact-us.html">Контакты</a></li>
</ul>

Добавлено через 4 минуты

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#bar {
font: 14px/1.5 'PT Sans',sans-serif;
border-radius: 3px;
height: 30px;
list-style: none;
margin: 0;
padding-left: 130px;
z-index: 10;
position: relative;
 
#bar > li {
float: left;
margin-right: 3%;
position: relative;
 
#bar > li > a {
color: #333;
display: block;
margin-right: 0;
padding: 0px;
text-decoration: none;
text-shadow: 0 -1px rgba(0, 0, 0, 0.25);
-webkit-transition: all 0.25s;

@Lovrentiy · 20.02.2013, 14:54

код всегда помещайте в соответствующие теги, так читать не вариант...

HTML5
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
39
40
41
42
43
44
45
<ul id="bar">
<li class="menu menu-hover"><a class="button" href="http://danilamaster1.ru/">Главная</a></li>
<li class="menu menu-hover"><a class="button" href="licensia.html">Лицензия</a></li>
<li class="menu menu-hover"><a class="button" href="#">Стоматологические услуги</a>
<ul class="submenu">
<li class="menu menu menu-click"><a href="#">Терапия</a></li>
<ul class="submenu2">
<li><a href="terapiya/anesteziya.html">Анестезия</a></li>
<li><a href="terapiya/karies.html">Кариес</a></li>
<li><a href="terapiya/pulpit.html">Пульпит</a></li>
<li><a href="terapiya/periodontit.html">Периодонтит</a></li>
<li><a href="terapiya/endodontiya.html">Эндодонтическое лечение</a></li>
</ul>
<li class="menu menu menu-click"><a href="#">Хирургия</a></li>
<ul class="submenu2">
<li><a href="khirurgiya/udalenie-zuba.html">Удаление зуба</a></li>
<li><a href="khirurgiya/implantologiya.html">Имплантология</a></li>
</ul>
<li class="menu menu menu-click"><a href="#">Парадонтология</a></li>
<ul class="submenu2">
<li><a href="parodontologiya/gingivit.html">Гингивит</a></li>
<li><a href="parodontologiya/parodontit.html">Пародонтит</a></li>
<li><a href="parodontologiya/parodontoz.html">Пародонтоз</a></li>
<li><a href="parodontologiya/lechenie.html">Лечение</a></li>
</ul>
<li class="menu menu menu-click"><a href="#">Ортопедия</a></li>
<ul class="submenu2">
<li><a href="ortopediya/viniry.html">Виниры</a></li>
<li><a href="ortopediya/vkladky.html">Вкладки</a></li>
<li><a href="ortopediya/nesyemnoe-protezirovanie.html">Несъемное протезирование</a></li>
<li><a href="ortopediya/semnoe-protezirovanie.html">Съемное протезирование</a></li>
<li><a href="ortopediya/protezirovanie-implanty.html">Протезирование на имплантах</a></li>
</ul>
<li class="menu menu menu-click"><a href="#">Ортодонтия</a></li>
<ul class="submenu2">
<li><a href="ortodontiya/ispravlenie-prikusa.html">Исправление прикуса</a></li>
</ul>
</ul>
</li>
<li class="menu menu-hover"><a class="button" href="nashi-doktora.html">Наши врачи</a></li>
<li class="menu menu-hover"><a class="button" href="galereya-rabot.html">Галерея работ</a></li>
<li class="menu menu-hover"><a class="button" href="otzivy.html">Отзывы</a></li>
<li class="menu menu-hover"><a class="button" href="tseny.html">Прейскурант</a></li>
<li class="menu menu-hover"><a class="button" href="contact-us.html">Контакты</a></li>
</ul>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#bar {
font: 14px/1.5 'PT Sans',sans-serif;
border-radius: 3px;
height: 30px;
list-style: none;
margin: 0;
padding-left: 130px;
z-index: 10;
position: relative;
 
#bar > li {
float: left;
margin-right: 3%;
position: relative;
 
#bar > li > a {
color: #333;
display: block;
margin-right: 0;
padding: 0px;
text-decoration: none;
text-shadow: 0 -1px rgba(0, 0, 0, 0.25);
-webkit-transition: all 0.25s;

@filinakat · 20.02.2013, 14:56 **[ТС]**

Ок!

@Lovrentiy · 20.02.2013, 15:01

вам просто нужна поправка на

CSS
1
2
3
.submenu2 li ul li{
margin-left: 40px;
}

то есть у вас ПОДПУНКТ есть, а настройкаи отображдения под него НЕТУ.
создаете ещё один селектор по класу или если хотите по ид (но в вашем случае это будет жестокий список из ul li ul li ul li) и прописываете особые свойства для дочернего элемента.
li наследует своего родителя ul.
То есть, если мы сделаем:

CSS
1
2
3
.submenu2 ul{
color: red;
}

то это правило будет распространятся на вложенные li и дальше если есть на ul и последующие li, если мы хотим задать некое изменение отображения какой то ступени списка или строки, мы делаем соответствуюую запись в css.

Несколько сумбурно, но должно быть понятно...

@Taatshi · 20.02.2013, 16:43

filinakat, посмотрите в настройках модуля меню - должно стоять "показывать вложенные подпункты".

А потом им уже пописываем стили. По принципу: подпункты - либо display: none либо visibility: hidden

А при наведении на родительский блок (hover) подпунктам прописываем уже либо display: block либо visibility: visible

@filinakat · 20.02.2013, 23:54 **[ТС]**

Спасибо, все получилось!

Добавлено через 11 минут
а как сделать темный уголочек на серой прозрачной панели, подскажите пожалуйста?

http://test.med-commerce.ru/

@Lovrentiy · 21.02.2013, 07:15

что за уголочек? Где и для чего? Поставьте меньший отступ для дочернего списка, он слишком далеко от основного.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm) 8Observer8 30.01.2026 Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .	Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .

@filinakat 1 / 1 / 0 Регистрация: 06.02.2013 Сообщений: 36

	Как сделать такой эффект меню? 20.02.2013, 12:40. Показов 2059. Ответов 10 Метки нет (Все метки) Приветствую всех! Прошу подсказать или направить по нужным ссылкам вот с какой задачей: у меня существует меню и надо его привести в соответствие с макетом. Как обстоят дела сейчас можно увидеть по ссылке http://danilamaster1.ru/ (стоматологические услуги) как нужно в прикрепленном файле. По задумке режиссера, при клике на категорию, терапия например, должны выехать все пункты содержащиеся в ней. Заранее всем спасибо! Миниатюры 0

@Lovrentiy 162 / 162 / 11 Регистрация: 07.09.2011 Сообщений: 995
	20.02.2013, 12:51
	для начала, думаю, надо создать подкатегории в пунктах меню 1. муню-- 2-терапия 3--Пародонтия 3--Ортодонтия 3--Импланталогия 1

@filinakat 1 / 1 / 0 Регистрация: 06.02.2013 Сообщений: 36
	20.02.2013, 12:57 [ТС]
	Да, сейчас так: -терапия --анестезия --кариес ...итд -хирургия --удаление зуба --имплантология ну тоесть то, что должно быть скрыто и выезжать по клику сейчас получается третьего уровня 0

@Lovrentiy 162 / 162 / 11 Регистрация: 07.09.2011 Сообщений: 995
	20.02.2013, 13:39
	по вашей ссылке я не увидел ниодного дочернего меню третьего уровня, только 1. Стоматологические услуги 2. Терапия 2. Анастезия 2. Кариес 2. И т.д. если вы не хотите, чтобы список был таким длинны, зафиксируйте размеры элементов. 1

@filinakat 1 / 1 / 0 Регистрация: 06.02.2013 Сообщений: 36
	20.02.2013, 14:56 [ТС]
	Ок! 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	20.02.2013, 16:43
	filinakat, посмотрите в настройках модуля меню - должно стоять "показывать вложенные подпункты". А потом им уже пописываем стили. По принципу: подпункты - либо display: none либо visibility: hidden А при наведении на родительский блок (hover) подпунктам прописываем уже либо display: block либо visibility: visible 1

@filinakat 1 / 1 / 0 Регистрация: 06.02.2013 Сообщений: 36
	20.02.2013, 23:54 [ТС]
	Спасибо, все получилось! Добавлено через 11 минут а как сделать темный уголочек на серой прозрачной панели, подскажите пожалуйста? http://test.med-commerce.ru/ 0

@Lovrentiy 162 / 162 / 11 Регистрация: 07.09.2011 Сообщений: 995
	21.02.2013, 07:15
	что за уголочек? Где и для чего? Поставьте меньший отступ для дочернего списка, он слишком далеко от основного. 1