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

 
Посетитель
small user social cms
Медаль
Сообщений: 375
Уважаемые Гуру - проясните ситуацию.
Есть стандартный шаблон под ICMS2, при просмотре которого на меньших размерах происходит изменение верстки с "выключением" тех или иных виджетов.
Так вот.
С главным меню все ок - оно превращается в ниспадающее.
Верхнее и нижнее, тоже (с небольшими ковырянием в коде) можно сделать доступным.
А вот как быть с "меню действий", что находится в "боковой колонке".
Ведь при уменьшении размера - оно выключается. И как до него добраться например с мобильных устройств?
Не дублировать же всё в главное меню?.
Подскажите - как быть?
Обожаю вторую ветку! Взрыв мозга!
Посетитель
small user social cms
Сообщений: 40
В файле theme-layout.css замените 2 строки
Код PHP:
  1.  
  2. #body aside { display:none; }
на
Код PHP:
  1.  
  2. #body aside { width:100% !important; }
Реклама
cms
Посетитель
small user social cms
Медаль
Сообщений: 375
Не - не...где это делается я уже разобрался.
Скорпион:
Верхнее и нижнее, тоже (с небольшими ковырянием в коде) можно сделать доступным.
Меня интересует другое.
Можно ли его тоже как нибудь модернизировать как например это делается с главным меню.
Обожаю вторую ветку! Взрыв мозга!
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1159
Скорпион, Вот файл который отвечает за вывод Главное меню в виде списка templates\default\js\core.js
Код PHP:
  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
Дополнения для InstantCMS 2 | Готовый сайт Доска объявлений
Посетитель
small user social cms
Медаль
Сообщений: 375
Пипец sad
Я просто думал это как-то делается из "коробки".
Спасибо за код - попробую разобраться.Просто для меня это пока темный лес :(
Редактировалось: 2 раз (Последний: 13 июня 2014 в 11:49)
Обожаю вторую ветку! Взрыв мозга!
Посетитель
small user social cms
Медаль
Сообщений: 330
Скорпион:
Верхнее и нижнее, тоже (с небольшими ковырянием в коде) можно сделать доступным.

А можно, пожалуйста, поподробнее, как сделать доступным в мобильной версии верхнее меню?!
Посетитель
small user social cms
МедальКубок зрительских симпатий
Сообщений: 953
Vladimir:

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

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

мне кажется вообще верхнее меню - лишнее. Я его просто встроил в главное - вот так - при авторизации оно тоже там, первым выпадающим списком
Меню в адаптивном шаблоне (default)
Все идет хорошо, только мимо...
Web-Studio «PAL»
БЕСПЛАТНАЯ РАСКРУТКА САЙТОВ
Посетитель
small user social cms
Медаль
Сообщений: 330
andrey:
В файле theme-layout.css замените 2 строки
Код PHP:
 
#body aside { display:none; }
на
Код PHP:
 
#body aside { width:100% !important; }
Насколько я понял, данное изменение включает боковое меню, а не верхнее.
Посетитель
small user social cms
Медаль
Сообщений: 330
Нашёл, в этом же файле меняем похожую строчку.

Файл 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>
Редактировалось: 2 раз (Последний: 27 октября 2014 в 07:49)
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.