Home > Critiche > Menu intelligente con javascript e style

Menu intelligente con javascript e style

January 24th, 2008 Lascia un commento Vai ai commenti

Ecco un esempio gustoso su come creare un menu sensibile alla pagina in cui siamo. Quali tecniche ho usato?
Innanzi tutto html e css (che non metto) per la creazione di un normale menu basato su css e liste (ul/li).
Quindi un po’ di coldfusion per individurare lato server la pagina in cui il navigatore è.
Alla fine qualche righetta di javascript per navigare il DOM (document object model) usando getElementById e getElementsByTagName e l’assegnazione onFly di uno stile con .style.
<ul id="myMenu">
<cfparam name="livello1" default="">
<li><a href="servizi-caratteristiche.cfm">CARATTERISTICHE »</a></li>
<li><a href="servizi-chi.cfm">A CHI SI RIVOLGE »</a></li>
<li><a href="servizi-marketing-consulting.cfm">MARKETING CONSULTING »</a></li>
<li><a href="servizi-tariffe.cfm">TARIFFE »</a></li>
<li><a href="servizi-informativa.cfm">INFORMATIVA »</a></li>
</ul>
<script type="text/javascript">
lista = document.getElementById("myMenu").getElementsByTagName("a");
for (i in lista) {
if (i > 0){
//lista[i] è un elemento DOM di tipo A
a = lista[i].toString();
a = a.split("/");
a = a[a.length - 1];
//alert(a);
if (a=="<cfoutput>#listLast(cgi.SCRIPT_NAME,"/")#</cfoutput>") lista[i].style.color="#333333";
}
}
</script>

Che ne dite? Utile, simpatico?
Il mio giovane amico Giobi mi chiede un esempio, beh prendetevi questo tabbed menu come base di partenza se proprio volete :)

 

Approfondimenti online

La tecnologia informatica ha fatto passi da gigante. In modo particolare Google, che con il suo analizzatore di testo, è in grado di proporre collegamenti contestuali a quanto hai appena letto. Questi i link pubblicitari proposti da Adsense.

Categorie: Critiche Tag: , , ,
  1. January 24th, 2008 at 10:02 | #1

    se non metti l’esempio..

  2. January 24th, 2008 at 10:05 | #2

    L’esempio? Basta che fate un cut & paste :)
    In realtà poi dipende da come uno vuole farsi il menù!

    Alla fine anche senza CSS esterno funziona… sfaticato :)

  3. January 24th, 2008 at 11:31 | #3

    less work = more free time :)

  4. January 24th, 2008 at 11:43 | #4

    more free time = more spent money…
    less work = less money…

    more free time & less work = “bancarotta!”

  1. September 23rd, 2008 at 09:20 | #1

Additional comments powered by BackType