Официальный Форум технической поддержки ForumBB

Объявление


С 15.02.2017 прекращается техническая поддержка по ICQ, она будет осуществлятся только на данном форуме и по электронной почте help@forumbb.ru.

Для удобного поиска работает - «Поиск по форуму».
При возникшей проблеме Обязательно указывайте адрес форума!


Вопросы по рекламе на ForumBB: E-mail: sales@forumbb.ru, ICQ: 1-130-134, skype: alex_derenchuk.
По всем остальным вопросам, пишите: E-mail: admin@forumbb.ru, ICQ: 1-130-134.

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



Дополнительное меню для форума

Сообщений 1 страница 2 из 2

1

Сразу скажу о проблемах
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 пиксель. Иначе когда вы будете спускаться мышью с корневого пункта на подменю, в момень когда курсор мыши покинет корневой пункт, но еще не будет на подменю, то подменю просто закроеся и вы не сможетена него попасть. именно по этой причине они должны пересекаться или быть вплотную

0

2

Спасибо, тему щас закроем и выделем.(Млин забыл что в этом форуме нимогу делать).

Отредактировано Lampard (05.01.2008 18:20:54)

+1