Всплывающие меню, или position absolute
Много материала было перекопано мною, для того, что бы понять как работают всплывающие меню.. Парой приходится возобновлять поиски, ибо иногда решение найдено мной, не соответствует моим желаниям/потребностям...Помню как копался в километровом коде, генерированный программой для создание подобных меню (название программы к сожалению не могу припомнить =() После чего решил обходится лишь тем, что узнал... Для создания простого, но все же эффективного, всплывающего меню понадобится лишь прибегнуть к 3-м элементам css стиля, и маленького скрипта на javascript.. Добро пожаловать на 2-ой, написанный мной, "корявый" урок по javascript =)))
Как уже говрил, нам понадобится 3 css элемента:
position:absolute;
display:none/block;
margin-left:Xpx;
Первый помещает объект, буть то "div" или "p", в абсолютную позицию на экране, совершенно не трогая все остальные объекты...Вы можете поместить объект в центре экрана, или с лева, или например поверх какого нить др объекта. Выражаясь "задротским" языком - читерская штука =)
Второй элемент, визуально (т.е. в коде он остается) прячет объект при свойстве none, а при свойстве block показывает на странице (и в коде тоже)
С помощью 3-его элемента мы сдвинем наш абсолютный объект влево
Логика такова:
При наведение курсора мыши, скажем на "div", javascript переключает свойство элемента display с none на block, а при перемещение курсора мыши за границу объекта "div" свойство переключается обратно на none
Для начала напишем 2 объекта "div" и обозначим их id (это пригодится для javascrip, и для меня...удобнее объяснять =))
<div id="1">Страница 1
<div id="2">Страница 2</div>
</div>
После поместим во 2-ой "div" следующий стиль
<div id="1">Страница 1
<div id="2" style="position:absolute; display:none; margin-left:50px;">Страница 2</div>
</div>
Теперь можно приступить к написанию javascript функции
function menu(id,oc)
//id - собственно id нашего <div>'а
//oc - индикатор отвечающий за открытия меню (0) и закрытия (1)
{
var el = document.getElementById(id);//немного упрощаем запись
if(oc == 0) el.style.display = "block";//если переменная oc равна 0
//(т.е. открыть меню) то меняем в стиле, объекта <div>, свойство none
//на свойство block
else el.style.display = "none";//если же переменная oc равна 1
//то меняем в стиле, объекта <div>, свойство block
//на свойство none
}
Для вызова этой функции используем 2 обработчика событий:
onMouseOver=""//если курсор на границе объекта
onMouseOut=""//если курсор за границей объекта
Вписываем их в 1-ый "div" получаем следующую запись
<div id="1"onMouseOver="menu(2,0);" onMouseOut="menu(2,1);">Страница 1
<div id="2" style="position:absolute; display:none; margin-left:50px;">Страница 2</div>
</div>
Заменив тег "div" на более симпатичный тег "p" и добавив пару стилей, получаем следующий, готовый к работе, код:
<script>
function menu(id,oc)
{
var el = document.getElementById(id);
if(oc == 0) el.style.display = "block";
else el.style.display = "none";
}
</script>
<div id="1" style="width:65px;" onMouseOver="menu(2,0);"
onMouseOut="menu(2,1);">
<p style="cursor:pointer;margin:0px;">Меню 1</p>
<p id="2" style="position:absolute;display:none;
margin-left:65px; margin-top:-20px;
background-color:#fff; border:1px solid #000;
padding:5px;">Подменю 1
</p>
</div>
А можно вообще не использовать атрибуты для поиска. Например с использованием библиотеки jquery можно сделать что-то типа вот этого:
<!DOCTYPE html> <html> <head> <title>Тест</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script type="text/javascript" src="http://rio-shaman.ru/templates/public/jquery.js"></script> <style> .div-menu { width:65px; cursor:pointer; } .div-menu .menu p { margin: 0; } .div-menu .menu { position:absolute; display:none; margin-left:65px; margin-top:-20px; background-color:#fff; border:1px solid #000; padding:5px; } </style> </head> <body> <div class="div-menu" onMouseOver="$(this).find('div').css('display', 'block');" onMouseOut="$(this).find('div').css('display', 'none');">Меню 1 <div class="menu"> <p>Подменю 1.1</p> <p>Подменю 1.2</p> <p>Подменю 1.3</p> </div> </div> <div class="div-menu" onMouseOver="$(this).find('div').css('display', 'block');" onMouseOut="$(this).find('div').css('display', 'none');">Меню 2 <div class="menu"> <p>Подменю 2.1</p> <p>Подменю 2.2</p> </div> </div> <div class="div-menu" onMouseOver="$(this).find('div').css('display', 'block');" onMouseOut="$(this).find('div').css('display', 'none');">Меню 3 <div class="menu"> <p>Подменю 3.1</p> <p>Подменю 3.2</p> <p>Подменю 3.3</p> <p>Подменю 3.4</p> </div> </div> </body> </html>