Изогнутое меню! - Joomla 3.x: Шаблоны, разметка и макеты вывода

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

неужели в Google ничего не нарыли? тут ведь не Google! есть такое свойство в CSS, но не все браузы поддерживают, так что картинки и еще раз картинки))) ссылку не дам, ее надо сначала найти в справочнике, это ж ВРЕМЯ.

Да! Тут не Google, тут спецы сидят, можно сказать монстры )) А Google ничего не дал

ешкин кот! ! ! ! ! ! ! !


http://htmlbook.ru/css/transform

Попробовал сделать по другому. Вставил прозрачный единый png, и спозиционировал с помощью координат кликабельные прямоугольники.

<div id="gor-menu">
        <img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/images/menu.png" usemap="#navigator" alt="#" />
      <map id="navigator" name="navigator">
      
   <area target="" href="#" coords="120,24,220,54" title="Главная" alt="#" shape="rect">
   <area target="" href="#" coords="268,12,344,40" title="Форум" alt="#" shape="rect">
   <area target="" href="#" coords="410,8,484,26" title="Видео" alt="#" shape="rect">
   <area target="" href="#" coords="540,8,600,26" title="Фотогалерея" alt="#" shape="rect">
   <area target="" href="#" coords="656,11,760,40" title="Наши контакты" alt="#" shape="rect">
   <area target="" href="#" coords="820,32,900,60" title="Отзывы о нас" alt="#" shape="rect">
</map> </div>

В данный момент www.ramtamada.ru видно.
Вопрос! Как прикрутить в таком варианте модуль меню Joomla??

я вам одно, а вы своим путем идете... т.е. если выбросить все посты, кроме ваших, то тема останется вполне читаемой и со смыслом. монолог...
раз уж согласны с картинкой меню, то эти ваши ареа нафига? клеите к запорожцу турбину ямаховскую....
во-первых, поверните текст в нормальном редакторе, у вас качество ппц как пострадало, края корявые
во-вторых, сжать картинку через http://tinypng.org/ - из 29кБ останется 14кБ)))
в-третьих, прикручивать этот спрайт к стандартной структуре меню - достаточно немного стилей и все, а ваши кордсы-ареа клеить - этот шаблон модуля меню перекраивать и ояпть же стили добавлять. СМЫЫЫСЛ?
в-четвертых, в стандартном меню поисковики явно увидят главное слово внутри ссылки, например, <a href="...">Фотогалерея</a>, а в вашем варианте толкьо титлы и то еще вопрос, прикрутите ли вы их стандартному меню?)))

Создаете меню в Joomla потом в коде смотрите классы у пунктов меню и пишите для них нужные стили .

Спасибо за советы и особенно за ссылку на png сайтик  (принял к сведению) и так:
по поводу картинки png я подправил, теги ариа (тэг описывает активную область изображения) как без него?, http://htmlbook.ru/html/area,  с помощью стилей http://htmlbook.ru/css/transformпопробовал погнуть текст, так и не понял как его ровно изогнуть дугой, может на каждую букву надо свой стиль наклона делать? Если есть возможность покажите пример.Так для понятия общего стиля прикреплю файлик внешнего вида шаблона

Вот еще, при создании материала выдается ссылка, для чего она нужна? Можно ли позиционировать с помощью этих ссылок вывод материалов в разные области?

http://htmlbook.ru/css/transform
Вы спецификацию читали?
ИЕ от 10-ки (!), лиса, Opera - тоже практически последние версии

html-код модуля меню выглядит стандартно:

В Css
Все можно сделать стандартными средствами, работающими во всех браузерах.

вот код странички главного меню по горизонтали, надо каждый отдельный class="item-128, 129, 130 спозиционировать по своему

<div class="gor-menu">
<ul class="nav menu">
<li class="item-101 current active">
<a href="/">Главная</a>
</li>
<li class="item-127">
<a href="/forum.html">Форум</a>
</li>
<li class="item-128">
<a href="/">Видео</a>
</li>
<li class="item-131">
<li class="item-132">
<li class="item-133">
</ul>
</div>

Я описываю конкретный класс внутри тэга а

.gor-menu ul li  {
 display: inline-block;

 }
 .gor-menu ul li.item-127 a  {
 color:#900;
 
 }

он поддаётся цвету размеру но не позиционированию, тянет за собой всю линейку.
Вопрос! Как сделать чтоб при позиционировании только класс item-127,128,129  не тянул за собой всё меню?

Вот еще, в каком файле Joomla сохраняются эти классы меню?

<ul class="nav menu">
<li class="item-101 current active">
<a href="/">Главная</a>
</li>
<li class="item-127">
<a href="/forum.html">Форум</a>
</li>
<li class="item-128">
<a href="/">Видео</a>
</li>
<li class="item-131">
<li class="item-132">
<li class="item-133">
</ul>

Мне кажется разгадка где то рядом, разбить его на блоки (например) но.. где оно физически прописывается?

Ничего нигде не сохраняется, а формируется при запросе к странице.
Вывод определяется в шаблоне модуля modules/mod_menu/tmpl

Вы бы не лезли в php, Ваша задача решается стандартными средствами движка и CSS.

Вообщем хочу поделиться)) Поплясал я с бубном и вот вывод. Поворачивать текст с помощью

transform

нет никакого смысла. Человек правильно написал что к этому тэгу большие требования, хоть и описанна кроссбраузерность этого тэга  http://makexhtml.ru/2010/povorot-teksta-s-pomoshhyu-css3/, а на деле, прекрасно работает только Opera и Google браузеры, FF-тображает криво, IE -разворачивает только на 4 позиции (и то с костылями). Думаю не пришло еще время поворота текста с помощью CSS. 

И так личные выводы по изогнутому меню
1. Навигация меню с помощью задания на единой картинке кликабельных координат не очень удобна (нет возможности сделать выделение текста при наведении, да и не очень удобно)
2. Меню с помощью тэга transform (разворачивание текста по оси) не поддерживается многими браузерами, и в каждом браузере отображается по своему - вывод отметаем
3. Остается старый добрый способ. Порезать менюшку на png (в двух вариантах, первая та что отображается, вторая при наведении(для каждого пункта меню своя).
Теперь вот подскажите. Есть отдельный DIV в который надо вставить всё меню, запутался с ссылкой на каждый пункт меню, и что бы при наведении подставлялся второй png. Как сделать лучше? div побить по горизонтали на еще отдельные дивы, в каждый вставить картинку, спозиционировать, только не пойму как из CSS сделать её кликабельной?

мне,s помог ответ чуть конкретнее? что надо вставить в index.php

<div class="gor-menu">
       <jdoc:include type="modules" name="top-menu" style="none" />
      </div>

И как описать в CSS уже существующие классы меню

<div class="gor-menu">
<ul class="nav menu">
<li class="item-101 current active">
<a href="/">Главная</a>
</li>
<li class="item-127">
<a href="/forum.html">Форум</a>
</li>
<li class="item-128">
<a href="/">Видео</a>
</li>
<li class="item-131">
<li class="item-132">
<li class="item-133">
</ul>
</div>

вот код странички главного меню по горизонтали, надо каждый отдельный class="item-128, 129, 130 спозиционировать по своемуЯ описываю конкретный класс внутри тэга аон поддаётся цвету размеру но не позиционированию, тянет за собой всю линейку.
Вопрос! Как сделать чтоб при позиционировании только класс item-127,128,129  не тянул за собой всё меню?

.gor-menu ul li.item-127 {
 position: relative;
 top: 100px;
 left: 100px;
 }

.gor-menu ul li.item-127 {
 position: relative;
 top: 100px;
 left: 100px;
 }

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

Отказавшись от всех методов решил сделать меню отдельными картинками с ховером

Есть единый DIV, в него надо вставить картинки, каждая картинка (ссылка на меню) при наведении мышки появляется красный текст (тоже картинка) с помощью CSS сделать просто но.. картинка тогда должна и описываться в CSS (или я чего то недопонимаю?)
Вопросик такой, как правильно сделать ссылку в  индексе и как связать их с пунктами меню, соответственно меню потом как то надо скрыть
Задача такая.. есть созданное меню, весь код меню выше в постах, надо заменить надписи на картинки, которые лежат одна под другой,
перепробовал много методов описанных в инете, но пока ничего не получается, подскажите правильное направление движения.

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