При нажатии на пункт меню - внизу развернуть подпункты

@Sergio Aguero · Регистрация: 11.04.2012

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

создал тестовую менюшку для своего сайта!
на одной странице пока в тестовом варианте!
подгрупп не мало - портянки пока не хочу!!
как лучше сделать - при наведении справа дивчики всплывают в каждом пункте меню или при нажатии на пункт меню - внизу разворачиваются подпункты ??(аккордеон)

Добавлено через 54 минуты
да и еще - как сдлеать чтобы при наведении на пункт меню, всплывал справа дивчик с подкатегориями??))

@Taatshi · 10.10.2012, 10:58

"Всплывают" или "появляются"? Т.е. плавно или просто выскакивают? Если плавно - то в яваскрипт, на css можно сделать только резкое появление подменю.

@Dolphin · 10.10.2012, 11:25

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
<ul class="menu">
    <li class="punkt">
        Пункт меню 1
        <div class="pod-punkt">
            <ul>
        <li>Подпукт 1.1</li>
        <li>Подпукт 1.2</li>
        <li>Подпукт 1.3</li>
        </ul>
        </div>
    </li>
    <li class="punkt">
        Пункт меню 2
        <div class="pod-punkt">
            <ul>
        <li>Подпукт 2.1</li>
        <li>Подпукт 2.2</li>
        <li>Подпукт 2.3</li>
       </ul>
        </div>
    </li>
    <li class="punkt">
        Пункт меню 3
        <div class="pod-punkt">
            <ul>
        <li>Подпукт 3.1</li>
        <li>Подпукт 3.2</li>
        <li>Подпукт 3.3</li>
        </ul>
        </div>
    </li>
</ul>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
ul.menu{
    width: 150px;
    border: 1px solid #c4c4c4;
    padding-left: 25px;
}
div.pod-punkt{
    display: none;
    position: absolute;
    top: 0;
    left: 150px;
    padding: 15px 15px 15px 0;
    min-width: 50px;
    border: 1px solid #c4c4c4;
    white-space: nowrap;
}
li.punkt{
    position: relative;
}
li.punkt:hover div.pod-punkt{
    display: block;
}

Добавлено через 12 минут
Если нужно плавное появление, тогда вместо

CSS
1
2
3
li.punkt:hover div.pod-punkt{
    display: block;
}

Используем JQuery

JavaScript
1
2
3
4
5
6
7
8
$(document).ready(function(){
    $('li.punkt').mouseover(function(){
        $(this).find('div.pod-punkt').fadeIn('slow');
    });
    $('li.punkt').mouseout(function(){
        $(this).find('div.pod-punkt').fadeOut('slow');
    });
});

@Sergio Aguero · 10.10.2012, 12:10 **[ТС]**

кароче я хочу менюшку как у этих ребят!!

@Dolphin · 10.10.2012, 12:17

Сообщение от Sergio Aguero

кароче я хочу менюшку как у этих ребят!!

Выше мой пример именно такой. Даже javascript не нужен

@Sergio Aguero · 10.10.2012, 12:32 **[ТС]**

элементами списка не вариант мне делать- надо на дивах - как у этих ребят)))

@Taatshi · 10.10.2012, 13:00

Dolphin, JQuery это и есть яваскрипт)))

@Dolphin · 10.10.2012, 13:00

Вот пример с твоим меню index.rar

@Dolphin · 10.10.2012, 13:04

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

Dolphin, JQuery это и есть яваскрипт)))

Я в курсе, говорю с помощью какой библиотеки написано

@Sergio Aguero · 10.10.2012, 17:22 **[ТС]**

не работает(((

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
/*твои стили*/
.f_menutab2{
 
}
.f_menu22{
    display: none;
    position: absolute;
    top: 0;
    left: 250px;
    padding: 20px;
    min-width: 50px;
    border: 1px solid #c4c4c4;
    white-space: nowrap;
}
.f_menu11{
    position: relative;
}
.f_menu11:hover .f_menu22{
    display: block;
}
 
 
/* меню левое для сертификатов!!! мои стили для формления главных пунктов меню */
 
#left .f_menutab2      {padding-top: 40px; text-align:center;}
.f_menu11,   {border: 1px solid #CDD3D8; padding: 1px; margin-bottom: 4px;}
.f_menu11 a             {padding: 15px 8px 15px 8px;}
.f_menu11 a:hover {background-image: url(img/lmbg.gif); background-position: 0 -50px; background-repeat: repeat-x; background-color: #E36C00;}

код:

PHP
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
<div class="f_menutab2">
 
<?php include("connect.php");?>
<?php 
 
$query = "SELECT `id` ,`name_group`,`image_url` FROM `group`";
$result = mysql_query($query) or die("Invalid query: " . mysql_error());
 
 
while($row = mysql_fetch_assoc($result))
{         //здесы выводу ссылки наподобие активного оборудования
?>
<div id="" name="" class="f_menu11">
        <a href="http://www.site.ru/cgi-bin/catalog/viewgroup_atm.cgi?section=<?php echo $row['id']; ?>"><?php echo $row['name_group']; ?></a>
        
        <?php 
        $query = "SELECT `name`,biggroup.id as bid FROM `biggroup` where `section` = '".$row['id']."'"; 
        $result2 = mysql_query($query) or die("Invalid query: " . mysql_error());
            while($data = mysql_fetch_assoc($result2))
            {
        
        ?>
                        <div class="f_menu22">
                          <a href="http://www.site.ru/cgi-bin/catalog/viewgroup_atm.cgi?biggroup=<?php echo $data['bid']; ?>&mode=col&seller=&city=&made="><?php echo $data['name']; ?></a><br />
                        </div>
                        
        <?php 
        }
        ?>                
</div>
 
<?php 
 
}?>
 
 
</div>

Добавлено через 3 часа 56 минут
А в чем может быть причина- почему в ИЕ не работает моя менюшка??

Новые блоги и статьи Все статьи Все блоги /
Инструменты 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 - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@Sergio Aguero 452 / 443 / 21 Регистрация: 11.04.2012 Сообщений: 2,076

	При нажатии на пункт меню - внизу развернуть подпункты 10.10.2012, 09:26. Показов 16457. Ответов 9 Метки нет (Все метки) создал тестовую менюшку для своего сайта! на одной странице пока в тестовом варианте! подгрупп не мало - портянки пока не хочу!! как лучше сделать - при наведении справа дивчики всплывают в каждом пункте меню или при нажатии на пункт меню - внизу разворачиваются подпункты ??(аккордеон) Добавлено через 54 минуты да и еще - как сдлеать чтобы при наведении на пункт меню, всплывал справа дивчик с подкатегориями??)) 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	10.10.2012, 10:58
	"Всплывают" или "появляются"? Т.е. плавно или просто выскакивают? Если плавно - то в яваскрипт, на css можно сделать только резкое появление подменю. 1

@Sergio Aguero 452 / 443 / 21 Регистрация: 11.04.2012 Сообщений: 2,076
	10.10.2012, 12:10 [ТС]
	кароче я хочу менюшку как у этих ребят!! 0

@Sergio Aguero 452 / 443 / 21 Регистрация: 11.04.2012 Сообщений: 2,076
	10.10.2012, 12:32 [ТС]
	элементами списка не вариант мне делать- надо на дивах - как у этих ребят))) 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	10.10.2012, 13:00
	Dolphin, JQuery это и есть яваскрипт))) 1

@Dolphin 814 / 797 / 201 Регистрация: 21.09.2012 Сообщений: 2,656
	10.10.2012, 13:00
	Вот пример с твоим меню index.rar 1