Вы здесь

Скрипт сжатия меню в кнопку без jquery?

-1

Уважаемые эксперты разработки!
Я не владею js, на моих друпал сайтах я не писал js-код. Я посмотрел: вес страницы обычного html:
75Кб
вес jquery-min https://developers.google.com/speed/libraries/#jquery
~95Кб

мне jquery и написанные под него js не нужны, так как соц.сеть я не создаю, и приложение через интернет-сайт мне запускать на компьютерах пользователей не надо.

подскажите как сделать главное меню одной кнопкой для адаптивного сайта?

в media responsive theme для этого подключается скрипт js/custom.js с функциями jquery:

jQuery(document).ready(function($) {
  $('.nav-toggle').click(function() {
    $('#main-menu div ul:first-child').slideToggle(250);
    return false;
  });
  if( ($(window).width() > 640) || ($(document).width() > 640) ) {
      $('#main-menu li').mouseenter(function() {
        $(this).children('ul').css('display', 'none').stop(true, true).slideToggle(250).css('display', 'block').children('ul').css('display', 'none');
      });
      $('#main-menu li').mouseleave(function() {
        $(this).children('ul').stop(true, true).fadeOut(250).css('display', 'block');
      })
        } else {
    $('#main-menu li').each(function() {
      if($(this).children('ul').length)
        $(this).append('<span class="drop-down-toggle"><span class="drop-down-arrow"></span></span>');
    });
    $('.drop-down-toggle').click(function() {
      $(this).parent().children('ul').slideToggle(250);
    });
  }

});

хтмл-код меню в этой ттеме такой:

<div class="menu_wrapper">
      <nav id="main-menu"  role="navigation">
        <div class="nav-toggle"><a class="nav-toggle" href="#">☰</a></div>
        <div class="menu-navigation-container">
          <ul class="menu"><li class="first leaf active-trail"><a href="/blogs" title="" class="active-trail active">Блоги</a></li>
<li class="leaf"><a href="/novosti" title="">Новости</a></li>
<li class="expanded"><a href="/o-nas">О нас</a>
<ul class="menu">
<li class="first leaf"><a href="istoria">История успеха</a></li>
<li class="last leaf"><a href="/contact">Связь</a></li>
</ul></li>
<li class="last leaf"><a href="/user" title="">Вход</a></li>
</ul>        </div>
      </nav><!-- end main-menu -->
    </div>

как написать свой скрипт, который будет сжимать меню в кнопку и разворачивать по клику - для адаптивных сайтов?
я просто не знаю где искать, везде я вижу только jquery решения.

93кб мне не хочется грузить.

Версия Drupal: 
7.x
Категория: 
Javascript
Вопрос задан 29.10.2015 - 07:09

Без владения JavaScript + JQuery (или хотя бы другой библиотеки) многие вещи будет сделать или очень сложно, или невозможно.

Комментарий оставлен 29.10.2015 - 11:40

Ответы

0

Быть может потому, что на CSS это сделать в разы сложнее, чем на jQuery? Ищите в эту сторону. Да и потом, «отключить ядровый jQuery?» WTF?! О_о Если так нужна скорость, то прогоните страницы сайта через https://gtmetrix.com — я уверен, что там будет очень много «медленных мест», которые с JS вообще не связаны.

В остальном, https://webref.ru/css/media

Ответ дан 29.10.2015 - 07:44

сжимать с помощью @media в одну кнопку я умею.
я не умею по клику по этой кнопке отображать меню. это можно в сss?

Комментарий оставлен 29.10.2015 - 07:59

а как на телефонах считывать наведение?

Комментарий оставлен 29.10.2015 - 09:51

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

Комментарий оставлен 29.10.2015 - 10:46

спасибо. тогда вопрос решен на 30%
если пользователь компьютера случайно наведет на меню то оно будет вываливаться и мешать обзору

Комментарий оставлен 29.10.2015 - 11:06
0

Чего то я не понял, мы теперь не грузим jQuery который используют скрипты сайта из коробки?

Ответ дан 30.10.2015 - 08:45

да. jquery я не хочу использовать. мне надо сократить объем передачи до минимума. то есть хтмл+ксс+картинки не больше 200Кб.
а джс только по необходимости.

Комментарий оставлен 30.10.2015 - 12:04