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

filth · 19 апреля, 2012

fluor попробуй jQuery вызвать вот так:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

(но это вряд ли повлияет) и проверь, что бы он один раз вызывался.
Сам скрипт меню прописать в файл catalog_menu.js, разместить его в /js и вызвать

<script src="js/catalog_menu.js"></script>

При этом

{literal}

убрать.
Проверить что бы не дублировались названия тэгов и классов.

iluwka · 19 апреля, 2012

jquery.js
jquery.min.js подключены?
попробуй скачать с оф. сайта последнюю версию

fluor · 21 апреля, 2012

Пожалуйста, гляньте что не так

<head>	<base href="{$config->root_url}/"/>	<title>{$meta_title|escape}</title>		{* Метатеги *}	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />	<meta name="description" content="{$meta_description|escape}" />	<meta name="keywords"    content="{$meta_keywords|escape}" />	<meta name="viewport" content="width=1024"/>		{* Стили *}	<link href="design/{$settings->theme|escape}/css/style.css" rel="stylesheet" type="text/css" media="screen"/>	<link href="design/{$settings->theme|escape}/images/favicon.ico" rel="icon"          type="image/x-icon"/>	<link href="design/{$settings->theme|escape}/images/favicon.ico" rel="shortcut icon" type="image/x-icon"/>		{* JQuery *}	<script src="js/jquery/jquery.js"  type="text/javascript"></script>		{* Всплывающие подсказки для администратора *}	{if $smarty.session.admin == 'admin'}	<script src ="js/admintooltip/admintooltip.js" type="text/javascript"></script>	<link   href="js/admintooltip/css/admintooltip.css" rel="stylesheet" type="text/css" /> 	{/if}		{* Увеличитель картинок *}	<script type="text/javascript" src="js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>	<link rel="stylesheet" href="js/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />		{* Ctrl-навигация на соседние товары *}	<script type="text/javascript" src="js/ctrlnavigate.js"></script>           		{* Аяксовая корзина *}	<script src="design/{$settings->theme}/js/jquery-ui.min.js"></script>	<script src="design/{$settings->theme}/js/ajax_cart.js"></script>		{* js-проверка форм *}	<script src="/js/baloon/js/baloon.js" type="text/javascript"></script>	<link   href="/js/baloon/css/baloon.css" rel="stylesheet" type="text/css" /> 		{* Автозаполнитель поиска *}	{literal}        <script src="js/catalog_menu.js"></script>        	<script src="js/autocomplete/jquery.autocomplete-min.js" type="text/javascript"></script>	<style>	.autocomplete-w1 { position:absolute; top:0px; left:0px; margin:6px 0 0 6px; /* IE6 fix: */ _background:none; _margin:1px 0 0 0; }	.autocomplete { border:1px solid #999; background:#FFF; cursor:default; text-align:left; overflow-x:auto;  overflow-y: auto; margin:-6px 6px 6px -6px; /* IE6 specific: */ _height:350px;  _margin:0; _overflow-x:hidden; }	.autocomplete .selected { background:#F0F0F0; }	.autocomplete div { padding:2px 5px; white-space:nowrap; }	.autocomplete strong { font-weight:normal; color:#3399FF; }	</style>		<script>	$(function() {		//  Автозаполнитель поиска		$(".input_search").autocomplete({			serviceUrl:'ajax/search_products.php',			minChars:1,			noCache: false, 			onSelect:				function(value, data){					 $(".input_search").closest('form').submit();				},			fnFormatResult:				function(value, data, currentValue){					var reEscape = new RegExp('(\\' + ['/', '.', '*', '+', '?', '|', '(', ')', '[', ']', '{', '}', '\\'].join('|\\') + ')', 'g');					var pattern = '(' + currentValue.replace(reEscape, '\\$1') + ')';	  				return (data.image?"<img align=absmiddle src='"+data.image+"'> ":'') + value.replace(new RegExp(pattern, 'gi'), '<strong>$1<\/strong>');				}			});	});	</script>                <!-- темы оформления-->        <script src="/nivo-slider/jquery.nivo.slider.pack.js"type="text/javascript"></script>	<link rel="stylesheet" href="/nivo-slider/themes/default/default.css"type="text/css" media="screen">	<link rel="stylesheet" href="/nivo-slider/themes/pascal/pascal.css"type="text/css"media="screen">	<link rel="stylesheet" href="/nivo-slider/themes/orman.css"type="text/css"media="screen">	<!-- файл css для слайдера -->	<link rel="stylesheet" href="/nivo-slider/nivo-slider.css"type="text/css"media="screen">	<!-- файл css для слайдера -->   	{/literal}					</head>

filth · 21 апреля, 2012

могу ошибаться, но у Тебя линки на CSS слайдера (вот эти)

<link rel=\"stylesheet\" href=\"/nivo-slider/themes/default/default.css\"type=\"text/css\" media=\"screen\">
<link rel=\"stylesheet\" href=\"/nivo-slider/themes/pascal/pascal.css\"type=\"text/css\"media=\"screen\">
<link rel=\"stylesheet\" href=\"/nivo-slider/themes/orman.css\"type=\"text/css\"media=\"screen\">
<!-- файл css для слайдера -->
<link rel=\"stylesheet\" href=\"/nivo-slider/nivo-slider.css\"type=\"text/css\"media=\"screen\">

внутри тега {literal} - помести их сразу после

<link href=\"design/{$settings->theme|escape}/css/style.css\" rel=\"stylesheet\" type=\"text/css\" media=\"screen\"/>

потом скрипт jquery.nivo.slider.pack.js вызывается у Тебя в голове - вопрос он случайно второй раз в шаблоне не вызывается?

filth · 21 апреля, 2012

Да ещё (попробуй в первую очередь) после

{* JQuery *}
<script src=\"js/jquery/jquery.js\"  type=\"text/javascript\"></script>

вставь

<script src="js/jquery/jquery-ui.min.js"  type="text/javascript"></script>

ну естественно убедись, что по этому адресу есть такой файлик

fluor · 21 апреля, 2012

К сожалению не помогло. Слайдер работает, меню нет

iluwka · 22 апреля, 2012

хм, у меня все прекрасно работало на старом шаблоне, сейчас попробую на новом

UPD попробуй подклчить один стиль для слайдера

notaton · 23 апреля, 2012

Здравствуйте, сделал как написано в посте "filth от 30 Марта" все замечательно работает, за одним исключением - при нажатии на категорию происходит раскрытие меню, а сама страница категории не открывается, подскажите, где это исправить?

fluor · 23 апреля, 2012

iluwka уже делала. не помогло

iluwka · 23 апреля, 2012

2notaton никак, такое меню.

2fluor очень странно, у меня сейчас на живом примере все работает.
после карусели есть это -

<script type="text/javascript" src="design/{$settings->theme|escape}/js/jquery.nivo.slider.pack.js"></script>    <script type="text/javascript">    $(window).load(function() {        $('#slider').nivoSlider();    });    </script>

mluchaninov · 24 апреля, 2012

Здравствуйте! сделал все, как написал filth (30 марта). Все работает, спасибо ему огромное!!!!! только перестал работать fancybox на сайте, при нажатии на картинку товара открывается пустая страница и в левом верхнем углу картинка на которую нажимал... как это исправить, подскажите пожалуйста?

mluchaninov · 24 апреля, 2012

Только что, для проверки, перед закрывающим тегом

</head>

, между {literal} {/literal} закомментировал строку

<script type=\"text/javascript\" src="js/jquery/jquery.js"></script>

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

filth · 24 апреля, 2012

Скорее всего в голове

<script type=\"text/javascript\" src=\"js/jquery/jquery.js\"></script>

два раза вызывается, проверь

iluwka · 24 апреля, 2012

вынеси в отдельный файл

<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>

mluchaninov · 24 апреля, 2012

Спасибо, натолкнули на мысль! Проблему решил!

1. В фале index.tpl написал:

{* JQuery *} 
<script src="js/jquery/jquery.js"  type="text/javascript"></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>

2. перед закрывающим тегом

</head>

, как писал filth, удалил

{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}

больше ничего не трогал, в итоге все заработало, и меню с категориями отлично работает и fancybox.

Спасибо!

iluwka · 24 апреля, 2012

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

filth · 24 апреля, 2012

Если кому интересно, у Меня голова выглядит так:

<head>	        <base href="{$config->root_url}/"/>	<title>{$meta_title|escape}</title>		{* Метатеги *}	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />	<meta name="description" content="{$meta_description|escape}" />	<meta name="keywords"    content="{$meta_keywords|escape}" />	<meta name="viewport" content="width=1024"/>        	{* Стили *}	<link href="design/{$settings->theme|escape}/css/style.css" rel="stylesheet" type="text/css" media="screen"/>	<link href="design/{$settings->theme|escape}/images/favicon.ico" rel="icon"          type="image/x-icon"/>	<link href="design/{$settings->theme|escape}/images/favicon.ico" rel="shortcut icon" type="image/x-icon"/>		{* JQuery *}	<script src="js/jquery/jquery.js"  type="text/javascript"></script>        <script src="js/jquery/jquery-ui.min.js"  type="text/javascript"></script>		{* Всплывающие подсказки для администратора *}	{if $smarty.session.admin == 'admin'}	<script src ="js/admintooltip/admintooltip.js" type="text/javascript"></script>	<link   href="js/admintooltip/css/admintooltip.css" rel="stylesheet" type="text/css" /> 	{/if}		{* Увеличитель картинок *}	<script type="text/javascript" src="js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>	<link rel="stylesheet" href="js/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />		{* Ctrl-навигация на соседние товары *}	<script type="text/javascript" src="js/ctrlnavigate.js"></script>           		{* Аяксовая корзина *}	<script src="design/{$settings->theme}/js/ajax_cart.js"></script>		{* js-проверка форм *}	<script src="/js/baloon/js/baloon.js" type="text/javascript"></script>	<link   href="/js/baloon/css/baloon.css" rel="stylesheet" type="text/css" /> 	{* Main menu *}	<script src="design/{$settings->theme}/js/mainmenu.js"></script>	{* Google analitycs *}	<script src="design/{$settings->theme}/js/ganalyt.js"></script>	{* Сравнение товаров *}	<script src="/design/{$settings->theme}/js/ajax_compare.js"></script>		{* Автозаполнитель поиска *}	<link   href="/js/autocomplete/styles.css" rel="stylesheet" type="text/css" />	<script src="js/autocomplete/jquery.autocomplete-min.js" type="text/javascript"></script>	<script src="design/{$settings->theme}/js/asearch.js"></script>  </head>

все скрипты записаны в файл, и вызваны, ничего не конфликтует, глаза не режет обилием скриптов, и самое главное на скрипты не действует баг версии 2.1 - удаление "\" при правке из админки (от чего не работал аяксовый поиск). всем советую так делать.

iluwka · 24 апреля, 2012

2filth я все повыносил в отдельные файлы, и раскидал по страничке) нет конфликтов, + грузится немного быстрее

tsybart · 28 апреля, 2012

для 1.4 прикрутить можно?

filth · 28 апреля, 2012

тут

muzikant · 30 апреля, 2012

делаю всё по инструкции, в результате конечный результат недоступное меню,полностью раскрытое с под категориями,и ссылки в "" .

igoryk · 13 мая, 2012

Вопрос - как "заставить" оставаться "открытым" активный пункт подкатегории ...

filth · 13 мая, 2012

Сам скрипт:

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();

tsybart · 14 мая, 2012

как добавить прозрачность именно выпадающиx подразделов?

filth · 14 мая, 2012

.categories ul ul a {
opacity: 0.5;
}

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

Рекомендуемые сообщения

Ссылка на сообщение

Поделиться на другие сайты

Лучшие авторы в теме

Популярные дни

Лучшие авторы в теме

Популярные дни

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Присоединяйтесь к обсуждению

Объявления