Перейти к содержимому

Сервис обмена электронных валют


Помогите с выпадающим меню (onmouseover=P7_autoLayers(0))

#1 Вячеслав

Вячеслав
  • Пользователь
  • 357 сообщений
  • Репутация: 0
0

Отправлено 30 Июнь 2009 - 21:41

Привет!

Нашел скрипт для создания выпадающего меню Создание универсального выпадающего меню на JavaScript

Все отображается но я его не могу правильно скрыть.
В статье написано: "Для этого нам надо прописать новый параметр в ячейках таблицы, "окружающих" наши ссылки. Т.е. следует прописывать параметр onmouseover=P7_autoLayers(0) в теге <td> ячейки таблицы, которая находится слева/справа/сверху/снизу наших ссылок (за исключением ячейки, где собственно находятся ссылки)."
, а если у меня DIV с параметром position:absolute; z-index:9;, который находится сверху двух дивов(один в другом) , которые в свою очередь в ячейке таблицы(осн табл шаблона)???

И если я проставляю nmouseover=P7_autoLayers(0) для этих дивов или ля ячейки таблицы, то при наведении мыши на появившийся слой с ссылками - он скрывается(так как он находится над тем слоем у которого параметр nmouseover=P7_autoLayers(0)) что делать непойму, куда прописать этот парметр чтоб праильно скрывалос? Помогите плиз

Вот пример того что полуилось(коряво). :lol:

www.cleverscript.ru

 

 

  • 0

#2 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 30 Июнь 2009 - 23:19

Вячеслав, эх... Кто же таким дерьмом нынче пользуется. Вообще всё это удобно и легко реализованно в фреймворках JavaScript. Советую сначала там глянуть, там точно найдешь.
А делается подобное намного проще, если конечно дизайн не резиновый.
1) Есть основной div с пунктами.
2) Есть абсолютно-спозиционированные div относительно левого-верхнего угла с каким-либо id. Все они по умолчанию скрыты.
3) Стоит на основные ссылки(пункты) поставить onMouseOver с id нужного для появления блока и сменить ему display
4) А на всплывающие подменю поставить onMouseOut для скрытия this.style.display = "none";
  • 0

#3 Вячеслав

Вячеслав
    Topic Starter
  • Пользователь
  • 357 сообщений
  • Репутация: 0

Отправлено 30 Июнь 2009 - 23:31

Ну а если резиновый? И почему Дерьмо? что не дерьмо? или этот тип меню дерьмо?

Я хотел вот с этим сделать http://www.ruseller.com,но не получилось,там нужно чтоб и ссылка и выезжающее окно были в одном блоке, а у меня в разных ячейках таблицы
  • 0

#4 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 01 Июль 2009 - 15:42

Ну а если резиновый? И почему Дерьмо? что не дерьмо? или этот тип меню дерьмо?

1) Если резиновый, то мой вариант не подойдет. Есть множество скриптов в инете выпадающего меню. Чисто на CSS написанные меню обычно заточены под один браузер. Лучше обойтись простым вариантом на JS.
2) Дерьмо, потому что картинками ссылки уже давно никто не делает, а так же тут тот же самый, притом табличяный вариант меню ещё то дерьмо. А так же:

Для этого существуют параметры LEFT и TOP, которые указываются в стиле слоя. LEFT - отступ от левого края страницы, TOP - отступ от верхнего края страницы.

Как видишь в скрипте также используется абсолютное позиционирование. Что для резиновой верстки не годится.

Я хотел вот с этим сделать http://www.ruseller.com,но не получилось,там нужно чтоб и ссылка и выезжающее окно были в одном блоке, а у меня в разных ячейках таблицы


А почему тебе такое не годится? Можно сделать всё нормально... Чем тебя не устраивает данный скрипт?
Конечно могут возникнуть проблемы, если отступ нужно сделать не в право, а влево... Как у тебя.
  • 0

#5 Вячеслав

Вячеслав
    Topic Starter
  • Пользователь
  • 357 сообщений
  • Репутация: 0

Отправлено 01 Июль 2009 - 19:11

А почему тебе такое не годится? Можно сделать всё нормально... Чем тебя не устраивает данный скрипт?
Конечно могут возникнуть проблемы, если отступ нужно сделать не в право, а влево... Как у тебя.



Так у меня проблема вот в чем... шаблон у меня из таблици состоит (три колонки в каждой по три ячейки) и в средней правой ячейке я размещаю напр это меню

<td class="right_center" valign="top">
<div id="navigation">
<ul>
<li><a href="index.php" class="link1">Home</a></li>
<li><a href="metal" class="drop link2">Metal<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="gold.php">Gold</a></li>
<li><a href="aluminum.php">Aluminum</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="plastic" class="drop link3">Plastic<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="polyethelene.php">Polyethelene</a></li>

<li><a href="polycarbonate.php">Polycarbonate</a></li>
<li><a href="fiberglass.php">Fiberglass</a></li>
<li><a href="pvc.php">PVC</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="services.php" class="drop link4">Services<!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul style="height:240px;top:-40px;">
<li><a href="art.php">Art</a></li>
<li><a href="design-for-manufacturing.php">Design For Manufacturing</a></li>


</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="news.php" class="link5">News</a></li>
<li><a href="catalog.php" class="link6">Catalog</a></li>
<li><a href="about.php" class="link7">About Us</a></li>
</ul>
</div>
</td>

А эта ячейка у мня имеет строгую ширину, и что же делать когда начинает выезжать? ведь выезжают <li> а не <div>...

поидее выезжающая часть должно какимто образом отображатся в оседней ячейке (таблицы основного шаблона страницы). А как мне это сделать?

и что значит:

картинками ссылки уже давно никто не делает


  • 0

#6 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 02 Июль 2009 - 22:25

А эта ячейка у мня имеет строгую ширину, и что же делать когда начинает выезжать? ведь выезжают <li> а не <div>

Стоит только глянуть в исходный код и посмотреть определение
#navigation ul ul
{
   background:#2D3D47 none repeat scroll 0 0;
   border-left:1px solid #999999;
   height:96px;
   left:145px;
   padding:4px;
   position:absolute;
   top:-10px;
   visibility:hidden;
   width:145px;
}
Самое важное, это position:absolute что даёт блоку UL выходить за рамки содержащего его объекта и ложиться как слой на страницу, поэтому твой фиксированный размер тут не помешает.

и что значит:
картинками ссылки уже давно никто не делает

В первом скрипте, который ты привёл, все пункты меню это картинки, что не рентабельно.
  • 0

#7 Вячеслав

Вячеслав
    Topic Starter
  • Пользователь
  • 357 сообщений
  • Репутация: 0

Отправлено 04 Июль 2009 - 22:16

Значит я коряво настроил
хм... буду щас ковырть опять его, думал что для UL нельзя использовать absolute (а вообще для чего можно а для чего нельзя? :) ) .
Спасибо за ответ. ;)
  • 0

#8 Вячеслав

Вячеслав
    Topic Starter
  • Пользователь
  • 357 сообщений
  • Репутация: 0

Отправлено 04 Июль 2009 - 22:33

Самое важное, это position:absolute что даёт блоку UL выходить за рамки содержащего его объекта и ложиться как слой на страницу, поэтому твой фиксированный размер тут не помешает.


А если я его (UL) прописываю в ячейке таблицы, тогда он становится обсалютным только в ее пределах? Это получается мне нужно между тегами BODY прописывать это меню?
  • 0

#9 Вячеслав

Вячеслав
    Topic Starter
  • Пользователь
  • 357 сообщений
  • Репутация: 0

Отправлено 05 Июль 2009 - 05:14

Разобрался с меню... :) но теперь другой вопрос... каксделать чтобы ссылки были текстовые, а картинка - фоном?
  • 0

#10 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 06 Июль 2009 - 21:58

А если я его (UL) прописываю в ячейке таблицы, тогда он становится обсалютным только в ее пределах? Это получается мне нужно между тегами BODY прописывать это меню?

Если ты поставишь в пределах <body></body>, так что BODY будет явным родителем UL, то тогда тебе сложно будет спозиционировать меню на резиновом сайте. Точнее даже это будет сделать на мой взгляд, невозможно.

Разобрался с меню... wink.gif но теперь другой вопрос... каксделать чтобы ссылки были текстовые, а картинка - фоном?

И так есть у нас тег <a></a> так? Он является текстовым. Нам надо:
1) Сделать его блочным
2) Прописать размеры подложки
3) Наложить background под низ
4) Отцентрировать как нужно текст

Вот код страницы(смотри в стили):
<html>
<head>
<style type="text/css">

a, a:link, a:active
{
   display: block;
   padding: 5px 8px; /*примерные размеры(отступы от текста верх-низ: 5px; лево-право: 8px)*/
   background: #000 url('картинка_bg') [top|center|bottom] [left|center|right] [no-repeat|repeat-x|repeat-y]; /*задаём фон*/
   color: #FFF; /*цвет текста*/
}

a:hover
{
   /*не обязательно задавать всё заново, задаются только изменения*/
   background: #FFF url('картинка_bg_при наведении') [top|center|bottom] [left|center|right] [no-repeat|repeat-x|repeat-y]; /*задаём фон*/
   color: #000;
}

</style>
</head>
<body>
<a href="#">Ссылка 1</a>
<a href="#">Ссылка 2</a>
<a href="#">Ссылка 3</a>
</body>
</html>
<br> ставить не нужно, так как после display: block, элемент ведёт себя как любой блочный, к примеру как div
Распишу строку:
background: #000 url('картинка_bg') [top|center|bottom] [left|center|right] [no-repeat|repeat-x|repeat-y];
#000 задаёт текст подложки под бэкграунд, т.е. если картинки отключены или имеется местами прозрачность
url('картинка_bg') задаёт путь к картинке-бекграунд
[top|center|bottom] задаёт положение background относительно блока по вертикали(или если картинка больше чем блок, откуда начинать наложение)
[left|center|right] задаёт положение background относительно блока по горизонтали(или если картинка больше чем блок, откуда начинать наложение)
[no-repeat|repeat-x|repeat-y] задаёт повторение картинки(не повторять, повторять только по горизонтали, повторять только по вертикали)
  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru