Прошу помочь в создании мобильного меню на ксс

InstantCMS 1.X

#1 14 декабря 2017 в 16:54

Нашел время и решил поучиться laugh

Задача такая, на сайте создать мобильное меню, которое выезжает с лева при клике на иконку.

Само меню вот (стили не выкладываю поскольку трудности не в этом)

  <input type="checkbox" id="hmt" class="hidden-menu-ticker">
<label class="btn-menu" for="hmt">
  <span class="first"></span>
  <span class="second"></span>
  <span class="third"></span>
</label>
<ul class="hidden-menu">
  <li><a href="">Link 1</a></li>  
  <li><a href="">Link 2</a></li>
  <li><a href="">Link 3</a></li>  
</ul>

Шаблон модуля для меню, у меня таков — mod_menumobil.tpl

В данном шаблоне есть стандартное меню -

 
<ul class="nav">
{if $cfg.show_home}<li{if $menuid==1} class="selected-item"{/if}><a href="/"{if $menuid==1} class="selected-item"{/if}>{$LANG.PATH_HOME}</a></li>{/if}{foreach key=key item=item from=$items}{if $item.NSLevel == $last_level}</li>{/if}{$tail=$last_level-$item.NSLevel}{section name=foo start=0 loop=$tail step=1}</li></ul></li>{/section}{if $item.NSLevel > 1 && $item.NSLevel > $last_level}<ul class="sub-menu">{/if}<li class="{if ($menuid==$item.id || $current_uri == $item.link) || ($currentmenu.NSLeft > $item.NSLeft && $currentmenu.NSRight < $item.NSRight)}selected-item {/if}{$item.css_class}"><a href="{$item.link}" target="{$item.target}"{if ($menuid==$item.id || $current_uri == $item.link)} class="selected-item"{/if} title="{$item.title|escape:'html'}">{if $item.iconurl}<img src="/images/menuicons/{$item.iconurl}" alt="{$item.title|escape:'html'}" /> 
{/if}{$item.title}</a>{$last_level=$item.NSLevel}{/foreach}{section name=foo start=0 loop=$last_level step=1}</li>{/section}
</ul>

Вот собственно вопрос, как мне вместо

 <span class="first"></span>

вывести менюшку от сайта (пункт)?

Вижу что в стандартном меню прописан класс —

 selected-item

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

Чтобы я смог вставить их в конструкцию напрмиер такую, где будет под меню и главное меню (пункт меню)

<li class="has-children">
<input type="checkbox" name =" каб" id="sub-group-8">
<label for="sub-group-8"> каб</label>

<ul>
<li><a href="/kabinety">каб</a></li>
<li><a href="/s">М</a></li>
</ul>
</li>
<li class="has">
<a href="/mfu">Прин</a>
</li>
<li class="has">
<a href="/sh">Дом</a>
</li> [/code]

Надеюсь понятно задал вопрос?

Мой демо сайт — vdione.ru/ меню уже выставил (с лева в верху иконка) Но вот с пунктами беда.

www.tvent.ru

#2 14 декабря 2017 в 20:56

Господа не обходите стороной плиз)

www.tvent.ru

#3 14 декабря 2017 в 22:21

Господа не обходите стороной плиз)
Заралик

Да — однако! Взглянув на Ваш демо сайт я "сгонял" на REG.RU с целью показать свои первые отладочные "поделки" на реальном хостинге.
Похоже Вы используете сборку 1.10.7.004 с шаблоном А. Токарева (видно по ошибкам сборки в меню).
Главное — шаблон является АДАПТИВНЫМ и работает на всех устройствах (хотя косяков там много).

Смотреть тут. Там три различных шаблона. Шаблон basic_free выглядит так:
.

Успехов.

Сегодня в 01:23

#4 14 декабря 2017 в 22:32

Господа не обходите стороной плиз)
Заралик

Да — однако! Взглянув на Ваш демо сайт я "сгонял" на REG.RU с целью показать свои первые отладочные "поделки" на реальном хостинге.
Похоже Вы используете сборку 1.10.7.004 с шаблоном А. Токарева (видно по ошибкам сборки в меню).
Главное — шаблон является АДАПТИВНЫМ и работает на всех устройствах (хотя косяков там много).

Смотреть тут. Там три различных шаблона. Шаблон basic_free выглядит так:
.

Успехов.

DeDja

Здравствуйте! Вопрос был совершенно в другом., Мне на шаблон вообще плевать, он как донор стоит. Мне нужно про меню понять, как его вывести в своих стилях, у Вас же меню стоит стандартное от этого шаблона.

www.tvent.ru

#5 14 декабря 2017 в 22:50

… меню стоит стандартное...
Заралик

Я обратил Ваше внимание — там можно из трёх шаблонов выбрать и не стандартный (по компоновке, цвету — т.е. КСС).
А не стандартное мобильное меню может выглядеть так.

Успехов в творчестве.

#6 15 декабря 2017 в 08:48

А не стандартное мобильное меню может выглядеть так.
DeDja

Вот это я понимаю! Это ШЕДЕВР! Только вот как с индексацией оно может смотреться
и куда, например, ссылки будут выводиться?
как отдельные страницы (форумы, например) или видео
можно выводить?

#7 15 декабря 2017 в 08:49

Вопрос был совершенно в другом
Заралик

Мне кажется (возможно глюки), что начинать следует не с донора (АДАПТИВНОГО), а с чистого листа!

Возможно поможет:
Создание выдвигающегося меню
ПОСМОТРЕТЬ ПРИМЕР СКАЧАТЬ
www.sitehere.ru/sozdanie-vydvigayushhegosya-menyu
www.sitehere.ru/examples/22.10.2013-menu-v/index.htm

И как всегда — УСПЕХОВ!

#8 15 декабря 2017 в 08:58

Вопрос был совершенно в другом
Заралик

Мне кажется (возможно глюки), что начинать следует не с донора (АДАПТИВНОГО), а с чистого листа!

Возможно поможет:
Создание выдвигающегося меню
ПОСМОТРЕТЬ ПРИМЕР СКАЧАТЬ
www.sitehere.ru/sozdanie-vydvigayushhegosya-menyu
www.sitehere.ru/examples/22.10.2013-menu-v/index.htm

И как всегда — УСПЕХОВ!

DeDja

да менюшку то я сделал, и как установить меню с помощью плагина тоже понятно. Мне нужно в мое меню перенести ссылки от основного меню, вот что я хочу. Да и не в шаблоне дело (и на стандартном тоже могу вывести) но вопрос то так и висит, как вывести в своем меню, меню основное. Может я вопрос не понятно задаю? sad

www.tvent.ru

#9 15 декабря 2017 в 09:07

Это ШЕДЕВР!
@ivanpolyakov

Жаль, что это не мой шедевр. Он "слизан" (прислушался к советам на форуме) отсюда.

куда, например, ссылки будут выводиться?
как отдельные страницы (форумы, например) или видео
можно выводить?
@ivanpolyakov

Куда Вы направите ссылки, туда и будут. А видео возможно открыть и в малом отдельном окне — см. шаблон basic_free и
там нажмите "кнопочку" рядом с "лого".

Успехов.

#10 15 декабря 2017 в 09:46

в общем спасибо, попробую сам разобраться, вопрос совсем в другом

www.tvent.ru

#11 15 декабря 2017 в 10:36

в общем спасибо...
Заралик

Доброе слово и кошке приятно ...

… как отдельные страницы...
@ivanpolyakov

С ссылками всё просто (как мыло)! Если Вы обратили внимание в ШЕДЕВРЕ и в примере меню (ссылка, которая была дана)
при нажатии на пункт меню выскакивает заглушка (#). Она должна быть заменена на реальные ссылки (от главной до форума):
/
/novosti
/stati
/photos
......
/catalog
/board
/users
/forum
Примечание: на главную страницу можно делать переход, либо она будет самостоятельно грузится сразу.

И всё! Успехов!

P.S. Ссылки могут быть внутренними и внешними.
В ШЕДЕВРЕ в последнем пункте меню кубика (УСТАВ КООПЕРАТИВА) нажмите кнопку "ОЗНАКОМИТЬСЯ".

#12 15 декабря 2017 в 13:12

В общем есть небольшое решение, при наведении на пункт, под меню выходит — vdione.ru/

Немного изменил стили

 .sub-menu{
	 position: absolute;
    top: 5px;
    left: 170px;
    z-index: 10;
    display: none;
    width: 150px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #fcf8e3;
}
 
.hidden-menu > li:hover .sub-menu {
    display: block;
}

Естественно через ховер.

Да и решение, на мой вопрос —

 <input type="checkbox" id="hmt" class="hidden-menu-ticker">
<label class="btn-menu" for="hmt">
  <span class="first"></span>
  <span class="second"></span>
  <span class="third"></span>
</label>
<ul class="hidden-menu">
  {if $cfg.show_home}
 
<li{if $menuid==1} class="selected-item"{/if}><a href="/"{if $menuid==1} class="selected-item"{/if}>{$LANG.PATH_HOME}</a></li>{/if}
 
{foreach key=key item=item from=$items}{if $item.NSLevel == $last_level}</li>{/if}
 
{$tail=$last_level-$item.NSLevel}{section name=foo start=0 loop=$tail step=1}</li></ul></li>{/section}
 
{if $item.NSLevel > 1 && $item.NSLevel > $last_level}<ul class="sub-menu">{/if}
 
<li class="{if ($menuid==$item.id || $current_uri == $item.link) || ($currentmenu.NSLeft > $item.NSLeft && $currentmenu.NSRight < $item.NSRight)}selected-item {/if}
 
{$item.css_class}"><a href="{$item.link}" target="{$item.target}"{if ($menuid==$item.id || $current_uri == $item.link)} class="selected-item"{/if} title="{$item.title|escape:'html'}">{if $item.iconurl}<img src="/images/menuicons/{$item.iconurl}" alt="{$item.title|escape:'html'}" /> 
{/if}
{$item.title}</a>{$last_level=$item.NSLevel}{/foreach}{section name=foo start=0 loop=$last_level step=1}</li>{/section}
</ul>

Вместо стандартного —

 <ul class="nav">

переместил кусок кода с меню в класс —

 <ul class="hidden-menu">

В итоге вышло все где надо

Теперь нужно сделать так чтобы под меню открывалось по клику (чсейчас при наведении)на основной пункт. Если кто сможет помочь буду рад!

www.tvent.ru

#13 16 декабря 2017 в 07:15

В итоге вышло все где надо
Заралик

На сегодня:

1. Войти в админку сайта и для шаблона "ДОНОРА" в Модулях найти Меню авторизации.
Там изменить шаблон модуля вывода с module.tpl (он определен для дефолтного) на module_simple.tpl.
В результате не будет белой рамки вокруг Войти Регистрация (а на мобилах белого квадрата под юзером).
"ДОНОР" будет выглядеть в первозданном виде!
2. Убедиться, что при нажатии в Вашем меню на Статьи "вылазит" — #submenu.
3. В Вашем браузере используя правую кнопку мышки — Просмотреть код элемента, можно эмулировать
(иконкой, либо сочетанием клавиш) работу сайта в желаемом мобильном устройстве.
Как это будет выглядеть (к примеру) можно видеть на скриншоте:

Будет видно, что "родная" кнопка меню (выпадающего списка) выглядит "пригляднее".

А вот оба меню в этом режиме работать не будут (за исключением главной в Вашем меню).

Как реализовать?

Как сделать мобильную версию m

Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

Прошу помочь в создании мобильного меню на ксс

Похожие темы

[ЕСТЬ РЕШЕНИЕ] Мобильное меню на шаблоне Boxed

отличие мобильного меню в версии 2.13 от обновления

Правка стилей мобильного меню в default теме

Отображение рекламы на мобильном

Окно личных сообщений в мобильной версии

[ЕСТЬ РЕШЕНИЕ] Карта сайта

InstantCMS Team

О проекте

Поддержка

Дополнения