Меню с картинками

Помогите, необходимо сделать меню следующего вида:

Можно ли это сделать в Joomla с тем условием, что добавляя новый пункт меню, новые пункты будут появляться ниже, т.е. ширина всего в три пункта, и если можно то как?
Заранее спасибо

 

И никто даже не знает как сделать?

 

всек это можно сделать! создаешь меню(картинки можно через саму джумлу вставить), идешь в модули и создаешь модуль с этим меню и версткой "списком"далее в ксс ul {...; list-style: none;} ширену и высоту выставляешь для "ul" и "li".
если надо подробности пиши в личку, помогу

 

Есть готовый бесплатный модуль для таких случаев - Ninja Simple Icon Menu:
Ссылка: http://extensions.joomla.org/extensions/structure-a-navigation/menu-systems/image-menus/3636
Высоту и ширину каждой кнопки можно задать в настройках. Отступы в настройках, вроде тоже есть, но я для себя ковырялся в CSS.
Там пять вариантов настройки отображения кнопок меню. При одном из них кнопки располагаются именно так, как показано на этом рисунке, с той лишь разницей, что в ряду может быть и 6 кнопок, если их размер и ширина блока, отведенного под модуль позволит им поместятся в один ряд в таком количестве (иными словами, они "переносятся на новую строку" по мере необходимости, как слова в книге).
Два НО:

• Изображения для кнопок меню берутся из директории модуля. Добавлять свои изображения в директорию модуля надо либо через ftp, либо через средства, предоставленные хостером в личном кабинете.
• Модуль способен изменять размеры изображения на лету, путем подгонки под указанные Вами настройки размера кнопок. Только вот качество получаемых изображений таково, что лучше сразу нарисовать кнопки лучшего размера.

 

Блин, а я горизонтальное меню мучал, он таблицей все верстать начинает, поэтому копаться долго надо. А списками сегодня попробую

 

а какой компонент отвечает за внешний вид меню?
Т.е. если меню выводится списками, где описана его верстка?

 

я так понял, надо изменить модуль mod_mainmenu, но как?

 

он же у тебя в диве список?! вот от него и веди путь типо #mainmenu ul li.....
в ксс-е выставляешь примерно такое (в кодуе много лишнего и недостающего будет, но принцип такойже)

Код (CODE):

1. #menubodyb {
2.     margin-top:15px;
3.     z-index:100;
4.     float:left;
5.     padding: 0 0 20px 0;
6.     font-size:14px;
7.     border-top:2px inset #ccccff;
8.     border-bottom:2px inset #ccccff;
9. }
10.  
11.  
12. #menubodyb ul{
13.     list-style: none;
14.     width:600px;
15.     margin: 0;
16. }
17.  
18. #menubodyb ul li {
19.     float: left;
20.     width:280px;
21.     cursor: pointer;
22.     display: block;
23.     margin-top:6px;
24.     margin-left:15px;
25. }
26.  
27. #menubodyb ul li:hover {
28.     border:3px outset;
29.     background:#ccc;
30.     width:274px;
31.     float: left;
32.     margin-top:0px;
33. }
34.  
35. #menubodyb ul li a{
36.     padding-left:5px;
37.     display: block;
38. }

 

хорошо, попробую стилями выровнять, спасибо