Перейти к содержимому


CSS горизонтальное меню


  • Вы не можете ответить в тему
Сообщений в теме: 18

#1 fastik

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 161 сообщений
Репутация: 11
Начинающий
  • ГородТирасполь

Отправлено 22 December 2012 - 01:40 PM

Добрый день, есть меню горизонтальное:


<div id="tmcategories">
  <ul id="cat" class="sf-menu">
<li class=""><a href="">ТЕЛЕФОНЫ</a></li>

	<li class="sub"><a href="/" >НОУТБУКИ</a>
   <ul class="subcat">
<li class=""><a href="/">Acer</a></li>
<li class=""><a href="/">Asus</a></li>
<li class=""><a href="/">MSI</a></li>
<li class="last"><a href="/">Samsung</a></li>
	 </ul>
</li>

	<li class=""><a href="/" >НЕТБУКИ</a></li>
	<li class=""><a href="/" >ФОТОАППАРАТЫ</a></li>
	<li class=""><a href="/" >МОНОБЛОКИ</a></li>
	<li class=" last"><a href="/" >АКСЕССУАРЫ</a></li>
</ul>
</div>
Вот есть желание сделать его блоком, на подобие big_categories_tree.tpl.html. или categories_tree.tpl.html
С выводом основных категорий проблем нет, а вот с подкатегориями сложности. Кто может подсказать что не так делаю?

Прикрепленные файлы

  • Прикрепленный файл  меню.png   8.95К   78 Количество загрузок:

  • 0

#2 badisoft

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 22 December 2012 - 03:49 PM

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

Прежде всего, вы не так описываете проблему. По описанию "у меня есть сложности" помочь непросто, а в коде и на картинке я никаких сложностей на первый взгляд не вижу.
  • 0
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#3 fastik

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 161 сообщений
Репутация: 11
Начинающий
  • ГородТирасполь

Отправлено 22 December 2012 - 04:23 PM

Как я говорил, вывести основные категории не проблема, дилемма с подкатегориями.

{if $big_categories_tree && $big_categories_tree_count>0}

<div id="tmcategories">

<ul id="cat" class="sf-menu">

{section name=h loop=$big_categories_tree}{if $big_categories_tree[h].level eq 0}

  <li class="{if $smarty.section.h.index eq $big_categories_tree_count-1}last{elseif $big_categories_tree[h].level eq 0}sub{/if}"><a href="">

{if $big_categories_tree[h].categoryID != 1} {$big_categories_tree[h].name} {/if}</a>

{/if}

{/section}



</ul>

</div>

{else}

<div align="center">{$smarty.const.STRING_NO_CATEGORIES}</div>

{/if}


  • 0

#4 badisoft

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 22 December 2012 - 04:31 PM

Как я говорил, вывести основные категории не проблема, дилемма с подкатегориями.

1. Почему дилемма, а не лемма или трилемма? Тоже ведь слова красивые :)
2. Проблема-то в чем? Вы ее так и не описали.
  • 0
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#5 fastik

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 161 сообщений
Репутация: 11
Начинающий
  • ГородТирасполь

Отправлено 22 December 2012 - 04:35 PM

Проблема появилась в определении есть ли в категории подкатегория, как можно узнать есть там подкатегории или нет?
  • 0

#6 badisoft

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 22 December 2012 - 05:13 PM

Проблема появилась в определении есть ли в категории подкатегория, как можно узнать есть там подкатегории или нет?

Проверить, есть ли в массиве (списке) категорий хотя бы одна категория у которой parent равен categoryID определяемой категории.
Категории в блоках берутся из массивов $out и $cats. Зачем-то два разных, но практически одинаковых по содержанию массива для разных блоков категорий. Свой блок категорий можно писать на базе любого из этих массивов. Загляните в файл category_tree.php, увидите там присвоение этих массивов смарти-переменным. Выведите куда-нибудь тестово эти два массива чтобы понять, как они устроены и как определять наличие подкатегорий.

PS. Я как-то неочевидно ответил на вопрос "как узнать". Дополняю. Перебором. По другому никак. Массив категорий преставляет собой совершенно линейный список со ссылками на родительскую категорию и построить из него дерево можно только последовательным перебором.

PPS. Мне думается, что Вы совсем не с той стороны подходите к созданию горизонтального меню. Надо:
1. сохранить структуру тэгов <ul><li> и имена классов, которые, скрорее всего, обрабатываются какой-то JS-библиотечкой для показа списков <ul><li> в виде горизонтального меню.
2. Автоматически понапихать в эту структуру массив категорий.
3. решить проблему, когда:
3.1 список категорий первого уровня не влезает в горизонталь.
3.2 список категорий второго уровня не влезает в вертикаль.
3.3 еще какие-нибудь из категорий третьего и последующих уровней не влезают в экран.

Только не надо думать, что (3) это редкая проблема и Вас не касается. Это ГЛАВНАЯ проблема, т.к. не касается она только пока Ваш сайт смотрят на мониторах 1280х1024 и выше, а не на мобильных устройствах, где с разрешением и свободным местом на экране все куда хуже.

Для меня в последнюю неделю решение этой проблемы состоит в поиске какого-либо JS-меню, где УЖЕ ЗА МЕНЯ все это решено - оптимальное расположение на экране и скроллеры, если не влезает.
  • 0
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#7 fastik

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 161 сообщений
Репутация: 11
Начинающий
  • ГородТирасполь

Отправлено 22 December 2012 - 06:13 PM

Спасибо за столь развернутый ответ, но все-таки немного конкретнее можно узнать? в виде {if big_categories_tree....
  • 0

#8 badisoft

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 23 December 2012 - 08:00 AM

Спасибо за столь развернутый ответ, но все-таки немного конкретнее можно узнать?

Куда конкретнее-то? За Вас блок написать? :) Кроме $big_categories_tree.parent, который в big_categories_tree.tpl.html не используется есть еще $big_categories_tree.level, показывающий уровень вложенности категории. Ноль для категорий верхнего уровня, единица для следующего и так далее. Этих данных (и сайта http://www.smarty.ne...ion.section.tpl) за глаза для построения шаблона меню категорий любого вида. Хоть линейного, как штатные блоки, хоть красиво выпадающего на <UL><LI>, как хотите Вы. Поверьте, это действительно просто. Не ленитесь и почитайте документацию по синтаксису smarty.

Я такое меню (нормальное, с решением вышеописаных проблем) пока не сделал, а писать некий полуфабрикат в качестве помощи совершенно незнакомому человеку причин не вижу. Сделаю - выложу тут, как делал и с остальными модулями. Я бы и вообще все выкладывал, но чем больше становится модулей, тем меньше остается времени на их причесывание до вида "полезно для всех, а не только для заказчика" :).
  • 1
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#9 fastik

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 161 сообщений
Репутация: 11
Начинающий
  • ГородТирасполь

Отправлено 23 December 2012 - 12:23 PM

Еще раз хочу поблагодарить за советы. Но форум для того и создан, чтобы помогать, учить, подсказывать. У меня еще не достаточно знаний и понимания некоторых моментов. Хотя должен согласиться, что учить мат часть это то, с чего нужно начинать. Но порой учиться на "полуфабрикате", работающем, гораздо проще чем по учебникам. Имея такой полуфабрикат, меняя в нем что-то, быстрее доходит как же выбираются данные из массива и т.п. И уже дело "причесывания" этого полуфабриката для себя становится делом каждого, кто хочет этим заниматься. Вот такой сумбур. А Вам еще раз спасибо. Буду пробовать.
  • 0

#10 micehide

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 359 сообщений
Репутация: 124
Мастер

Отправлено 23 December 2012 - 12:45 PM

Бесплатный совет: не делайте выпадающее меню более 2-го уровня, размещайте подкатегории во втором уровне вложенности вместе с названиями категорий.
  • 0

#11 fastik

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 161 сообщений
Репутация: 11
Начинающий
  • ГородТирасполь

Отправлено 25 December 2012 - 01:11 PM

А можно как-то дописать возможность использовать $big_categories_tree.parent? Ну без него вообще мне кажется не реально сделать меню из того, что я имею.
  • 0

#12 badisoft

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 25 December 2012 - 03:23 PM

А можно как-то дописать возможность использовать $big_categories_tree.parent?

Что значит "дописать возможность"? :)
Это ровно такой же элемент массива, как и level.
Штатно в блоке используется {$big_categories_tree[h].level}, т.к. цикл {section name=h loop=$big_categories_tree}, но никто не мешает использовать в своей логике и остальные элементы. Например, {$big_categories_tree[h].parent}

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

В штатном же сделано :). Дочерние категории в массиве $big_categories_tree идут не вразброс, а строго после родительской, это позволяет определить родительскую категорию и без обращения к parent.
  • 0
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#13 fastik

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 161 сообщений
Репутация: 11
Начинающий
  • ГородТирасполь

Отправлено 25 December 2012 - 03:41 PM

Дочерние категории в массиве $big_categories_tree идут не вразброс, а строго после родительской, это позволяет определить родительскую категорию и без обращения к parent.

Мне нужно указать класс sub в зависимости от того, если у категории подкатегории:
<li class="sub"><a href="/" >НОУТБУКИ</a>
	 <ul class="subcat">
   <li class=""><a href="/">Подкатегория 1</a></li>
Вот этот код работает отлично, но с подкатегориями проблема )
{if $big_categories_tree && $big_categories_tree_count>0}
<div id="tmcategories">
  <ul id="cat" class="sf-menu">
  {section name=h loop=$big_categories_tree}
  {if $big_categories_tree[h].categoryID != 1 and $big_categories_tree[h].level eq 0}

<li class="{if $smarty.section.h.index eq $big_categories_tree_count-1}last{/if}">
<a href="{if $smarty.const.CONF_MOD_REWRITE eq 1}category_{$big_categories_tree[h].categoryID}.html{else}index.php?categoryID={$big_categories_tree[h].categoryID}{/if}"
   {if $categoryID == $big_categories_tree[h].categoryID}class="selected"{/if}>{$big_categories_tree[h].name}</a></li>

{/if}
  {/section}
</ul>
</div>

{else}
<div align="center">{$smarty.const.STRING_NO_CATEGORIES}</div>
{/if}

  • 0

#14 badisoft

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 25 December 2012 - 07:07 PM

Мне нужно указать класс sub в зависимости от того, если у категории подкатегории:

Цитирую себя же: "Дочерние категории в массиве $big_categories_tree идут не вразброс, а строго после родительской, это позволяет определить родительскую категорию и без обращения к parent". Что Вам мешает сделать условный вывод класса в зависимости о того, бОльший level у следующего элемента массива или нет? Т.е. что-то типа:

class={if $big_categories_tree[h+1].level > $big_categories_tree[h].level}"есть_подкатегории"{else}"нет_подкатегорий"{/if}

При этом можно обрабатывать ситуацию последнего элемента (когда h+1не существует), а можно и забить на нее, т.к. при вышенаписанном условии результат все равно будет какой нужно.

PS. Мне кажется, что я совершенно зря давал ссылку на документацию по smarty, причем именно по section. Там ведь у него (у section) куча разных полезных свойств - first, last, index, index_prev, index_next, etc. Когда даешь ссылку именно на то, что поможет в решении проблемы, а человек продолжает задавать те же вопросы (явно не прочел, а если прочел, то и не пытался понять) - это полностью отбивает желание помогать такому человеку.
  • 0
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#15 fastik

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 161 сообщений
Репутация: 11
Начинающий
  • ГородТирасполь

Отправлено 26 December 2012 - 07:52 AM

Вышеописанное условие не работает((

а так работает {if $big_categories_tree[h].level > $big_categories_tree[h+1].level}Нет{else}есть{/if}, походу $big_categories_tree[h].leve должен быть первым.
  • 0

#16 badisoft

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 27 December 2012 - 11:36 AM

Вышеописанное условие не работает((

Не рассказывайте сказки.

<ul id="hmenu" class="menu">
{section name=h loop=$big_categories_tree}
{if $big_categories_tree[h.index_next].level <= $big_categories_tree[h].level}<li><a href="category_{$big_categories_tree[h].categoryID}.html">{$big_categories_tree[h].name}</a></li>{/if}
{if $big_categories_tree[h.index_next].level > $big_categories_tree[h].level}<li class="submenu"><a href="category_{$big_categories_tree[h].categoryID}.html">{$big_categories_tree[h].name}</a><ul>{/if}
{if $big_categories_tree[h.index_next].level < $big_categories_tree[h].level}
{section name=ret loop=$big_categories_tree[h].level-$big_categories_tree[h.index_next].level}
</ul></li>
{/section}
{/if}
{/section}
</ul>

  • 2
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#17 kasta69

    Продвинутый пользователь

  • Download User
  • PipPipPip
  • 102 сообщений
Репутация: 7
Начинающий
  • ГородНижний Тагил

Отправлено 06 February 2013 - 11:23 AM

badisoft, СПАСИБО!!
Доделал данное меню. Скоро думаю выложу данный шаблон на проверку (правда маленько измененный) для перехода в следующую группу!!
Изображение

верхнее меню фиксированное при скроллинге, его всегда видно.
  • 0

#18 fastik

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 161 сообщений
Репутация: 11
Начинающий
  • ГородТирасполь

Отправлено 23 October 2014 - 10:31 AM

Подскажите как сделать правильное условие, чтобы не отображать пункт меню (категорию) в клиентской части? Например айди категории 200 нужно, чтобы она и все ее подкатегории не отображались в меню

Ну очень туплю) готов отблагодарить)
  • 0

#19 badisoft

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 23 October 2014 - 11:55 AM

Например айди категории 200 нужно, чтобы она и все ее подкатегории не отображались в меню

Например, что-то типа

{assign var=show value=1}
{section ......}
{if $big_categories.level===$level}{assign var=show value=1}{/if}
{if $big_categories.categoryID==200}{assign var=show value=0}{assign var=level value=$big_categories.level}{/if}
{if $show}
...тут стандартный вывод элемента меню...
{/if}
{/section}

Смысл таков:
1. запрещаем вывод категорий (show=0) когда доходим до категории с caqtegoryID=200 и запоминаем уовень (level) этой категории.
2. снова разрешаем вывод категорий (show=1) когда доходим до ближайшей категории с таким же level.
При таком раскладе не будут показаны категория с ID=200 и все дочерние, если они есть.

PS. Написано без соблюдения синтаксиса, просто для понимания идеи.

PPS. А вообще я же выкладывал модуль показа/непоказа заданных категорий, там показ или непоказ задается галками в админке.
  • 0
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)