nitrol Опубликовано 7 апреля, 2013 Жалоба Поделиться Опубликовано 7 апреля, 2013 Как реализовать такое же меню как у них на симпле? http://tbox24.com.ua/ Цитата Ссылка на сообщение Поделиться на другие сайты
Kpoxa Опубликовано 7 апреля, 2013 Жалоба Поделиться Опубликовано 7 апреля, 2013 а там как раз симпла и стоит Цитата Ссылка на сообщение Поделиться на другие сайты
nitrol Опубликовано 8 апреля, 2013 Автор Жалоба Поделиться Опубликовано 8 апреля, 2013 я знаю, но не могу понять как они перебрали функц вывода смарти, чтобы сделать такое меню. в хтмл и цсс я ориентируюсь более-менее, а в смарти еще не разобрался Цитата Ссылка на сообщение Поделиться на другие сайты
daramal Опубликовано 8 апреля, 2013 Жалоба Поделиться Опубликовано 8 апреля, 2013 круто сделаны некоторые моменты в этом сайте =D> Цитата Ссылка на сообщение Поделиться на другие сайты
nitrol Опубликовано 8 апреля, 2013 Автор Жалоба Поделиться Опубликовано 8 апреля, 2013 Кроха, ты можешь подсказать, как сделать похожим, просто горизонтально и выпадающее меню на симпле? хотя бы убогий пример или ссылку какой мануал прочитать Цитата Ссылка на сообщение Поделиться на другие сайты
Kpoxa Опубликовано 8 апреля, 2013 Жалоба Поделиться Опубликовано 8 апреля, 2013 <div class="category-menu"> <div id="mainmenu" class="menu-cat"> {function name=categories_tree} {if $categories} <ul> {foreach $categories as $c} {* Показываем только видимые категории *} {if $c->visible} <li> {if $c->image}<img src="{$config->categories_images_dir}{$c->image}" alt="{$c->name}">{/if} <a {if $category->id == $c->id}class="selected"{/if} href="catalog/{$c->url}" data-category="{$c->id}">{$c->name}</a> {categories_tree categories=$c->subcategories} </li> {/if} {/foreach} </ul> {/if} {/function} {categories_tree categories=$categories} </div> </div> .category-menu {height:50px;margin:0 0 10px 0;padding:0px;border-bottom:1px solid #eeeeee;font-family:tahoma;font-size:12px;}.menu-cat ul {list-style: none;float:left;margin: 0px;padding: 2px 0 0 0px;position:relative;}.menu-cat ul li {float:left;width:97px;height:auto;padding: 0 1px;}.menu-cat ul li a {display:inline;float:left;width:97px;height:26px;font-size:10px;color:#4b4747;text-transform:uppercase;padding:7px 3px;text-decoration:none;text-align:center;}.menu-cat ul li:hover a,.menu-cat ul li.active a {text-decoration:none;background:#0870a1;color:#fff;}.category-menu ul ul {list-style:none;position:absolute;display:none;width:976px;height:auto;top:40px;left:1px;padding:7px;border:2px solid #0870a1;background:#fff;z-index:100;}.category-menu ul li ul li {width:auto;background:none;padding:0;margin:0;float:left;}.category-menu .menu-cat ul li ul li a {width:auto;color:#4b4747;font-size:1.1em;text-transform:none;padding:5px 10px 0 10px;margin:0;background:none;float:left;}.category-menu .menu-cat ul li:hover ul li:hover a:hover{text-decoration:none;color: #000;background:#eee;} Цитата Ссылка на сообщение Поделиться на другие сайты
Psimpla Опубликовано 8 апреля, 2013 Жалоба Поделиться Опубликовано 8 апреля, 2013 http://forum.simplacms.ru/profile/788/tbox24 это наверное админ сайта=) может у него спросите? Цитата Ссылка на сообщение Поделиться на другие сайты
nitrol Опубликовано 8 апреля, 2013 Автор Жалоба Поделиться Опубликовано 8 апреля, 2013 На сколько я понял это решение для версии ниже 2,5,1?но спасибо! Буду ковыряться! =) Цитата Ссылка на сообщение Поделиться на другие сайты
nitrol Опубликовано 8 апреля, 2013 Автор Жалоба Поделиться Опубликовано 8 апреля, 2013 Спасибо большое! На 2,5,1 получилоась вот так:<!-- Меню каталога --> <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> <!-- Меню каталога (The End)--> css#cssmenu ul,#cssmenu li,#cssmenu span,#cssmenu a { margin: 0; padding: 0; position: relative;}#cssmenu { height: 49px; border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; background: #141414; background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%; background: -moz-linear-gradient(top, #32323a 0%, #141414 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414)); background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%); background: -o-linear-gradient(top, #32323a 0%, #141414 100%); background: -ms-linear-gradient(top, #32323a 0%, #141414 100%); background: linear-gradient(to bottom, #32323a 0%, #141414 100%); border-bottom: 2px solid #0fa1e0;}#cssmenu:after,#cssmenu ul:after { content: ''; display: block; clear: both;}#cssmenu a { background: #141414; background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%; background: -moz-linear-gradient(top, #32323a 0%, #141414 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414)); background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%); background: -o-linear-gradient(top, #32323a 0%, #141414 100%); background: -ms-linear-gradient(top, #32323a 0%, #141414 100%); background: linear-gradient(to bottom, #32323a 0%, #141414 100%); color: #ffffff; display: inline-block; font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 12px; line-height: 49px; padding: 0 20px; text-decoration: none;}#cssmenu ul { list-style: none;}#cssmenu > ul { float: left;}#cssmenu > ul > li { float: left;}#cssmenu > ul > li:hover:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: 50%; bottom: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #0fa1e0; margin-left: -10px;}#cssmenu > ul > li:first-child > a { border-radius: 5px 0 0 0; -moz-border-radius: 5px 0 0 0; -webkit-border-radius: 5px 0 0 0;}#cssmenu > ul > li:last-child > a { border-radius: 0 5px 0 0; -moz-border-radius: 0 5px 0 0; -webkit-border-radius: 0 5px 0 0;}#cssmenu > ul > li.active > a { box-shadow: inset 0 0 3px #000000; -moz-box-shadow: inset 0 0 3px #000000; -webkit-box-shadow: inset 0 0 3px #000000; background: #070707; background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%; background: -moz-linear-gradient(top, #26262c 0%, #070707 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707)); background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%); background: -o-linear-gradient(top, #26262c 0%, #070707 100%); background: -ms-linear-gradient(top, #26262c 0%, #070707 100%); background: linear-gradient(to bottom, #26262c 0%, #070707 100%);}#cssmenu > ul > li:hover > a { background: #070707; background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%; background: -moz-linear-gradient(top, #26262c 0%, #070707 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707)); background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%); background: -o-linear-gradient(top, #26262c 0%, #070707 100%); background: -ms-linear-gradient(top, #26262c 0%, #070707 100%); background: linear-gradient(to bottom, #26262c 0%, #070707 100%); box-shadow: inset 0 0 3px #000000; -moz-box-shadow: inset 0 0 3px #000000; -webkit-box-shadow: inset 0 0 3px #000000;}#cssmenu .has-sub { z-index: 1;}#cssmenu .has-sub:hover > ul { display: block;}#cssmenu .has-sub ul { display: none; position: absolute; width: 200px; top: 100%; left: 0;}#cssmenu .has-sub ul li { *margin-bottom: -1px;}#cssmenu .has-sub ul li a { background: #0fa1e0; border-bottom: 1px dotted #6fc7ec; filter: none; font-size: 11px; display: block; line-height: 120%; padding: 10px;}#cssmenu .has-sub ul li:hover a { background: #0c7fb0;}#cssmenu .has-sub .has-sub:hover > ul { display: block;}#cssmenu .has-sub .has-sub ul { display: none; position: absolute; left: 100%; top: 0;}#cssmenu .has-sub .has-sub ul li a { background: #0c7fb0; border-bottom: 1px dotted #6db2d0;}#cssmenu .has-sub .has-sub ul li a:hover { background: #095c80;} Цитата Ссылка на сообщение Поделиться на другие сайты
koteyka Опубликовано 8 апреля, 2013 Жалоба Поделиться Опубликовано 8 апреля, 2013 А что значит эта строка?background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;Здесь какое-то изображение своё указывать? Цитата Ссылка на сообщение Поделиться на другие сайты
nitrol Опубликовано 8 апреля, 2013 Автор Жалоба Поделиться Опубликовано 8 апреля, 2013 Честно- пример горизонтального красивого меню взял из первой ссылки гугла. По этому можете использовать любое понравившееся. В конкретно этой ситуации за основной внешний вид (дополнения к коду симплы) это классы тегов div и li. Cssmenu и has-sub соответственно Цитата Ссылка на сообщение Поделиться на другие сайты
nitrol Опубликовано 8 апреля, 2013 Автор Жалоба Поделиться Опубликовано 8 апреля, 2013 И да, нужно было убрать лишние overflow:hidden из таблицы стилей Цитата Ссылка на сообщение Поделиться на другие сайты
koteyka Опубликовано 8 апреля, 2013 Жалоба Поделиться Опубликовано 8 апреля, 2013 На версию 2.1.0 стала без проблем. Строки с кучей символов удалил - ничего не поменялось.Чуть изменил этот блок:#cssmenu { height: 49px; margin:0px auto; width: 940px; border-radius: 5px 5px 0 0;Добавил margin:0px auto; и width: 940px; , иначе меню было по ширене всей страницы, а не по ширине блоков симплы.Как видите правый угол бордера закруглен, а левый нет. Как его тоже закруглить? Цитата Ссылка на сообщение Поделиться на другие сайты
daramal Опубликовано 8 апреля, 2013 Жалоба Поделиться Опубликовано 8 апреля, 2013 border-radius: 5px; и все )) Цитата Ссылка на сообщение Поделиться на другие сайты
koteyka Опубликовано 8 апреля, 2013 Жалоба Поделиться Опубликовано 8 апреля, 2013 Так есть там такоеborder-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0;Получается левая часть как будто срезана Цитата Ссылка на сообщение Поделиться на другие сайты
daramal Опубликовано 8 апреля, 2013 Жалоба Поделиться Опубликовано 8 апреля, 2013 можно сделать так:border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px; Цитата Ссылка на сообщение Поделиться на другие сайты
Enhill Опубликовано 8 апреля, 2013 Жалоба Поделиться Опубликовано 8 апреля, 2013 1) "Строки с кучей символов" - это картинка. Подробно тут2) border-radius: верх право низ лево; Просто укажите нужное закругление в таком порядке. Цитата Ссылка на сообщение Поделиться на другие сайты
nitrol Опубликовано 8 апреля, 2013 Автор Жалоба Поделиться Опубликовано 8 апреля, 2013 осталось убрать лишние overflow'ы чтобы отображались выпадающие меню Цитата Ссылка на сообщение Поделиться на другие сайты
koteyka Опубликовано 8 апреля, 2013 Жалоба Поделиться Опубликовано 8 апреля, 2013 border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px;Поменяло только правую сторону (нижний угол тоже закруглился), а левая сторона как будто обрезана. Цитата Ссылка на сообщение Поделиться на другие сайты
nitrol Опубликовано 8 апреля, 2013 Автор Жалоба Поделиться Опубликовано 8 апреля, 2013 у меня такое получилось из-за поднятия логотипа на пиксель выше меню. или, может быть, другого блока, попробуй какой ни будь блок(и) которые выше на странице, а в коде стоят ниже - опустить до уровня верхней границы меню или ниже. у меня такое произошло Цитата Ссылка на сообщение Поделиться на другие сайты
Enhill Опубликовано 8 апреля, 2013 Жалоба Поделиться Опубликовано 8 апреля, 2013 Зачем гадать на кофейной гуще? Просто скинь ссылку, вопрос сразу решиться. Цитата Ссылка на сообщение Поделиться на другие сайты
koteyka Опубликовано 8 апреля, 2013 Жалоба Поделиться Опубликовано 8 апреля, 2013 ОК. Попробую. У такого меню есть один недостаток - если названия корневых категорий большие или самих категорий (корневых) много, то меню делает вторую строку, при этом выпадающее меню первой строки скрывается за второй. Цитата Ссылка на сообщение Поделиться на другие сайты
koteyka Опубликовано 8 апреля, 2013 Жалоба Поделиться Опубликовано 8 апреля, 2013 Зачем гадать на кофейной гуще? Просто скинь ссылку, вопрос сразу решиться. tumko.ho.ua Цитата Ссылка на сообщение Поделиться на другие сайты
nitrol Опубликовано 8 апреля, 2013 Автор Жалоба Поделиться Опубликовано 8 апреля, 2013 http://cssmenumaker.com/css-menusбрал отсуюда. я думаю по аналогии найдешь то, что больше подходит/нравится Цитата Ссылка на сообщение Поделиться на другие сайты
nitrol Опубликовано 8 апреля, 2013 Автор Жалоба Поделиться Опубликовано 8 апреля, 2013 #cssmenu a {background: #141414;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCS…Ji+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);background: -o-linear-gradient(top, #32323a 0%, #141414 100%);background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);background: linear-gradient(to bottom, #32323a 0%, #141414 100%);color: #ffffff;display: inline-block;font-family: Helvetica, Arial, Verdana, sans-serif;font-size: 12px;line-height: 49px;padding: 0 20px;text-decoration: none;border-radius: 5px; } добавь эту последнюю строчку. бордер радиуса для тега <\a> не хватаетдобавил бордер радиус для <a> Цитата Ссылка на сообщение Поделиться на другие сайты
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.