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

 
Посетитель
small user social cms
Сообщений: 5
Приветствую всех. На форумах спрашиваю советов редко, обычно до всего дохожу сам, но вот из-за меню который месяц откладываю перенос сайта на фреймворк Semantic-UI.Почти все компоненты перевел, осталось только меню. Несколько раз пытался привести меню из вида
Код HTML:
  1. <ul class="menu">
  2. <li>
  3. <a>Item 1</a>
  4. </li>
  5. <li>
  6. <a>Item 2</a>
  7. </li>
  8. <li>
  9. <a>Item 3</a>
  10. <ul>
  11. <li>
  12. <a>Item 3.1</a>
  13. <a>Item 3.2</a>
  14. </li>
  15. </ul>
  16. </li>
  17. </ul>
к виду
Код HTML:
  1. <div class="ui menu">
  2. <a class="item">Item 1</a>
  3. <a class="item">Item 2</a>
  4. <div class="ui dropdown item">Item 3
  5. <div class="menu">
  6. <a class="item">Item 3.1</a>
  7. <a class="item">Item 3.2</a>
  8. </div>
  9. </div>
  10. </div>
где dropdown - выпадающее меню. Никак не получается победить выпадающее меню по аналогии с дефолтным.
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатий
Сообщений: 1981
Вы бы хоть скриншоты "неправильного" поведения выложили, чтобы мы представляли, что вас не устраивает.
Все эти фреймворки подсовывают дивам и ссылкам свои css, которые отличаются от дефолтных. Может, проблема в этом?
NOP
Реклама
cms
Посетитель
small user social cms
МедальПочетный донор проектаКубок зрительских симпатийАвторитет форумаПочетный донор проекта
Сообщений: 2821
на сайте
Здесь: templates\default\assets\ui\menu.tpl.php не получается сверстать как нужно?
Украинский для инстант
Посетитель
small user social cms
Сообщений: 5
Олег Васильевич я, меню из первой ветки необходимо преобразить :)

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

Общий вид дефолтного меню
Код HTML:
  1. <ul id="{$menu}" class="menu">
  2. {if $cfg.show_home}
  3. <li {if $menuid==1}class="selected"{/if}>
  4. <a href="/" {if $menuid==1}class="selected"{/if}><span>{$LANG.PATH_HOME}</span></a>
  5. </li>
  6. {/if}
  7. {foreach key=key item=item from=$items}
  8. {if $item.NSLevel == $last_level}</li>{/if}
  9. {$tail=$last_level-$item.NSLevel}
  10. {section name=foo start=0 loop=$tail step=1}
  11. </li></ul></li>
  12. {/section}
  13.  
  14. {if $item.NSLevel > 1 && $item.NSLevel > $last_level}<ul>{/if}
  15. <li class="{$item.css_class} {if ($menuid==$item.id || $current_uri == $item.link) || ($currentmenu.NSLeft > $item.NSLeft && $currentmenu.NSRight < $item.NSRight)}selected{/if}">
  16. <a href="{$item.link}" target="{$item.target}" {if ($menuid==$item.id || $current_uri == $item.link)}class="selected"{/if} title="{$item.title|escape:'html'}">
  17. <span>
  18. {if $item.iconurl}<img src="/images/menuicons/{$item.iconurl}" alt="{$item.title|escape:'html'}" />{/if}
  19. {$item.title}
  20. </span>
  21. </a>
  22. {$last_level=$item.NSLevel}
  23. {/foreach}
  24. {section name=foo start=0 loop=$last_level step=1}
  25. </li>
  26. {/section}
  27. </ul>
Для наглядности убрал пробелы. Обертка <div class="menu"> ... </div> прописана в шаблоне, поэтому из него мне понадобится только часть отвечающая за сами пункты меню, а именно foreach. Убрал из меню всё лишнее (span, вывод иконок, классы прописываемые через ПУ, классы активного пункта меню). То есть оставил "голое" меню, саму его структуру не изменял.
Код HTML:
  1. {foreach key=key item=item from=$items}
  2. {if $item.NSLevel == $last_level}
  3. </li>
  4. {/if}
  5. {$tail=$last_level-$item.NSLevel}
  6. {section name=foo start=0 loop=$tail step=1}
  7. </li></ul></li>
  8. {/section}
  9.  
  10. {if $item.NSLevel > 1 && $item.NSLevel > $last_level}<ul>{/if}
  11. <li>
  12. <a href="{$item.link}">
  13. {$item.title}
  14. </a>
  15. {$last_level=$item.NSLevel}
  16. {/foreach}
  17.  
  18. {section name=foo start=0 loop=$last_level step=1}
  19. </li>
  20. {/section}
От приведенного выше кода я стал отталкиваться и "лепить" блочное меню. Вот что получилось:
Код HTML:
  1. {foreach key=key item=item from=$items}
  2. {if $item.NSLevel == $last_level}
  3. </a>
  4. {/if}
  5. {$tail=$last_level-$item.NSLevel}
  6. {section name=foo start=0 loop=$tail step=1}
  7. </div></div>
  8. {/section}
  9.  
  10. {if $item.NSLevel > 1 && $item.NSLevel > $last_level}
  11. <div class="ui dropdown item">{$item.title}
  12. <div class="menu">
  13. {else}
  14. <a class="item" href="{$item.link}">
  15. {$item.title}
  16. </a>
  17. {/if}
  18. {$last_level=$item.NSLevel}
  19. {/foreach}
  20.  
  21. {section name=foo start=0 loop=$last_level step=1}
  22. </div>
  23. {/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}
Посетитель
small user social cms
Сообщений: 5
Вновь поднимаю вопрос.
Так и не удалось добиться желаемого результата. Пересторил код в такой вид
Код HTML:
  1. {foreach key=key item=item from=$items}
  2.  
  3. {if $item.NSLevel == $last_level}{/if}
  4.  
  5. {$tail=$last_level-$item.NSLevel}
  6.  
  7. {section name=foo start=0 loop=$tail step=1}{/section}
  8.  
  9. {if $item.NSLevel > 1 && $item.NSLevel > $last_level}
  10. <div class="ui dropdown item">
  11. <i class="dropdown icon"></i>
  12. <div class="menu">
  13. {/if}
  14. <a class="item" href="{$item.link}">{if $item.css_class}
  15. <i class="{$item.css_class} icon"></i>
  16. {/if}{$item.title}
  17. </a>
  18. {if $item.NSLevel > 1 && $item.NSLevel > $last_level}
  19. </div>
  20. </div>
  21. {/if}
  22.  
  23. {/foreach}
  24.  
  25. {section name=foo start=0 loop=$last_level step=1}{/section}
Получился результат
Нестандартное выпадающее меню
Каждый элемент подменю разбивается на несколько подпунктов основного меню. При вставке части кода в последнее условие, определяющее меню с подпунктами
Код HTML:
  1. {$last_level=$item.NSLevel}
тогда подпунктом становится только первый элемент, а все остальные подпункты в виде пунктов основного меню.
Нестандартное выпадающее меню
Посетитель
small user social cms
Сообщений: 72
В последней section по идее должно что-то закрываться (строка 15), а у вас пусто, может от этого? в любом случае, "по фотографии" вам никто не вылечит) надо смотреть сам сайт, и использовать метод научного тыка
Услуги | Компонент QUIZ-манагер
Посетитель
small user social cms
Сообщений: 5
Олегсей (aka @dreadmoon), сайт ровным счетом ничего не покажет. Это же не статистическая html-страница, структура которой будет идентична что в редакторе, что при отображении в браузере. Тут надо конкретно знать что за что отвечает, по этой причине и приходится использовать "метод тыка". На скриншотах проще для представления всех результатов, а не одного. Но если надо, залью файлы на какой-нибудь хостинг (сайт на локале).

Вставив в пустые секции цифры
Код HTML:
  1. {foreach key=key item=item from=$items}
  2. {if $item.NSLevel == $last_level}
  3. 12
  4. {/if}
  5. {$tail=$last_level-$item.NSLevel}
  6. {section name=foo start=0 loop=$tail step=1}
  7. 34
  8. {/section}
  9.  
  10. {if $item.NSLevel > 1 && $item.NSLevel > $last_level}
  11. <div class="ui dropdown item">
  12. <i class="dropdown icon"></i>
  13. <div class="menu">
  14. {/if}
  15. <a class="item" href="{$item.link}">{if $item.css_class}
  16. <i class="{$item.css_class} icon"></i>
  17. {/if}{$item.title}
  18. </a>
  19. {if $item.NSLevel > 1 && $item.NSLevel > $last_level}
  20. </div>
  21. </div>
  22. {$last_level=$item.NSLevel}
  23. {/if}
  24.  
  25. {/foreach}
  26.  
  27. {section name=foo start=0 loop=$last_level step=1}
  28. 56
  29. {/section}
получил такой результат.
Нестандартное выпадающее меню
То есть последний section дублирует значение, и будь там вставлен закрывающий </div>, будет два закрывающих тега. И как избежать дублирования - хотя бы это узнать.
Редактировалось: 1 раз (Последний: 25 декабря 2016 в 16:36)
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1545
Вам возможно для начала код в песочнице разместить, нагляднее было бы.
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1545
html
Спойлер
css
Спойлер
js в template.php
Спойлер
Но не забудьте, что есть ещё меню пользователя и стили для него тоже править надо.
Посетитель
small user social cms
Сообщений: 5
Lora, было бы наглядней, если бы в песочнице переменные и условия движка работали, ведь именно в них весь "заковыр") laugh Конечно спасибо, попробовал собрать по вашему примеру
Код HTML:
  1. {foreach key=key item=item from=$items}
  2. {if $item.NSLevel == $last_level}
  3. </div>
  4. {/if}
  5. {$tail=$last_level-$item.NSLevel}
  6.  
  7. {section name=foo start=0 loop=$tail step=1}
  8. </div></div></div>
  9. {/section}
  10.  
  11. {if $item.NSLevel > 1 && $item.NSLevel > $last_level}
  12. <div class="ui dropdown item">
  13. <i class="dropdown icon"></i>
  14. <div class="menu">
  15. {/if}
  16. <a class="item" href="{$item.link}">{if $item.css_class}
  17. <i class="{$item.css_class} icon"></i>
  18. {/if}{$item.title}
  19. </a>
  20. {$last_level=$item.NSLevel}
  21. {/foreach}
  22.  
  23. {section name=foo start=0 loop=$last_level step=1}
  24. </div>
  25. {/section}
но где-то идёт расхождение дивов :(
Нестандартное выпадающее меню
Завтра вечером после работы выложу примеры на каком-нибудь хосте, но, думаю, что они мало чем помогут.
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1545
Пример я вам рабочий скинул. Сначала проверил на 1.10.7
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.