Подскажите, можно ли это сверстать? Если можно, дайте на водку
[attachment=8467:menu.jpg]
Поясню: ряд ссылок представлен в виде облака тегов. Почти у каждого пункта есть подменю, раскрывающееся по наведению курсора.
Я решил сверстать само облако с помощью списка, у элементов которого "float: left". Но это не принципиально.
Код:
****<li class="size5">[Только зарегистрированные пользователи могут видеть ссылки. ]
****<li class="size3">[Только зарегистрированные пользователи могут видеть ссылки. ]
****<li class="size1">[Только зарегистрированные пользователи могут видеть ссылки. ]
****<li class="size2">[Только зарегистрированные пользователи могут видеть ссылки. ]
****<li class="size5">[Только зарегистрированные пользователи могут видеть ссылки. ]
****<li class="size2">[Только зарегистрированные пользователи могут видеть ссылки. ]
****<li class="size4">[Только зарегистрированные пользователи могут видеть ссылки. ]
****<li class="size5">[Только зарегистрированные пользователи могут видеть ссылки. ]
****<li class="size4">[Только зарегистрированные пользователи могут видеть ссылки. ]
****<li class="size2">[Только зарегистрированные пользователи могут видеть ссылки. ]
****<li class="size2">[Только зарегистрированные пользователи могут видеть ссылки. ]
****<li class="size2">[Только зарегистрированные пользователи могут видеть ссылки. ]
Оформляйте все подменю как и положено (с помощью вложенных списков). Затем абсолютно позиционируйте эти вложенные списки относительно родительских пунктов. Вот и вся наводка.
Благодарю за наводку.
В IE 7.0 возник глюк из-за z-index. Если коротко, то объект с абсолютным позиционированием (position: absolute) внутри объекта с относительным позиционированием (position: relative) перекрывается другими объектами с относительным позиционированием (другими пунктами меню). И z-index не помогает.
[attachment=8468:menu2.jpg]
Полазив по инету и весьма подумав, решил с помощью яваскриптов динамически уменьшать z-index у неактивных пунктов меню и увеличивать у активного.
Вот так скрипт выглядит с использованием библиотеки jquery:
Код:
$(document).ready(function(){
****$("#menu ul li").mouseover(function(){
********$(this).addClass("over");
********
********// z-index for IE:
********$("#menu ul li").css("z-index", 400);
********$(this).css("z-index", 500);
****});
****$("#menu ul li").mouseout(function(){
********$(this).removeClass("over");
****});
});
Благодаря этому, меню вывелось поверх прочих элементов... но ишак униматься не хотел ) При движении курсора мышки по выпавшему меню начинается мерцание, явно указывающее на то, что z-index всё ещё глючит. Посмотреть можно [Только зарегистрированные пользователи могут видеть ссылки. ]. Ликвидировать мерцание не удалось. Выручайте.
Mouseenter и mouseleave Вам в помощь (вместо mouseover и mouseout).
P.S.
Для нормальных браузеров, когда не требуется какая-нибудь анимация (например, плавное изменение прозрачности при отображении подменю или какое-нибудь его «выезжание/заезжание»), можно вполне обойтись без использования jQuery. Т.е. подобные задачи решаются исключительно с помощью CSS. Например:
Код:
ul li ul {display: none;}
ul li:hover ul {display: block;}