Jump to content

Выпадающее меню категорий


Recommended Posts

Кто делал огромная просьба помочь!

Пытался реализовать при -

{categories_tree categories=$c->subcategories}

, а так же при

{if in_array($category->id, $c->children)}{categories_tree categories=$c->subcategories}{/if}
связками CSS + jQuery
В итоге либо не работает, а если работает то скрывает не то что нужно.

кому надо скину код.
Жду предложений
Link to post
Share on other sites
  • Replies 67
  • Created
  • Last Reply

Top Posters In This Topic

так же прошу помощи с меню, не получается уйти на третью вложенность

вот код:

<ul id="menutop">    <li>    <a href="">Категория 1</a>        <ul>            <li>            <a href="">Категория 1.1</a>                <ul>                    <li><a href="">Категория 1.1.1</a></li>                    <li><a href="">Категория 1.1.2</a></li>                    <li><a href="">Категория 1.1.3</a></li>                    <li><a href="">Категория 1.1.4</a></li>                </ul>				            </li>        </ul>    </li></ul>

Как засунуть вывод каталога?
Спасибо
Link to post
Share on other sites

2filth у меня знаний на среднем уровне, но тоже не получилось.
не охота делать статикой, но и переводить запрос с рекурсивного как-то трудновато...

UPD
ладно вопрос в том как из рекурсивного вывода сделать обычный, в смарти особо не секу так что вот.

Link to post
Share on other sites

Кроха спасибо, что отозвался. Не совсем. Есть меню как тут описано. Хотелось бы при клике на категорию что бы страница не перегружалась, а посредством Java анимированно раскрывалась.

Link to post
Share on other sites

То есть нужен аккордеон?
Обратитесь к igoryk у него реализовано.
Просто я сейчас в отъезде, к компу попадаю периодически на короткий срок, если не решите, то по приезду помогу.

Link to post
Share on other sites

Моё Решение (С огромной помощью igoryk):
1. Скрипт перед

</head>

:

{literal}
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script langugage="javascript" type="text/javascript">
$(document).ready(function() {
   initMenu('.categories ul');

function initMenu(id) {
   $(id + ' ul').hide().parent().addClass('subcat');
   if($(id).find('a.selected')) {
       $(id).find('a.selected').addClass('selected').parents('ul').show().parents('li').show();
   }
   else $(id + ' ul:first').show();
       $(id + ' a').click( function() {
       checkElement = $(this).next();
       if(checkElement.is('ul')) {
           if(!checkElement.is(':visible')) {
//                $(id + ' ul:visible').slideUp('normal');
               checkElement.slideDown('normal');
           } else
               checkElement.slideUp('normal');
           return false;
       }
   });
}})
        </script>
        {/literal}


2. Меняем рекурсивный вывод категорий (если у кого не такой) на:

<!-- Меню каталога -->
		{* Рекурсивная функция вывода дерева категорий *}
		<div class=categories>

		{function name=categories_tree}
		{if $categories}
		<ul>
		{foreach $categories as $c}
			{* Показываем только видимые категории *}
			{if $c->visible}
				<li>
					{if $c->image}<img src="{$config->categories_images_dir}{$c->image}" alt="{$c->name}">{/if}
                                        <a {if $category->id == $c->id}class="selected"{/if} href="catalog/{$c->url}" data-category="{$c->id}">{$c->name}</a>
					{categories_tree categories=$c->subcategories}
				</li>
			{/if}
		{/foreach}
		</ul>
		{/if}
		{/function}
		{categories_tree categories=$categories}
		</div>
		<!-- Меню каталога (The End)-->	


3. Меняем в style.css (и настраиваем под Себя):

/* @group Меню каталога*/.categories ul, .categories li {	padding-top: 5px;        margin: 0;        list-style: none;        background: none;}.categories a {	color: #000033;         padding: 5px 5px 5px 10px;         border-bottom: solid 1px #fff;         text-decoration: none;         display: block;         font: 18px Tahoma, Arial;}.categories a:hover {	text-decoration: underline;        background: #eb540d;        -moz-border-radius: 5px;        -webkit-border-radius: 5px;        border-radius: 5px;        color: #fff;}.categories ul ul a:hover {	text-decoration: none;}.categories ul ul {	margin-right: 3px;        background: #f9f9f8;        -moz-border-radius: 8px;        -webkit-border-radius: 8px;        border-radius: 8px;        padding: 2px 0 6px 14px;}.categories li.subcat {	background: none;}.categories ul ul li {	margin-right: 3px;        margin-bottom: 1px;        background: none;}.categories ul ul a {	color: #34627b;        text-decoration: underline;        font: 14px Tahoma, Arial;        border: none;}.categories ul li a.selected {	color: #eb540d;        text-decoration: underline;        font: 18px Tahoma, Arial;        border: none;}.categories ul ul li a.selected  {	font-weight: bold;        color: #eb540d;        font-size: 14px;}.categories ul ul ul li a.selected  {	font-weight: bold;        color: #eb540d;        font-size: 14px;}/* @end — Меню каталога*/
Link to post
Share on other sites

filth спасибо большое! все работает идеально, но ссылка на категории выводится в кавычках, как исправить?
www.site.ru/"catalog/doski/" а надо www.site.ru/catalog/doski/

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

Link to post
Share on other sites

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

UPD или залей в архив и скинь мне, я посмотрю

Link to post
Share on other sites

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

UPD странно, слайдер вообще не отображается

UPD2 все работает. что у тебя еще подключено из java\jQuery?

Link to post
Share on other sites
  • 3 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...