Форум Сайтостроение Веб-строительство

Помогите, нужен скрипт а ля JQuery Accordion

anton-baton
На сайте с 21.04.2009
Offline
100
anton-baton
882

Коллеги у кого есть хороший скрипт а ля JQuery Accordion.

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

при переходе по пункту открывался соответствующий пунк.

Accordion пробовал, глючит и там css требуется от jquery изза него в эксплорере криво работает.

само меню выглядит так

<h3>Заголовок 1</h3>

<ul>

<li>Пункт 1</li>

<li>Пункт 2</li>

</ul>

<h3>Заголовок 2</h3>

<ul>

<li>Пункт 3</li>

<li>Пункт 4</li>

</ul>

........

wizzer
На сайте с 23.02.2009
Offline
152
wizzer
#1

Решение нужно на jq? Если да, то несколько аналогов аккордеону вроде видел на jstoolbox.com. буду с пк постараюсь найти.

//wizzer Проверенный временем опен впн сервис. (http://openvpn.cc) Перестань переживать за свою анонимность.
ewg777
На сайте с 04.06.2007
Offline
225
ewg777
#2
anton-baton:
Коллеги у кого есть хороший скрипт а ля JQuery Accordion.
Нужно чтоб под заголовками меню при клике по нему появлялись с анимацией пункты меню,
при переходе по пункту открывался соответствующий пунк.
Accordion пробовал, глючит и там css требуется от jquery изза него в эксплорере криво работает.
само меню выглядит так
<h3>Заголовок 1</h3>
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
</ul>
<h3>Заголовок 2</h3>
<ul>
<li>Пункт 3</li>
<li>Пункт 4</li>
</ul>
........

Весь код покажите?

su-root
На сайте с 15.08.2008
Offline
73
su-root
#3

http://anton.shevchuk.name/javascript/jquery-for-beginners-2/

Кто ищет смысл, пусть сидит на небесах - в своих глазах!
B
На сайте с 10.06.2009
Offline
3
borodaa
#4

http://megadancefm.ru оттуда стянуть можно

su-root
На сайте с 15.08.2008
Offline
73
su-root
#5

Под тайтлом 


<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>

<script type="text/javascript">

var menu1 = null;

var menu2 = null;

$(document).ready(function(){

	menu1 = parseInt($(".right").css("top").substring(0,$(".right").css("top").indexOf("px")));

	menu2 = $(window).height() - 96;

	

	$(window).scroll(function () { 

		offset1 = menu1 + $(document).scrollTop() + "px";

		offset2 = menu2 - $('.left .panel').height() + $(document).scrollTop() + "px";

				

		$('.right').animate({top:offset1},{duration:500,queue:false});

		$('.left').animate({top:offset2},{duration:1000,queue:false});

	});

	

	$('.panel ul li ul').hide();

	

    $('.panel ul li:has(ul) > a').click(function() {

        $(this).parent().find('ul').slideToggle();  

        return false;      

    });

	 

    $('a.plus').click(function(){

       $(this).parent().next().find('ul li ul').slideUp('fast');

       return false; 

    });

    

    $('a.minus').click(function(){

       $(this).parent().next().find('ul li ul').slideDown('slow');

       return false; 

    });

    

});

</script>

Стили: 


<style type="text/css">

body {

	margin: 0 auto;

	padding: 0;

	font: 75%/120% Arial, Helvetica, sans-serif;

	background-color:#fff;   

    height:2000px; 

}



.float {

    position:absolute;

    width:160px;

    z-index:10; 

    background: #fff url(images/btn-slide-2.gif) no-repeat center top;

}

.left {

    left: 0px;

    top:20px;

}

.panel{

	margin-top:12px;

	padding-bottom:40px;

	background: #fff url(images/btn-slide.gif) no-repeat center bottom;

}



.panel ul{

    list-style:none;

    margin:0 4px;

    padding:0 10px;

    border-left:2px solid #eee;

    border-right:2px solid #eee;

}



.panel li ul{

	list-style-type: none;	

	margin: 0;

	padding: 0;	

    display: none;

    border:0;

}

.panel li ul li {

	margin: 0 0 0 12px;

	padding: 0;

}

.panel a{

	display: block; 

	padding: 5px 0px;

	text-decoration: none;

	color: #000;

	font-weight: bold;

}

.links {

    margin-top:12px;

    margin-left: 125px;

}

.links a{

	font-weight: bold;

    font-size:1.4em;

    color: #fff;

    text-decoration:none;

}

</style>

Само меню 


<div class="float right">

    <div id="debug"></div>

    <p class="links"><a href="#" class="plus">+</a>/<a href="#" class="minus">-</a></p>

    <div class="panel">

        <ul>

            <li><a href="#" title="Меню 1">Заголовок 1</a>

                <ul>

            	   <li><a href="#" title="Элемент 1">Пункт 1</a></li>

            	   <li><a href="#" title="Элемент 2">Пункт 2</a></li>

            	</ul>

            </li>

            <li><a href="#" title="Меню 2">Заголовок 1</a>

                <ul>

            	   <li><a href="#" title="Элемент 1">Пункт 1</a></li>

            	   <li><a href="#" title="Элемент 2">Пункт 1</a></li>

            	</ul>

            </li>

        </ul>

    </div>

</div>

Поправьте как вам нужно и все!

Будит работать вот так!!!

anton-baton
На сайте с 21.04.2009
Offline
100
anton-baton
#6

su-root, Спасибо как раз подошло че надо))

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий