Javascript-форум - Меню на Javascript

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Меню на Javascript (https://javascript.ru/forum/dom-window/2904-menyu-na-javascript.html)

Меню на Javascript

сем привет. :)

Есть время свободное и захотел сайт сделать.
С версткой НТМЛ проблем нет(кроме блочной, которую я не знаю), но захотелось сделать менюшку с меняющимися кнопками.

Есть 2 варианта:
1. Сделать кнопки рисунками, но надо будет рисовать по 2 кнопки с текстом, а если потом добавлять, то еще и дорисовывать. + сайт будет много весить.
2. Менять фоновые изображения в каждой клетке меню при наведении.

Я в ДжаваСкриптах не шарю. Нашел в Интернет только, как фоновые цвета менять при наведении. Я её отредактировал, но что-то с картинками не получается. Подскажите, где подправить?

<script type="text/JavaScript">
<!--

function newColor(idCell1) { 
eval('document.all.'+idCell1+'.style.background-image= "url(images/hov_gr_but.jpg)"'); 
eval('document.getElementById("' + idCell1 + '").style.background-image= "url(images/hov_gr_but.jpg)"'); 
} 

function backColor(idCell1) { 
eval('document.all.'+idCell1+'.style.background-image = "url(images/hov_bl_but.jpg)"'); 
eval('document.getElementById("' + idCell1 + '").style.background-image = "url(images/hov_bl_but.jpg)"'); 
} 
//-->
</script>

<table width="163" cellpadding="10" cellspacing="0" align="center">
<tr height="44" onMouseOver="newColor('c1')" onMouseOut="backColor('c1')">
<td id="c1" background="./images/hov_gr_but.jpg">1</td>
</tr>
<tr height="44">
<td background="./images/hov_bl_but.jpg">2</td>
</tr>
<tr height="44">
<td background="./images/hov_bl_but.jpg">3</td>
</tr>
<tr height="44">
<td background="./images/hov_bl_but.jpg">4</td>
</tr>
<tr height="44">
<td background="./images/hov_bl_but.jpg">5</td>
</tr>
</table>

При наведении пункт меню становится зеленым

П.С. Пишу уже на третий форум (теперь специализированный). Нигде так и не помогли :(

function newColor(idCell1) { 
   document.getElementById(idCell1).style.backgroundImage= "url(images/hov_gr_but.jpg)"; 
} 
 
function backColor(idCell1) { 
   document.getElementById(idCell1).style.backgroundImage= "url(images/hov_bl_but.jpg)";
}

Большое спасибо.

А можно вкратце, почему мой вариант не работаьл? :)

style.background-image
в CSS есть такое свойство.а вот в JS нету.в JS нельзя использовать в именнах переменных и свойств знак "-"

поэтому, когда JS обращается к свойствам CSS через style, то дефисы удаляются, а следующие за ними буквы пишутся заглавными
в данном случае
backgroundImage

PS это далеко не единственный минуч вашего скрипта изначального.
он ужасен
неизвестно для чего используются eval-ы.к тому же обращение к document.all есть не везде, и не везде оно одинаково работает.
а там, где он есть он в лучшем случае эквивалентен втиорой строчке

Спасибо.:)
Лучше и не брать за эти скрипты, а использовать готовые скрипты. %)

что не брать?
может быть вы хотели сказать "не братся"?

тогда вы будете на каждую строчку JS обращатся на форум за помощью по видоизменению.
это всем очень быстро надоест.

Вот пример сайта http://pasha4ur.narod.ru/. Правда лучше всего открывать в Опере. Я просто старый скрипт из книжки вставил и
за курсором мышки шарики двигаются только в Опере. В ФФ они тупо лежат внизу, а Интернет Эксплоуер начинает тупо тормозить весь комп.

Есть еще пару вопрос, но думаю не стоит создавать темы по ним (а то тупые темки получаться от чайника :)))):
1. Можете дать ссылку, где есть много бесплатных джава-скриптов? А то я на диал-апе уже запарился искать %)
2. Искал в Интернете, но так и не нашел учебник/урок, чтобы понять, что такое блочная верстка. Но это же намного круче тбличной? не подкинете парочку? :)
3. Хотел сделать сайт полупрозрачным (рисунки фоновые в PNG), но в Эксплоуере все же неправильно отображается. Нашел решение для обычных рисунков. Нет ли уже какого-нибудь скрипта, чтобы и фоновые картинки нормально отображались??

Большое спасибо за ответы!!!

1.бесплатные скрипты лучше брать из головы.
потому что на большинстве сайтов с бесплатными скриптами, они устаревши до ужаса.
не знаю сайтов с нормальными скриптами.
вот тут есть , но старье.Если будете использовать, не обращайтесь потом с "скрипт не работает"/"надо переделать" .тут мало у кого есть желание копатся в таком некачественном продукте.
вывод:изучайте сами, и пишите.мы поможем если что.такие задачи нам интереснее разбирать как правило, чем бесплатный хлам
2.тут вроде есть статьи по поводу верстки слоями.не читал,и оченить не могу, так как версткой плотно не занимаюсь
3.не знаю.

Цитата:

Сообщение от pasha4ur

3. Хотел сделать сайт полупрозрачным (рисунки фоновые в PNG), но в Эксплоуере все же неправильно отображается. Нашел решение для обычных рисунков. Нет ли уже какого-нибудь скрипта, чтобы и фоновые картинки нормально отображались??

pngfix
Лично я бы посоветовал решение Виталия Харисова http://company.yandex.ru/experience/ доклад "CSS Framework своими руками: практика"

Gvozd, сорри не могу тебе "+" добавить. Спасибо. Пишет какую-то фигню: "Вы должны поставить кому-то еще перед....."

У меня с программированием что-то совсем тяжко идет. Я больше гумманитарий(в школе учился на медицинском, а в техникум "попал" на программиста, но нас там ничему и не учили). НТМЛ правда дался легко!

Kolyaj, спасибо! Буду читать. Очень хочется прозрачным сделать!

Не можете подсказать, что сделать, чтобы шарики за курсором в ФФ и ИЕ нормально двигались?

Цитата:

Сообщение от pasha4ur

Не можете подсказать, что сделать, чтобы шарики за курсором в ФФ и ИЕ нормально двигались?

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

А вот примерчик менюшки http://wdb.pp.ua/st_js/pl_menu.html Очень интересный эффект!

Спасибо. Действительно очень классно!
Я временно забил на сайт потому, что с шариками возле мышки так и не разобрался :(((
Тупо вырезал код с ними и ставил в любое место: в ФФ лежат внизу, а в Интернет Эксплоуере все прозрачное и тормозит.

Когда создаю новый документ, то там с ИЕ все ок :)

CSS +JavaScript menu

Добрый день,
Я сделал многоуровневое вертикальное css menu с применением Javascript(скрипт писал не я). Проблема в следующем:
Когда наводишь курсор на меню, соответственно появляется следующее подменю и т.д. Проблема в том, что когда я пытаюсь в выпадающем меню попасть курсором на 3 уровень, или 4 уровень подменю, то не получается, всё меню исчезает, точнее возвращается в исходное состояние.
У меня подозрение на скрипт, что то там или некорректно написано, или не хватает. Будьте добры помоги, или посоветуйте, что делать.
Ниже привожу листинг меню, к сожалению не всю структуру, ограничения по количеству вводимых символов))))

<style type="text/css">
.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 190px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
.suckerdiv ul li{
position: relative;
}

/*Sub level menu items */
.suckerdiv ul li ul{
position: absolute;
width: 250px; /*sub menu width*/
top: 0;
visibility: hidden;
}

/* Sub level menu links style */
.suckerdiv ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */;
color: #000000;
text-decoration: none;
padding: 3px 10px;
border: 1px solid #ccc;
border-bottom: 0;
}

.suckerdiv ul li a:visited{
color: black;
}

.suckerdiv ul li a:hover{
background-color: yellow;
}

.suckerdiv .subfolderstyle{
background: url(arrow-list.gif) no-repeat center right;
}

/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */

</style>

<script type="text/javascript">
var menuids=["suckertree1"]

function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
if (ultags[t].parentNode.parentNode.id==menuids[i])
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px"
else
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px"
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
for (var t=ultags.length-1; t>-1; t--){
ultags[t].style.visibility="visible"
ultags[t].style.display="none"
}
}
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)
</script>
<link href="body.css" rel="stylesheet" type="text/css">

<div class="suckerdiv">
<ul id="suckertree1">
<li><span lang="ru"><a href="#">Установка СПО</a></span></li>
<ul>
<li><a href="#">Jeppesen</a></li>
<ul>
<li><a href="Html files/Jetplanner/Установка JetPlanner (Jeppesen).htm">Установка Jetplanner</a></li>
<li><a href="Html files/Jeppesen System Diagnostics/Jeppesen System.htm">JSD</a></li>
<li><a href="Html files/Jeppesen E-link/Jeppesen E-link.htm">Jeppesen E-link</a></li>
<li><a href="Html files/APM/Установка APM live(Jeppesen).htm">Установка APM</a></li>
<li><a href="Html files/APM/Backup базы APM.htm">Backup базы APM</a></li>
<li><a href="Html files/APM/Добавление нового пользователя для доступа к APM .htm">Добавление нового пользователя в APM</a></li>
<li><a href="Html files/Easy Brief/EASY BRIEF(Jeppesen).htm">EASY BRIEF</a></li>

</ul>

</div>