Перейти к содержанию
Официальный форум поддержки Simpla

Добавление стрелки в раскрывающееся меню категории


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

Добрый день кто-то может подсказать код, для добавления
стрелки в раскрывающиеся меню категории и подкатегории?


Сейчас у меня так:

 

А хотелось бы видеть так:

 

Я как понимаю надо сделать контейнер для фото, но я в этом
не сильно разбираюсь и как реализовать не знаю, если кто знает каким образом это можно сделать, подскажите пожалуйста самим код что добавлять в index.tpl и style.scc ? путь на картинку: sigma.net.ua/files/uploads/info/strelka.png

Изменено пользователем Hazard
Ссылка на сообщение
Поделиться на другие сайты

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

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

Что-то не получается вот я добавил в самом низу строки:

 
#cssmenu > ul li a {
 
  /* Позиционирование */
  display: block;
  position: relative;
  margin: 0;
  border-top: 1px dotted #fff;
  border-bottom: 1px dotted #f5f5f5;
  padding: 7px 10px;
 
  /* Типографика */
  font-family: Helvetica, Arial, sans-serif;
  color: #292929;
  text-decoration: none;
 
  text-shadow: 0 1px 0 #fff;
  font-size: 13px;
  font-weight: 200;
 
  /* Фон и эффекты */
  background: #F2F2F2;
  background-repeat: no-repeat;
  position: left-bottom;
 
И вот что получилось 
 
 
Стрелка получается не правильно развернутая и справа её установить не выходит, плюс оно добавило картинку на все категории вместо тех где раскрывающееся меню, что я делаю не так? 
Изменено пользователем Hazard
Ссылка на сообщение
Поделиться на другие сайты

стрелка у вас конечно как конь большая.

 

#cssmenu > ul li a {
    display: block;
    position: relative;
    margin: 0;
    border-top: 1px dotted #fff;
    border-bottom: 1px dotted #f5f5f5;
    padding: 7px 10px;
    font-family: Helvetica, Arial, sans-serif;
    color: #292929;
    text-decoration: none;
    text-shadow: 0 1px 0 #fff;
    font-size: 13px;
    font-weight: 200;
    background: #F2F2F2 url(/files/uploads/info/strelka.png) 97% 50% no-repeat;
    background-size: 8px;
}

https://yadi.sk/i/vgZ4uaTGirJfi

Изменено пользователем mishanya
Ссылка на сообщение
Поделиться на другие сайты

Спасибо с этим понял, а как сделать чтоб эти стрелки были только в раскрывающем меню? сейчас они на каждом меню

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

Спасибо с этим понял, а как сделать чтоб эти стрелки были только в раскрывающем меню? сейчас они на каждом меню

 

вы что-то не так выводите, потому что класс has-sub должен быть только у тех елементов, у которых есть суб-меню. там нужно условие подправить в коде. тогда по этому классу цепляйте стрелку

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

Лови, я конечно хочу его полностью переписать и разобраться в нем так как поидее здесь много всего лишнего))

 

 

 /* Сброс стилей */
#cssmenu > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  line-height: 1;
}
/* Контейнер меню */
#cssmenu > ul {
  display: block;
  position: relative;
  
  width: 230px;
  
 
}
/* Элементы списка содержащие ссылки */
#cssmenu > ul li {
  display: block;
  position: relative;
  
  margin: 0;
  padding: 0;
  width: 100%;
}
/* Основные стили ссылок */
#cssmenu > ul li a {
 
  /* Позиционирование */
  display: block;
  position: relative;
  margin: 0;
  border-top: 1px dotted #fff;
 
  border-bottom: 1px dotted #f5f5f5;
  
  padding: 7px 10px;
 
  /* Типографика */
  font-family: Helvetica, Arial, sans-serif;
  color: #292929;
  text-decoration: none;
  
 
  text-shadow: 0 1px 0 #fff;
  font-size: 13px;
  font-weight: 200;
 
  /* Фон и эффекты */
background: #F2F2F2 url(/files/uploads/info/strelka.png) 97% 50% no-repeat;
    background-size: 5px;
 
 
}
/* Скругление углов первой ссылки меню и субменю */
#cssmenu > ul li:first-child > a {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-top: 8;
  
  
}
/* Скругление углов последней ссылки меню и субменю */
#cssmenu > ul li:last-child > a {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-bottom: 8;
  
}
/* Стили ссылок при наведении */
#cssmenu > ul li a:hover,
#cssmenu > ul li:hover > a {
  
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  background: #3b7cff;
  background: -webkit-linear-gradient(#3b7cff, #085aff);
  background: -moz-linear-gradient(#3b7cff, #085aff);
  background: linear-gradient(#3b7cff, #085aff);
  border-color: transparent;
}
/* Индикатор наличия субменю */
#cssmenu > ul .has-sub > a::after {
  content: 'files/uploads/info/strelka.png';
  position: absolute;
  top: 16px;
  right: 10px;
  width: 0px;
  height: 0px;
  /* Создаём стрелки используя свойство border */
 
  border: 4px solid transparent;
  border-left: 4px solid #292929;
  
}
/* Такая же стрелка, только темнее для создания эффекта тени */
#cssmenu > ul .has-sub > a::before {
  content: '';
  position: absolute;
  top: 17px;
  right: 10px;
  width: 0px;
  height: 0px;
  /* Создаём стрелку используя свойство border */
  
 
  border: 4px solid transparent;
  border-left: 4px solid #fff;
}
/* Меняем цвет стрелки при наведении курсора */
#cssmenu > ul li > a:hover::after,
#cssmenu > ul li:hover > a::after {
  border-left: 4px solid #fff;
}
#cssmenu > ul li > a:hover::before,
#cssmenu > ul li:hover > a::before {
  border-left: 4px solid rgba(0, 0, 0, 0.25);
}
/* Субменю */
#cssmenu > ul ul {
  position: absolute;
  left: 100%;
  top: -9999px;
  padding-left: 1px;
  opacity: 0;
  width: 160px;
  -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5); /* Для Firefox */
  -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5); /* Для Safari и Chrome */
  box-shadow: 0 0 5px rgba(0,0,0,0.5); /* Параметры тени */
  /* Эффект затухания */
 
  -webkit-transition: opacity 0.3s ease-in;
  -moz-transition: opacity 0.3s ease-in;
  transition: opacity 0.3s ease-in;
}
#cssmenu > ul ul li a {
  font-size: 12px;
}
/* Показываем субменю при наведении курсора на родительскую ссылку */
#cssmenu > ul li:hover > ul {
  top: 0px;
  opacity: 1;
  z-index: 1000;
}
Ссылка на сообщение
Поделиться на другие сайты

А понял вот:

 

 <div id="cssmenu">
                         
                         {* Рекурсивная функция вывода дерева категорий *}
                         {function name=categories_tree}
                         {if $categories}
                         <ul>
                         {foreach $categories as $c}
                         {* Показываем только видимые категории *}
                         {if $c->visible}
                         <li class='has-sub'>    
                         {if $c->image}<img src="{$config->categories_images_dir}{$c->image}" alt="{$c->name}">{/if}
                         <span><a {if $category->id == $c->id}class="selected"{/if} href="catalog/{$c->url}" data-category="{$c->id}">{$c->name}</a></span>
                         {categories_tree categories=$c->subcategories}
                         </li>    
                         {/if} 
                         {/foreach}
                         </ul>
                         {/if}
                         {/function}
                         {categories_tree categories=$categories}
                        
                         </div>
Ссылка на сообщение
Поделиться на другие сайты
<div id="cssmenu">
     {* Рекурсивная функция вывода дерева категорий *}
     {function name=categories_tree}
          {if $categories}
               <ul>
                    {foreach $categories as $c}
                         {* Показываем только видимые категории *}
                         {if $c->visible}
                              <li {if $c->subcategories}class='has-sub'{/if}>    
                                   {if $c->image}<img src="{$config->categories_images_dir}{$c->image}" alt="{$c->name}">{/if}
                                   <span><a {if $category->id == $c->id}class="selected"{/if} href="catalog/{$c->url}" data-category="{$c->id}">{$c->name}</a></span>
                                   {categories_tree categories=$c->subcategories}
                              </li>    
                         {/if} 
                    {/foreach}
               </ul>
          {/if}
     {/function}
     {categories_tree categories=$categories}
</div>

так пробуйте. класс has-sub добавляется только если у категории есть подкатегории. 

также вам нужно убрать фон из стиля #cssmenu > ul li a и сделать его только для #cssmenu > ul li.has-sub a

#cssmenu > ul li a {
    display: block;
    position: relative;
    margin: 0;
    border-top: 1px dotted #fff;
    border-bottom: 1px dotted #f5f5f5;
    padding: 7px 10px;
    font-family: Helvetica, Arial, sans-serif;
    color: #292929;
    text-decoration: none;
    text-shadow: 0 1px 0 #fff;
    font-size: 13px;
    font-weight: 200;
}

#cssmenu > ul li.has-sub a {
    background: #F2F2F2 url(/files/uploads/info/strelka.png) 97% 50% no-repeat;
    background-size: 8px;
}
Ссылка на сообщение
Поделиться на другие сайты

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

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

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

Загрузка...
×
×
  • Создать...