Back to top

Autore Topic: come si fa il menu orizzontale di qusto sito?!?!  (Letto 1524 volte)

Offline raffajoomla

  • Esploratore
  • **
  • Post: 146
    • Mostra profilo
come si fa il menu orizzontale di qusto sito?!?!
« il: 03 Giu 2008, 00:02:22 »
ciao,

potete spiegarmi/ci come si può rifare un menu orizzontale come quello che vedo in qusto sito in top?(quello che contiene home, indice forum, download etc...)

ne vedo parecchi in giro su questo stile ma non capisco come si facciano css, html etc...

non trovo guide a riguardo e mi sembra un gran menu.
please!
help i like it so much!!!

grazie

Offline raffajoomla

  • Esploratore
  • **
  • Post: 146
    • Mostra profilo
Re: come si fa il menu orizzontale di qusto sito?!?!
« Risposta #1 il: 03 Giu 2008, 10:00:52 »
ho trovato un tutorial che consiglio a tutti, ben fatto e spiega anche come fare un menu di queto tipo.

http://www.compassdesigns.net/tutorials/208-joomla-15-template-tutorial.html?start=4

tranne però per quanto riguarda il link attivo che anche qui non spiega come farlo funzionare per differenziarlo dagli altri...

in pratica, ho l'immagine in allegato per le voci di menu orizzontale e di seguito incollo il css che fa funzionare tutto tranne l'active link che in questo caso sarebbe di colore arancione:

.moduletablemenu {
margin-bottom:1em;
}

.moduletablemenu h3 {
font:1.3em Tahoma,Arial,Helvetica,sans-serif;
background:#000;
color:#ccc;
text-align:left;
margin:0 -10px;
padding:5px 10px;
}

.moduletablemenu ul {
list-style:none;
margin:5px 0;
}

.moduletablemenu li {
background:url(../images/leftmenu.png) bottom left no-repeat;
height:24px;
font:14px Tahoma,Arial, Helvetica, sans-serif;
margin:10px 0;
padding:0 0 0 10px;
}

.moduletablemenu a:link,.moduletablemenu a:visited {
color:#fff;
display:block;
text-decoration:none;
padding-left:5px;
}

.moduletablemenu a:hover {
text-decoration:none;
color:#fff;
background:#ADADAD;
}



.moduletabletabs {
font:bold 1em Georgia, Verdana, Geneva, Arial, Helvetica, sans-serif;
}

.moduletabletabs ul {
list-style:none;
float:right;
background:#212121;
width:100%;
margin:0;
padding:0;
}

.moduletabletabs li {
float:right;
background:url(../images/tabs.png) no-repeat 0 -4px;
margin:0;
padding:0 0 0 12px;
}

.moduletabletabs a:link,.moduletabletabs a:visited {
float:left;
display:block;
color:#000;
background:url(../images/tabs.png) no-repeat 100% -4px;
text-decoration:none;
margin:0;
padding:7px 18px 5px 9px;
}

.moduletabletabs #current {
background:url(../images/tabs.png) no-repeat 0 -84px;
}

.moduletabletabs #current a {
color:#fff;
background:url(../images/tabs.png) no-repeat 100% -84px;
}


[allegato eliminato da un amministratore]
« Ultima modifica: 03 Giu 2008, 10:37:19 da raffajoomla »

 



Web Design Bolzano Kreatif