Скролл активного пункта меню в верх страницы
Вложений: 2
В javascript я совсем не силен, может поможет кто)))
Имеем меню с подменю:
<body>
<ul class="accordion">
<li>
<div class="link"><div class="text">Пункт 1</div></div>
<ul class="submenu">
<li><a href="#">Подпункт 1</a></li>
<li><a href="#">Подпункт 2</a></li>
<li><a href="#">Подпункт 3</a></li>
<li><a href="#">Подпункт 4</a></li>
<li><a href="#">Подпункт 5</a></li>
</ul>
</li>
<li>
<div class="link"><div class="text">Пункт 2</div></div>
<ul class="submenu">
<li><a href="#">Подпункт 1</a></li>
<li><a href="#">Подпункт 2</a></li>
<li><a href="#">Подпункт 3</a></li>
<li><a href="#">Подпункт 4</a></li>
</ul>
</li>
......... и так далее.............
<li>
<div class="link"><div class="text">Пункт N</div></div>
<ul class="submenu">
<li><a href="#">Подпункт 1</a></li>
<li><a href="#">Подпункт 2</a></li>
<li><a href="#">Подпункт 3</a></li>
<li><a href="#">Подпункт 4</a></li>
</ul>
</li>
</ul>
</body>
как сделать так, чтобы активный пункт меню, развернутый, не раскрывался на месте, а скроллился на высоту включенный в себя подпунктов, но не выходил за пределы видимой области... наглядно на аттачах - аттач 2 - как хотелось бы, зеленым - зона видимости |
Goopy,
добавить активному пункту scrollintoview |
Спасибо рони за наводку)
делал так:
<li onclick="totop();">
<div class="link"><div class="text">Пункт 1</div></div>
<ul class="submenu">
<li><a href="#">Подпункт 1</a></li>
<li><a href="#">Подпункт 2</a></li>
<li><a href="#">Подпункт 3</a></li>
<li><a href="#">Подпункт 4</a></li>
<li><a href="#">Подпункт 5</a></li>
</ul>
</li>
то же самое и применял к <div class="link">... также на меню висит еще один скрипт для меню
$(function() {
var Accordion = function(el, multiple) {
this.el = el || {};
this.multiple = multiple || false;
var links = this.el.find('.link');
links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
}
Accordion.prototype.dropdown = function(e) {
var $el = e.data.el;
$this = $(this),
$next = $this.next();
$next.slideToggle();
$this.parent().toggleClass('open');
if (!e.data.multiple) {
$el.find('.submenu').not($next).slideUp().parent().removeClass('open');
};
}
var accordion = new Accordion($('#accordion'), false);
});
скрипт скачан из сети... под ним я добавил следующее:
$(function totop(){
var elem = document.getElementsByClassName('open');
elem.scrollIntoView();
});
не сработало, также попытался так:
$(function totop(){
var div = document.getElementsById("accordion");
elem = document.getElementsByClassName('open',div);
elem.scrollIntoView();
});
скрипт аккордеона назначает активному элементу li класс open, следовательно, нужно искать его и его же двигать вверх с помощью scrollIntoView... или я ошибаюсь? в общем, мой результат = 0, где у меня косяк? =( |
Цитата:
а это совсем бред Цитата:
|
Goopy,
var elem = document.getElementsByClassName('open')[0];
elem && elem.scrollIntoView();
|
Меню со скролом к выбранной категории
Goopy,
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
li ul {
display: none;
}
body{
height: 1000px;
position: relative;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function() {
$("li").click(function(b) {
b.stopPropagation();
var a = $(this);
a.parent().find("li ul:visible").slideUp(600);
a.children("ul").is(":hidden") && a.children("ul").slideDown(600, function() {
$("body, html").stop(!0, !0).animate({
scrollTop: a.offset().top
}, 800)
})
})
});
</script>
</head>
<body>
<ul class='left_nav_menu' id='nav_menu_content'>
<li><a href='#0'>Категория_1</a>
<ul>
<li><a href="#">Подкатегория_1</a>
<ul>
<li><a href="#">Подподкатегория_1</a></li>
</ul>
</li>
<li><a href="#">Подкатегория_2</a>
<ul>
<li><a href="#">Подподкатегория_2</a></li>
<li><a href="#">Подподкатегория_3</a></li>
</ul>
</li>
<li><a href="#">Подкатегория_3</a>
<ul>
<li><a href="#">Подподкатегория_4</a></li>
<li><a href="#">Подподкатегория_5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#0'>Категория_2</a>
<ul>
<li><a href="#">Подкатегория_4</a>
<ul class="material_cat">
<li><a href="#">Подподкатегория_6</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li>Подарки
<ul>
<li>Сувенирные изделия
<ul >
<li>Музыкальные</li>
<li>Шкатулки</li>
<li>Из дерева</li>
<li>Металлические</li>
</ul>
</li>
<li>Цветы
<ul>
<li>Розы
<ul >
<li>Чайная</li>
<li>Махровая</li>
<li>Чёрная</li>
</ul>
</li>
<li>Подарочные цветы
<ul >
<li>Гвоздика</li>
<li>Лилия</li>
<li>Орхидея</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
|
Цитата:
а вот дальше - не додумался бы))) спасибо за решение, буду разбираться) |
| Часовой пояс GMT +3, время: 01:17. |