Форум поддержки пользователей ZeroParking

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

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


Вы здесь » Форум поддержки пользователей ZeroParking » Галерея скриптов » Меню с исчезающими разделами


Меню с исчезающими разделами

Сообщений 31 страница 52 из 52

31

Доработала окончательный вариант. Теперь при наведении на линку, предыдущие закрываются, дабы не создавать множества окон.

Надеюсь, кому-нибудь пригодится:

Код:
<a onMouseOver="part1ON();part3OFF();part2OFF();part4OFF()"  onclick="part1OFF()">Линка 1</a>
<a onMouseOver="part2ON();part3OFF();part4OFF();part1OFF()" onclick="part2OFF()">Линка 2</a>
<a onMouseOver="part3ON();part2OFF();part4OFF();part1OFF()" onclick="part3OFF()">Линка 3</a>
<a onMouseOver="part4ON();part3OFF();part2OFF();part1OFF()" onclick="part4OFF()">Линка 4</a>

<div id="part1" class="container" onclick="part1OFF()">
Контейнер номер 1
</div>

<div id=part2 class="container" onclick="part2OFF()">
Контейнер номер 2
</div>

<div id=part3 class="container" onclick="part3OFF()">
Контейнер номер 3
</div>

<div id="part4" class="container" onclick="part4OFF()">
Контейнер номер 4
</div>

Отредактировано Aelle (2009-12-19 12:36:27)

0

32

Скажите  пожалуйста, а как сделать что бы текст выводился точно под ссылкой? У меня он всё время смещается влево...

Отредактировано .Void (2009-12-19 19:01:08)

0

33

.Void
Присоединяюсь. Сам мучаюсь, но ничего не получается  http://druzia.0pk.ru/uploads/0002/25/06/8548-1.gif

0

34

Я у себя организовала центровку, ибо меню само у меня посередине расположено. Могу выложить код центральной менюшки, как у меня на сайте. Контейнер содержимого фиксированной ширины выводится прямо под менюшкой.
Насчет того, чтобы именно под линкой, такого способа я не нашла. Может, уважаемые гуру помогут.

0

35

Aelle
А можно сайт посмотреть? Может, мне и это подойдет..

0

36

Он еще в разработке.
http://alterion.rolka.su/
Под книжкой то самое меню, пока не определила, где хочу видеть меняющийся контейнер)

0

37

Aelle
Ну это не совсем то, но тоже мне подойдет) Выставите скрипт, пожалуйста *_*

0

38

В HTML верх

Код:
<style type="text/css">
#part1,#part2,#part3,#part4 {
z-index: 2;
position: absolute;
left: 30%;
right: 30%;
visibility: hidden}
</style>

В HTML низ

Код:
<script language="JavaScript">
function part1ON() {document.getElementById("part1").style.visibility='visible'}
function part2ON(){document.getElementById("part2").style.visibility='visible'}
function part3ON(){document.getElementById("part3").style.visibility='visible'}
function part4ON(){document.getElementById("part4").style.visibility='visible'}
function part1OFF() {document.getElementById("part1").style.visibility='hidden'}
function part2OFF(){document.getElementById("part2").style.visibility='hidden'}
function part3OFF(){document.getElementById("part3").style.visibility='hidden'}
function part4OFF(){document.getElementById("part4").style.visibility='hidden'}
</script>

Оно осталось без изменений, но выложила на всякий случай.

В объявление

Код:
<table width="100%" align="center"><tr><td align="center">
<a onMouseOver="part1ON();part3OFF();part2OFF();part4OFF()"  onclick="part1OFF()">линка№1</a>&nbsp;&nbsp;-&nbsp;&nbsp;
<a onMouseOver="part2ON();part3OFF();part4OFF();part1OFF()" onclick="part2OFF()">линка№2</a>&nbsp;&nbsp;-&nbsp;&nbsp;
<a onMouseOver="part3ON();part2OFF();part4OFF();part1OFF()" onclick="part3OFF()">линка№3</a>&nbsp;&nbsp;-&nbsp;&nbsp;
<a onMouseOver="part4ON();part3OFF();part2OFF();part1OFF()" onclick="part4OFF()">линка№4</a>


<div id="part1" class="container" onclick="part1OFF()">
Контейнер номер 1
</div>

<div id=part2 class="container" onclick="part2OFF()">
Контейнер номер 2
</div>

<div id=part3 class="container" onclick="part3OFF()">
Контейнер номер 3
</div>

<div id="part4" class="container" onclick="part4OFF()">
Контейнер номер 4
</div>
</td></tr></table>

+1

39

Aska
Приводить в пример меню Вашего форума не есть плагиатить! И плагиатом я не занимаюсь!

0

40

http://druzia.0pk.ru/uploads/0002/25/06/8547-2.gif

0

41

http://druzia.0pk.ru/uploads/0002/25/06/8547-2.gif

0

42

Так, я сделал все, как по инструкции, но выходит это. Сам контейнер есть а подводишь - ничего ((

0

43

а можно сделать так, чтобы текст был на каком-то фоне. Как тут http://thelionking.rusff.ru/

0

44

Carmenita
Вам фон какой именно нужен?
{ Вы имеете ввиду темный прозрачный фон который виден когда выплывает окно с текстом? }
Если возможно сделайте скрин с тем что вы хотите сделать. Выделите как нибудь.
Или объясните что именно хотите по четче

0

45

Toshiro-kun написал(а):

{ Вы имеете ввиду темный прозрачный фон который виден когда выплывает окно с текстом? }

да)

0

46

<style type="text/css">
#part1,#part2,#part3,#part4 {
z-index: 2;
position: absolute;
background: url(http://s61.radikal.ru/i174/1003/64/89d6690f6cfa.png);
visibility: hidden}
</style>

В место начального варианта вставляете вот этот в html-верх
Хотя по идеи этого делать нельзя.
Если вы хотите такой же что бы был как на том форуме, вам лучше воспользоваться вот этим скриптом ---> Скрипт.

+1

47

Toshiro-kun
СПс большое) Помогли) http://druzia.0pk.ru/uploads/0002/25/06/8547-2.gif

0

48

вопрос снят. разобрался.

Отредактировано Noah (2010-04-07 21:35:54)

0

49

Меню с исчезающими разделами. Доработанный вариант
По сравнению с меню с выдвижными окошками, этот вариант при наведении - выпадают.
Работает и при наведении на картинку и так же при наведении на слова. В отличии от выдвижного меню - не работает с картинками типа банграунд (фоновая картинка) только с чем то определенным

Установка
в html-верх

Код:
<style type="text/css">
#part1, #part2,#part3,#part4,#part5,#part6 {
z-index: 2;
position: absolute;
background: url(ссылка на фон);
border: 1px dotted #цвет;
visibility: hidden}
</style>

в html-низ

<script language="JavaScript">
function part1ON() {document.getElementById("part1").style.visibility='visible'}
function part2ON(){document.getElementById("part2").style.visibility='visible'}
function part3ON(){document.getElementById("part3").style.visibility='visible'}
function part4ON(){document.getElementById("part4").style.visibility='visible'}
function part5ON() {document.getElementById("part5").style.visibility='visible'}
function part6ON() {document.getElementById("part6").style.visibility='visible'}
function part1OFF() {document.getElementById("part1").style.visibility='hidden'}
function part2OFF(){document.getElementById("part2").style.visibility='hidden'}
function part3OFF(){document.getElementById("part3").style.visibility='hidden'}
function part4OFF(){document.getElementById("part4").style.visibility='hidden'}
function part5OFF(){document.getElementById("part5").style.visibility='hidden'}
function part6OFF(){document.getElementById("part6").style.visibility='hidden'}
</script>

объявление

Код:
<a href="" onMouseOver="part1ON()" onMouseOut="part1OFF()"><img src="ссылка на картинку при наведении" alt="название при "неактивно" "></a> </div>
<div id="part1" style="height: auto; width:200px" onMouseOver="part1ON()" onMouseOut="part1OFF()">
Текст в выпадающем окне</div>
<a href="" onMouseOver="part2ON()" onMouseOut="part2OFF()"><img src="ссылка на картинку при наведении" alt="название при "неактивно" "></a> </div>
<div id="part2" style="height: auto; width:200px" onMouseOver="part2ON()" onMouseOut="part2OFF()">
Текст в выпадающем окне</div>
<a href="" onMouseOver="part3ON()" onMouseOut="part3OFF()"><img src="ссылка на картинку при наведении" alt="название при "неактивно" "></a> </div>
<div id="part3" style="height: auto; width:200px" onMouseOver="part3ON()" onMouseOut="part3OFF()">
Текст в выпадающем окне</div>
<a href="" onMouseOver="part4ON()" onMouseOut="part4OFF()"><img src="ссылка на картинку при наведении" alt="название при "неактивно" "></a> </div>
<div id="part4" style="height: auto; width:200px" onMouseOver="part4ON()" onMouseOut="part4OFF()">
Текст в выпадающем окне</div>
<a href="" onMouseOver="part5ON()" onMouseOut="part5OFF()"><img src="ссылка на картинку при наведении" alt="название при "неактивно" "></a> </div>
<div id="part5" style="height: auto; width:200px" onMouseOver="part5ON()" onMouseOut="part5OFF()">
Текст в выпадающем окне</div>
<a href="" onMouseOver="part6ON()" onMouseOut="part6OFF()"><img src="ссылка на картинку при наведении" alt="название при "неактивно" "></a> </div>
<div id="part6" style="height: auto; width:200px" onMouseOver="part6ON()" onMouseOut="part6OFF()">
Текст в выпадающем окне</div>

Описание/Заполнение меню
Данный вариант меню рассчитано на 6 блоков.
Если вам понадобится дополнительный блок тогда в следующей части продублируйте последний эллемент с изменением на один то есть   ,#part7 (если понадобится далее - то также)

#part1, #part2,#part3,#part4,#part5,#part6 {

Если вы добавляете ячейку, то конечно в части что вы вставляете вниз вы тоже должны добавить по строке

function part7ON() {document.getElementById("part7").style.visibility='visible'}

(в части ON)

function part7OFF(){document.getElementById("part7").style.visibility='hidden'}

(в части OFF)
Ничего не спутайте! Если вы вставите что то не туда или пронумеруйте неправильно - то скрипт сработает на предыдущую ячейку с наложением.

Ну и при добавлении очередной ячейки в объявление так же не забудьте ее добавить

<a href="" onMouseOver="part7ON()" onMouseOut="part7OFF()"><img src="ссылка на картинку при наведении" alt="название при "неактивно" "></a> </div>
<div id="part7" style="height: auto; width:200px" onMouseOver="part7ON()" onMouseOut="part7OFF()">
Текст в выпадающем окне</div>

Выделенные цифры при добавлении очередной ячейки увеличиваются так же на один
Далее, что касается именно заполнения и внешнего вида:

background: url(ссылка на фон);

- если вы хотите поставить в выплывающее окно картинку

background-color: #цвет;

- если же просто цвет

border: 1px dotted #цвет;

- часть отвечающая за обрамление выплывающего окна. Цифра что красным - толщина, далее следует элемент бордюра и далее его основной цвет

<img src="ссылка на картинку при наведении" alt="название при "неактивно" ">

- ставится уже непосредственно в объявление - в случае если вы хотите сделать выплывание окна при наведении на картинку
Если же вам нужен просто текст, тогда в эту часть нужно в место этой части написать наш текст

width:200px"

- ширина выплывающего окна

Текст в выпадающем окне

- сюда вы должны ввести то, что у вас будет находится в окне.

0

50

поставил, и у меня всё перекосилосьОО
вот

0

51

.Jacоb пользуйтесь пока исходным кодом

+1

52

Deff
Спасибо)

0


Вы здесь » Форум поддержки пользователей ZeroParking » Галерея скриптов » Меню с исчезающими разделами


Рейтинг форумов | Создать форум бесплатно © 2007–2017 «QuadroSystems» LLC