Насчёт меню с раскрывающимися иконками.

автор Senmayer Июнь 19th 2011, 15:08

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

автор **Dana Domirani** Июнь 19th 2011, 15:31

А код + css у всей этой конструкции какой?

P.S. было нечто подобное: https://help.forum2x2.ru/t16514-topic#136128

автор Senmayer Июнь 19th 2011, 15:38

Код:: <div id="page-body"> <div id="twomenu"> <center><div class="titl_link"> <a href="#" class="upp"><img src="http://xmages.net/storage/10/1/0/5/9/upload/6f05fdff.png" alt="Игра" title="Игра" /></a> <div class="slide_link"> <a href="#">Заголовок 3-1</a> <a href="#">Заголовок 3-2</a> <a href="#">Заголовок 3-3</a> </div></div> <div class="titl_link"> <a href="#" class="upp"><img src="http://xmages.net/storage/10/1/0/5/9/upload/6f05fdff.png" alt="Администрация" title="Администрация" /></a> <div class="slide_link"> <a href="#">Заголовок 3-1</a> <a href="#">Заголовок 3-2</a> <a href="#">Заголовок 3-3</a> </div></div> <div class="titl_link"> <a href="#" class="upp"><img src="http://xmages.net/storage/10/1/0/5/9/upload/6f05fdff.png" alt="Информация" title="Информация" /></a> <div class="slide_link"> <a href="#">Заголовок 3-1</a> <a href="#">Заголовок 3-2</a> <a href="#">Заголовок 3-3</a> </div></div> </div> </br> <div id="twomenu"> <center><div class="titl_link"> <a href="#" class="upp"><img src="http://xmages.net/storage/10/1/0/5/3/upload/31b39492.png" alt="Партнёры" title="Партнёры" /></a> <div class="slide_link"> <a href="#">Заголовок 3-1</a> <a href="#">Заголовок 3-2</a> <a href="#">Заголовок 3-3</a> </div></div> <div class="titl_link"> <a href="#" class="upp"><img src="http://xmages.net/storage/10/1/0/c/a/upload/131ffe91.png" alt="Полезные ссылки" title="Полезные ссылки" /></a> <div class="slide_link"> <a href="#">Заголовок 3-1</a> <a href="#">Заголовок 3-2</a> <a href="#">Заголовок 3-3</a> </div></div> <div class="titl_link"> <a href="#" class="upp"><img src="http://xmages.net/storage/10/1/0/3/1/upload/fabf1dac.png" alt="Музыка" title="Музыка" /></a> <div class="slide_link"> <a href="#">Заголовок 3-1</a> <a href="#">Заголовок 3-2</a> <a href="#">Заголовок 3-3</a> </div></div> </div> </center>

Код:: .titl_link { display:inline-block; position: relative; /* для корректного отображения в старых браузерах */ display:-moz-inline-stack; zoom:1; *display:inline; _overflow:hidden; z-index: 999; } /* Кнопка меню */ .upp, .upp2 { text-align:center; margin-bottom: 10px; margin-right: 3px; } /* Разворачивающаяся панель */ .slide_link { display: none; width: 200px; border: 1px solid #571919; background-color:#000000; position: absolute; z-index: 999; top: 80px; left: 30px; } /* Ссылки на разворачивающейся панели */ .slide_link a { display: block; background-color:#000000; padding: 2px 5px 2px; margin-bottom: 5px; } /* Ссылки на разворачивающейся панели при наведении */ .slide_link a:hover { background-color: #000000; color: #fff;

автор Senmayer Июнь 20th 2011, 14:46

есть идеи?

автор Senmayer Июнь 26th 2011, 16:46

Насчёт меню с раскрывающимися иконками. Fe4ed25c7a54

на форуме стоит вот такая конструкция.
Первый ряд трёх кнопок: это сами розы.
Второй ряд трёх кнопок: слова.
Нажимая на розы, мы получаем, что выплывающие окна идут под кнопки слов.