Сразу скажу о проблемах
1. На меню наслаиваются (т.е. находятся поверх) некоторые элементы форума. В моем случае это разделительные линии
которые находятся в поле приветствия. Как решить данную проблему пока не знаю. видимо надо поколдовать с z-index
А теперь непосредственно сам код.
для начала мы опишем стиль видимого (visible) и невидимого(hidden) дива, а также стиль корневого пункта меню (LLI) и подпункта меню(LLII)
<style>
.hidden {
position: absolute;
visibility: hidden;
}
.visible {
position: absolute;
visibility: visible;
z-index: 2; //вот где-то здесь предстоит колдовать
}
.LLI{ //корневой пункт меню
font-size: 14;
text-decoration: none;
font-weight: bold;
color: black;
}
.LLII{ //подпункт меню
font-size: 14;
text-decoration: none;
color: Maroon;
</style>Дале пишем непосредственно функции, которые будут преводить наши дивы из видимого состояния в невиидимое:
<script language="JavaScript">
function showObject(obj) { obj.className = "visible"}
function hideObject(obj) { obj.className = "hidden"}
</script>теперь опишем корневой пункт меню. а точнее див, который его содержит:
<div style="position: absolute; top: 20px; left: 20px;" //здесь мы задаем позицию верхнего левого угла
onmouseover="javascript:showObject(someDIV)" //в этих двух строчках вместо someDIV указываем имя своего дива
onmouseout="javascript:hideObject(someDIV)">
<TABLE><TBODY valign=center><TR><TD> //данная таблица будет содеражть корневой пункт меню
<SPAN class=LLI>
[КОРНЕВОЙ ПУНКТ МЕНЮ] //это то, что будет видно в корневом пункте меню
</SPAN></TD></TR></TBODY></TABLE>
</div>помеченное красным это координаты верхнего левого угла дива корневого пункта меню. Если вы поместите данный див хтмл-низ/верх, то отсчет будет вестись от верхнего левого угла самой страницы. В объявление - от верхнего левого угла объявлния. В форму ответа - от верхнего левого угла формы ответа.
не забуддьте поменять имя дива которое в последствии будете показывать как подменю (помечено синим)
Теперь строим непосредственно подменю. А точнее див в котором у нас будет поменю.
<div id="someDIV" class="hidden" //вот и имя нашего дива подменю
style="position: absolute; top: 40px; left: 20px;" //это координаты дива.
onmouseover="javascript:showObject(drink)"
onmouseout="javascript:hideObject(drink)">
<TABLE bgcolor=white bordercolor=black border=1 cellpadding=0 cellspacing=0> //это таблица и есть ваше подменю
<TR>
<TD><SPAN class=LLII>
пункт меню раз</SPAN></TD></TR>
<TR>
<TD><SPAN class=LLII>
пункт меню два</SPAN></TD></TR>
<TR>
<TD><SPAN class=LLII>
пункт меню три</SPAN></TD></TR> </TABLE>
</div>левая координата дива подменю по умолчанию совпадает с левой координатой дива корневого пункта. верхняя координата опущена вниз на высоту шрифта в пикселях. но учтите, что эти два дива должны иметь пересечение хотябы в 1 пиксель. Иначе когда вы будете спускаться мышью с корневого пункта на подменю, в момень когда курсор мыши покинет корневой пункт, но еще не будет на подменю, то подменю просто закроеся и вы не сможетена него попасть. именно по этой причине они должны пересекаться или быть вплотную
