modificare menu template per joomla

[daniele95]

Buona sera a tutti, come da oggetto ho creato un template per joomla con un noto programma che permette ciò(non so se posso nominarlo). Se devo fare piccole modiche a mano di solito mi arrangio ma questa volta è una cosa un po' particolare... mi spiego meglio:

ho un menu normale a tendina.. devo riuscire a far si che il menu a tendina che si apre non si sviluppi verticalmente, bensì orizzontalmente. da quello che ho capito devo lavorare di liste e css ma non ho trovato guide su internet e capire il codice generato dal programma è una sfida... sapete darmi qualche consiglio? caso mai posto il codice relativo al menu.

[carlomarangoni]

Se non sappiamo come è fatto il meno e nemmeno il codice oil il programma insomma non sappiamo nulla come si fa a darti consigli?

[daniele95]

il programma è artisteer versione 3.0.

il codice che riguarda il menu è questo:

/* begin Menu */
/* menu structure */

.art-hmenu a, .art-hmenu a:link, .art-hmenu a:visited, .art-hmenu a:hover
{
outline: none;
}

.art-hmenu, .art-hmenu ul
{
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
display: block;
}

.art-hmenu li
{
margin: 0;
padding: 0;
border: 0;
display: block;
float: left;
position: relative;
z-index: 5;
background: none;
}

.art-hmenu li:hover
{
z-index: 10000;
white-space: normal;
}

.art-hmenu li li
{
float: none;
}

.art-hmenu ul
{
visibility: hidden;
position: absolute;
z-index: 10;
left: 0;
top: 0;
background: none;
min-height: 0;
background-image: url('../images/spacer.gif');
padding: 10px 30px 30px 30px;
margin: -10px 0 0 -30px;
}

.art-hmenu li:hover>ul
{
visibility: visible;
top: 100%;
}

.art-hmenu li li:hover>ul
{
top: 0;
left: 100%;
}

.art-hmenu:after, .art-hmenu ul:after
{
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
.art-hmenu{
min-height: 0;
position:relative;
padding: 6px 6px 6px 6px;
}

.art-hmenu ul ul
{
padding: 30px 30px 30px 10px;
margin: -30px 0 0 -10px;
}

div.art-nav-center
{
position: relative;
float: right;
right: 50%;
}

ul.art-hmenu
{
position: relative;
float: left;
left: 50%;
}

.firefox2 ul.art-hmenu
{
float: none;
}

/* menu structure */

.art-nav
{
position: relative;
margin:0 auto;
min-height: 72px;
z-index: 100;
margin-top: 0;
margin-bottom: 0;
}

.art-nav-outer
{
position:absolute;
width:100%;
}

.art-nav-l, .art-nav-r
{
position: absolute;
z-index: -1;
top: 0;
height: 100%;
background-image: url('../images/nav.png');
}

.art-nav-l
{
left: 0;
right: 0;
}

.art-nav-r
{
right: 0;
width: 814px;
clip: rect(auto, auto, auto, 814px);
}

.art-hmenu-extra1
{
position : absolute;
left: 0;
top: 0;
width: auto;
height: 72px;
background-position: center;
}

.art-hmenu-extra2
{
position: absolute;
right: 0;
top: 0;
width: auto;
height: 72px;
background-position: center;
}

/* images in menu items */
ul.art-hmenu img.art-menu-image, ul.art-hmenu img.art-menu-image-left
{
vertical-align: middle;
margin-right: 5px;
}

ul.art-hmenu img.art-menu-image-right
{
vertical-align: middle;
margin-left: 5px;
}
/* end Menu */

/* begin MenuItem */
.art-hmenu a
{
position: relative;
display: block;
overflow: hidden;
height: 60px;
cursor: pointer;
font-weight: bold;
text-align: left;
text-decoration: none;
}

.art-hmenu ul li
{
margin:0;
clear: both;
}

.art-hmenu a .r, .art-hmenu a .l
{
position: absolute;
display: block;
top: 0;
z-index: -1;
height: 190px;
background-image: url('../images/menuitem.png');
}

.art-hmenu a .l
{
left: 0;
right: 7px;
}

.art-hmenu a .r
{
width: 414px;
right: 0;
clip: rect(auto, auto, auto, 407px);
}

.art-hmenu a .t, .art-hmenu ul a, .art-hmenu a:link, .art-hmenu a:visited, .art-hmenu a:hover
{
font-weight: bold;
text-align: left;
text-decoration: none;
}

.art-hmenu a .t
{
color: #FFFFFF;
padding: 0 16px;
margin: 0 7px;
line-height: 60px;
text-align: center;
}

.art-hmenu a:hover .l, .art-hmenu a:hover .r
{
top: -65px;
}

.art-hmenu li:hover>a .l, .art-hmenu li:hover>a .r
{
top: -65px;
}

.art-hmenu li:hover a .l, .art-hmenu li:hover a .r
{
top: -65px;
}
.art-hmenu a:hover .t
{
color: #CB2E06;
}

.art-hmenu li:hover a .t
{
color: #CB2E06;
}

.art-hmenu li:hover>a .t
{
color: #CB2E06;
}

.art-hmenu a.active .l, .art-hmenu a.active .r
{
top: -130px;
}

.art-hmenu a.active .t
{
color: #CB2E06;
}

.art-hmenu a:hover.separator-without-submenu
{
cursor: default;
}

.art-hmenu a:hover.separator-without-submenu .t
{
color: #FFFFFF;
}

.art-hmenu li:hover a.separator-without-submenu .t
{
color: #FFFFFF;
}

a:hover.separator-without-submenu .r, a:hover.separator-without-submenu .l
{
top: 0 !important;
}
/* end MenuItem */

/* begin MenuSeparator */
.art-hmenu .art-hmenu-li-separator
{
display: block;
width: 2px;
height:60px;
}
.art-nav .art-hmenu-separator
{
display: block;
margin:0 auto;
width: 2px;
height: 60px;
background-image: url('../images/menuseparator.png');
}
/* end MenuSeparator */

/* begin MenuSubItem */
.art-hmenu ul a
{
display: block;
white-space: nowrap;
height: 26px;
width: 180px;
overflow: hidden;
background-image: url('../images/subitem.png');
background-position: left top;
background-repeat: repeat-x;
border-width: 0;
border-style: solid;
text-align: left;
text-indent: 12px;
text-decoration: none;
line-height: 26px;
color: #FFFFFF;
font-size: 12px;
margin:0;
padding:0;
}

.art-nav ul.art-hmenu ul span, .art-nav ul.art-hmenu ul span span
{
display: inline;
float: none;
margin: inherit;
padding: inherit;
background-image: none;
text-align: inherit;
text-decoration: inherit;
}

.art-hmenu ul a:link, .art-hmenu ul a:visited, .art-hmenu ul a:hover, .art-hmenu ul a:active, .art-nav ul.art-hmenu ul span, .art-nav ul.art-hmenu ul span span
{
text-align: left;
text-indent: 12px;
text-decoration: none;
line-height: 26px;
color: #FFFFFF;
font-size: 12px;
margin:0;
padding:0;
}

.art-hmenu ul li a:hover
{
color: #000000;
background-position: 0 -26px;
}

.art-hmenu ul li:hover>a
{
color: #000000;
background-position: 0 -26px;
}

.art-nav .art-hmenu ul li a:hover span, .art-nav .art-hmenu ul li a:hover span span
{
color: #000000;
}

.art-nav .art-hmenu ul li:hover>a span, .art-nav .art-hmenu ul li:hover>a span span
{
color: #000000;
}

/* end MenuSubItem */




grazie mille dell'aiuto!!!

[daniele95]

nessuno??

[Mich_]

Originariamente inviato da daniele95
nessuno??

1. Rileggi il regolamento, in particolare l'ultimo paragrafo.

2. Ci sono infiniti aiuti per realizzare i menu. Puoi partire dal relativo capitolo dei "link utili" (di solito non conviene modificare un menu per cambiarne il comportamento, ma convinee partire da un menu gia` pronto)

[GI89]

Se non sai come procedere ti consiglio di visualizzare il menu con chrome e con gli strumenti di sviluppatore puoi modificare la parte visuale del menu direttamente online tramite il codice.

Ovviamente questo funziona solo lato user, così almeno prima di scombinare il codice puoi fare degli esperimenti

[daniele95]

vi ringrazio dell'aiuto... ho già provato tramite firebug a modificare il menu ma con scarsi risultati. non riesco a cambiare il comportamento del menu e non trovo tuttorial che mi permettano di realizzare ciò... credo che più che modificare il css debba modificare la struttura html... cioè invece di essere ul li li dovrebbe divetare ul ul li... o qualcosa del genere... giusto? comunque controllo la sezione link utili e vi faccio sapere

grazie ancora... ogni ulteriore aiuto è gradito!!

[daniele95]

in pratica se ho ben capito da questo articolo: http://web.archive.org/web/201301161...s/taminglists/

devo aggiungere la classe

art-hmenu ul li ul {
display:inline;
}

oppure non ci ho capito niente?