Форум

VasyOK · #1 (**permalink**) 08.12.2017, 15:04

Приветствую специалистов по JS!

Накодил меню. https://jsfiddle.net/PlayboyZP/6exdz9j1/2/

При скроле вниз оно сворачивается в кнопку. Если я открываю Категорию 1 и скролю вниз показывается только кнопка Каталог (свернутая). А как ее развернутой сделать?

https://www.youtube.com/watch?v=tMblPMdIONQ - снял видик про свой вопрос, если он непонятный.

Белый шум · #2 (**permalink**) 08.12.2017, 16:17

if( $(".acc-place").accordion("option", "active") === false ) {
    $( ".mob-acc-place" ).accordion( "option", {active:false} );
} else {
    $( ".mob-acc-place" ).accordion( "option", {active:0} );
    $(".acc-place").css("display", "block");
}

https://jsfiddle.net/psejsz2k/

рони · #3 (**permalink**) 08.12.2017, 16:28

VasyOK,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #blue_menu {
    background-color: #02ACC3;
    color: white;
    font-size: 22px;
    position: relative;
}
.full-size {
    width: 100%;
    float: left;
    clear: both;
}

.mob-acc-header, .acc-header {
    cursor: pointer;
}
.mob-acc-header {   /*Кнопка Каталог*/
    cursor: pointer;
    position: absolute;
    display: none;
    font-weight: bold;
    font-size: 24px;
}
#blue_menu.default.komp .mob-acc-content { /*1-й уровень меню*/
    display: block !important;
}

.btn1, .btn2 {
    float: left;
    text-align: center;
    padding: 0.2em 0;
}
.btn1 {    /*Кнопка меню 1-го уровня*/
    width: 33.33%;
    background-color: #02ACC3;
}
.btn2 {    /*Кнопка меню 2-го уровня*/
    width: 25%;
    font-size: 18px;
    background-color: #189429;
}
.btn1.ui-state-active {
    background-color: #189429;
}
.acc-content { /*2-й уровень меню*/
    position: absolute;
    top: 36px;
    background-color: #189429;
    width: 100%;
}


#blue_menu.fixed {
    position: fixed;
    top: 0;
    left: 0;
    height: 32px;
}

.fixed .mob-acc-header {
    display: block;
}

#blue_menu.fixed .mob-acc-content {
    position: absolute;
    top: 33px;
}

#blue_menu.fixed .btn1 {
    width: 125px;
    clear: left;
    text-align: left;
}

#blue_menu.fixed .acc-content {
    top: 0;
    width: 190px;
    left: 125px;
}

#blue_menu.fixed .btn2 {
    clear: left;
    width: 100%;
}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script>
(function($){
  $(function(){
    /*Кнопка каталог (когда меню свернуто) */
    $( ".mob-acc-place" ).accordion({
        active: false,
        collapsible: true,
        heightStyle: "content",
        header: ".mob-acc-header"
    });

   /*Категория1, Категория2, Категория3*/
   $( ".acc-place" ).accordion({
        active: false,
        collapsible: true,
        heightStyle: "content",
        header: ".acc-header",
        activate:  function(event, ui){
   $( ".mob-acc-place" ).accordion( "option", "active", ui.newPanel.length ? 0 : false).accordion( "refresh" );
   }
    });


    var $menu = $("#blue_menu");
    /*Классы голубого меню: ... */

    /*...1) первоначальные -  при загрузке сайта*/
    if ( $(this).scrollTop() > 43 && $menu.hasClass("default") ){
      $menu.removeClass("default").addClass("fixed");



    } else if($(this).scrollTop() <= 43 && $menu.hasClass("fixed")) {
        $menu.removeClass("fixed").addClass("default");
    }


    /*...2) при скроле*/
    $(window).scroll(function(){
      if ( $(this).scrollTop() > 43 && $menu.hasClass("default") ){
          $menu.removeClass("default").addClass("fixed");
      } else if($(this).scrollTop() <= 43 && $menu.hasClass("fixed")) {
          $menu.removeClass("fixed").addClass("default");
      }

    });


  });

})(jQuery);

  </script>
</head>

<body>


  <div id="blue_menu" class="mob-acc-place default komp full-size">

    <div class="mob-acc-header full-size">Каталог</div>

    <div class="mob-acc-content acc-place full-size">
        <div class="acc-header btn1">Категория 1</div>
        <div class="acc-content">
            <div class="btn2">Подкатегория 1.1</div>
            <div class="btn2">Подкатегория 1.2</div>
            <div class="btn2">Подкатегория 1.3</div>
            <div class="btn2">Подкатегория 1.4</div>
        </div>

        <div class="acc-header btn1">Категория 2</div>
        <div class="acc-content">
            <div class="btn2">Подкатегория 2.1</div>
            <div class="btn2">Подкатегория 2.2</div>
            <div class="btn2">Подкатегория 2.3</div>
            <div class="btn2">Подкатегория 2.4</div>
        </div>

        <div class="acc-header btn1">Категория 3</div>
        <div class="acc-content">
            <div class="btn2">Подкатегория 3.1</div>
            <div class="btn2">Подкатегория 3.2</div>
            <div class="btn2">Подкатегория 3.3</div>
            <div class="btn2">Подкатегория 3.4</div>
        </div>
    </div>

  </div>

  <div id="content" class="full-size">
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed purus aliquet, congue nisi ac, mollis tellus. Cras id ultrices orci. In hac habitasse platea dictumst. Donec urna lorem, tincidunt at vestibulum vel, aliquet tempor dolor. Proin dolor arcu, vestibulum et magna ut, rutrum tincidunt orci. Duis suscipit est ut magna faucibus venenatis. Etiam posuere dui lobortis pulvinar rutrum.
      </p>
      <h2>Крутим вниз</h2>
      <p>
      Mauris lorem erat, fermentum et eleifend in, faucibus consectetur mi. Vestibulum sed ligula a nisi suscipit maximus et ut felis. Phasellus ac finibus tortor. Etiam sed dui porttitor mauris condimentum pharetra. Nullam feugiat ex et leo molestie, eu dignissim nunc ullamcorper. Sed eget sapien sed lectus sodales tincidunt. Proin vestibulum enim a ante placerat, quis semper enim rutrum. Nunc posuere dolor massa, at vestibulum leo lacinia in. Sed tempor justo non maximus viverra. Ut pretium suscipit euismod. In euismod felis nisi, ac sollicitudin turpis fermentum sit amet. Quisque convallis enim eu metus dictum, vel tempus quam venenatis. Praesent ac nisl vitae lacus elementum dictum. Vestibulum id tincidunt lacus, sed efficitur nisi. Phasellus posuere, risus eu pharetra venenatis, lectus velit tincidunt turpis, ac ultrices velit mauris nec ex. Sed ultricies eros et ex efficitur, ut ultricies elit accumsan.
      </p>
      <p>
      Aenean dictum augue ac laoreet cursus. Nulla vitae dui lorem. Vestibulum eu diam at ex dictum interdum. Curabitur condimentum dui consequat sem rhoncus lacinia. Suspendisse potenti. Nunc rhoncus eget mi non dapibus. Aliquam auctor dignissim massa, sagittis condimentum libero accumsan at. Curabitur at ex vitae orci venenatis finibus. Nam nec feugiat urna. Aenean varius consectetur elit, at convallis nisl scelerisque in. Duis justo orci, eleifend et ex eu, sagittis suscipit nunc. Sed tempus rutrum risus, vitae faucibus nibh consequat vitae.
      </p>
      <p>
      Phasellus nunc arcu, commodo at tortor vitae, euismod dapibus massa. Phasellus egestas in nisi eu aliquet. In et risus quis ligula pharetra tempus. Nulla facilisi. Nullam eget accumsan felis. Pellentesque sed justo sapien. Proin consectetur eros sed diam pharetra ullamcorper. Proin ultricies ultrices elit, quis molestie nisi vulputate id. Proin quis iaculis mauris. Sed aliquam suscipit neque, nec pulvinar magna facilisis sed. Pellentesque risus dui, lobortis vel neque ac, pharetra rutrum diam.
      </p>
      <p>
      Suspendisse potenti. Maecenas vestibulum felis at erat molestie, sit amet semper sapien luctus. Proin ut pretium lorem, eu suscipit nunc. Vivamus tincidunt non dui non efficitur. Vestibulum nec faucibus lacus, sit amet porttitor ipsum. Morbi id mollis leo, ut sagittis arcu. Phasellus volutpat nibh diam, a hendrerit nibh mattis tincidunt. Nulla ipsum ante, rutrum ac felis quis, dapibus lobortis sapien. Vivamus magna nisl, rutrum in ante non, interdum molestie diam. Nulla viverra dictum lectus in imperdiet.
      </p>
      <p>
      Suspendisse potenti. Cras a leo sed nisi aliquet consectetur aliquet tincidunt nibh. Sed et purus at mi tempor dictum sed sed dui. Praesent a aliquam lacus, id rhoncus tortor. In placerat augue non sapien cursus, quis egestas metus tincidunt. Aliquam a neque a massa feugiat laoreet non sed felis. Etiam lobortis orci id urna fringilla tempor. Aliquam ultrices magna sed nisi tristique, quis pretium tellus suscipit. In neque orci, pellentesque sodales purus id, fringilla semper dui.
      </p>
      <p>
      Nullam egestas ullamcorper nibh, quis porta metus feugiat vitae. Curabitur tincidunt bibendum rutrum. Maecenas a consequat erat. Donec vel placerat metus, non sodales purus. Suspendisse potenti. Etiam vitae consequat risus, sed egestas sapien. Nullam lacinia enim tellus, vel vehicula diam sagittis at. Aliquam porta, nibh at hendrerit condimentum, nibh arcu semper nisl, non mollis libero nisi ut risus. Aliquam et gravida felis, vitae facilisis ligula. Duis vehicula accumsan finibus. Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut commodo leo ut massa sagittis scelerisque. Aliquam lacus odio, efficitur eget arcu ut, semper maximus enim. Sed odio nisi, ullamcorper ac tortor at, dictum eleifend lectus.
      </p>
      <p>
      Sed et fermentum ligula, sit amet facilisis enim. Duis non nulla gravida, rhoncus nunc eget, ornare ligula. Maecenas aliquet dignissim lobortis. Fusce pretium lacus a lectus feugiat, quis blandit sapien euismod. Aliquam nec semper est. Ut vel ante quis tortor consequat efficitur. Nunc quis laoreet purus. Vivamus et est diam. Etiam posuere hendrerit nunc.
      </p>
      <p>
      Etiam ut faucibus nibh. Sed dui leo, pharetra sed convallis eget, consectetur et diam. Mauris ut vulputate orci, et blandit massa. Fusce pretium ac nulla varius consequat. Etiam aliquam metus nisi, et congue nisi pretium vel. Nam convallis sem orci, interdum eleifend nulla semper auctor. Nam a eros porta, tempus sem in, posuere ipsum. Proin vitae convallis orci.
      </p>
        </div>



</body>
</html>

VasyOK · #4 (**permalink**) 09.12.2017, 12:19

Спасибо за ваши ответы! Благодаря вам моя проблема решена!

Белый шум, https://jsfiddle.net/psejsz2k/ - все класс, Но мобильно меню почему-то сворачивается если в нем всего один уровень открыт.

Чуть переделал

if( $(".acc-place").accordion("option", "active") !== false ) {   
    $( ".mob-acc-place" ).accordion( "option", {active:0} );
    $(".acc-place").css("display", "block");
}

https://jsfiddle.net/PlayboyZP/x0ehvv70/2/ - но тогда первый уровень наоборот показывается когда не надо

Видик: https://youtu.be/KqYSsrcG1xk

Рони этот вариант работает, только меню исчезает в определенных ситуациях.
https://jsfiddle.net/PlayboyZP/6exdz9j1/3/
Видик: https://youtu.be/zolksjvBK8M

рони · #5 (**permalink**) 09.12.2017, 12:46

Сообщение от VasyOK

только меню исчезает в определенных ситуациях

нужен алгоритм, на эти клики, что вы хотите получить?
а так строка 112 в начало добавить

$menu.hasClass("default") &&

VasyOK · #6 (**permalink**) 09.12.2017, 13:04

Рони, честно я не знаю что нужно.

$menu.hasClass("default") &&

тогда получается https://jsfiddle.net/PlayboyZP/zcdg6fkb/
https://youtu.be/zolksjvBK8M - первый "ой" с видео остается. Второго нет.

рони · #7 (**permalink**) 09.12.2017, 13:27

VasyOK,
такой вариант, с переменной open

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #blue_menu {
    background-color: #02ACC3;
    color: white;
    font-size: 22px;
    position: relative;
}
.full-size {
    width: 100%;
    float: left;
    clear: both;
}

.mob-acc-header, .acc-header {
    cursor: pointer;
}
.mob-acc-header {   /*Кнопка Каталог*/
    cursor: pointer;
    position: absolute;
    display: none;
    font-weight: bold;
    font-size: 24px;
}
#blue_menu.default.komp .mob-acc-content { /*1-й уровень меню*/
    display: block !important;
}

.btn1, .btn2 {
    float: left;
    text-align: center;
    padding: 0.2em 0;
}
.btn1 {    /*Кнопка меню 1-го уровня*/
    width: 33.33%;
    background-color: #02ACC3;
}
.btn2 {    /*Кнопка меню 2-го уровня*/
    width: 25%;
    font-size: 18px;
    background-color: #189429;
}
.btn1.ui-state-active {
    background-color: #189429;
}
.acc-content { /*2-й уровень меню*/
    position: absolute;
    top: 36px;
    background-color: #189429;
    width: 100%;
}


#blue_menu.fixed {
    position: fixed;
    top: 0;
    left: 0;
    height: 32px;
}

.fixed .mob-acc-header {
    display: block;
}

#blue_menu.fixed .mob-acc-content {
    position: absolute;
    top: 33px;
}

#blue_menu.fixed .btn1 {
    width: 125px;
    clear: left;
    text-align: left;
}

#blue_menu.fixed .acc-content {
    top: 0;
    width: 190px;
    left: 125px;
}

#blue_menu.fixed .btn2 {
    clear: left;
    width: 100%;
}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script>
(function($){
  $(function(){
    /*Кнопка каталог (когда меню свернуто) */
    $( ".mob-acc-place" ).accordion({
        active: false,
        collapsible: true,
        heightStyle: "content",
        header: ".mob-acc-header"
    });
   var open;
   /*Категория1, Категория2, Категория3*/
   $( ".acc-place" ).accordion({
        active: false,
        collapsible: true,
        heightStyle: "content",
        header: ".acc-header",
        activate:  function(event, ui){ open = ui.newPanel.length;

   }
    });


    var $menu = $("#blue_menu");
    /*Классы голубого меню: ... */

    /*...1) первоначальные -  при загрузке сайта*/
    if ( $(this).scrollTop() > 43 && $menu.hasClass("default") ){
      $menu.removeClass("default").addClass("fixed");



    } else if($(this).scrollTop() <= 43 && $menu.hasClass("fixed")) {
        $menu.removeClass("fixed").addClass("default");
    }


    /*...2) при скроле*/
    $(window).scroll(function(){
      if ( $(this).scrollTop() > 43 && $menu.hasClass("default") ){
          $menu.removeClass("default").addClass("fixed");
          if(open) $menu.accordion( "option", "active",  0 );
      } else if($(this).scrollTop() <= 43 && $menu.hasClass("fixed")) {
          $menu.removeClass("fixed").addClass("default");
      }

    });


  });

})(jQuery);

  </script>
</head>

<body>


  <div id="blue_menu" class="mob-acc-place default komp full-size">

    <div class="mob-acc-header full-size">Каталог</div>

    <div class="mob-acc-content acc-place full-size">
        <div class="acc-header btn1">Категория 1</div>
        <div class="acc-content">
            <div class="btn2">Подкатегория 1.1</div>
            <div class="btn2">Подкатегория 1.2</div>
            <div class="btn2">Подкатегория 1.3</div>
            <div class="btn2">Подкатегория 1.4</div>
        </div>

        <div class="acc-header btn1">Категория 2</div>
        <div class="acc-content">
            <div class="btn2">Подкатегория 2.1</div>
            <div class="btn2">Подкатегория 2.2</div>
            <div class="btn2">Подкатегория 2.3</div>
            <div class="btn2">Подкатегория 2.4</div>
        </div>

        <div class="acc-header btn1">Категория 3</div>
        <div class="acc-content">
            <div class="btn2">Подкатегория 3.1</div>
            <div class="btn2">Подкатегория 3.2</div>
            <div class="btn2">Подкатегория 3.3</div>
            <div class="btn2">Подкатегория 3.4</div>
        </div>
    </div>

  </div>

  <div id="content" class="full-size">
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed purus aliquet, congue nisi ac, mollis tellus. Cras id ultrices orci. In hac habitasse platea dictumst. Donec urna lorem, tincidunt at vestibulum vel, aliquet tempor dolor. Proin dolor arcu, vestibulum et magna ut, rutrum tincidunt orci. Duis suscipit est ut magna faucibus venenatis. Etiam posuere dui lobortis pulvinar rutrum.
      </p>
      <h2>Крутим вниз</h2>
      <p>
      Mauris lorem erat, fermentum et eleifend in, faucibus consectetur mi. Vestibulum sed ligula a nisi suscipit maximus et ut felis. Phasellus ac finibus tortor. Etiam sed dui porttitor mauris condimentum pharetra. Nullam feugiat ex et leo molestie, eu dignissim nunc ullamcorper. Sed eget sapien sed lectus sodales tincidunt. Proin vestibulum enim a ante placerat, quis semper enim rutrum. Nunc posuere dolor massa, at vestibulum leo lacinia in. Sed tempor justo non maximus viverra. Ut pretium suscipit euismod. In euismod felis nisi, ac sollicitudin turpis fermentum sit amet. Quisque convallis enim eu metus dictum, vel tempus quam venenatis. Praesent ac nisl vitae lacus elementum dictum. Vestibulum id tincidunt lacus, sed efficitur nisi. Phasellus posuere, risus eu pharetra venenatis, lectus velit tincidunt turpis, ac ultrices velit mauris nec ex. Sed ultricies eros et ex efficitur, ut ultricies elit accumsan.
      </p>
      <p>
      Aenean dictum augue ac laoreet cursus. Nulla vitae dui lorem. Vestibulum eu diam at ex dictum interdum. Curabitur condimentum dui consequat sem rhoncus lacinia. Suspendisse potenti. Nunc rhoncus eget mi non dapibus. Aliquam auctor dignissim massa, sagittis condimentum libero accumsan at. Curabitur at ex vitae orci venenatis finibus. Nam nec feugiat urna. Aenean varius consectetur elit, at convallis nisl scelerisque in. Duis justo orci, eleifend et ex eu, sagittis suscipit nunc. Sed tempus rutrum risus, vitae faucibus nibh consequat vitae.
      </p>
      <p>
      Phasellus nunc arcu, commodo at tortor vitae, euismod dapibus massa. Phasellus egestas in nisi eu aliquet. In et risus quis ligula pharetra tempus. Nulla facilisi. Nullam eget accumsan felis. Pellentesque sed justo sapien. Proin consectetur eros sed diam pharetra ullamcorper. Proin ultricies ultrices elit, quis molestie nisi vulputate id. Proin quis iaculis mauris. Sed aliquam suscipit neque, nec pulvinar magna facilisis sed. Pellentesque risus dui, lobortis vel neque ac, pharetra rutrum diam.
      </p>
      <p>
      Suspendisse potenti. Maecenas vestibulum felis at erat molestie, sit amet semper sapien luctus. Proin ut pretium lorem, eu suscipit nunc. Vivamus tincidunt non dui non efficitur. Vestibulum nec faucibus lacus, sit amet porttitor ipsum. Morbi id mollis leo, ut sagittis arcu. Phasellus volutpat nibh diam, a hendrerit nibh mattis tincidunt. Nulla ipsum ante, rutrum ac felis quis, dapibus lobortis sapien. Vivamus magna nisl, rutrum in ante non, interdum molestie diam. Nulla viverra dictum lectus in imperdiet.
      </p>
      <p>
      Suspendisse potenti. Cras a leo sed nisi aliquet consectetur aliquet tincidunt nibh. Sed et purus at mi tempor dictum sed sed dui. Praesent a aliquam lacus, id rhoncus tortor. In placerat augue non sapien cursus, quis egestas metus tincidunt. Aliquam a neque a massa feugiat laoreet non sed felis. Etiam lobortis orci id urna fringilla tempor. Aliquam ultrices magna sed nisi tristique, quis pretium tellus suscipit. In neque orci, pellentesque sodales purus id, fringilla semper dui.
      </p>
      <p>
      Nullam egestas ullamcorper nibh, quis porta metus feugiat vitae. Curabitur tincidunt bibendum rutrum. Maecenas a consequat erat. Donec vel placerat metus, non sodales purus. Suspendisse potenti. Etiam vitae consequat risus, sed egestas sapien. Nullam lacinia enim tellus, vel vehicula diam sagittis at. Aliquam porta, nibh at hendrerit condimentum, nibh arcu semper nisl, non mollis libero nisi ut risus. Aliquam et gravida felis, vitae facilisis ligula. Duis vehicula accumsan finibus. Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut commodo leo ut massa sagittis scelerisque. Aliquam lacus odio, efficitur eget arcu ut, semper maximus enim. Sed odio nisi, ullamcorper ac tortor at, dictum eleifend lectus.
      </p>
      <p>
      Sed et fermentum ligula, sit amet facilisis enim. Duis non nulla gravida, rhoncus nunc eget, ornare ligula. Maecenas aliquet dignissim lobortis. Fusce pretium lacus a lectus feugiat, quis blandit sapien euismod. Aliquam nec semper est. Ut vel ante quis tortor consequat efficitur. Nunc quis laoreet purus. Vivamus et est diam. Etiam posuere hendrerit nunc.
      </p>
      <p>
      Etiam ut faucibus nibh. Sed dui leo, pharetra sed convallis eget, consectetur et diam. Mauris ut vulputate orci, et blandit massa. Fusce pretium ac nulla varius consequat. Etiam aliquam metus nisi, et congue nisi pretium vel. Nam convallis sem orci, interdum eleifend nulla semper auctor. Nam a eros porta, tempus sem in, posuere ipsum. Proin vitae convallis orci.
      </p>
     
  </div>



</body>
</html>

Белый шум · #8 (**permalink**) 09.12.2017, 15:26

Сообщение от VasyOK

Но мобильно меню почему-то сворачивается если в нем всего один уровень открыт

Если я правильно понял эту фразу, то: https://jsfiddle.net/psejsz2k/1/

VasyOK · #9 (**permalink**) 10.12.2017, 13:24

Извините что задалбываю. Я действительно изучаю jQuery

.
Не совсем как надо получается.
рони, https://jsfiddle.net/PlayboyZP/vtkvjhsd/
https://youtu.be/zopQp7MX6eg

Белый шум, https://jsfiddle.net/psejsz2k/1/
https://youtu.be/a1bjr8LxXBw

Белый шум · #10 (**permalink**) 10.12.2017, 15:47

VasyOK, https://jsfiddle.net/psejsz2k/2/
??

Форум

Справочник

Discord чат

Курсы javascript