Форум программистов CodeGuru
18 Январь 2018, 10:14:36 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.

Войти
Новости:
 
   Начало   Помощь Войти Регистрация  
Страниц: [1]   Вниз
  Печать  
Автор Тема: Меню для сайта на JavaScript.  (Прочитано 16982 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Nicht
Интересующийся
**
Офлайн Офлайн

Сообщений: 11


Просмотр профиля
« : 26 Сентябрь 2008, 16:10:34 »

Расскажите пожалуйста как сделать на JavaScript самое простое меню.

Чем проще, тем лучше.
JavaScript я начал изучать совсем недавно и еще не все понятно. Я нашел несколько Java-скриптов для меню. Но они то выглядят не как меню, то слишком сложные при этом работают плохо.
Записан
holdmann
Пользователь
***
Офлайн Офлайн

Сообщений: 262



Просмотр профиля
« Ответ #1 : 26 Сентябрь 2008, 17:01:42 »

тут бы задачу не помешало конкретизировать...
какого вида меню?
текстовое или картинками?
какой эффект открытия закрытия?

а в целом "меню", если мы думаем об одном и том же, состоит из суперпозиционированной таблицы +\- атбирут display
Записан

Елси вы хотите купить, продать, отремонтировать автомобиль в Ижевске: Вам сюда =)
(c)holdmann
Nicht
Интересующийся
**
Офлайн Офлайн

Сообщений: 11


Просмотр профиля
« Ответ #2 : 26 Сентябрь 2008, 20:19:17 »

Можно хотя бы просто с текстом. Несколько пунктов.
Из этих пунктов если нажать, появляются вертикальные меню.
Чем проще, тем лучше.
Мне хочется пока только понять принцип  Улыбка

а в целом "меню", если мы думаем об одном и том же, состоит из суперпозиционированной таблицы +\- атбирут display
К сожалению, плохо представляют себе как это Грустный
Не покажете пример? Или хотя бы ссылку что почитать.
Записан
holdmann
Пользователь
***
Офлайн Офлайн

Сообщений: 262



Просмотр профиля
« Ответ #3 : 27 Сентябрь 2008, 21:44:10 »

Код:
<html>
<head>
<title>Menu</title>
<style type="text/css">
a { font-family: Verdana, Arial; color: white; text-decoration: none; font-weight:bold; }
a:hover { color: white; text-decoration: none; font-weight:bold; background-color:red;}
#box {
position:absolute;
visibility:hidden;
layer-background-color:red }
#blackbox { font-family: Verdana, Arial; font-size:8pt; color: white; background-color:black; text-decoration: none  }
#mnubar {  font-family: Verdana, Arial; font-size:10pt; color: white; font-weight:bold; text-decoration: none  }

</style>

<script language="JavaScript">
ns=window.navigator.appName == "Netscape"
ie=window.navigator.appName == "Microsoft Internet Explorer"

function openIt(x) {
if(ns) {
   showbox= document.layers[x+1]
     showbox.visibility = "show"
       showbox.top=44
    var items = 5     
     for (i=1; i<=items; i++) {
      elopen=document.layers[i]
        if (i != (x + 1)) {
          elopen.visibility = "hide" }
            }
  }   

if(ie) {
   curEl = event.toElement
   curEl.style.background = "silver"   

   showBox = document.all.box[x];
     showBox.style.visibility = "visible";
        showBox.style.top = 40;
         
   var items = 5
    for (i=0; i<items; i++) {
      elOpen=document.all.box[i]
       barEl=document.all.mnubar[i]
        if (i != x){
          elOpen.style.visibility = "hidden"
          barEl.style.background = "#000000"
       }
     }
   }
}

function closeIt() {
   var items = 5
     for (i=0; i<items; i++) {
       if(ie){
        document.all.box[i].style.visibility = "hidden"
          barEl=document.all.mnubar[i]
           barEl.style.background = "#000000"
       }
       if(ns){ document.layers[i+1].visibility = "hide"}         
}
}

</script>

</head>

<body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">



<table border="0" cellpadding="0" cellspacing="0" width="400" bgcolor="#000000"  id=mainmenu height="40">
<tr><td align="center" bgcolor="456ccc" colspan="5"><b>Opening Menu</b></td></tr>
<tr>

 <td align="center" nowrap  width="80">
<a href="#" onmouseover="openIt(0)" id=mnubar>Menu</a></td>

 <td align="center" nowrap  width="80">
<a href="#" onmouseover="openIt(1)" id=mnubar>Menu</a></td>

<td align="center" nowrap  width="80">
<a href="#" onmouseover="openIt(2)"  id=mnubar>Menu</a></td>

<td align="center" nowrap  width="80">
<a href="#" onmouseover="openIt(3)"  id=mnubar>Menu</a></td>
   
<td align="center" nowrap  width="80">
<a href="#" onmouseover="openIt(4)"  id=mnubar>Menu</a></td>

 </tr>
 </table>
<br><br>

<div onmouseover="closeIt()" >
<layer onmouseover="closeIt()">

 
</layer>
</div>

<!-- Menu -->

<div id=box style=left:0>
 <table border="0" id=blackbox  width="80">     
 <tr><td><a href="javascript:if(confirm('http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!  \n\nThis file was not retrieved by Teleport Pro, because it is linked too far away from its Starting Address. If you increase the in-domain depth setting for the Starting Address, this file will be queued for retrieval.  \n\nDo you want to open it from the server?'))window.location='http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!'" tppabs="http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!" >Link</a></td></tr>
 <tr><td><a href="javascript:if(confirm('http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!  \n\nThis file was not retrieved by Teleport Pro, because it is linked too far away from its Starting Address. If you increase the in-domain depth setting for the Starting Address, this file will be queued for retrieval.  \n\nDo you want to open it from the server?'))window.location='http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!'" tppabs="http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!">Link</a></td></tr>
     </table>
 </div>
 

<!-- Menu -->

<div id=box style=left:80>
 <table border="0" id=blackbox width="80">
 <tr><td><a href="javascript:if(confirm('http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!  \n\nThis file was not retrieved by Teleport Pro, because it is linked too far away from its Starting Address. If you increase the in-domain depth setting for the Starting Address, this file will be queued for retrieval.  \n\nDo you want to open it from the server?'))window.location='http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!'" tppabs="http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!">Link</a></td></tr>
 <tr><td><a href="javascript:if(confirm('http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!  \n\nThis file was not retrieved by Teleport Pro, because it is linked too far away from its Starting Address. If you increase the in-domain depth setting for the Starting Address, this file will be queued for retrieval.  \n\nDo you want to open it from the server?'))window.location='http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!'" tppabs="http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!" >Link</a></td></tr>
 <tr><td><a href="javascript:if(confirm('http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!  \n\nThis file was not retrieved by Teleport Pro, because it is linked too far away from its Starting Address. If you increase the in-domain depth setting for the Starting Address, this file will be queued for retrieval.  \n\nDo you want to open it from the server?'))window.location='http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!'" tppabs="http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!" >Link</a></td></tr>
   </table>
 </div>

<!-- Menu -->

<div id=box style=left:160>
 <table border="0" id=blackbox width="80">     
 <tr><td><a href="javascript:if(confirm('http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!  \n\nThis file was not retrieved by Teleport Pro, because it is linked too far away from its Starting Address. If you increase the in-domain depth setting for the Starting Address, this file will be queued for retrieval.  \n\nDo you want to open it from the server?'))window.location='http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!'" tppabs="http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!" >Link</a></td></tr>
 <tr><td><a href="javascript:if(confirm('http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!  \n\nThis file was not retrieved by Teleport Pro, because it is linked too far away from its Starting Address. If you increase the in-domain depth setting for the Starting Address, this file will be queued for retrieval.  \n\nDo you want to open it from the server?'))window.location='http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!'" tppabs="http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!" >Link</a></td></tr>
 <tr><td><a href="javascript:if(confirm('http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!  \n\nThis file was not retrieved by Teleport Pro, because it is linked too far away from its Starting Address. If you increase the in-domain depth setting for the Starting Address, this file will be queued for retrieval.  \n\nDo you want to open it from the server?'))window.location='http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!'" tppabs="http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!" >Link</a></td></tr>
 <tr><td><a href="javascript:if(confirm('http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!  \n\nThis file was not retrieved by Teleport Pro, because it is linked too far away from its Starting Address. If you increase the in-domain depth setting for the Starting Address, this file will be queued for retrieval.  \n\nDo you want to open it from the server?'))window.location='http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!'" tppabs="http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!" >Link</a></td></tr>
 <tr><td><a href="javascript:if(confirm('http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!  \n\nThis file was not retrieved by Teleport Pro, because it is linked too far away from its Starting Address. If you increase the in-domain depth setting for the Starting Address, this file will be queued for retrieval.  \n\nDo you want to open it from the server?'))window.location='http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!'" tppabs="http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!" >Link</a></td></tr>   
</table>
 </div>

<!-- Menu -->

<div id=box style=left:240>
 <table border="0" id=blackbox width="80">     
 <tr><td><a href="javascript:if(confirm('http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!  \n\nThis file was not retrieved by Teleport Pro, because it is linked too far away from its Starting Address. If you increase the in-domain depth setting for the Starting Address, this file will be queued for retrieval.  \n\nDo you want to open it from the server?'))window.location='http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!'" tppabs="http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!" >Link</a></td></tr>
 <tr><td><a href="javascript:if(confirm('http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!  \n\nThis file was not retrieved by Teleport Pro, because it is linked too far away from its Starting Address. If you increase the in-domain depth setting for the Starting Address, this file will be queued for retrieval.  \n\nDo you want to open it from the server?'))window.location='http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!'" tppabs="http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!" >Link</a></td></tr>
 <tr><td><a href="javascript:if(confirm('http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!  \n\nThis file was not retrieved by Teleport Pro, because it is linked too far away from its Starting Address. If you increase the in-domain depth setting for the Starting Address, this file will be queued for retrieval.  \n\nDo you want to open it from the server?'))window.location='http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!'" tppabs="http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!" >Link</a></td></tr>
 <tr><td><a href="javascript:if(confirm('http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!  \n\nThis file was not retrieved by Teleport Pro, because it is linked too far away from its Starting Address. If you increase the in-domain depth setting for the Starting Address, this file will be queued for retrieval.  \n\nDo you want to open it from the server?'))window.location='http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!'" tppabs="http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!" >Link</a></td></tr>
   </table>
 </div>

<!--Menu -->

<div id=box style=left:320>
 <table border="0" id=blackbox width="80">     
 <tr><td><a href="javascript:if(confirm('http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!  \n\nThis file was not retrieved by Teleport Pro, because it is linked too far away from its Starting Address. If you increase the in-domain depth setting for the Starting Address, this file will be queued for retrieval.  \n\nDo you want to open it from the server?'))window.location='http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!'" tppabs="http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!" >Link</a></td></tr>
 <tr><td><a href="javascript:if(confirm('http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!  \n\nThis file was not retrieved by Teleport Pro, because it is linked too far away from its Starting Address. If you increase the in-domain depth setting for the Starting Address, this file will be queued for retrieval.  \n\nDo you want to open it from the server?'))window.location='http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!'" tppabs="http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!" >Link</a></td></tr>
 <tr><td><a href="javascript:if(confirm('http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!  \n\nThis file was not retrieved by Teleport Pro, because it is linked too far away from its Starting Address. If you increase the in-domain depth setting for the Starting Address, this file will be queued for retrieval.  \n\nDo you want to open it from the server?'))window.location='http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!'" tppabs="http://www.everyweb.ru/wmaster/javas/menu/demo/!!!!!!" >Link</a></td></tr>
  </table>
 </div>


</body>
</html>

написано не мной, но, имхо, самый легкий пример меню, если что, спрашивай что непонятно.
Записан

Елси вы хотите купить, продать, отремонтировать автомобиль в Ижевске: Вам сюда =)
(c)holdmann
holdmann
Пользователь
***
Офлайн Офлайн

Сообщений: 262



Просмотр профиля
« Ответ #4 : 27 Сентябрь 2008, 22:27:31 »

так-с, посмотрел то, что дропнул и понял что не хватает маленького кусочка кода =)
чтобы меню второго уровня пропадало при потере фокуса на нем.
делаетсо это так:
пишется функция в которую входит переменная id, кот. содержит идентификатор выпадающей таблицы
функция должна по действию onMouseOver присваивать id.style.visibility = 'hidden';  Тащусь !
Записан

Елси вы хотите купить, продать, отремонтировать автомобиль в Ижевске: Вам сюда =)
(c)holdmann
Страниц: [1]   Вверх
  Печать  
 
Перейти в:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.21 | SMF © 2015, Simple Machines Valid XHTML 1.0! Valid CSS!