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

 
Посетитель
small user social cms
МедальПочетный донор проекта
Сообщений: 738
Нашел время и решил поучиться laugh zst

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



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

Код PHP:
  1. <input type="checkbox" id="hmt" class="hidden-menu-ticker">
  2. <label class="btn-menu" for="hmt">
  3. <span class="first"></span>
  4. <span class="second"></span>
  5. <span class="third"></span>
  6. </label>
  7. <ul class="hidden-menu">
  8. <li><a href="">Link 1</a></li>
  9. <li><a href="">Link 2</a></li>
  10. <li><a href="">Link 3</a></li>
  11. </ul>
Шаблон модуля для меню, у меня таков - mod_menumobil.tpl

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

Код PHP:
  1.  
  2. <ul class="nav">
  3. {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'}" />
  4. {/if}{$item.title}</a>{$last_level=$item.NSLevel}{/foreach}{section name=foo start=0 loop=$last_level step=1}</li>{/section}
  5. </ul>
  6.  
Вот собственно вопрос, как мне вместо
Код PHP:
  1. <span class="first"></span>
вывести менюшку от сайта (пункт)?

Вижу что в стандартном меню прописан класс -
Код PHP:
  1. 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]

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



Мой демо сайт - http://vdione.ru/ меню уже выставил (с лева в верху иконка) Но вот с пунктами беда.
Посетитель
small user social cms
МедальПочетный донор проекта
Сообщений: 738
Господа не обходите стороной плиз)
Реклама
cms
Посетитель
small user social cms
Медаль
Сообщений: 438
Заралик:
Господа не обходите стороной плиз)

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

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

Успехов.
Посетитель
small user social cms
МедальПочетный донор проекта
Сообщений: 738
DeDja:

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

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

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

Успехов.

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

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

Успехов в творчестве.
Посетитель
no avatar
Медаль
Сообщений: 254
DeDja:
А не стандартное мобильное меню может выглядеть так.

Вот это я понимаю! Это ШЕДЕВР! Только вот как с индексацией оно может смотреться
и куда, например, ссылки будут выводиться?
как отдельные страницы (форумы, например) или видео
можно выводить?
Посетитель
small user social cms
Медаль
Сообщений: 438
Заралик:
Вопрос был совершенно в другом

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

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

И как всегда - УСПЕХОВ!
Редактировалось: 1 раз (Последний: 15 декабря 2017 в 08:53)
Посетитель
small user social cms
МедальПочетный донор проекта
Сообщений: 738
DeDja:

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

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

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

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

laugh да менюшку то я сделал, и как установить меню с помощью плагина тоже понятно. Мне нужно в мое меню перенести ссылки от основного меню, вот что я хочу. Да и не в шаблоне дело (и на стандартном тоже могу вывести) но вопрос то так и висит, как вывести в своем меню, меню основное. Может я вопрос не понятно задаю? sad
Посетитель
small user social cms
Медаль
Сообщений: 438
@ivanpolyakov:
Это ШЕДЕВР!

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

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

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

Успехов.
Редактировалось: 1 раз (Последний: 15 декабря 2017 в 09:24)
Посетитель
small user social cms
МедальПочетный донор проекта
Сообщений: 738
laugh в общем спасибо, попробую сам разобраться, вопрос совсем в другом
Редактировалось: 1 раз (Последний: 15 декабря 2017 в 09:47)
Посетитель
small user social cms
Медаль
Сообщений: 438
Заралик:
в общем спасибо...
Доброе слово и кошке приятно ...
@ivanpolyakov:
...как отдельные страницы...

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

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

P.S. Ссылки могут быть внутренними и внешними.
В ШЕДЕВРЕ в последнем пункте меню кубика (УСТАВ КООПЕРАТИВА) нажмите кнопку "ОЗНАКОМИТЬСЯ".
Редактировалось: 3 раз (Последний: 15 декабря 2017 в 11:10)
Посетитель
small user social cms
МедальПочетный донор проекта
Сообщений: 738
В общем есть небольшое решение, при наведении на пункт, под меню выходит - http://vdione.ru/

Немного изменил стили
Код PHP:
  1. .sub-menu{
  2. position: absolute;
  3. top: 5px;
  4. left: 170px;
  5. z-index: 10;
  6. display: none;
  7. width: 150px;
  8. margin: 0;
  9. padding: 0;
  10. list-style: none;
  11. background: #fcf8e3;
  12. }
  13.  
  14. .hidden-menu > li:hover .sub-menu {
  15. display: block;
  16. }
Естественно через ховер.



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

Код PHP:
  1. <input type="checkbox" id="hmt" class="hidden-menu-ticker">
  2. <label class="btn-menu" for="hmt">
  3. <span class="first"></span>
  4. <span class="second"></span>
  5. <span class="third"></span>
  6. </label>
  7. <ul class="hidden-menu">
  8. {if $cfg.show_home}
  9.  
  10. <li{if $menuid==1} class="selected-item"{/if}><a href="/"{if $menuid==1} class="selected-item"{/if}>{$LANG.PATH_HOME}</a></li>{/if}
  11.  
  12. {foreach key=key item=item from=$items}{if $item.NSLevel == $last_level}</li>{/if}
  13.  
  14. {$tail=$last_level-$item.NSLevel}{section name=foo start=0 loop=$tail step=1}</li></ul></li>{/section}
  15.  
  16. {if $item.NSLevel > 1 && $item.NSLevel > $last_level}<ul class="sub-menu">{/if}
  17.  
  18. <li class="{if ($menuid==$item.id || $current_uri == $item.link) || ($currentmenu.NSLeft > $item.NSLeft && $currentmenu.NSRight < $item.NSRight)}selected-item {/if}
  19.  
  20. {$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'}" />
  21. {/if}
  22. {$item.title}</a>{$last_level=$item.NSLevel}{/foreach}{section name=foo start=0 loop=$last_level step=1}</li>{/section}
  23. </ul>

Вместо стандартного -
Код PHP:
  1. <ul class="nav">
переместил кусок кода с меню в класс -
Код PHP:
  1. <ul class="hidden-menu">
В итоге вышло все где надо


Теперь нужно сделать так чтобы под меню открывалось по клику (чсейчас при наведении)на основной пункт. Если кто сможет помочь буду рад!
Редактировалось: 2 раз (Последний: 15 декабря 2017 в 13:17)
Посетитель
small user social cms
Медаль
Сообщений: 438
Заралик:
В итоге вышло все где надо
На сегодня:

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

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

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

А вот оба меню в этом режиме работать не будут (за исключением главной в Вашем меню).
Редактировалось: 1 раз (Последний: 16 декабря 2017 в 07:21)
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.