LINUX.ORG.RU

Меню css - div

 , ,


0

1

С прошедшим праздником и здоровья всем :)

Как привязать div, открывающийся по клику, к кнопке? Меню как в Google Analytics - строка ссылок с открывающимися «селектами». Подробности http://www.interhospital.com/test/test.html

Серверную часть, Ajax и открывание я сделал, а вот с привязкой блока завозился. Может кто знает готовое решение на jQuery...

menu.style.position = 'absolute';
menu.style.right = window.innerWidth - button.offsetLeft - button.clientWidth  + 'px';
menu.style.top   =                     button.offsetTop  + button.clientHeight + 'px';

Вроде так. Внезапно могут появиться проблемы с браузерами, или с вёрсткой.

Kalashnikov ★★★
()
Ответ на: комментарий от Boba_Fett

Это я видел. У меня так карты открываются.

Вопрос в компановке.

<div><span>Страна</span><div>Кнопка</div><span>Регион ...</div>

и к краю маленькой «Кнопки» привязан большой контейнер. И таких привязок в строке несколько. + контейнер надо привязываться именно к краю Кнопки, а не делать относительно края страницы.

medexpert
() автор топика
Ответ на: комментарий от medexpert

+ контейнер надо привязываться именно к краю Кнопки, а не делать относительно края страницы.

position: relative;

- для контейнера и

position: absolute;
- для дочернего элемента

И вообще, выложи здесь html-структуру что в чем лежит, а то не очень понятно в чем проблема. Используй тег code.

Boba_Fett
()
Ответ на: комментарий от medexpert

У тебя должно быть что-то вроде такого, если я правильно все понял:

<ul class="menu">
	<li class="menu-item"><!-- здесь добавляешь position: relative; -->
		<span class="menu-item-label">Пункт меню</span>
		<a class="menu-item-button" href="#">X</a>
		<ul class="submenu"><!-- здесь добавляешь position: absolute; -->
			<li class="submenu-item">
				<a class="submenu-item-label" href="#">Пункт подменю</a>
			</li>
		</ul>
	</li>
	
	<!-- ... -->
	
	<li class="menu-item"><!-- здесь добавляешь position: relative; -->
		<span class="menu-item-label">Пункт меню</span>
		<a class="menu-item-button" href="#">X</a>
		<ul class="submenu"><!-- здесь добавляешь position: absolute; -->
			<li class="submenu-item">
				<a class="submenu-item-label" href="#">Пункт подменю</a>
			</li>
		</ul>
	</li>
</ul>
Boba_Fett
()
Ответ на: комментарий от medexpert

Принимаются добавления, исправления и пожелания :)

Хокей :)

  • Повесить раскрытие списка в меню на ссылки, дабы можно было переключаться с помощью [TAB] и активировать без мышки;
  • использовать бэкграунд на спрайтах вместо отдельных изображений в виде input type=«image», т.к. на некоторых браузерах (IE) это может порождать многочисленные лишние запросы к серверу;
  • минимизировать использование лишних html-элементов (table > tr > td > p во вложенном списке - перебор);
  • использовать css для внешнего вида (white-space: nowrap, вместо &nbsp).
Boba_Fett
()
Ответ на: комментарий от Boba_Fett

Повесить раскрытие списка в меню на ссылки...

возможно, если это удобно - надо сделать.

использовать бэкграунд на спрайтах вместо отдельных изображений...
использовать css для внешнего вида (white-space: nowrap, вместо &nbsp)

всё правильно, но нужны две кнопочки-картинки. Я думаю, что каждый будет «бантики» делать под свой дизайн. Если кто-то нарисует, можно будет скомпоновать в образец.

минимизировать использование лишних html-элементов (table > tr...

в контейнер проходит любое содержимое. Делал table т.к. на сайте работает процедурка разбивающая длинный список на колонки - это частный случай.

Каким браузером смотрел?

medexpert
() автор топика
Ответ на: комментарий от medexpert

но нужны две кнопочки-картинки. Я думаю, что каждый будет «бантики» делать под свой дизайн.

Так пусть рисуют и меняют css, но структуру html стоит поменять.

Каким браузером смотрел?

Опера, лиса.

Boba_Fett
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.