Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

Recommended Posts

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

главная категория 1

подкатегория

под-подкатегория

под-под-подкатегория

под-под-под-подкатегория

главная категория 2

главная категория 3

главная категория 4

Надіслати
Поділитися на інших сайтах

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

главная категория 1

подкатегория

под-подкатегория

под-под-подкатегория

под-под-под-подкатегория

главная категория 2

главная категория 3

главная категория 4

Разобрался сам)

в общем, что надо делать:

Открываем файл: /catalog/controller/module/category.php и заменяем там все этим

<?php 
class ControllerModuleCategory extends Controller {
protected function index($setting) {
  $this->language->load('module/category');
 
	 $this->data['heading_title'] = $this->language->get('heading_title');
 
  if (isset($this->request->get['path'])) {
   $parts = explode('_', (string)$this->request->get['path']);
  } else {
   $parts = array();
  }
 
  if (isset($parts[0])) {
   $this->data['category_id'] = $parts[0];
  } else {
   $this->data['category_id'] = 0;
  }
 
  if (isset($parts[1])) {
   $this->data['child_id'] = $parts[1];
  } else {
   $this->data['child_id'] = 0;
  }
	  
  $this->load->model('catalog/category');
  $this->load->model('catalog/product');
 
  $this->data['categories'] = array();
	
  $categories_1 = $this->model_catalog_category->getCategories(0);
 
  foreach ($categories_1 as $category_1) {
   $level_2_data = array();
  
   $categories_2 = $this->model_catalog_category->getCategories($category_1['category_id']);
  
   foreach ($categories_2 as $category_2) {
    $level_3_data = array();
   
    $categories_3 = $this->model_catalog_category->getCategories($category_2['category_id']);
   
    foreach ($categories_3 as $category_3) {
	 $level_4_data = array();
	 $categories_4 = $this->model_catalog_category->getCategories($category_3['category_id']);
   

	   foreach ($categories_4 as $category_4) {
	    $level_4_data[] = array(
		 'name' => $category_4['name'],
		 'href' => $this->url->link('product/category', 'path=' . $category_1['category_id'] . '_' . $category_2['category_id'] . '_' . $category_3['category_id']. '_' . $category_4['category_id'])
	    );
	   }
	 
	
	 $level_3_data[] = array(
	  'name'	 => $category_3['name'],
	  'children' => $level_4_data,
	  'href'	 => $this->url->link('product/category', 'path=' . $category_1['category_id'] . '_' . $category_2['category_id'] . '_' . $category_3['category_id'])
	 );	
    }
	  
    $level_2_data[] = array(
	 'name'	 => $category_2['name'],
	 'children' => $level_3_data,
	 'href'	 => $this->url->link('product/category', 'path=' . $category_1['category_id'] . '_' . $category_2['category_id'])
    );	
   }
  
   $this->data['categories'][] = array(
    'name'	 => $category_1['name'],
    'children' => $level_2_data,
    'href'	 => $this->url->link('product/category', 'path=' . $category_1['category_id'])
   );
  }
 
  if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/module/category.tpl')) {
   $this->template = $this->config->get('config_template') . '/template/module/category.tpl';
  } else {
   $this->template = 'default/template/module/category.tpl';
  }
 
  $this->render();
   }
}
?>

Затем открываем файл: /catalog/view/theme/default/template/module/category.tpl и заменяем там все этим

<div class="catalog_menu">
	 
	  <ul>
	    <?php foreach ($categories as $category_1) { ?>
	    <li><a href="<?php echo $category_1['href']; ?>"><?php echo $category_1['name']; ?></a>
		  <?php if ($category_1['children']) { ?>
		  <ul>
		    <?php foreach ($category_1['children'] as $category_2) { ?>
		    <li><a href="<?php echo $category_2['href']; ?>"><?php echo $category_2['name']; ?></a>
			  <?php if ($category_2['children']) { ?>
			  <ul>
			    <?php foreach ($category_2['children'] as $category_3) { ?>
			    <li><a href="<?php echo $category_3['href']; ?>"><?php echo $category_3['name']; ?></a>
				    <?php if ($category_3['children']) { ?>
					  <ul>
					    <?php foreach ($category_3['children'] as $category_4) { ?>
					    <li><a href="<?php echo $category_4['href']; ?>"><?php echo $category_4['name']; ?></a></li>
					    <?php } ?>
					  </ul>
				  <?php } ?>
			    </li>
			    <?php } ?>
			  </ul>
			  <?php } ?>
		    </li>
		    <?php } ?>
		  </ul>
		  <?php } ?>
	    </li>
	    <?php } ?>
	  </ul>
</div>

В Принципе если кому нить надо вывести больше подкатегорий то просто поковыряйтесь в файле

/catalog/controller/module/category.php ничего там сложного нет

Надіслати
Поділитися на інших сайтах

приятно когда сам в последствии смог разобраться.

По коду желательно писать для каких версий действительно. Бывает смотришь, есть решение, а применить ну никак...

Надіслати
Поділитися на інших сайтах

приятно когда сам в последствии смог разобраться.

По коду желательно писать для каких версий действительно. Бывает смотришь, есть решение, а применить ну никак...

пробовал на версии 1.5.x , но по идее должно работать и на предыдущих версиях
Надіслати
Поділитися на інших сайтах

  • 1 month later...

А как то можно без кардинальных изменений вышеуказанных файлов просто раскрыть еще одну поддиректорию? Сейчас по дефолту отображаются только главные категории. Просто когда все меняю как написано выше на странице все плывет, а как это чинить в CSS нифига не знаю.

Надіслати
Поділитися на інших сайтах


А как то можно без кардинальных изменений вышеуказанных файлов просто раскрыть еще одну поддиректорию? Сейчас по дефолту отображаются только главные категории. Просто когда все меняю как написано выше на странице все плывет, а как это чинить в CSS нифига не знаю.

не изменяя контроллеры ты не сделаешь так что бы у тебя отображалось больше чем написано в контроллере

Надіслати
Поділитися на інших сайтах

не изменяя контроллеры ты не сделаешь так что бы у тебя отображалось больше чем написано в контроллере

Ясно, а кто может подсказать как это в таблице стилей привести потом к каноническому виду? :-D

Надіслати
Поділитися на інших сайтах


Ясно, а кто может подсказать как это в таблице стилей привести потом к каноническому виду? :-D/>

ну ты у себя на сайте сделай все изменения, и потом сюда ссылку кинь, я напишу тебе стили.

Надіслати
Поділитися на інших сайтах

ну ты у себя на сайте сделай все изменения, и потом сюда ссылку кинь, я напишу тебе стили.

Вроде нащупал верный путь, есть подозрения, что могу справиться сам. Хоть бы не сглазить... :-D

Надіслати
Поділитися на інших сайтах


Получилось, но не все как хотелось.

Вот ссылка на то, что сейчас.

Вот максимум что получилось у меня.

spisok_800.jpgi.gif

Не получается выделить жирным шрифтом основную категорию "Каталог" и категории первого порядка. Вообще ничего не получается изменить в форматировании, ни текст ни маркировку списка.

В файле category.php поменял все полностью

В файле categoty.tpl вместо

<div class="catalog_menu">
...
</div>

Вписал содержимое между

<div class="box">
 <div class="box-heading"><?php echo $heading_title; ?></div>
 <div class="box-content">
   <div class="box-category">
...
...
...
</div>
</div>
</div>

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

Короче говоря хотелось бы обрести контроль над текстом в меню. :-D

Надіслати
Поділитися на інших сайтах


Наверное лучше не конкретный элемент.

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

/* box category */

.box-category {
margin-top: -10px;
}
.box-category ul {
list-style: none;
margin: 0;
padding: 0;
}
.box-category > ul > li {
padding: 7px 7px 7px 0px;
}
.box-category > ul > li + li {
border-top: 1px dashed #000000;
}
.box-category > ul > li > a a:hover {
text-decoration: none;
color: #000000;
}
.box-category > ul > li ul {
display: block;
}
.box-category > ul > li a.active {
font-weight: bold;
}
.box-category > ul > li a.active + ul {
display: block;
}
.box-category > ul > li ul > li {  
padding: 5px 5px 0px 10px;
}
.box-category > ul > li ul > li > a a:hover {
text-decoration: none;
display: block;
}
.box-category > ul > li ul > li > a.active {
font-weight: bold;
}

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

Надеюсь понятно изложил, а то я пока в этом деле очень серьезный нуб и оперирую методом научного тыка... :ugeek:

Надіслати
Поділитися на інших сайтах


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

.box-category {
font-weight: bold;
margin-top: -10px;
}

тогда весь текст в менюшке категорий будет жирным. это требовалось?

  • +1 1
Надіслати
Поділитися на інших сайтах



	  <ul>
	    <?php foreach ($categories as $category_1) { ?>
	    <li><a href="<?php echo $category_1['href']; ?>"><?php echo $category_1['name']; ?></a>
			  <?php if ($category_1['children']) { ?>
			  <ul>
			    <?php foreach ($category_1['children'] as $category_2) { ?>
			    <li><a href="<?php echo $category_2['href']; ?>"><?php echo $category_2['name']; ?></a>
					  <?php if ($category_2['children']) { ?>
					  <ul>
					    <?php foreach ($category_2['children'] as $category_3) { ?>
					    <li><a href="<?php echo $category_3['href']; ?>"><?php echo $category_3['name']; ?></a>
							    <?php if ($category_3['children']) { ?>
									  <ul>
									    <?php foreach ($category_3['children'] as $category_4) { ?>
									    <li><a href="<?php echo $category_4['href']; ?>"><?php echo $category_4['name']; ?></a></li>
									    <?php } ?>
									  </ul>
							  <?php } ?>
					    </li>
					    <?php } ?>
					  </ul>
					  <?php } ?>
			    </li>
			    <?php } ?>
			  </ul>
			  <?php } ?>
	    </li>
	    <?php } ?>
	  </ul>

вот этот код поставь, а то у тебя только 2 подуровня отображается

Надіслати
Поділитися на інших сайтах

а что касается стилей которые ты перед этим написал

.box-category - отвечает за весь блок меню
.box-category  ul  li - отвечает за пункты первого уровня
.box-category  ul  li ul  li - второй под_уровень
.box-category  ul  li ul  li ul  li - третий
ну и т.д.
там где в конце подставляется a.active - это отвечает за активный пункт меню(активная ссылка), если в конце будешь подставлять a:hover за место a.active, то этот стиль будет срабатывать при наведении на ссылку

ну надеюсь понятно расписал?

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

Надіслати
Поділитися на інших сайтах

Блин... как бы так объяснить... :ugeek:

Ну вот к примеру:

.box-category > ul > li a.active {
font-weight: bold;

Пункт, который делает текст активной ссылки жирным. После замены дефолтного кода в файлах на ваш - не работает. Различные отступы сдвиги и т.д. все норм, а вот форматирование текста и маркировка списка т.е.

1. категория

2. категория

3. категория

или

- категория

- категория

- категория

не получается. Вот я пытаюсь понять что и где надо дописать, чтобы как и при дефолтном коде все работало.

Надіслати
Поділитися на інших сайтах


Блин... как бы так объяснить... :ugeek:

Ну вот к примеру:

.box-category > ul > li a.active {
font-weight: bold;

Пункт, который делает текст активной ссылки жирным. После замены дефолтного кода в файлах на ваш - не работает. Различные отступы сдвиги и т.д. все норм, а вот форматирование текста и маркировка списка т.е.

1. категория

2. категория

3. категория

или

- категория

- категория

- категория

не получается. Вот я пытаюсь понять что и где надо дописать, чтобы как и при дефолтном коде все работало.

попробуй в футер перед тегами

 </body> 
</html>

вставить

<script>
$(document).ready(function(){ 
var url=document.location.href; 
 $.each($(".box-category a"),function(){ 
 if(this.href==url){$(this).addClass('active');}; 
 }); 
});
</script>

Надіслати
Поділитися на інших сайтах

тот скриптик будет добавлять класс активной ссылке, и тогда должен будет работать ваш

.box-category > ul > li a.active

, а что бы форматировать текст и расставлять маркировку

я уже писал, используйте это

.box-category - отвечает за весь блок меню
.box-category  ul  li - отвечает за пункты первого уровня
.box-category  ul  li ul  li - второй под_уровень
.box-category  ul  li ul  li ul  li - третий
ну и т.д.
там где в конце подставляется a.active - это отвечает за активный пункт меню(активная ссылка), если в конце будешь подставлять a:hover за место a.active, то этот стиль будет срабатывать при наведении на ссылку

Надіслати
Поділитися на інших сайтах

lays, надо рекурсивно получать категории. А то у тебя в коде вложенность ограничена получается и никчемный копипаст.

ну напиши сам, и тут повесь, и будет всем счастье
Надіслати
Поділитися на інших сайтах

lays, надо рекурсивно получать категории. А то у тебя в коде вложенность ограничена получается и никчемный копипаст.

Надо не говорить "надо", а показывать как надо. :-D

Надіслати
Поділитися на інших сайтах


  • 3 weeks later...
  • 1 year later...

Здравствуйте!

 

Помогите, пожалуйста, решить проблему.

 

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

Что нужно изменить в таблице стилей? 

 

 

<style>
    ul.dropmenu{
position: relative;
margin: 0px;
padding: 1px 0px 0px 0px;
display:block;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
 
}
.dropmenu li{
position: relative;
list-style: none;
margin: 0px;
boder:1px so
display: block;
cursor: point;
    padding-bottom: 1px;
 
}
.dropmenu li a{
padding: 10px 30px 9px 15px;
display: block;
cursor: point;
color: #FFF;
text-decoration: none;
background-color: #333;
font-weight: bold;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
}
.dropmenu li a:hover{
background-color: #666;
color: #CCC;
 
}
.dropmenu li span{
display: block;
float: right;
height: 10px;
width: 10px;
background:transparent url(catalog/view/javascript/jquery/dropmenu/plus.png) repeat-x scroll 0 0;
position: absolute;
top: 13px;
right: 10px;
}
.dropmenu li:hover ul, .dropmenu li:hover div{
display: block;
}
.dropmenu ul, .dropmenu div{
position: absolute;
display: none;
width: 162px;
left: 155px;
top: 0px;
margin: 0px;
padding: 0px;
    box-shadow: 1px 1px 1px #000;
}
.dropmenu li div ul{
border: none;
background: none;
position: relative;
display: block;
left: 0px;
}
.dropmenu ul li{
border: 0;
float: none;
}
 
.dropmenu div ul{
position: relative;
display: block;
}
.dropmenu li div{
background-color: #cccccc;
padding: 5px;
display: none;
position: absolute;
}
</style>
<script type="text/javascript" src="catalog/view/javascript/jquery/dropmenu/dropmenu.js"></script>

post-3549-0-21819200-1403116367_thumb.jpg

Надіслати
Поділитися на інших сайтах


Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.