Меню в адаптивном шаблоне (default)

#1 13 июня 2014 в 10:31
Уважаемые Гуру — проясните ситуацию.
Есть стандартный шаблон под ICMS2, при просмотре которого на меньших размерах происходит изменение верстки с "выключением" тех или иных виджетов.
Так вот.
С главным меню все ок — оно превращается в ниспадающее.
Верхнее и нижнее, тоже (с небольшими ковырянием в коде) можно сделать доступным.
А вот как быть с "меню действий", что находится в "боковой колонке".
Ведь при уменьшении размера — оно выключается. И как до него добраться например с мобильных устройств?
Не дублировать же всё в главное меню?.
Подскажите — как быть?
#2 13 июня 2014 в 10:58
В файле theme-layout.css замените 2 строки
  1.  
  2. #body aside { display:none; }
на
  1.  
  2. #body aside { width:100% !important; }
#3 13 июня 2014 в 11:15
Не — не… где это делается я уже разобрался.

Верхнее и нижнее, тоже (с небольшими ковырянием в коде) можно сделать доступным.

Скорпион
Меня интересует другое.
Можно ли его тоже как нибудь модернизировать как например это делается с главным меню.
#4 13 июня 2014 в 11:30
Скорпион, Вот файл который отвечает за вывод Главное меню в виде списка templates\default\js\core.js
  1. var dropdown = $("<select>").appendTo("nav");
  2. $("<option value=''></option>").appendTo(dropdown);
  3.  
  4. $("nav > .menu li > a").each(function() {
  5. var el = $(this);
  6. var nav_level = $("nav > .menu").parents().length;
  7. var el_level = $(this).parents().length - nav_level;
  8. var pad = new Array(el_level-2 + 1).join('-') + ' ';
  9. $("<option>", {
  10. "value" : el.attr("href"),
  11. "text" : pad + el.text()
  12. }).appendTo(dropdown);
  13. });
  14.  
  15. $("nav select").change(function() {
  16. window.location = $(this).find("option:selected").val();
  17. });
  18.  
  19. if ($('.tabs-menu').length){
  20.  
  21. $(".tabs-menu").each(function() {
  22.  
  23. var tabs = $(this);
  24.  
  25. var dropdown = $("<select>").appendTo(tabs);
  26. $("<option value=''></option>").appendTo(dropdown);
  27.  
  28. $("ul > li > a", tabs).each(function() {
  29. var el = $(this);
  30. $("<option>", {
  31. "value" : el.attr("href"),
  32. "text" : el.text()
  33. }).appendTo(dropdown);
  34. });
  35.  
  36. $(dropdown).change(function() {
  37. window.location = $(this).find("option:selected").val();
  38. });
  39.  
  40. });
  41.  
  42. }
В интернете полно готовых адаптивных меню, можете создать свой по принципу этого кода, просто придется немного по экспериментировать с CSS и JS smile
#5 13 июня 2014 в 11:47
Пипец😥
Я просто думал это как-то делается из "коробки".
Спасибо за код — попробую разобраться.Просто для меня это пока темный лес :(
#6 27 октября 2014 в 06:06

Верхнее и нижнее, тоже (с небольшими ковырянием в коде) можно сделать доступным.

Скорпион

А можно, пожалуйста, поподробнее, как сделать доступным в мобильной версии верхнее меню?!
#7 27 октября 2014 в 06:57


Верхнее и нижнее, тоже (с небольшими ковырянием в коде) можно сделать доступным.

Скорпион

А можно, пожалуйста, поподробнее, как сделать доступным в мобильной версии верхнее меню?!

Vladimir

мне кажется вообще верхнее меню — лишнее. Я его просто встроил в главное — вот так — при авторизации оно тоже там, первым выпадающим списком
#8 27 октября 2014 в 06:57

В файле theme-layout.css замените 2 строки
Код PHP:
 
#body aside { display:none; }
на
Код PHP:
 
#body aside { width:100% !important; }

andrey
Насколько я понял, данное изменение включает боковое меню, а не верхнее.
#9 27 октября 2014 в 07:09
Нашёл, в этом же файле меняем похожую строчку.

Файл theme-layout.css
Меняем
#layout header .menu { display:none; }
на
#layout header .menu { width:100% !important; }

Ну и может кому пригодится, чтоб меню появлялось над логотипом нужно строчки поменять местами, в файле main.tpl.php
<div id="logo"><a href="<?php echo href_to_home(); ?>"></a></div>
<?php $this->widgets('header', false, 'wrapper_plain'); ?>
поменять на
<?php $this->widgets('header', false, 'wrapper_plain'); ?>
<div id="logo"><a href="<?php echo href_to_home(); ?>"></a></div>
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.