• Как сделать такую же паутину?

    dasha_programmist
    @dasha_programmist
    ex Software Engineer at Reddit TS/React/GraphQL/Go
    Вот там есть несколько демок вместе с кодом
    Ответ написан
    Комментировать
  • Как сделать многоуровневое меню категорий в opencart 2.0?

    karmis
    @karmis Автор вопроса
    Решил для 3-х уровней

    Модуль category:

    HTML
    <div class="panel panel-default">
        <div class="panel-heading"><b> Каталог товаров </b><!--- <?php echo $heading_title; ?> --> </div>    
    
    
    <ul class="customdrop" role="menu" aria-labelledby="dropdownMenu">
    
    
    <?php foreach ($categories as $category) { ?>
        <?php 
            $classes = '';
            if ($category['category_id'] == $category_id) { 
                $classes .= 'active';
            }
    
            if($category['children']) {
                $classes .= ' dropdown-submenu';
            }
        ?>
            <li class="<?php echo $classes; ?>">
                <a href="<?php echo $category['href'];?>" title="<?php echo $category['name'];?>">
                    <?php echo $category['name']; ?>
                </a>
    
                <?php if($category['children']) { ?>
                <ul class="dropdown-menu">
                    <?php 
                        $classes = '';
                        foreach ($category['children'] as $child)
                        { 
                            if($child['children']) {
                                $classes .= ' dropdown-submenu';
                            }
                    ?>
                    <li class="<?php echo $classes; ?>">
                        <a href="<?php echo $child['href'];?>" tabindex="-1" title="<?php echo $child['name'];?>"><?php echo $child['name'];?></a>
                        <?php 
                            if($child['children']) {
                        ?>
                        <ul class="dropdown-menu">
                            <?php 
                                $classes = '';
                                foreach ($child['children'] as $subChild)
                                { 
                                    if($subChild['children']) {
                                        $classes .= 'dropdown-submenu';
                                    }
                            ?>
                            <li class="<?php echo $classes; ?>">
                                <a href="<?php echo $subChild['href'];?>" title="<?php echo $subChild['name'];?>"><?php echo $subChild['name'];?></a>
                            </li>
                            <?php } ?>
                        </ul>
                            <?php } ?>
                    </li>
                    <?php } ?>
                </ul>
    
                    <?php }?>
    
            </li>
    <?php } ?>
        </ul>
    
    </div>


    Стили:
    .customdrop {
    	display: block;
    	position: relative;
    	margin-bottom: 0px;
    	margin-top: 0px;
    	margin-left: -2px;
    	list-style: none;
    	padding: 10px;
    }
    
    .customdrop:hover {
    	background: #ffda10;
    }
    .customdrop > li:hover  > a,
    .customdrop > li.active > a{
       color: #000;
    }
    
    .customdrop .dropdown-menu li > a:hover {
    text-decoration: none;
    color: #000;
    background-color: #ffda10;
    background-image: none;
    }
    
    .customdrop .dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #cccccc;
    margin-top: 5px;
    margin-right: 0px;
    }
    .customdrop .dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0px 0px 0px 0px;
    -moz-border-radius: 0px 0px 0px 0px;
    border-radius: 0px 0px 0px 0px;
    }
    .customdrop .dropdown-menu {
    	position: absolute;
    	top: 100%;
    	left: 0;
    	z-index: 1000;
    	display: none;
    	float: left;
    	min-width: 262px;
    	padding: 5px 0;
    	margin: 7px 0 0;
    	list-style: none;
    	font-size: 14px;
    	background-color: #fff;
    }
    
    .dropdown-submenu {
        position: relative;
    }
    .dropdown-submenu>.dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -6px;
        margin-left: -1px;
        -webkit-border-radius: 0 6px 6px 6px;
        -moz-border-radius: 0 6px 6px 6px;
        border-radius: 0 6px 6px 6px;
    }
    .dropdown-submenu:hover>.dropdown-menu {
        display: block;
    }
    .dropdown-submenu>a:after {
        display: block;
        content: " ";
        float: right;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-left-color: #cccccc;
        margin-top: 5px;
        margin-right: -10px;
    }
    .dropdown-submenu:hover>a:after {
        border-left-color: #ffffff;
    }
    .dropdown-submenu.pull-left {
        float: none;
    }
    .dropdown-submenu.pull-left>.dropdown-menu {
        left: -100%;
        margin-left: 10px;
        -webkit-border-radius: 0px 0 0px 0px;
        -moz-border-radius: 0px 0 0px 0px;
        border-radius: 0px 0 0px 0px;
    }


    Код модуля Category
    <?php
    class ControllerModuleCategory extends Controller {
    	public function index($setting) {
    		$this->load->language('module/category');
    
    		$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])) {
    			$data['category_id'] = $parts[0];
    		} else {
    			$data['category_id'] = 0;
    		}
    
    		if (isset($parts[1])) {
    			$data['child_id'] = $parts[1];
    		} else {
    			$data['child_id'] = 0;
    		}
    
    		$this->load->model('catalog/category');
    
    		$this->load->model('catalog/product');
    
    		$data['categories'] = array();
    
    		$categories = $this->model_catalog_category->getCategories(0);
    
    		foreach ($categories as $category) {
    			$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
    				);
    
    				$subChild_data = array();
    				$subChildrens = $this->model_catalog_category->getCategories($child['category_id']);
    				foreach ($subChildrens as $subChild) {
    					$filter_data = array(
    						'filter_category_id'  => $subChild['category_id'],
    						'filter_sub_category' => true
    					);
    
    					$subChild_data[] = array(
    						'category_id' => $subChild['category_id'],
    						'name'        => $subChild['name'] . ($this->config->get('config_product_count') ? ' (' . $this->model_catalog_product->getTotalProducts($filter_data) . ')' : ''),
    						'href'        => $this->url->link('product/category', 'path=' . $category['category_id'] . '_' . $subChild['category_id'])
    					);
    				}
    
    				$children_data[] = array(
    					'category_id' => $child['category_id'],
    					'children'	  => $subChild_data,
    					'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'])
    				);
    
    			}
    
    			$filter_data = array(
    				'filter_category_id'  => $category['category_id'],
    				'filter_sub_category' => true
    			);
    
    			$data['categories'][] = array(
    				'category_id' => $category['category_id'],
    				'name'        => $category['name'] . ($this->config->get('config_product_count') ? ' (' . $this->model_catalog_product->getTotalProducts($filter_data) . ')' : ''),
    				'children'    => $children_data,
    				'href'        => $this->url->link('product/category', 'path=' . $category['category_id'])
    			);
    		}
    
    		if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/module/category.tpl')) {
    			return $this->load->view($this->config->get('config_template') . '/template/module/category.tpl', $data);
    		} else {
    			return $this->load->view('default/template/module/category.tpl', $data);
    		}
    	}
    }
    Ответ написан
    1 комментарий
  • Почему не срабатывает:last-child?

    nowm
    @nowm
    Так происходит потому, что :last-child — это последний элемент родительского контейнера. Совсем последний. После него не должно быть никаких элементов. Не получится использовать и :last-of-type, так как last-of-type подразумевает последний элемент по имени, а не по классу (и если после последнего div.blog-item будет хотя бы один div на этом же уровне иерархии, этот div.blog-item перестанет быть last-of-type).

    Вообще, я разделители меду элементами делал бы так:

    .blog-item + .blog-item {
        /* В ситуации с 5-ю элементами с классом .blog-item, которые строго 
         * следуют друг за другом, этот селектор применится
         * к элементам со второго по пятый. Первый будет проигнорирован.
         */
    }
    Ответ написан
    Комментировать