Нестандартное выпадающее меню

InstantCMS 1.X

#1 20 декабря 2016 в 01:46

Приветствую всех. На форумах спрашиваю советов редко, обычно до всего дохожу сам, но вот из-за меню который месяц откладываю перенос сайта на фреймворк Semantic-UI.Почти все компоненты перевел, осталось только меню. Несколько раз пытался привести меню из вида

<ul class="menu">
  <li>
    <a>Item 1</a>
  </li>
  <li>
    <a>Item 2</a>
  </li>
  <li>
    <a>Item 3</a>
    <ul>
      <li>
        <a>Item 3.1</a>
        <a>Item 3.2</a>
      </li>
    </ul>
  </li>
</ul>

к виду

<div class="ui menu">
  <a class="item">Item 1</a>
  <a class="item">Item 2</a>
  <div class="ui dropdown item">Item 3 
    <div class="menu">
      <a class="item">Item 3.1</a>
      <a class="item">Item 3.2</a>
    </div>
  </div>
</div>

где dropdown — выпадающее меню. Никак не получается победить выпадающее меню по аналогии с дефолтным.

#2 20 декабря 2016 в 04:11

Вы бы хоть скриншоты "неправильного" поведения выложили, чтобы мы представляли, что вас не устраивает.
Все эти фреймворки подсовывают дивам и ссылкам свои css, которые отличаются от дефолтных. Может, проблема в этом?

NOP

#3 20 декабря 2016 в 12:09

Здесь: templates\default\assets\ui\menu.tpl.php не получается сверстать как нужно?

Украинский для инстант

Сегодня в 05:54

#4 20 декабря 2016 в 13:29

Олег Васильевич я, меню из первой ветки необходимо преобразить :)

Странник, неправильного поведения нет😊Есть, с моей стороны, непонимание при адаптации меню из списка в блочный вид. В указанном фреймворке в меню ничего лишнего в стили не подставляется, о фреймворке можно было вовсе не упоминать, он никоим образом не влияет на процесс, будь он обычный html-код с применением нескольких стилей. Не могу разобраться именно в структуре выпадающего меню: в дефолтной структуре пункт содержит в себе выпадающее меню, в то время, как в блочном меню все пункты в виде ссылок, а пункт выпадающего — div с ссылками. Заранее простите за "многотекста", но на скриншотах выйдет гораздо больше и менее информативнее.

Общий вид дефолтного меню

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

Для наглядности убрал пробелы. Обертка <div class="menu">… </div> прописана в шаблоне, поэтому из него мне понадобится только часть отвечающая за сами пункты меню, а именно foreach. Убрал из меню всё лишнее (span, вывод иконок, классы прописываемые через ПУ, классы активного пункта меню). То есть оставил "голое" меню, саму его структуру не изменял.

{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>{/if}
    <li>
      <a href="{$item.link}">
        {$item.title}
      </a>
  {$last_level=$item.NSLevel}
{/foreach}
 
{section name=foo start=0 loop=$last_level step=1}
  </li>
{/section}

От приведенного выше кода я стал отталкиваться и "лепить" блочное меню. Вот что получилось:

{foreach key=key item=item from=$items}
  {if $item.NSLevel == $last_level}
    </a>
  {/if}
  {$tail=$last_level-$item.NSLevel}
  {section name=foo start=0 loop=$tail step=1}
    </div></div>
  {/section}
 
  {if $item.NSLevel > 1 && $item.NSLevel > $last_level}
    <div class="ui dropdown item">{$item.title} 
      <div class="menu">
  {else}
    <a class="item" href="{$item.link}">
      {$item.title}
    </a>
  {/if}
  {$last_level=$item.NSLevel}
{/foreach}
 
{section name=foo start=0 loop=$last_level step=1}
    </div>
{/section}

И результат

На скриншоте видно, что первый подпукнт стал пунктом.

foreach — отвечает понятно за что.
условие if $item.NSLevel == $last_level — последний уровень = последний элемент
не ясны вот эти строчки, но с ними вроде разобрался:
{section name=foo start=0 loop=$tail step=1}{/section}
{section name=foo start=0 loop=$last_level step=1}{/section}

#5 25 декабря 2016 в 12:15

Вновь поднимаю вопрос.
Так и не удалось добиться желаемого результата. Пересторил код в такой вид

{foreach key=key item=item from=$items}
 
  {if $item.NSLevel == $last_level}{/if}
 
  {$tail=$last_level-$item.NSLevel}
 
  {section name=foo start=0 loop=$tail step=1}{/section}
 
  {if $item.NSLevel > 1 && $item.NSLevel > $last_level}
    <div class="ui dropdown item">
      <i class="dropdown icon"></i>
      <div class="menu">
  {/if}
        <a class="item" href="{$item.link}">{if $item.css_class}
          <i class="{$item.css_class} icon"></i>
          {/if}{$item.title}
        </a>
  {if $item.NSLevel > 1 && $item.NSLevel > $last_level}
      </div>
    </div>
  {/if}
 
{/foreach}
 
{section name=foo start=0 loop=$last_level step=1}{/section}

Получился результат

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

{$last_level=$item.NSLevel}

тогда подпунктом становится только первый элемент, а все остальные подпункты в виде пунктов основного меню.

#6 25 декабря 2016 в 12:44

В последней section по идее должно что-то закрываться (строка 15), а у вас пусто, может от этого? в любом случае, "по фотографии" вам никто не вылечит) надо смотреть сам сайт, и использовать метод научного тыка

Услуги | Компонент QUIZ-манагер

#7 25 декабря 2016 в 16:35

Олегсей (aka @dreadmoon), сайт ровным счетом ничего не покажет. Это же не статистическая html-страница, структура которой будет идентична что в редакторе, что при отображении в браузере. Тут надо конкретно знать что за что отвечает, по этой причине и приходится использовать "метод тыка". На скриншотах проще для представления всех результатов, а не одного. Но если надо, залью файлы на какой-нибудь хостинг (сайт на локале).

Вставив в пустые секции цифры

{foreach key=key item=item from=$items}
  {if $item.NSLevel == $last_level}
12
  {/if}
  {$tail=$last_level-$item.NSLevel}
  {section name=foo start=0 loop=$tail step=1}
34
  {/section}
 
  {if $item.NSLevel > 1 && $item.NSLevel > $last_level}
    <div class="ui dropdown item">
      <i class="dropdown icon"></i>
      <div class="menu">
  {/if}
        <a class="item" href="{$item.link}">{if $item.css_class}
          <i class="{$item.css_class} icon"></i>
          {/if}{$item.title}
        </a>
  {if $item.NSLevel > 1 && $item.NSLevel > $last_level}
      </div>
    </div>
	{$last_level=$item.NSLevel}
  {/if}
 
{/foreach}
 
{section name=foo start=0 loop=$last_level step=1}
56
{/section}

получил такой результат.

То есть последний section дублирует значение, и будь там вставлен закрывающий </div>, будет два закрывающих тега. И как избежать дублирования — хотя бы это узнать.

#8 25 декабря 2016 в 18:10

Вам возможно для начала код в песочнице разместить, нагляднее было бы.

Разработка мобильных приложений

#9 25 декабря 2016 в 18:42

html

Спойлер

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

css

Спойлер

#topmenu{
    margin-top:15px;
    margin-bottom:10px;
    background:url(../images/menubar.jpg) repeat-x center bottom;
    border-radius:4px;
    box-shadow: 0 0 5px #333;
    width:940px;
    clear: both;
    display:table;
    table-layout: fixed;
}
#topmenu .menu{ list-style:none; margin:0; padding:0; position:relative; }
#topmenu .menu .li a{ text-decoration:none; }
#topmenu .menu .li{
    list-style:none;
    margin:0;
    padding:0;
    height:40px;
    line-height:40px;
    display:block;
	zoom: 1;
    font-size:18px;
    float:left;
 
}
 
#topmenu .menu .li.selected{
    background:url(../images/menubg.jpg) repeat-x left top #375E93;
}
 
#topmenu .menu .li.selected a.selected{
    color:#fff;
    text-decoration:none;
    text-shadow:0 1px 0 #000;
}
 
#topmenu .menu .li a:hover,
#topmenu .menu .li a.hover{
    background:url(../images/menubg-hover.jpg) repeat-x center top #375E93;
    color:#000 !important;
    text-shadow:0 1px 0px #FFF !important;
}
 
#topmenu .menu .li a{
    padding:0px 10px;
    color:#1F3451;
    height:40px;
    line-height:40px;
    display:block;
}
 
#topmenu .menu .li .inmenu {
    display:none;
    position: absolute;
    top: 40px;
	width: 200px;
	background: #E9E9E9;
	color: #000;
    padding:0px;
    z-index:1000;
    box-shadow:1px 1px 3px #333;
}
#topmenu .menu .li .inmenu .li ul {
    display:none;
    top:0;
    left:200px;
	width: 200px;
	background: #E9E9E9;
	color: #000;
    padding:0px;
    z-index:1000;
    box-shadow:1px 1px 3px #333;
}
 
#topmenu .menu .li .inmenu .li,  #topmenu .menu .li .inmenu .li a{
    display:block;
    width:100%;
    position:relative;
}
 
#topmenu .menu .li .inmenu .li a{
    padding:0px !important;
    text-decoration:none;
}
#topmenu .menu .li .inmenu .li a span{
    margin:0px 10px;
    padding:0px;
}
 
#topmenu .menu .li .inmenu .li a.selected span{
    text-decoration:none;
}

js в template.php

Спойлер

        $(function(){
            $('#sess_messages').hide().fadeIn();
            $('#topmenu .menu .li, #usermenu .li').hover(
                function() {
                    $(this).find('.inmenu:first').fadeIn('fast');
                    $(this).find('a:first').addClass("hover");
                },
                function() {
                    $(this).find('.inmenu:first').hide();
                    $(this).find('a:first').removeClass("hover");
                }
            );
        });

Но не забудьте, что есть ещё меню пользователя и стили для него тоже править надо.

Разработка мобильных приложений

#10 25 декабря 2016 в 19:09

Lora, было бы наглядней, если бы в песочнице переменные и условия движка работали, ведь именно в них весь "заковыр") laugh

Конечно спасибо, попробовал собрать по вашему примеру

{foreach key=key item=item from=$items}
  {if $item.NSLevel == $last_level}
    </div>
  {/if}
  {$tail=$last_level-$item.NSLevel}
 
  {section name=foo start=0 loop=$tail step=1}
    </div></div></div>
  {/section}
 
  {if $item.NSLevel > 1 && $item.NSLevel > $last_level}
    <div class="ui dropdown item">
      <i class="dropdown icon"></i>
      <div class="menu">
  {/if}
        <a class="item" href="{$item.link}">{if $item.css_class}
          <i class="{$item.css_class} icon"></i>
          {/if}{$item.title}
        </a>
	{$last_level=$item.NSLevel}
{/foreach}
 
{section name=foo start=0 loop=$last_level step=1}
    </div>
{/section}

но где-то идёт расхождение дивов :(

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

#11 25 декабря 2016 в 19:56

Пример я вам рабочий скинул. Сначала проверил на 1.10.7

Разработка мобильных приложений

Запрос к БД

Зависимые поля в instantcms 2

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

Нестандартное выпадающее меню

Похожие темы

Пропадает выпадающий список

Как исправить? В выпадающем chosen на мобилке не показывается плесхолдер "Выбрать".

Помощь в дебаге фотоальбомов и загрузке фотографий

[ЕСТЬ РЕШЕНИЕ] Вопрос по связям типов контента

[ЕСТЬ РЕШЕНИЕ] Главное меню перекрывает Выпадающее меню пользователя

Как вывести категории контента в горизонтальном меню

InstantCMS Team

О проекте

Поддержка

Дополнения