Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.06.2016, 10:45
Интересующийся
Отправить личное сообщение для Goopy Посмотреть профиль Найти все сообщения от Goopy
 
Регистрация: 07.06.2016
Сообщений: 11

Скролл активного пункта меню в верх страницы
В 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 - как хотелось бы, зеленым - зона видимости
Изображения:
Тип файла: jpg 1.jpg (36.1 Кб, 3 просмотров)
Тип файла: jpg 2.jpg (27.0 Кб, 3 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 07.06.2016, 11:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

Goopy,
добавить активному пункту scrollintoview
Ответить с цитированием
  #3 (permalink)  
Старый 07.06.2016, 11:53
Интересующийся
Отправить личное сообщение для Goopy Посмотреть профиль Найти все сообщения от Goopy
 
Регистрация: 07.06.2016
Сообщений: 11

Спасибо рони за наводку)

делал так:
<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, где у меня косяк? =(
Ответить с цитированием
  #4 (permalink)  
Старый 07.06.2016, 12:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

Сообщение от Goopy
var elem = document.getElementsByClassName('open');
медитируйте над красным и добавьте необходимое
а это совсем бред
Сообщение от Goopy
elem = document.getElementsByClassName('open',div);
Ответить с цитированием
  #5 (permalink)  
Старый 07.06.2016, 12:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

Goopy,
var elem = document.getElementsByClassName('open')[0]; 
elem && elem.scrollIntoView();
Ответить с цитированием
  #6 (permalink)  
Старый 07.06.2016, 12:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

Меню со скролом к выбранной категории
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>
Ответить с цитированием
  #7 (permalink)  
Старый 07.06.2016, 13:40
Интересующийся
Отправить личное сообщение для Goopy Посмотреть профиль Найти все сообщения от Goopy
 
Регистрация: 07.06.2016
Сообщений: 11

Сообщение от рони Посмотреть сообщение
Goopy,
var elem = document.getElementsByClassName('open')[0]; 
elem && elem.scrollIntoView();
до этого додумался, кроме "elem && " - тут моих знаний, которых нет, не хватило)

а вот дальше - не додумался бы))) спасибо за решение, буду разбираться)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выделение активного пункта меню sergofedor06 jQuery 15 23.11.2015 12:15
Замена стилей класса Павел Турченко Элементы интерфейса 9 30.10.2015 15:24
Бесконечноуровневое меню на CSS ruslan_mart Ваши сайты и скрипты 5 12.01.2015 20:59
Выделение активного пункта меню при ajax запросе faecker AJAX и COMET 6 04.09.2014 19:14
анимация активного пункта меню rustleofstars Элементы интерфейса 0 27.04.2013 17:56