Создание открытого меню

Lifeamove · 5 квітня 2017

В общем нужно реализовать похожее меню (под слайдером)

Пример исполнения - ссылка на сайте-шаблон там где реализовано

У меня шаблон - default, ocStore версии: 2.3.0.2.1

На сколько я понял нужно этот код (см. ниже) вставить в файл

catalog/view/theme/default/template/common/home.tpl

По идеи нужно вставлять:

<div id="content" class="col-sm-12">...</div> 
после
<div id="slideshow0" class="owl-carousel owl-theme" style="opacity: 1; display: block;">...</div>
<script type="text/javascript">...</script>
сюда

Только в файле catalog/view/theme/default/template/common/home.tpl есть только:

<?php echo $header; ?>
<div class="container">
<div class="row"><?php echo $column_left; ?>
    <?php if ($column_left && $column_right) { ?>
    <?php $class = 'col-sm-6'; ?>
    <?php } elseif ($column_left || $column_right) { ?>
    <?php $class = 'col-sm-9'; ?>
    <?php } else { ?>
    <?php $class = 'col-sm-12'; ?>
    <?php } ?>
    <div id="content" class="<?php echo $class; ?>"><?php echo $content_top; ?><?php echo $content_bottom; ?></div>
    <?php echo $column_right; ?></div>
</div>
<?php echo $footer; ?>

И куда это меню вставлять что бы оно оказалось под слайдером? (главный вопрос)

Код всего меню:

Скрытый текст


<div>
    <div class="container"><div class="row">
<div class="next-item">
  <div class="next-grid">
    <div class="next-grid-img">
      <img src="catalog/view/theme/next_default/effects/images/5.png" alt="img05">
    </div>
				<div class="next-grid-info">
                  <h3>Шины</h3>
					<span>Летние</span>
                         <ul>
							<li><a href="desktops/pc/" class="effects">PC</a></li>
							<li><a href="desktops/mac/" class="effects">Mac</a></li>
						</ul>
				</div>
				<a href="desktops/">Подробнее</a>
  </div>
			<div class="next-grid">
              <div class="next-grid-img">
                <img src="catalog/view/theme/next_default/effects/images/1.png" alt="img05">
              </div>
				<div class="next-grid-info">
                  <h3>Ноутбуки</h3>
					<span>Ультрабуки и лапти</span>
                  <ul>
						<li><a href="laptop-notebook/macs/" class="effects">PC</a></li>
						<li><a href="laptop-notebook/windows/" class="effects">Windows</a></li>
					</ul>
				</div>
				<a href="laptop-notebook/">Подробнее</a>
  </div>
			<div class="next-grid">
              <div class="next-grid-img">
                <img src="catalog/view/theme/next_default/effects/images/2.png" alt="img05">
              </div>
				<div class="next-grid-info">
                  <h3>Компоненты</h3>
					<span>Кошки мышки</span>
                     <ul>
						<li><a href="component/web-camera/" class="effects">Веб-камеры</a></li>
						<li><a href="component/monitor/" class="effects">Мониторы</a></li>
						<li><a href="component/mouse/" class="effects">Мышки</a></li>
						<li><a href="component/printer/" class="effects">Принтеры</a></li>
						<li><a href="component/scanner/" class="effects">Сканеры</a></li>
					</ul>
				</div>
				<a href="component/">Подробнее</a>
  </div>
			<div class="next-grid">
              <div class="next-grid-img">
                <img src="catalog/view/theme/next_default/effects/images/6.png" alt="img05">
              </div>
				<div class="next-grid-info">
                  <h3>Планшеты</h3>
					<span>Шплампеты и балетки</span>
                     <ul>
						<li><a href="tablet/test11/" class="effects">test 11</a></li>
						<li><a href="tablet/test12/" class="effects">test 12</a></li>
						<li><a href="tablet/test15/" class="effects">test 13</a></li>
					</ul>
				</div>
				<a href="tablet/">Подробнее</a>
  </div>
			<div class="next-grid">
              <div class="next-grid-img">
                <img src="catalog/view/theme/next_default/effects/images/4.png" alt="img05">
              </div>
				<div class="next-grid-info">
                  <h3>Камеры</h3>
					<span>Фото и видео</span>
                     <ul>
						<li><a href="camera/test16/" class="effects">test 16</a></li>
						<li><a href="camera/test20/" class="effects">test 20</a></li>
						<li><a href="camera/test25/" class="effects">test 25</a></li>
					</ul>
				</div>
				<a href="camera/">Подробнее</a>
  </div>
			<div class="next-grid">
              <div class="next-grid-img">
                <img src="catalog/view/theme/next_default/effects/images/3.png" alt="img05">
              </div>
				<div class="next-grid-info">
                  <h3>Телефоны и PDA</h3>
					<span>Лопаты и шпатели</span>
                  <ul>
						<li><a href="smartphone/test17/" class="effects">test 17</a></li>
						<li><a href="index.php?route=product/category&path=24_59" class="effects">Афони</a></li>
					</ul>
				</div>
				<a href="smartphone/">Подробнее</a>
  </div>
		</div>
     </div>
</div></div>

Код CSS который нужно вставить в /catalog/view/theme/default/stylesheet/stylesheet.css

Скрытый текст


.next-item {
    list-style: outside none none;
    margin: 0 auto;
    padding: 10px 0;
    text-align: center;
}

.next-grid {
    display: inline-block;
    margin: 0;
    padding: 10px;
    position: relative;
    text-align: left;
    width: 32.9%;
    opacity: 0.89;
    -webkit-transition: all 0.3s ease-out 0.2s;
    -moz-transition: all 0.3s ease-out 0.2s;
    -ms-transition: all 0.3s ease-out 0.2s;
    transition: all 0.3s ease-out 0.2s;
}

.next-grid-img {
    border: 5px solid #fafafa;
}

.next-grid-img > img {
    background: #edf3ff none repeat scroll 0 0;
    width: 100%;
}

.next-grid-info {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    bottom: 0;
    display: block;
    margin: 10px 0;
    padding: 20px;
    position: absolute;
    top: 0;
    width: 50%;
}

.next-grid .next-grid-info h3 {
    border-bottom: 1px solid;
    color: rgba(9, 65, 192, 0.75);
    font-size: 17px;
    margin: 0;
    padding: 0 0 5px;
}

.next-grid .next-grid-info span {
    font-size: 10px;
    color: #ed4e6e;
}

.next-grid .next-grid-info ul {
    padding: 0;
}

.next-grid-info li {
    display: inline;
}

.next-grid .next-grid-info li a {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border-radius: 0;
    bottom: 0;
    color: rgba(84, 91, 122, 0.99);
    display: block;
    padding: 0 5px;
    position: relative;
    right: 0;
    text-align: left;
}

.next-grid .next-grid-info ul li a::before {
    content: "▪ ";
    color: rgb(9, 92, 192);
    font-size: 13px;
}

.next-grid > a {
    bottom: 10%;
    position: absolute;
    right: 10%;
    background: rgba(9, 92, 192, 1) none repeat scroll 0 0;
    color: #fff;
    display: inline-block;
    padding: 5px 10px;
    text-align: center;
}

.next-grid .next-grid-info a {
    bottom: 20px;
    position: absolute;
    right: 20px;
}

Может кто на код меню и CSS взглянуть? Нормально?

Змінено 5 квітня 2017 користувачем Lifeamove

Eldaeron · 5 квітня 2017

@Lifeamove Неправильно поняли.

Верхнее меню (Навигация) в файле header.php

Lifeamove · 5 квітня 2017

@Eldaeron Вы имеете ввиду это меню:?

То есть нужно сделать новый container под слайдером

P.S. нужно сделать меню которое на картинке...

Змінено 5 квітня 2017 користувачем Lifeamove

Eldaeron · 5 квітня 2017

Lifeamove, Да

https://www.dropbox.com/s/9vxef4umpgttf1t/opencart.jpg?dl=0

Lifeamove · 5 квітня 2017

@Eldaeron Прошу прощения, видимо я не совсем понятно описал задумку (задачку)

То меню которое в header.php - шапке не трогаем.

Нужно сделать что то на подобие этого (возможно не 6 блоков, а 3... ну это уже технические мелочи) суть что бы сделать такой фейк "меню" под слайдером...

Как вот на этом шаблоне: ссылка >

P.S. Наблюдаю за уважаемыми посетителями - (в большинстве случаев ~70%)

Заходят на сайт и сразу крутят страницу вниз, как будто не замечают меню (которое в шапке)

Змінено 5 квітня 2017 користувачем Lifeamove

Eldaeron · 5 квітня 2017

Lifeamove, Судя по всему, у вас нет навыков программирования, Можете взять модуль HTML-контент вставить свой код туда, потом в Дизайн/Схемы включить вывод своего НTML-контента.

Минусов правда много, но работать будет)

Если хотите с php делать тоже реализуемо, но дольше)

Змінено 5 квітня 2017 користувачем Eldaeron

Lifeamove · 5 квітня 2017

@Eldaeron Конечно хотелось бы реализовать данную задумку более адекватно...

А код который я писал (в самом верху): "Код всего меню:" - его вставить куда нибудь не получится?

+Плюс добавить в /catalog/view/theme/default/stylesheet/stylesheet.css "Код CSS" который я тоже вверху написал...

По языку php это как делать?

P.S. навыки ведь не купить, нужно практиковаться - стараюсь...

Eldaeron · 5 квітня 2017

Lifeamove, Ну попробуйте посмотрите php-код как выводиться меню любое 2 уровней, даже стандартное) Просто HTML код свой подставляйте по анологии. Только там где картинка вставлять могут быть проблемы, как выводить покажем.

Lifeamove · 5 квітня 2017

@Eldaeron Вот это изучать? Вариант 1 Вариант 2

Потом по аналогии мой html в какой файл подставлять? В catalog/view/theme/default/template/common/home.tpl ?

Я разок попробовал вставить туда - в home.tpl... очень даже странно, Но все живы... тьфу-тьфу.

Всё нормально было, только при просмотре с телефона, эти так сказать блоки съезжаются в кашу и перемешиваются...

Змінено 5 квітня 2017 користувачем Lifeamove

Eldaeron · 5 квітня 2017

Lifeamove,

Цитата

<nav id="menu" class="navbar">
<div class="navbar-header"><span id="category" class="visible-xs"><?php echo $text_category; ?></span>
<button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<?php foreach ($categories as $category) { ?>
<?php if ($category['children']) { ?>
<li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?></a>
<div class="dropdown-menu">
<div class="dropdown-inner">
<?php foreach (array_chunk($category['children'], ceil(count($category['children']) / $category['column'])) as $children) { ?>
<ul class="list-unstyled">
<?php foreach ($children as $child) { ?>
<li><a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a></li>
<?php } ?>
</ul>
<?php } ?>
</div>
<a href="<?php echo $category['href']; ?>" class="see-all"><?php echo $text_all; ?> <?php echo $category['name']; ?></a> </div>
</li>
<?php } else { ?>
<li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
<?php } ?>
<?php } ?>
</ul>
</div>
</nav>

Или тут: https://toster.ru/q/214714

Да в home.tpl, можете, но нужно в контроллере подключить возможность работы с меню:

catalog/controller/common/home.php

Сразу же перед:

$data['column_left'] = $this->load->controller('common/column_left');
		$data['column_right'] = $this->load->controller('common/column_right');

Вставить этот код:

// Menu
		$this->load->model('catalog/category');
		$this->load->model('catalog/product');
		$data['categories'] = array();
		$categories = $this->model_catalog_category->getCategories(0);
		foreach ($categories as $category) {
			if ($category['top']) {
				// Level 2
				$children_data = array();
				$children = $this->model_catalog_category->getCategories($category['category_id']);
				foreach ($children as $child) {
					$filter_data = array(
						'filter_category_id'  => $child['category_id'],
						'filter_sub_category' => true
					);
					$children_data[] = array(
						'name'  => $child['name'] . ($this->config->get('config_product_count') ? ' (' . $this->model_catalog_product->getTotalProducts($filter_data) . ')' : ''),
						'href'  => $this->url->link('product/category', 'path=' . $category['category_id'] . '_' . $child['category_id'])
					);
				}
				// Level 1
				$data['categories'][] = array(
					'name'     => $category['name'],
					'children' => $children_data,
					'column'   => $category['column'] ? $category['column'] : 1,
					'href'     => $this->url->link('product/category', 'path=' . $category['category_id'])
				);
			}
		}

fanatic · 5 квітня 2017

6 минут назад, Lifeamove сказал:

Вот это изучать? Вариант 1

это для wordpress

fanatic · 5 квітня 2017

9 минут назад, Lifeamove сказал:

только при просмотре с телефона, эти так сказать блоки съезжаются в кашу и перемешиваются

это нужно править css. под комп одни стили под мобильные другие

Lifeamove · 5 квітня 2017

@Eldaeron Если я всё это сделаю я попаду в топ 10 яндекс и google?

Кроме шуток:

3 минуты назад, Eldaeron сказал:

Да в home.tpl, можете, но нужно в контроллере подключить возможность работы с меню:

Возможность работы с меню, что вы под этим подразумевате?

Там разве есть с чем работать?

Грубо: сделать блок, в него запечатать: заголовок, список ссылок, картинку. Выровнять что бы адаптировался под меньшие экраны и моб. устройства, и поиграться с ccs...

P.S. Всё на много тяжелее чем мне кажется?

Lifeamove · 5 квітня 2017

@fanatic

2 минуты назад, fanatic сказал:

это нужно править css. под комп одни стили под мобильные другие

Ну да... хочу понять зачем в контроллер лезть... без "стёба".

Eldaeron · 5 квітня 2017

Lifeamove, если вы в контроллере не обьявите массив $categories, или не сделаете функцию getCaterogies, то работать с меню у вас неполучится в теории и на практике.

Просто, у вас HTML код например на 250 строк, в php это все сократится можно до 50 например. Да и при смене названия категории или рисунка, каждый раз залазить и править код ненадо будет)

Змінено 5 квітня 2017 користувачем Eldaeron

Lifeamove · 6 квітня 2017

@Eldaeron Я вас понял, то есть нужно делать массив и функцию к нему... чтобы в "Блочном псевдо-меню" категории менялись автоматически - верно?

А если сделать список категорий в меню - в виде ссылок на эти категории? Понятно что - чтобы поменять нужно будет лезть в код...

Miha7685776 · 6 квітня 2017

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

Lifeamove · 6 квітня 2017

@Miha7685776

19 минут назад, Miha7685776 сказал:

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

На модуле категории сделать? Не совсем понял что вы имеете ввиду... У меня категории есть... Грубо нужно сделать блок с заголовком,списком-ссылки на категории и фото.

Толку писать нету - что писать?

@Eldaeron @fanatic Я вставил код в catalog/view/theme/default/template/common/home.tpl всё более менее...

1. Получилось вставить только перед слайдером, а нужно после слайдера - перед "Рекомендуемые" "Товары со скидкой"...

Как бы слайдер передвинуть вверх этого меню = или это меню под слайдер?!

2. Не адаптируется под мобильные устройства;

Ссылку на сайт скинул Вам в личные сообщения.

fanatic · 6 квітня 2017

16 минут назад, Lifeamove сказал:

Не адаптируется под мобильные устройства;

а стили, прописаны под мобильные? по волшебству, адаптации не будет.

Змінено 6 квітня 2017 користувачем fanatic

fanatic · 6 квітня 2017

простейший вариант

@media screen and (max-width:479px) {
    .next-grid{
        width:100% !important;
    }
}

Miha7685776 · 6 квітня 2017

39 минут назад, Lifeamove сказал:

@Miha7685776

На модуле категории сделать? Не совсем понял что вы имеете ввиду... У меня категории есть... Грубо нужно сделать блок с заголовком,списком-ссылки на категории и фото.

Толку писать нету - что писать?

@Eldaeron @fanatic Я вставил код в catalog/view/theme/default/template/common/home.tpl всё более менее...

1. Получилось вставить только перед слайдером, а нужно после слайдера - перед "Рекомендуемые" "Товары со скидкой"...

Как бы слайдер передвинуть вверх этого меню = или это меню под слайдер?!

2. Не адаптируется под мобильные устройства;

Ссылку на сайт скинул Вам в личные сообщения.

есть модуль "категории" там выводятся ссылки на категории и подкатегории. можно скопировать этот модуль, отредактировать контроллер на вывод фото род категории, и стилизовать.

Miha7685776 · 6 квітня 2017

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

Lifeamove · 6 квітня 2017

@fanatic Это бомба! Получилось, а чтобы "блоки" раньше начинали деформироваться - нужно max-width: *** поменять да?

Осталось только это "псевдо-меню" под слайдер загнать!

Miha7685776 · 6 квітня 2017

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

Lifeamove · 6 квітня 2017

@Miha7685776 спасибо за предложение, но ведь это не раздел Услуги...

Поймите меня правильно, я хочу разобраться сам... как бы, хотя бы в таких простых "задачах"

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

У какого модуля нет модели?

Змінено 6 квітня 2017 користувачем Lifeamove

<nav id="menu" class="navbar">
	<div class="navbar-header"><span id="category" class="visible-xs"><?php echo $text_category; ?></span>
	<button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
	</div>
	<div class="collapse navbar-collapse navbar-ex1-collapse">
	<ul class="nav navbar-nav">
	<?php foreach ($categories as $category) { ?>
	<?php if ($category['children']) { ?>
	<li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?></a>
	<div class="dropdown-menu">
	<div class="dropdown-inner">
	<?php foreach (array_chunk($category['children'], ceil(count($category['children']) / $category['column'])) as $children) { ?>
	<ul class="list-unstyled">
	<?php foreach ($children as $child) { ?>
	<li><a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a></li>
	<?php } ?>
	</ul>
	<?php } ?>
	</div>
	<a href="<?php echo $category['href']; ?>" class="see-all"><?php echo $text_all; ?> <?php echo $category['name']; ?></a> </div>
	</li>
	<?php } else { ?>
	<li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
	<?php } ?>
	<?php } ?>
	</ul>
	</div>
	</nav>

Вхід

Создание открытого меню

Recommended Posts

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

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

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

Вхід

Зараз на сторінці 0 користувачів

Покупцям

Розробникам

Корисна інформація

Останні розширення

Important Information