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

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

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

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

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

Страница:   1 2

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

31

  • Автор: Aelle
  • Новичок
  • Зарегистрирован: 2009-12-11
  • Приглашений: 0
  • Сообщений: 10
  • Уважение: +1
  • Позитив: 0
  • Провел на форуме:
    10 часов 43 минуты
  • Последний визит:
    2011-08-05 17:32:05

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

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

Код:
<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
  • Новичок
  • .Void
  • Зарегистрирован: 2009-12-19
  • Приглашений: 0
  • Сообщений: 2
  • Уважение: 0
  • Позитив: 0
  • Провел на форуме:
    3 часа 18 минут
  • Последний визит:
    2010-10-31 10:36:25

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

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

0

33

  • Автор: Lelush
  • Форумчанин
  • Lelush
  • Зарегистрирован: 2009-05-15
  • Приглашений: 0
  • Сообщений: 38
  • Уважение: 0
  • Позитив: +3
  • Провел на форуме:
    14 часов 40 минут
  • Последний визит:
    2010-07-04 23:35:36

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

0

34

  • Автор: Aelle
  • Новичок
  • Зарегистрирован: 2009-12-11
  • Приглашений: 0
  • Сообщений: 10
  • Уважение: +1
  • Позитив: 0
  • Провел на форуме:
    10 часов 43 минуты
  • Последний визит:
    2011-08-05 17:32:05

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

0

35

  • Автор: Lelush
  • Форумчанин
  • Lelush
  • Зарегистрирован: 2009-05-15
  • Приглашений: 0
  • Сообщений: 38
  • Уважение: 0
  • Позитив: +3
  • Провел на форуме:
    14 часов 40 минут
  • Последний визит:
    2010-07-04 23:35:36

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

0

36

  • Автор: Aelle
  • Новичок
  • Зарегистрирован: 2009-12-11
  • Приглашений: 0
  • Сообщений: 10
  • Уважение: +1
  • Позитив: 0
  • Провел на форуме:
    10 часов 43 минуты
  • Последний визит:
    2011-08-05 17:32:05

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

0

37

  • Автор: Lelush
  • Форумчанин
  • Lelush
  • Зарегистрирован: 2009-05-15
  • Приглашений: 0
  • Сообщений: 38
  • Уважение: 0
  • Позитив: +3
  • Провел на форуме:
    14 часов 40 минут
  • Последний визит:
    2010-07-04 23:35:36

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

0

38

  • Автор: Aelle
  • Новичок
  • Зарегистрирован: 2009-12-11
  • Приглашений: 0
  • Сообщений: 10
  • Уважение: +1
  • Позитив: 0
  • Провел на форуме:
    10 часов 43 минуты
  • Последний визит:
    2011-08-05 17:32:05

В 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

  • Автор: Эмили
  • Форумчанин
  • Эмили
  • Зарегистрирован: 2009-06-07
  • Приглашений: 0
  • Сообщений: 76
  • Уважение: +2
  • Позитив: +13
  • Пол: Женский
  • Провел на форуме:
    1 день 15 часов
  • Последний визит:
    2010-12-18 00:14:48

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

0

40

  • Автор: Лин Веленгтон
  • Форумчанин
  • Лин Веленгтон
  • Зарегистрирован: 2010-01-30
  • Приглашений: 0
  • Сообщений: 90
  • Уважение: +1
  • Позитив: +5
  • Пол: Женский
  • Провел на форуме:
    2 дня 1 час
  • Последний визит:
    2010-09-30 15:29:33

http://forumupload.ru/uploads/0002/25/06/8547-2.gif

0

41

  • Автор: Лин Веленгтон
  • Форумчанин
  • Лин Веленгтон
  • Зарегистрирован: 2010-01-30
  • Приглашений: 0
  • Сообщений: 90
  • Уважение: +1
  • Позитив: +5
  • Пол: Женский
  • Провел на форуме:
    2 дня 1 час
  • Последний визит:
    2010-09-30 15:29:33

http://forumupload.ru/uploads/0002/25/06/8547-2.gif

0

42

  • Автор: M!ka
  • Новичок
  • M!ka
  • Зарегистрирован: 2010-03-26
  • Приглашений: 0
  • Сообщений: 1
  • Уважение: 0
  • Позитив: 0
  • Пол: Женский
  • Провел на форуме:
    49 минут
  • Последний визит:
    2010-03-29 22:11:19

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

0

43

  • Автор: Carmenita
  • Форумчанин
  • Carmenita
  • Зарегистрирован: 2008-11-06
  • Приглашений: 0
  • Сообщений: 63
  • Уважение: +1
  • Позитив: +10
  • Провел на форуме:
    1 день 4 часа
  • Последний визит:
    2010-10-12 16:57:11

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

0

44

  • Автор: Toshiro-kun
  • Да, модератор я, угу
  • Toshiro-kun
  • Зарегистрирован: 2010-03-08
  • Приглашений: 0
  • Сообщений: 3766
  • Уважение: +1013
  • Позитив: +9
  • Пол: Мужской
  • Возраст: 33 [1990-08-29]
  • Провел на форуме:
    1 месяц 5 дней
  • Последний визит:
    2012-08-11 15:49:22

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

0

45

  • Автор: Carmenita
  • Форумчанин
  • Carmenita
  • Зарегистрирован: 2008-11-06
  • Приглашений: 0
  • Сообщений: 63
  • Уважение: +1
  • Позитив: +10
  • Провел на форуме:
    1 день 4 часа
  • Последний визит:
    2010-10-12 16:57:11
Toshiro-kun написал(а):

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

да)

0

46

  • Автор: Toshiro-kun
  • Да, модератор я, угу
  • Toshiro-kun
  • Зарегистрирован: 2010-03-08
  • Приглашений: 0
  • Сообщений: 3766
  • Уважение: +1013
  • Позитив: +9
  • Пол: Мужской
  • Возраст: 33 [1990-08-29]
  • Провел на форуме:
    1 месяц 5 дней
  • Последний визит:
    2012-08-11 15:49:22

<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

  • Автор: Carmenita
  • Форумчанин
  • Carmenita
  • Зарегистрирован: 2008-11-06
  • Приглашений: 0
  • Сообщений: 63
  • Уважение: +1
  • Позитив: +10
  • Провел на форуме:
    1 день 4 часа
  • Последний визит:
    2010-10-12 16:57:11

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

0

48

  • Автор: Noah
  • Форумчанин
  • Noah
  • Зарегистрирован: 2009-10-27
  • Приглашений: 0
  • Сообщений: 81
  • Уважение: 0
  • Позитив: +10
  • Провел на форуме:
    2 дня 15 часов
  • Последний визит:
    2010-09-30 18:49:55

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

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

0

49

  • Автор: Toshiro-kun
  • Да, модератор я, угу
  • Toshiro-kun
  • Зарегистрирован: 2010-03-08
  • Приглашений: 0
  • Сообщений: 3766
  • Уважение: +1013
  • Позитив: +9
  • Пол: Мужской
  • Возраст: 33 [1990-08-29]
  • Провел на форуме:
    1 месяц 5 дней
  • Последний визит:
    2012-08-11 15:49:22

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

Установка
в 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

  • Автор: .Jacоb
  • Форумчанин
  • Зарегистрирован: 2010-08-22
  • Приглашений: 0
  • Сообщений: 64
  • Уважение: +3
  • Позитив: +32
  • Провел на форуме:
    2 дня 6 часов
  • Последний визит:
    2012-04-20 16:18:02

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

0

51

  • Автор: Deff
  • Помощник ZeroParking
  • Зарегистрирован: 2010-09-17
  • Приглашений: 0
  • Сообщений: 3019
  • Уважение: +912
  • Позитив: +117
  • Провел на форуме:
    1 месяц 4 дня
  • Последний визит:
    2014-03-14 16:00:36

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

+1

52

  • Автор: .Jacоb
  • Форумчанин
  • Зарегистрирован: 2010-08-22
  • Приглашений: 0
  • Сообщений: 64
  • Уважение: +3
  • Позитив: +32
  • Провел на форуме:
    2 дня 6 часов
  • Последний визит:
    2012-04-20 16:18:02

Deff
Спасибо)

0

Страница:   1 2

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

Рейтинг форумов | Создать форум бесплатно