Hazard Опубликовано 2 сентября, 2015 Жалоба Поделиться Опубликовано 2 сентября, 2015 (изменено) Добрый день кто-то может подсказать код, для добавлениястрелки в раскрывающиеся меню категории и подкатегории?Сейчас у меня так: А хотелось бы видеть так: Я как понимаю надо сделать контейнер для фото, но я в этомне сильно разбираюсь и как реализовать не знаю, если кто знает каким образом это можно сделать, подскажите пожалуйста самим код что добавлять в index.tpl и style.scc ? путь на картинку: sigma.net.ua/files/uploads/info/strelka.png Изменено 2 сентября, 2015 пользователем Hazard Цитата Ссылка на сообщение Поделиться на другие сайты
shooroop Опубликовано 2 сентября, 2015 Жалоба Поделиться Опубликовано 2 сентября, 2015 нужно только в ксс, в стиле дописиать который отвечает у тебя за серый фот в нем добавить бекграунд-имайдж и задать позиционирование справа Цитата Ссылка на сообщение Поделиться на другие сайты
Hazard Опубликовано 3 сентября, 2015 Автор Жалоба Поделиться Опубликовано 3 сентября, 2015 (изменено) Что-то не получается вот я добавил в самом низу строки: #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-image: url(http://sigma.net.ua/files/uploads/info/strelka.png); background-repeat: no-repeat; position: left-bottom; И вот что получилось Стрелка получается не правильно развернутая и справа её установить не выходит, плюс оно добавило картинку на все категории вместо тех где раскрывающееся меню, что я делаю не так? Изменено 3 сентября, 2015 пользователем Hazard Цитата Ссылка на сообщение Поделиться на другие сайты
mishanya Опубликовано 3 сентября, 2015 Жалоба Поделиться Опубликовано 3 сентября, 2015 (изменено) стрелка у вас конечно как конь большая. #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 Изменено 3 сентября, 2015 пользователем mishanya Цитата Ссылка на сообщение Поделиться на другие сайты
Hazard Опубликовано 4 сентября, 2015 Автор Жалоба Поделиться Опубликовано 4 сентября, 2015 Спасибо с этим понял, а как сделать чтоб эти стрелки были только в раскрывающем меню? сейчас они на каждом меню Цитата Ссылка на сообщение Поделиться на другие сайты
mishanya Опубликовано 4 сентября, 2015 Жалоба Поделиться Опубликовано 4 сентября, 2015 Спасибо с этим понял, а как сделать чтоб эти стрелки были только в раскрывающем меню? сейчас они на каждом меню вы что-то не так выводите, потому что класс has-sub должен быть только у тех елементов, у которых есть суб-меню. там нужно условие подправить в коде. тогда по этому классу цепляйте стрелку Цитата Ссылка на сообщение Поделиться на другие сайты
Hazard Опубликовано 4 сентября, 2015 Автор Жалоба Поделиться Опубликовано 4 сентября, 2015 Ясно, спасибо буду разбираться. Цитата Ссылка на сообщение Поделиться на другие сайты
mishanya Опубликовано 4 сентября, 2015 Жалоба Поделиться Опубликовано 4 сентября, 2015 Ясно, спасибо буду разбираться. покажите код вывода меню, подскажем Цитата Ссылка на сообщение Поделиться на другие сайты
Hazard Опубликовано 5 сентября, 2015 Автор Жалоба Поделиться Опубликовано 5 сентября, 2015 Лови, я конечно хочу его полностью переписать и разобраться в нем так как поидее здесь много всего лишнего)) /* Сброс стилей */#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;} Цитата Ссылка на сообщение Поделиться на другие сайты
mishanya Опубликовано 5 сентября, 2015 Жалоба Поделиться Опубликовано 5 сентября, 2015 это стили а не код вывода меню Цитата Ссылка на сообщение Поделиться на другие сайты
Hazard Опубликовано 5 сентября, 2015 Автор Жалоба Поделиться Опубликовано 5 сентября, 2015 А понял вот: <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> Цитата Ссылка на сообщение Поделиться на другие сайты
mishanya Опубликовано 5 сентября, 2015 Жалоба Поделиться Опубликовано 5 сентября, 2015 <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; } Цитата Ссылка на сообщение Поделиться на другие сайты
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.