За последние 24 часа нас посетили 20610 программистов и 977 роботов. Сейчас ищут 720 программистов ...

Мобильное меню и якорь

Тема в разделе "JavaScript и AJAX", создана пользователем shiyri, 3 июн 2024.

  1. shiyri

    shiyri Активный пользователь

    С нами с:
    8 июн 2019
    Сообщения:
    112
    Симпатии:
    0
    Добрый день, подскажите пожалуйста, как закрыть меню, после клика по ссылке якорю, ведь не происходит перезагрузки страницы. До якоря страница проматывается, а потом заново открывается мобильное меню.


    Код (Javascript):
    1. function menu_bottom_line_active() {
    2.     var off = $('#mobile-menu > ul > li.show').offset(),
    3.         left = off.left,
    4.         right = $(window).width() - left - $('#mobile-menu > ul > li.show').width() + $('#mobile-menu > ul > li.show').width();
    5.  
    6.     $('<style>.navbar-wrap > ul > li.show > a::after{width:' + right + 'px;}</style>').appendTo("head");
    7. }
    8.  
    9. menu_bottom_line_active();
    10.  
    11. // Menu bottom line
    12. function menu_bottom_line() {
    13.  
    14.     $("#mobile-menu > ul > li").mouseover(function () {
    15.  
    16.         if ($("#mobile-menu > ul > li").hasClass("active")) {
    17.             $(this).removeClass('active');
    18.         }
    19.  
    20.     $(this).addClass('active');
    21.  
    22.         var off = $('#mobile-menu > ul > li.active').offset(),
    23.             left = off.left,
    24.             right = $(window).width() - left - $('#mobile-menu > ul > li.active').width() + $('#mobile-menu > ul > li.active').width();
    25.  
    26.         $('<style>.navbar-wrap > ul > li.active > a::after,.navbar-wrap > ul > li:hover > a::after{width:' + right + 'px;}</style>').appendTo("head");
    27.     });
    28.  
    29.     $("#mobile-menu > ul > li").mouseleave(function () {
    30.         $(this).removeClass('active');
    31.     });
    32.  
    33. }
    34.  
    35. menu_bottom_line();
    36.  
    37.  
    38. $('#mobile-menu').meanmenu({
    39.     meanMenuContainer: '.mobile-menu',
    40.     meanScreenWidth: "992"
    41. });

    HTML:
    1. <div id="mobile-menu" class="navbar-wrap d-none d-lg-flex">
    2.                   <ul>
    3.                                             <li class="show"><a href="#" >Главная</a>
    4.                                                </li>
    5.                                             <li><a href="#onas"  >О нас</a>                                              
    6.                                             </li>                                                                            
    7.                                             <li><a href="#conc" >Контакты</a></li>
    8.                                         </ul>
    9.                                        
    10.         </div>
     
  2. Vladimir Kheifets

    Vladimir Kheifets Новичок

    С нами с:
    23 сен 2023
    Сообщения:
    291
    Симпатии:
    57
    Адрес:
    Бавария, Германия
    Добрый день!
    Допустим, что у Вас такой код:
    HTML:
    1. <div id="mobile-menu" class="navbar-wrap d-none d-lg-flex">
    2. <ul>
    3.   <li class="show">
    4.     <a href="#" >Главная</a>
    5.   </li>
    6.   <li>
    7.     <a href="#onas">О нас</a>
    8.   </li>  
    9.   <li>
    10.     <a href="#conc" >Контакты</a>
    11.   </li>
    12. </ul>  
    13. </div>
    14. <div id="onas">
    15. <!-- Контент О нас -->
    16. </div>
    17. <div id="conc">
    18. <!-- Контент Контакты -->
    19. </div>
    Для того чтобы закрыть меню, после клика по ссылке, добавьте в JS
    Код (Javascript):
    1. $('#mobile-menu a').on('click', function () {
    2.     $('#mobile-menu').hide();
    3. });
    Однако стоит ещё добавить плавающую кнопку "в начало" и обработчик события "scroll".
    В нём если Y-scroll=0 открывать меню
    Код (Javascript):
    1. $('#mobile-menu').show();
    И ещё совет. Многое из JS можно перенести в CSS используя Media Queries.
    Удачи!