Создать форум бесплатно: ixbb.ru :: Календарь на Март 2024 года: calendar2008.ru/2024/mart/

  Reply to this topicStart new topicStart Poll

Всплывающее меню на js

, Ща башка треснет
DarlaXXL
Отправлено: Dec 16 2010, 04:14 PM
Quote Post


  Майор
*

Группа: Members
Сообщений: 107
Пользователь №: 3598
Регистрация:
12-November 10



Товарищи, почему скрипт не работает?
хочу сделать простое всплывающее меню , из нескольких разделов (не вложенных, одноуровневых).
но не хочу к каждому пункту меню писать одельную функцию.
Мой корабль уже давно сбился с пути, помогите выйти из затруднения.

<script>
function vis(a)
{
var menu=document.anchors[a];
menu.style.visibility="visible";
}

function unvis(a)
{
var menu=document.anchors[a];
menu.style.visibility="hidden";
}

</script>





<table>
<tr><td>
<a href="1.html" onMouseOver="vis(0)" onMouseOut="unvis(0)">menu1</a>
<div id="menu1" style="visibility:hidden" onMouseOver="vis(0)" onMouseOut="unvis(0)">
<table border=1>
<tr><td>первая ссылка</td>
</tr>
<tr><td>вторая ссылка</td>
</tr>
<tr><td>третья ссылка</td>
</tr>
</table>
</div>
</td><td>
<a href="1.html" onMouseOver="vis(1)" onMouseOut="unvis(1)">menu2</a>
<div id="menu2" style="visibility:hidden" onMouseOver="vis(1)" onMouseOut="unvis(1)">
<table border=1>
<tr><td>первая ссылка</td>
</tr>
<tr><td>вторая ссылка</td>
</tr>
<tr><td>третья ссылка</td>
</tr>
</table>
</div>
</td><td>
<a href="1.html" onMouseOver="vis(2)" onMouseOut="unvis(2)">menu3</a>
<div id="menu3" style="visibility:hidden" onMouseOver="vis(2)" onMouseOut="unvis(2)">
<table border=1>
<tr><td>первая ссылка</td>
</tr>
<tr><td>вторая ссылка</td>
</tr>
<tr><td>третья ссылка</td>
</tr>
</table>
</div>

</td></tr>


</table>
PMEmail Poster
Top
dudeonthehorse
Отправлено: Dec 16 2010, 04:57 PM
Quote Post


  Команда ЭйсВэб
*

Группа: Super moderator
Сообщений: 763
Пользователь №: 2933
Регистрация:
26-October 09



читаем http://anton.shevchuk.name/javascript/jquery-for-beginners/ - эту статью, а затем http://anton.shevchuk.name/javascript/jque...or-beginners-2/ эту. после прочтения не будет проблем с всплывающими меню.
PMEmail PosterICQ
Top
DarlaXXL
Отправлено: Dec 16 2010, 06:53 PM
Quote Post


  Майор
*

Группа: Members
Сообщений: 107
Пользователь №: 3598
Регистрация:
12-November 10



ух ты классный какой дизайн! это флеш?
PMEmail Poster
Top
dudeonthehorse
Отправлено: Dec 16 2010, 06:57 PM
Quote Post


  Команда ЭйсВэб
*

Группа: Super moderator
Сообщений: 763
Пользователь №: 2933
Регистрация:
26-October 09



только картинки и java script. как раз о библиотеке java script'a и начинается цикл статей, на который я дал вам ссылки.
PMEmail PosterICQ
Top
DarlaXXL
Отправлено: Dec 16 2010, 07:13 PM
Quote Post


  Майор
*

Группа: Members
Сообщений: 107
Пользователь №: 3598
Регистрация:
12-November 10



супер!
у меня голова закружилась от восторгаsmile.gif
есть же вкус у человека, и голова на месте.
ничего лишнего в дизайне. даже если ничего на сайте не надо, все равно охота пощелкать по ссылкам, посмотреть, полистать. приятно даже просто.
PMEmail Poster
Top
dudeonthehorse
Отправлено: Dec 16 2010, 11:17 PM
Quote Post


  Команда ЭйсВэб
*

Группа: Super moderator
Сообщений: 763
Пользователь №: 2933
Регистрация:
26-October 09



рад. что вам понравилось. надеюсь вы сделаете меню по примерам того, что он описывает в своих статьях, и покажете результат нам.

P.S. думаю что в будущем у вас будет не мало вопросов на этом форуме и предлагаю вам рассказать о себе в этой http://forum.aceweb.ru/index.php?showtopic...100&#entry27919 теме. Сколько вам лет, как вас зовут, от куда вы, чем занимаетесь...
PMEmail PosterICQ
Top
DarlaXXL
Отправлено: Dec 17 2010, 12:30 AM
Quote Post


  Майор
*

Группа: Members
Сообщений: 107
Пользователь №: 3598
Регистрация:
12-November 10



Большое спасибо за информацию! Я обязательно воспользуюсь. там есть такой один вариант сладенький.
но jquery - это для меня в первый разsmile.gif
и что бы въехать мне надо разобраться с моим кодом.

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


PMEmail Poster
Top
Asid Storm
Отправлено: Dec 17 2010, 11:45 PM
Quote Post


  Команда ЭйсВэб
*

Группа: Super moderator
Сообщений: 895
Пользователь №: 39
Регистрация:
27-August 06



Честно, не знаю как это сделать так что бы без абсолютного положения слоёв с кнопкой menu (Ещё подумаю конечно, но пока вот так):
CODE
<script>
function vis(id){
document.getElementById('menu-' + id).style.display='block';
document.getElementById('menu-' + id).style.visibility='visible';
}
function unvis(id){
document.getElementById('menu-' + id).style.display='none';
document.getElementById('menu-' + id).style.visibility='hidden';
}
function colored(item){
item.style.backgroundColor = 'rgb(177,177,177)';
}
function deColored(item){
item.style.backgroundColor = 'white';
}
</script>
<span id='menu-link-1' style='position: absolute; left: 20px;'>
<a href="#" onMouseOver="vis(0)" onMouseOut="unvis(0)">Меню 1</a>
<div id="menu-0" style="visibility: hidden; display: none; position: relative;" onMouseOver="vis(0)" onMouseOut="unvis(0)">
 <table style='background-color: white; border: 1px solid black;' cellspacing='0' cellpadding='0'>
  <tr>
   <td align='center'>Подменю 1</td>
  </tr>
  <tr>
   <td style='border-top: 1px dotted black; padding: 1px;' onMouseOver='colored(this);' onMouseOut='deColored(this);'>Первая ссылка</td>
  </tr>
  <tr>
   <td style='border-top: 1px dotted black; padding: 1px;' onMouseOver='colored(this);' onMouseOut='deColored(this);'>Вторая ссылка</td>
  </tr>
  <tr>
   <td style='border-top: 1px dotted black; padding: 1px;' onMouseOver='colored(this);' onMouseOut='deColored(this);'>Третья ссылка</td>
  </tr>
 </table>
</div>
</span>
<span id='menu-link-2' style='position: absolute; left: 80px;'>
<a href="#" onMouseOver="vis(1)" onMouseOut="unvis(1)">Меню 2</a>
<div id="menu-1" style="visibility: hidden; display: none; position: relative;" onMouseOver="vis(1)" onMouseOut="unvis(1)">
 <table style='background-color: white; border: 1px solid black;' cellspacing='0' cellpadding='0'>
  <tr>
   <td align='center'>Подменю 2</td>
  </tr>
  <tr>
   <td style='border-top: 1px dotted black; padding: 1px;' onMouseOver='colored(this);' onMouseOut='deColored(this);'>Первая ссылка</td>
  </tr>
  <tr>
   <td style='border-top: 1px dotted black; padding: 1px;' onMouseOver='colored(this);' onMouseOut='deColored(this);'>Вторая ссылка</td>
  </tr>
  <tr>
   <td style='border-top: 1px dotted black; padding: 1px;' onMouseOver='colored(this);' onMouseOut='deColored(this);'>Третья ссылка</td>
  </tr>
 </table>
</div>
</span>
<span id='menu-link-3' style='position: absolute; left: 140px;'>
<a href="#" onMouseOver="vis(2)" onMouseOut="unvis(2)">Меню 3</a>
<div id="menu-2" style="visibility: hidden; display: none; position: relative;" onMouseOver="vis(2)" onMouseOut="unvis(2)">
 <table style='background-color: white; border: 1px solid black;' cellspacing='0' cellpadding='0'>
  <tr>
   <td align='center'>Подменю 3</td>
  </tr>
  <tr>
   <td style='border-top: 1px dotted black; padding: 1px;' onMouseOver='colored(this);' onMouseOut='deColored(this);'>Первая ссылка</td>
  </tr>
  <tr>
   <td style='border-top: 1px dotted black; padding: 1px;' onMouseOver='colored(this);' onMouseOut='deColored(this);'>Вторая ссылка</td>
  </tr>
  <tr>
   <td style='border-top: 1px dotted black; padding: 1px;' onMouseOver='colored(this);' onMouseOut='deColored(this);'>Третья ссылка</td>
  </tr>
 </table>
</div>
</span>
PMEmail PosterUsers WebsiteICQ
Top
Asid Storm
Отправлено: Dec 17 2010, 11:59 PM
Quote Post


  Команда ЭйсВэб
*

Группа: Super moderator
Сообщений: 895
Пользователь №: 39
Регистрация:
27-August 06



С Вашим же кодом.. не знаю что такое
CODE
document.anchors

Но я знаю, что если бы Вы сделали примерно так:
CODE
var menu=document.getElementById('menu'+a);

То может быть и заработало (не проверял)
PMEmail PosterUsers WebsiteICQ
Top
DarlaXXL
Отправлено: Dec 18 2010, 02:58 PM
Quote Post


  Майор
*

Группа: Members
Сообщений: 107
Пользователь №: 3598
Регистрация:
12-November 10



Супер.

я как раз с geElementById и начинала, но до ("menu-"+id) никак не могла додуматься.
все вставляла переменные с таким содержанием.
спассибо за подсказку.

PMEmail Poster
Top

Topic Options Reply to this topicStart new topicStart Poll

 



[ Script Execution time: 0.0245 ]   [ 10 queries used ]   [ GZIP выключен ]