Разворачивающееся меню (в народе Аккордеон) Разворачивающееся меню (в народе Аккордеон) - Архив
Разворачивающееся меню (в народе Аккордеон)
DownLoad_Free

Разворачивающееся меню (в народе Аккордеон) - Архив

Нашли ошибку или
хотите что-то сообщить -
жмите Ctr+Enter Система Orphus



    [Ленточный вид форума] [Поиск] [RSS]



Страница 1 из 11
Архив » История мировых и локальных событий » История развития сайта » Разворачивающееся меню (в народе Аккордеон) (Пункты меню при наведении открывают полное их содержимое)
Разворачивающееся меню (в народе Аккордеон)
Дата: Среда, 21.10.2009, 07:29 | Сообщение # 1
Группа: Администраторы
Сообщений: 1524
<html>
<head>
<style>
img {cursor: pointer;border:0px}
#div1, #div2, #div3, #div4 {float:left;overflow:hidden;width:60px;height:150px;}
#div3 {float:left;overflow:hidden;width:300px;height:150px;}
</style>
</head>

<script>
function func(param) {
div1.style.width=60;
div2.style.width=60;
div3.style.width=60;
div4.style.width=60;

param.style.width=300;
}
</script>

<body>

<div style="position:absolute;top:50px;left:200px;width:500px">
<hr>
<div id=div1 onmouseover="func(div1)" onmouseout='func2(div1)'><img src=1.jpg width=160 class=image id=pic0 align=left>
<li>gggkgkgh
<li>gggkgkgh
<li>gggkgkgh
<li>gggkgkgh
</div>
<div id=div2 onmouseover="func(div2)" onmouseout='func2(div2)'><img src=2.jpg width=160 class=image id=pic1 align=left>
<li>gggkgkgh
<li>gggkgkgh
<li>gggkgkgh
<li>gggkgkgh
</div>
<div id=div3 onmouseover="func(div3)" onmouseout='func2(div3)'><img src=3.jpg width=160 class=image id=pic2 align=left>
<li>gggkgkgh
<li>gggkgkgh
<li>gggkgkgh
<li>gggkgkgh
</div>
<div id=div4 onmouseover="func(div4)" onmouseout='func2(div4)'><img src=4.jpg width=160 class=image id=pic3 align=left>
<li>gggkgkgh
<li>gggkgkgh
<li>gggkgkgh
<li>gggkgkgh
</div>
<div style="clear:both;height:1px"></div>
<hr>
</div>

</body>
</html>
 
Дата: Суббота, 21.07.2012, 14:55 | Сообщение # 2
Группа: Администраторы
Сообщений: 1524
Переписано для варианта с использованием jQuery по наведению и клику

<html>
<head>
<style>
img {cursor: pointer;border:0px;margin:5px 50px 100px 5px;float:left;width:60px;height:60px;}
#div1, #div2, #div3, #div4 {float:left;overflow:hidden;width:60px;height:150px;}
#div3 {float:left;overflow:hidden;width:300px;height:150px;}
.test {overflow:hidden;}
#div1 {background:#0ff;}
#div2 {background:#f00;}
#div3 {background:#00f;color:#fff}
#div4 {background:#ff0;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>

<div style="position:absolute;top:50px;left:200px;width:500px;height:150px;overflow:hidden;">
<hr>
<div id='div1'>
<img src='1.jpg'class='image' oonmouseover="func('#div1')">
<div class="text">
<ul>
<li>gggkgkgh
<li>gggkgkgh
<li>gggkgkgh
<li>gggkgkgh
</ul></div>
</div>
<div id='div2'>
<img src='2.jpg' class='image' oonmouseover="func('#div2')">
<li>gggkgkgh
<li>gggkgkgh
<li>gggkgkgh
<li>gggkgkgh
</div>
<div id='div3'>
<img src='3.jpg' class='image' oonmouseover="func('#div3')">
<li>gggkgkgh
<li>gggkgkgh
<li>gggkgkgh
<li>gggkgkgh
</div>
<div id=div4>
<img src=4.jpg class='image' oonmouseover="func('#div4')">
<li>gggkgkgh
<li>gggkgkgh
<li>gggkgkgh
<li>gggkgkgh
</div>
<div style="clear:both;height:1px"></div>
<hr>

<script>
$("#div1,#div2,#div3,#div4").bind("mouseover", our_function);
function our_function(){
$("#div1,#div2,#div3,#div4").unbind("mouseover");
$("#div1,#div2,#div3,#div4").animate({width:"60px"},500);
$(this).animate({width:"300px"},500,function() {
$("#div1,#div2,#div3,#div4").bind("mouseover", our_function);
});
}


/*$("#div1,#div2,#div3,#div4").bind("click", our_function);
function our_function(){
$("#div1,#div2,#div3,#div4").animate({width:"60px"},500);
$(this).animate({width:"300px"},500);
};
*/

</script>
</body>
</html>
 
Архив » История мировых и локальных событий » История развития сайта » Разворачивающееся меню (в народе Аккордеон) (Пункты меню при наведении открывают полное их содержимое)
Страница 1 из 11
Поиск:


Copyright kachay.ucoz.org © 2008-2016Хостинг от uCoz
^ Наверх ^
Пригодилось!