Меню аккордеон!

[Uncle Fox]

День добрый!

 

Если взять меню, например вот это: http://www.magentawave.com/2012/10/accordion-css3-jquery-menu.html то оно прекрасно работает. Но как только делаешь в меню 8-10 подменю (как только делаешь его достаточно длинным), то при нажатии на пункт страничка сдвигается вверх к этому пункту.

Я думаю дело в якоре? Из за него страница двигается к месту где якорь?

Как от этого избавиться? Зачем нужно меню, которое не работает нормально... Таких меню куча в инете и основа у них одна, список с якорями.

Может можно как-то без якорей сделать? Или я чего-то не понимаю еще.

 

С ув. Uncle Fox.

 

 

[npofopr]

Ну дак у вас ведь вместо "#" будут реальные ссылки. Или вы про какие подменю?

[Uncle Fox]

Наверно я неправильно объясняю.

Вот кусок html:

 

<div class="accordion">

<section id="one">

<h1><a href="#one">Первое меню</a></h1>

<div>

<p><a href="page1.html">Подменю 1</a></p>

<p><a href="page2.html ">Подменю 2</a></p>

<p><a href="page3.html ">Подменю 3</a></p>

</div>

</section>

<section id="two">

<h1><a href="#two">Второе меню</a></h1>

<div>

<p><a href="page4.html ">Подменю 1</a></p>

<p><a href="page5.html ">Подменю 2</a></p>

<p><a href="page6.html ">Подменю 3</a></p>

</div>

</section>

<section id="three">

<h1><a href="#three">Третье меню</a></h1>

<div>

<p><a href="page7.html ">Подменю 1</a></p>

<p><a href="page8.html ">Подменю 2</a></p>

<p><a href="page9.html ">Подменю 3</a></p>

</div>

</section>

</div>

 

Видите? Я так понял якорь нужен для работы меню, для открытия подменю. Тут три якоря, три подменю. На них не будет реальных ссылок. Но якоря указывают места на странице и из-за этого у меня двигается страница?

И css:

 

.accordion{
    position: relative;
    top: 150px;
    left: 85px;
    background-color: ;
    border: ;
    width: 155px;
    padding: 5px;
    /*margin: 0 auto;*/
}
.accordion section{
    border: none;
    border-bottom: 2px dotted #000;
    /*border: 1px solid #539127;*/
    margin: 5px;
    /*background-color: #fff;*/
    background-color: ;
}
.accordion h1, .accordion p{
    margin: 0;
}
.accordion p{
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size: 12px;
    color:#666;
    padding: 5px;
}
.accordion h1 a{
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size: 12px;
    display: block;
    position: relative;
    padding: 5px;
    color: #000;
    text-decoration: none;
}
.accordion h1 a:hover {
    color: #C00;
    background: ;
}
.accordion h1 + div {
    height: 0;
    overflow: hidden;
    -moz-transition: height 0.3s ease-in-out;
    -webkit-transition: height 0.3s ease-in-out;
    -o-transition: height 0.3s ease-in-out;
    transition: height 0.3s ease-in-out;
}
.accordion :target h1 a:after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -3px;
    border-top: 5px solid #333;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}
.accordion :target h1 + div {
    height: auto;
}

Edited October 12, 2014 by Uncle Fox

[Q4Dizzy]

Если у вас стоят в аттрибуте href - #элемент, То вполне логично - что к нему и будет перемещаться...

 

Или суть вашей проблемы в другом?

[Uncle Fox]

Да суть в этом. А как сделать без якорей? Или может обернуть в какой-то div?

Edited October 13, 2014 by Uncle Fox

[npofopr]

Да проще найти другой аккардеон. Их сотни в сети. Отстилизовать под данный пример куда проще будет.

В примере у меня вроде не скачет.

[Uncle Fox]

Не скачет на чистой странице, а если поставить его ниже и левее, как вертикальное меню. И пунктов сделать 8-10 и начнет скакать В инете я много перебрал, у всех один и тот же принцип. Дайте ссылку на аналогичное меню без якорей, буду очень благодарен!

[npofopr]

Да хотя бы вот. Вроде должно работать, только ссылку смените, например на span. http://ruseller.com/lessons.php?rub=2&id=1635

Или вот http://webcloud.se/jQuery-Collapse/

[Uncle Fox]

http://webcloud.se/jQuery-Collapse/ это у меня не заработало , а с http://ruseller.com/...p?rub=2&id=1635 ковыряюсь. Спасибо!

[Uncle Fox]

Уфф... заработало всем спасибо за подсказки.

 

Но у меня еще важный для меня вопрос, касающийся меню: меня сделано, красивое, работает когда по нему пройтись. А вот если нажать на пункт меню и по этому нажатию перейти на другую страничку - то как зафиксировать этот нажатый пункт как??? Этого в примерах кода нет.

 

Вот нашел, это в принципе то, что нужно http://veselov.sumy.ua/825-vydelyaem-tekuschiy-punkt-menyu-otdelnym-stilem-yavoy-jquery.html но мне ни хрена не понятно Объясните для чайника! Или может есть, что-то проще?

Edited November 13, 2014 by Uncle Fox