Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Выпадающее меню на JS (https://javascript.ru/forum/dom-window/42654-vypadayushhee-menyu-na-js.html)

MyBordOf 04.11.2013 17:04

Выпадающее меню на JS
 
Здравствуйте! у меня меню из картинок и ссылок.
При наведении курсором на ссылку, выпадает подменю. Как сделать, чтоб при наведении на картинку выпадало ЭТО ЖЕ подменю?
это можно сделать только с помощью JS?
как мне правильно прописать функцию к данному коду?
Код HTML:
<table class="menu_table"> 
<tr class="menu_table_tr_1"> 
<td class="yacheyka"><a href="/" class="r1"></a></td> 
<td class="yacheyka"><a href="/" class="r2"></a></td> 
<td class="yacheyka"><a href="/" class="r3"></a></td> 
</tr> 
</table> 
<ul class="menu"> 
 
<li class="menu_1"> 
<a href="/about">О КОМПАНИИ</a> 
<ul> 
<li> 
<a href="/">О НАС</a><br> 
</li> 
<li> 
<a href="#">ВАКАНСИИ</a><br> 
</li> 
<li> 
<a href="/" class="brd">ИСТОРИЯ</a> 
</li> 
</ul> 
</li> 
</ul>


Код CSS:
Код:

a.r1 {
background: url(/elements/img/3.jpg) no-repeat;
display: block;
width: 150px;
height: 85px;
margin-left: 39px;
}
a.r1:hover {
background: url(/elements/img/2.jpg) no-repeat;
}
a.r2 {
background: url(/elements/img/5.jpg) no-repeat;
display: block;
width: 150px;
height: 110px;
margin-left: 20px;
}
a.r2:hover {
background: url(/elements/img/4.jpg) no-repeat;
}
a.r3 {
background: url(/elements/img/6.jpg) no-repeat;
display: block;
width: 88px;
height: 66px;
margin-left: 55px;
}
a.r3:hover {
background: url(/elements/img/7.jpg) no-repeat;
}
li.menu_1 {
float: left;
margin-top: -39px;
margin-left: 117px;
font-size: 25px;
font-weight: bold;
z-index: 2;
position: relative;
 
}
li.menu_1 ul {
display: none;
padding-left: 10px;
margin-left: -13px;
font-size: 18px;
text-align: center;
background-color: #2c417d;
opacity: 0.9;
width: 192px;
height: 110px;
}
li.menu_1 ul li {
border: 1px solid #fff;
margin-left: -5px;
width: 100%;
display: block;
border-left: none;
border-right: none;
border-top: none;
padding: 7px 0;
 
}
li.menu_1:hover ul {
display: block;
position: absolute;
}
li.menu_1:hover ul li {
float: none;
}
li.menu_1:hover ul li a {
padding: 6px 0 8px;
color: #fff;
}


Faab 04.11.2013 17:44

Я не вижу "картинки" в вашем HTML. Советую сначало вставить изображения. Потом присвоить им свой id (можно и классы, но в будущем может придётся работать тогда с массивами).

Пример:
<td class="yacheyka">
  <a href="/" class="r1">
    <img src="img/image01.jpg" id="img01">
  </a>
</td>


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

MyBordOf 04.11.2013 18:11

как это не видите? а background? это фон ячейки.
backgroun hover при наведении на ячейку меняется фон, (другая картинка).
Под картинко у меня ссылки, и при наведении на ссылку, выпадает подменю. Хочу чтоб при наведении на картинку тоже выпадало ЭТО ЖЕ подменю

MyBordOf 04.11.2013 18:13

я не знаю как мне написать функцию, помогите пожалуйста

Faab 04.11.2013 18:51

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

Если с JQuery, то так:
$(document).ready(function(){    
  
  $('.yacheyka').mouseover(function(){
     $('li.menu_1 ul').css('display', 'block');
     // тут добавтье нужные CSS свойства 
  });
});


Но для JQuery, нужно подключить JS библеотеку
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>



В JS пока не умею граммотно составить такой скрипт.

MyBordOf 04.11.2013 19:10

спасибо большое)))


Часовой пояс GMT +3, время: 04:22.