Сообщений в теме: 23

[Степан]

Встретил на просторах интернета хороший урок по созданию меню на css3, предлагаю 4 готовых вариантов вывода категорий, меню лучше по моему мнению чем в розетки и в Комфи юа, нужна помощь в доработке его под shopcms. Доработка - это вывод новостей (как у "5 columns"), ну и прописание всех стилей к файлу category_tree.tpl, вывод подкатегорий и т.п., сам как ни старался идеального результата не добился, прошу прощения. Предлагаю сделать все 4 вывода меню
Демо-сайт: http://mocne-menu.freeiz.com/


Скрин:
 Безымянный123123123.JPG   64.39К   186 Количество загрузок:

[badisoft]

А насколько нынче CSS3 покрыто распространенными браузерами в процентах?

[Степан]

для старых браузеров устанавливается обычный фоновый цвет, и все нормально отображается, можете сами проверить

Вот таблица, поддержки CSS3 в разних версиях браузеров, где меню отображается нормально

[eugene_wb]

Сегодня именно это меню сделал для заказчика ( совпадение ? )

код для этого меню на 2 уровня, разделение по колонкам по 3 элемента

<ul id="menu">
{if $big_categories_tree && $big_categories_tree_count>0}
  {section name=h loop=$big_categories_tree}
  {if $big_categories_tree[h].parent == 1}
	   <li class="{if $big_categories_tree[h].subcount > 0}drop {/if}{if $categoryID == $big_categories_tree[h].categoryID}active {/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="bf"{/if}>{$big_categories_tree[h].name}</a>
   {if $big_categories_tree[h].subcount > 0}
   <div class="dropdown_3columns">
		  <div class="col_1">
  <ul>
   {assign var="tmp" value=0}
   {section name=h1 loop=$big_categories_tree}
   {if $big_categories_tree[h1].parent == $big_categories_tree[h].categoryID}
   {assign var="tmp" value=`$tmp+1`}
	 <li>
	 <a href="{if $smarty.const.CONF_MOD_REWRITE eq 1}category_{$big_categories_tree[h1].categoryID}.html{else}index.php?categoryID={$big_categories_tree[h1].categoryID}{/if}" {if $categoryID == $big_categories_tree[h1].categoryID}class="bf"{/if}>{$big_categories_tree[h1].name}</a>
	 </li>
   {if $tmp is div by 3 && !$smarty.section.h1.last}</ul></div><div class="col_1"><ul>{assign var="tmp" value=0}{/if}
   {/if}
   {/section}
  </ul>
		  </div>
   <div>
   {/if}
   </li>

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

css, можно взять по ссылке из первого поста

[Степан]

залил файл стилей, кому надо  menu.css   5.48К   51 Количество загрузок:

eugene_wb,
Наверное все таки совпадение, я ету менюшку никому больше и не показывал, понравилась и решил сюда на обозрения закинуть))
но все же, есть возможность сделать ето меню на 3 уровня, через вывод "4 Column" (см. в демо)???

[etdnepr]

Спасибо за прикольное меню! А не подскажете как решить проблемку:
У меня на главной стоит блок ротатор баннеров. Так вот выпадающее меню подкатегорий отображается за этим слайдером!
Спасибо заранее.

[R.Sergey]

в стилях для меню указать

z-index: 99

например

[etdnepr]

Спасибо! Сработало!

[etdnepr]

Если можно, еще пара вопросов:
1. Как убрать промежуток между шапкой и горизонтальным меню?
2. Как разместить пункты в горизонтальном меню по центру?

Спасибо.

[R.Sergey]

В файле menu.css Вам нужно найти стили для #menu и удалить строки

margin: 30px auto 0;

width: 100%;

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

[etdnepr]

Благодарю! Как всегда четко в цель )))

[oleg_61]

Доброго времени суток! мне уже не до доброго(((
Нужно доделать менюшку, не воткнусь как
Вот код:

<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22 {if $smarty.server.REQUEST_URI == '/page_0.html'}current-menu-item current_page_item{/if}">
    <a >Магазин</a>
    {if $categories_tree}
<ul class="sub-menu" style="display: none; visibility: hidden;"> 
  {section name=h loop=$big_categories_tree}
  {if $big_categories_tree[h].categoryID != 1}
 
   
	   
	    <li class="level_{$big_categories_tree[h].level}_parent_">
	   
   {section name=j loop=$big_categories_tree max=$big_categories_tree[h].level}	
	  {/section}
	  {if $smarty.const.CONF_SHOW_COUNTPROD eq 1}<span style="float:right">&nbsp;&nbsp;{$big_categories_tree[h].products_count}</span>{/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="bf"{/if}>{$big_categories_tree[h].name}</a>
    {*<br />level: {$big_categories_tree[h].level} &nbsp;
    parent: {$big_categories_tree[h].parent} след {$big_categories_tree[h.index_next].parent}
    categoryID: {$big_categories_tree[h].categoryID}*}
	  {if $big_categories_tree[h].categoryID == $big_categories_tree[h.index_next].parent}
	    <ul class="sub-menu" style="display: none; visibility: hidden;">
	    {/if}
  {if ($big_categories_tree[h.index_next].parent != $big_categories_tree[h].categoryID)  }
    </li>
    {/if}
    {if $big_categories_tree[h.index_next].level != $big_categories_tree[h].level}
    {if ($big_categories_tree[h.index_next].parent != $big_categories_tree[h].categoryID)  }
    </ul>
    {/if}
    {/if}
	   
  {if $smarty.section.h.index ne $big_categories_tree_count-1}
 
  {/if}
  {/if}
 
  {/section}
 
</ul>
{/if}
</li>

которым выводится менюшка: Главная Магазин О магазине,
так вот Магазин - содержит подкатегории, а те соответственно свои, не могу разввернуть те 4 подкатегории которые выпадают в пункте Магазин.
Т.е. мне нужно что бы в меню стали вместо Магазин эти 4 выпадающие категории со своими подкатегориями.
с данным движком знаком несколько поверхностно, помогите пожалуйста товарищи))))

[Sten]

Подскажите кто-нибудь, как установить эту менюшку (что прописывать в файле index.tpl.html, и если нужно в style.css)?

/upd:
с этим разобрался, но возникла другая проблема -
выпадающее меню перекрывается названиями блоков (см. в прикрепленном изображении).
Как это можно решить?

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

•  trable1.gif   6.71К   14 Количество загрузок:

[badisoft]

выпадающее меню перекрывается названиями блоков (см. в прикрепленном изображении). Как это можно решить?

Увеличить z-index у менюшек либо уменьшить у названий блоков.
Если не понятно, что такое z-index, то почитать об этом на htmlbook.ru/css/z-index, где-то там.

[Sten]

выпадающее меню перекрывается названиями блоков (см. в прикрепленном изображении). Как это можно решить?

Увеличить z-index у менюшек либо уменьшить у названий блоков.
Если не понятно, что такое z-index, то почитать об этом на htmlbook.ru/css/z-index, где-то там.

Спасибо за помощь! Все получилось как надо.

[etdnepr]

Сегодня именно это меню сделал для заказчика ( совпадение ? )

код для этого меню на 2 уровня, разделение по колонкам по 3 элемента

<ul id="menu">
{if $big_categories_tree && $big_categories_tree_count>0}
  {section name=h loop=$big_categories_tree}
  {if $big_categories_tree[h].parent == 1}
	   <li class="{if $big_categories_tree[h].subcount > 0}drop {/if}{if $categoryID == $big_categories_tree[h].categoryID}active {/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="bf"{/if}>{$big_categories_tree[h].name}</a>
   {if $big_categories_tree[h].subcount > 0}
   <div class="dropdown_3columns">
		  <div class="col_1">
  <ul>
   {assign var="tmp" value=0}
   {section name=h1 loop=$big_categories_tree}
   {if $big_categories_tree[h1].parent == $big_categories_tree[h].categoryID}
   {assign var="tmp" value=`$tmp+1`}
	 <li>
	 <a href="{if $smarty.const.CONF_MOD_REWRITE eq 1}category_{$big_categories_tree[h1].categoryID}.html{else}index.php?categoryID={$big_categories_tree[h1].categoryID}{/if}" {if $categoryID == $big_categories_tree[h1].categoryID}class="bf"{/if}>{$big_categories_tree[h1].name}</a>
	 </li>
   {if $tmp is div by 3 && !$smarty.section.h1.last}</ul></div><div class="col_1"><ul>{assign var="tmp" value=0}{/if}
   {/if}
   {/section}
  </ul>
		  </div>
   <div>
   {/if}
   </li>

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

css, можно взять по ссылке из первого поста

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

[etdnepr]

Коллеги, доброго времени суток!
Ткните пожалуйста носом как сделать так, чтоб выпадающая часть меню автоматом выпадала либо влево, либо вправо. Чтоб позиционировалась правильно. А то в этом варианте меню выпадает всегда вправо и для категорий, которые в правой части меню подкатегории оказываются за экраном. Спасибо всем поделившимся знаниями!

Кстати, добавил картинки возле выпадающих подкатегорий.
Может кому пригодиться.
Вот код файла menu.tpl.html

{*горизонтальное меню*}
<link rel="stylesheet" href="data/{$smarty.const.TPL}/menu.css" type="text/css" media="all" />

<ul id="menu">
{if $big_categories_tree && $big_categories_tree_count>0}
  {section name=h loop=$big_categories_tree}
  {if $big_categories_tree[h].parent == 1}
		   <li class="{if $big_categories_tree[h].subcount > 0}drop {/if}{if $categoryID == $big_categories_tree[h].categoryID}active {/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="bf"{/if}>
{$big_categories_tree[h].name}</a>
   {if $big_categories_tree[h].subcount > 0}
   <div class="dropdown_5columns">
				  <div class="col_2">
  <ul>
   {assign var="tmp" value=0}
   {section name=h1 loop=$big_categories_tree}
   {if $big_categories_tree[h1].parent == $big_categories_tree[h].categoryID}
   {assign var="tmp" value=`$tmp+1`}
		 <li>
   <table>
   <tr>
   <td><a href="{if $smarty.const.CONF_MOD_REWRITE eq 1}category_{$big_categories_tree[h1].categoryID}.html{else}index.php?categoryID={$big_categories_tree[h1].categoryID}{/if}" {if $categoryID == $big_categories_tree[h1].categoryID} class="bf"{/if}><img src="data/category/{$big_categories_tree[h1].picture}" alt="{$big_categories_tree[h1].name}" title="{$big_categories_tree[h1].name}" align="left" style="max-width:60px; max-height:60px;"></td>
		 <td><a href="{if $smarty.const.CONF_MOD_REWRITE eq 1}category_{$big_categories_tree[h1].categoryID}.html{else}index.php?categoryID={$big_categories_tree[h1].categoryID}{/if}" {if $categoryID == $big_categories_tree[h1].categoryID} class="bf"{/if}>
{$big_categories_tree[h1].name}</a></td>
		 </tr>
   </table>
		 </li>
   {if $tmp is div by 6 && !$smarty.section.h1.last}</ul></div><div class="col_2"><ul>{assign var="tmp" value=0}{/if}
   {/if}
   {/section}
  </ul>
				  </div>
   <div>
   {/if}
   </li>
  {/if}
  {/section}
{else}
<div align="center">{$smarty.const.STRING_NO_CATEGORIES}</div>
{/if}
</ul>
{*конец горизонтальное меню*}

[badisoft]

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

Конкретно в этом меню не знаю, не пробовал.
В общем случае в CSS-меню (которые берутся за основу для создания своего) обычно есть класс, который определяет. в какую сторону от родительского элемента строить выпадающий список - вправо или влево. По умолчанию обычно вправо, а с применением этого класса - влево. Как правило, этот класс наывается что-то-rtl или просто rtl.
На PHP-уровне проходимся по массиву элементов меню и, скажем, для двух последних элементов первого уровня (или для старшей половины корневых элементов) проставляем какой-нибудь признак типа menu[i]['rtl']=1.
Ну а в шаблоне меню в нужном месте в класс дописываем {if menu[i]['rtl']} rtl-класс{/if}
При этом два последних (или вся правая половина) корневых элементов меню будет выпадающий список строить влево от себя, а не вправо.
Ну а если rtl-класса в css-файле нет, то придется написать его самому .

[Dbus]

Если речь только про последний элемент меню, то можно сделать гораздо проще, используя css псевдокласс :last-child

[etdnepr]

ухх... )))
Спасибо!
Направление понятно, теперь будем ковырять!