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

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

я знаю, но не могу понять как они перебрали функц вывода смарти, чтобы сделать такое меню. в хтмл и цсс я ориентируюсь более-менее, а в смарти еще не разобрался :(

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

Кроха, ты можешь подсказать, как сделать похожим, просто горизонтально и выпадающее меню на симпле? хотя бы убогий пример или ссылку какой мануал прочитать :)

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

	<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;}
Ссылка на сообщение
Поделиться на другие сайты

Спасибо большое! На 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;}
Ссылка на сообщение
Поделиться на другие сайты

А что значит эта строка?

background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;

Здесь какое-то изображение своё указывать?
Ссылка на сообщение
Поделиться на другие сайты

Честно- пример горизонтального красивого меню взял из первой ссылки гугла. По этому можете использовать любое понравившееся. В конкретно этой ситуации за основной внешний вид (дополнения к коду симплы) это классы тегов div и li. Cssmenu и has-sub соответственно

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

На версию 2.1.0 стала без проблем. Строки с кучей символов удалил - ничего не поменялось.

Чуть изменил этот блок:

#cssmenu {  height: 49px;  margin:0px auto;  width: 940px;  border-radius: 5px 5px 0 0;

Добавил margin:0px auto; и width: 940px; , иначе меню было по ширене всей страницы, а не по ширине блоков симплы.
Как видите правый угол бордера закруглен, а левый нет. Как его тоже закруглить?
Ссылка на сообщение
Поделиться на другие сайты

Так есть там такое

border-radius: 5px 5px 0 0;  -moz-border-radius: 5px 5px 0 0;  -webkit-border-radius: 5px 5px 0 0;

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

1) "Строки с кучей символов" - это картинка. Подробно тут

2) border-radius: верх право низ лево; Просто укажите нужное закругление в таком порядке.

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

border-radius: 5px 5px 5px 5px;  -moz-border-radius: 5px 5px 5px 5px;  -webkit-border-radius: 5px 5px 5px 5px;

Поменяло только правую сторону (нижний угол тоже закруглился), а левая сторона как будто обрезана.
Ссылка на сообщение
Поделиться на другие сайты

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

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

ОК. Попробую. У такого меню есть один недостаток - если названия корневых категорий большие или самих категорий (корневых) много, то меню делает вторую строку, при этом выпадающее меню первой строки скрывается за второй.

Ссылка на сообщение
Поделиться на другие сайты
Зачем гадать на кофейной гуще? Просто скинь ссылку, вопрос сразу решиться.

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

#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>
Ссылка на сообщение
Поделиться на другие сайты

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

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

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

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

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

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

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

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

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