| |
|
|
| | Встала задача - сделать меню всплывающее.
Но у меня проблема - я не очень хорошо в позиционировании разбираюсь. Меню всплывает при наведении на пункт основного меню. Всплывающих менюшек таких - порядка 50ти.
Собственно - при relative позиционировании, даже если потом подвинуть через left и top куда нужно - блок с меню на странице все равно своё место займет.
При абсолютном позиционировании я не знаю как сделать чтобы меню находилось именно там, где нужно. Тем более что ИЕ по сравнению с ФФ и Оперой иначе это обрабатывает.
Сам сайт по центру по горизонтали ориентирован - поэтому отступы от краев не подойдут. Вообще в принципе через left top и подобные двигать не подойдет, так как кол-во пунктов в меню может изменяться, соответственно нужна некая универсальность. | |
| |
|
|
| |
|
|
| |
для: Richard Ferlow
(27.10.2008 в 08:19)
| | | Есть универсальный способ.
Всякий раз, когда мышь наводится на любую (из ваших 50-ти, или даже из миллиона) областей ("пунктов") вызова всплывающего меню, скриптом определяете фактические абсолютные координаты этой области в виде четырех чисел:
а) координата по высоте левого верхнего угла области вызова меню в пикселях;
б) координата по ширине левого верхнего угла области вызова меню в пикселях;
в) высота области вызова меню в пикселях;
г) ширина области вызова меню в пикселях.
Зная эти четыре числа, вы легче лёгкого спозиционируете нужное всплывающее меню относительно любой области его вызова.
<ТЕГ id="XYZ" style="position: relative" onmouseover="myFunc (this)">Область вызова, какая-то одна из пятидесяти</ТЕГ>
<script>
function myFunc (obj)
{
var obj_id = obj.id; //ID меню
var obj_width = obj_id.offsetWidth; //ширина
var obj_height = obj_id.offsetHeight; //высота
var obj_left = obj_top = 0;
while (obj.offsetParent)
{
obj_left += obj.offsetLeft; //координата по ширине левого верхнего угла
obj_top += obj.offsetTop; //координата по высоте левого верхнего угла
obj = obj.offsetParent;
}
//Ну а здесь "строите" ваше всплывающее меню, уже зная ВСЁ, что вам надо для этого "строительства"
}
</scipt>
|
| |
| |
|
|
| |
|
|
| |
для: PAT
(27.10.2008 в 09:58)
| | | Слишком сложно для меня получается.
Попытался сделать так
<ul>
<li id="mm-item-2" onmouseover="menu.show(2)" onmouseout="menu.hide(2)" class="3menu" >
<a href="Akademiya.html" >Учебные торги</a>
<!-- Меню 3го уровня -->
<ul class="31menu">
<li><a href="#null" >Вся продукция</a></li>
<li><a href="#null">Молотки</a></li>
</ul>
<!--/ Меню 3го уровня -->
</ul>
|
JS код простой достаточно
var menu = {
show: function (i) {
var el_mmItem = document.getElementById('mm-item-' + i);
el_mmItem.className = el_mmItem.className + ' active';
},
hide: function (i) {
var el_mmItem = document.getElementById('mm-item-' + i);
// el_mmItem.className = el_mmItem.className.replace(' active', '');
setTimeout(function () { el_mmItem.className = el_mmItem.className.replace(' active', '') }, 100);
}
}
|
CSS
ul li.3menu ul.31menu {
display: none;
position: absolute;
list-style:square;
float: none;
background:#F0F0F0;
z-index:19;
}
ul li.3menu.active ul.31menu {
display: block;
position: absolute;
width: 138px;
list-style:square;
float: none;
z-index:19;
}
|
Всё это здесь
http://abaev-partners.com/aton_html/ext/examples/tabs/Text_light.html
Проблема в том, что вроде бы работает....но только в ИЕ. В опере и лисе для блоков не срабатывает display: none; - ничего не выходит сделать | |
| |
|
|
