Pagina Iniziale | Preferiti Comunity: Login | Registrati | Newsletter | Forum | Concorsi Newsgroup
Canali: Hardware | Software | Files | Webmaster | Cellulari | Shop
Nel sito: News | Articoli | Files | Manuali | Consigli PC | Schede cellulari | Programmaz. | Hosting | Motori Ricerca | Glossario | Link
Servizi: Shopping | Forum | Crea un BLOG | Cartucce Compatibili | Tool News |   Sponsor: Automazione Industriale
  Articoli

Recensioni
Consigli per PC


  News e files

Software
Telefonia
Internet
Tecnologia
Files e Download


  Manualistica

Guide HW/SW
Scripts ASP
Scripts HTML
Scripts Java
Scripts Delphi
Glossario


  Shopping

Hardware
Software e Giochi
Elettronica
Cinema e Film
Console e Accessori
Prodotti Ufficio
Formazione e Corsi

Tieniti aggiornato sul mondo della tecnologia con la nostra newsletter!
La tecnologia sulla tua
casella e-mail

[Info Newsletter]


Concessionaria Pubblicitaria

<< News Precedente [Fine Pagina] News Successiva >>
Voci di menu evidenziate in base alla pagina corrente

Un articolo di: Fonte Esterna del 29/05/2003      Letture: 15588

Articolo di Luca Ruggiero - http://www.lukeonweb.net

Abbiamo già visto nell'articolo "Un semplice menu per Dreamweaver" com'è possibile creare una serie di link, o se vogliamo essere precisi un menu, disposto in maniera da evidenziare il link corrispondente alla pagina corrente, in modo da aumentare la navigabilità e far capire all'utente in che sezione del sito che stà visitando si trova.

L'articolo appena citato realizza un menu del genere con le immagini e con una serie di lunghe e pastose funzioni, il cui codice è ridondante e poco leggibile, quasi assurdo da modificare in funzione delle proprie esigenze.

In questo Aticolo, invece, realizzeremo si lo stesso tipo di applicazione, ma utilizzando del testo al posto delle immagine, quantunque sia possibile anche utilizzare le immagini o qualsiasi altro elemento Htrml al posto dei link testuali.

Facciamo un attimo il punto della situazione e rendiamoci conto di cosa abbiamo bisogno, e perchè. Ipotizziamo di avere un menu che punti a tutte le principali sezioni del nostro sito; per creare un esempio semplice e snello ipotizzo di avere i link alla homepage, alla pagina dei contatti ed a quella del forum.

Creiamo quindi i file
  • homepage.html
  • forum.html
  • email.html
i cui codici di base si differenziano solo per il o per altri elementi grafici e logici che non mensionerò: <pre> <font color=red> <html> <head> <title>homepage</title> <basefont size="2" face="Verdana"> </head> <body link="#0000FF" alink="#0000FF" vlink="#0000FF"> <script language="javascript" src="menu.js"></script> </body> </html> </font></font></pre> <p align=justify> Un'analogia per tutti i file che si andrà a creare è l'inclusione del file menu.js in cui costruiremo fisicamente il menu: è quindi opportuno includerlo nella porzione di codice in cui si vuole che il menu compaia poi sulle nostre pagine Html. <br><br> Utilizzeremo come parametro di identificazione della pagina corrente il nome del file corrente, reperendolo all'interno della barra degli indirizzi del browser; se la condizione si verifica, cioè se la stringa "nomefile.estensione" viene trovata, evidenzieremo la voce del menu di riferimento in grassetto (o con qualsiasi altra stilizzazione a gusto dello sviluppatore), altrimenti la mostreremo con lo stesso stile delle altre voci di menu non corrispondenti alla pagina corrente. <br><br> Posso assicurarvi che è un'applicazione molto più lunga a dirsi che a farsi! Vediamo quindi il codice opportunamente commentato che compone il menu, all'interno del file menu.js: <br> <br> <font color=red> <b>// Inizializzo la variabile identificativa dell'indirizzo della pagina corrente</b><br> var QUESTA_PAGINA = document.URL;<br><br> document.write("<div>");<br> if (QUESTA_PAGINA.indexOf("homepage.html") == (-1))<br> {<br> <b> // Stampo a video la voce della pagina NON corrente</b><br> document.write(":: <a href='homepage.html'>homepage</a>");<br> }<br> else<br> {<br> <b> // Stampo a video la voce della pagina corrente evidenziata in grassetto</b><br> document.write(":: <a href='homepage.html'><b>homepage</b></a>");<br> }<br> <br> document.write("<br>");<br> <br> if (QUESTA_PAGINA.indexOf("forum.html") == (-1))<br> {<br> document.write(":: <a href='forum.html'>forum</a>");<br> }<br> else<br> {<br> document.write(":: <a href='forum.html'><b>forum</b></a>");<br> }<br> <br> document.write("<br>"); <br><br> if (QUESTA_PAGINA.indexOf("email.html") == (-1))<br> {<br> document.write(":: <a href='email.html'>email</a>");<br> }<br> else<br> {<br> document.write(":: <a href='email.html'><b>email</a></b>");<br> }<br> <br> document.write("</div>");</font> <br><br> Prendiamo adesso la parte di codice clou dello script, quella che setta la condizione per la verifica della pagina corrente: <br><br> <font color=red> if (QUESTA_PAGINA.indexOf("homepage.html") == (-1))<br></font><br> Il metodo di tipo String indexOf() effettua la ricerca della stringa specificata tra parentesi e doppi apici; settiamo l'uguaglianza sul valore -1 nel caso in cui la pagina non sia quella corrente e non vada quindi evidenziata in grassetto. <!-- Copiare è reato. Tutti i diritti riservati www.AZPoint.net .--> </p> <!-- JuiceADVStopCrawler --> <!-- <JuiceADV_StopCrawler> --> </td> </tr> </table> <a name="giù"></a> </td> </tr> <tr> <td colspan="2" class="text_index_news" align="center"> <table width="560" bgcolor="#F0F0DF" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center" class="text_index_news"> <div><div style="float:left;padding:1px;"> <!-- AZPoint.net 550x250 custom --> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:inline-block;width:550px;height:250px" data-ad-client="ca-pub-9079370951624339" data-ad-slot="6851316615"></ins> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div></div> </td> </tr> </table> <br><br> <a href=''><b>[Indietro]</a>    <A HREF="#top">[Su]</A>      <A HREF="index.asp">[Home]</A>      <A HREF="#inizio_commenti">[Commenti]</A>      <A href="stampa.asp?id=5500">[V. Stampabile]</A></b> <br><br> </td> </tr> <tr> <td> </td> <td colspan="1" width="100%"> <!-- Inizio zona commenti --> <a name="inizio_commenti"> <p align="center"> <script type="text/javascript" src="http://video.leonardo.it/widget_video/widget.js?ide=azpoint_wdgt&cat=tecnologia&format=json&width=550&height=380&onClick=false&autostart=false&playlist=true&qt=8&forcedate="></script> <form name="commenta_news" action="commenta.asp" method="post"> <input type="hidden" name="ID_News" id="ID_News" value="5500"> <input type="hidden" name="Action" id="Action" value="1"> <script language="JavaScript"> function Apri2(act){ document.commenta_news.Action.value=act; document.commenta_news.submit(); } </script> <font size="2" color="#CC1F02"> <b>Commenta questa notizia:</b><br> <font size="2" color="#000000"> Non hai ancora fatto il <b><a href="JavaScript:Apri2(2)">Login</a></b>, puoi inserire commenti solo come anonimo.<br> <b>ATTENZIONE:</b> il tuo <b>IP</b> verrà memorizzato e mostrato a fianco del commento; con la pressione del tasto <i>invia commento</i> si esprime il consenso alla pubblicazione di tale informazione personale.<br> A discrezione dello staff, i commenti ritenuti non adatti od offensivi potranno essere rimossi. Nel caso di utilizzo di espressioni volgari od offensive il comportamento verrà segnalato al provider interessato.<br> Se non ti sei ancora registrato, cosa aspetti? <b><a href="registrati.asp" target="_new">Registrati</a></b> subito.</font><br> <u>Da ora puoi discutere dei problemi informatici anche sul nostro <a href=http://forum.azpoint.net><b>FORUM</b></a></u><br><br> <font size=2 color=#CC1F02> Testo del commento:<br> <textarea name="testo" id="testo" cols="80" Rows="8" style='BACKGROUND-COLOR: #DCDCC2; BORDER-COLOR: #000000;'></textarea><br> <Input type="submit" value="Invia commento" style='BACKGROUND-COLOR: #CCBF99; BORDER-COLOR: #000000;'><br> <input style="visibility:hidden" name="testo2"> </font> </form> </p> <!-- Fine zona commenti --> </td> </tr> </table> <script language="JavaScript" src="http://ctx.juiceadv.com/load_crawler.asp?User=24&nkey=4"></script> </td> <td WIDTH="210" valign=top bgcolor=#41484F> <table bgcolor="#41484F" width="100%" cellpadding="0" cellspacing="0"> <tr> <td bgcolor="#41484F" class="text_dxmen" valign="top" align="center" cellpadding="0" cellspacing="0"> <table align="center" bordercolor="#5b5b5b" width="100%" border="0" cellpadding="5" cellspacing="1" bgcolor="#111111"> <tr> <td class="text_index_news" valign="top" bgcolor="#111111" height="22"> <img src="img/forum.gif" width="20" height="20" align="absmiddle">  <b><font color="#FFFF00" size="2">News correlate</font></b> </td> </tr> <tr> <td class="text_index_news" valign="top" bgcolor="#dedede"> <font size="1"> <img height="5" src="img/puntogiallo.gif" width="5" align="absmiddle"> <a href="articoli.asp?id=13744">Impedire la selezione del contenuto di una pagina.</a><br><img height="5" src="img/puntogiallo.gif" width="5" align="absmiddle"> <a href="articoli.asp?id=7106">Proprietà e metodi dell'oggetto Math</a><br><img height="5" src="img/puntogiallo.gif" width="5" align="absmiddle"> <a href="articoli.asp?id=5500">Voci di menu evidenziate in base alla pagina corrente</a><br><img height="5" src="img/puntogiallo.gif" width="5" align="absmiddle"> <a href="articoli.asp?id=5497">Conteggio dei caratteri di una Textarea senza spazi</a><br><img height="5" src="img/puntogiallo.gif" width="5" align="absmiddle"> <a href="articoli.asp?id=5319">Form gestire inserimento dati</a><br><img height="5" src="img/puntogiallo.gif" width="5" align="absmiddle"> <a href="articoli.asp?id=5316">Immagine casuale all'apertura della pagina</a><br><img height="5" src="img/puntogiallo.gif" width="5" align="absmiddle"> <a href="articoli.asp?id=5282">Caricare un foglio di stile esterno a seconda del Browser in uso</a><br><img height="5" src="img/puntogiallo.gif" width="5" align="absmiddle"> <a href="articoli.asp?id=5037">Il link 'Organizza Preferiti'</a><br> </td> </tr> </table> </td> </tr> </table> <div align="center"> <iframe marginwidth="0" marginheight="0" frameborder="0" scrolling="no" allowtransparency="true" src="http://srv.juiceadv.com/banner_iframe.asp?user=24&tipo=6" width="160" height="600"></iframe> </div> <table bordercolor="#5b5b5b" width="100%" border="0" cellpadding="5" cellspacing="1" bgcolor="#111111"> <tr> <td class="text_index_news" valign="top" bgcolor="#111111" height="22"> <img src="img/forum.gif" width="20" height="20" align="absmiddle">  <a href="http://forum.azpoint.net"><b><font color="#FFFF00" size="2">Ultime dal Forum</font></b></a> </td> </tr> <tr> <td class="text_index_news" valign="top" bgcolor="#7b7b7b"> <p align="left"><font color="#FFFFFF" size="1"> <img src="img/puntogrigio.gif" width="8" height="8"> <a style=color:#FFFFFF; href="http://forum.azpoint.net/viewtopic.php?f=23&t=1005951"> free economics homework help</a><br> <img src="img/puntogrigio.gif" width="8" height="8"> <a style=color:#FFFFFF; href="http://forum.azpoint.net/viewtopic.php?f=23&t=1005950"> interest and career goals essay</a><br> <img src="img/puntogrigio.gif" width="8" height="8"> <a style=color:#FFFFFF; href="http://forum.azpoint.net/viewtopic.php?f=23&t=1005949"> in the heat of the night movie essay</a><br> <img src="img/puntogrigio.gif" width="8" height="8"> <a style=color:#FFFFFF; href="http://forum.azpoint.net/viewtopic.php?f=23&t=1005948"> buy discount casadei online Manolo Blahnik Green Snake Driver Flats</a><br> <img src="img/puntogrigio.gif" width="8" height="8"> <a style=color:#FFFFFF; href="http://forum.azpoint.net/viewtopic.php?f=23&t=1005947"> essay on eid ul azha in urdu</a><br> <img src="img/puntogrigio.gif" width="8" height="8"> <a style=color:#FFFFFF; href="http://forum.azpoint.net/viewtopic.php?f=23&t=1005946"> dar american history essay</a><br> <img src="img/puntogrigio.gif" width="8" height="8"> <a style=color:#FFFFFF; href="http://forum.azpoint.net/viewtopic.php?f=23&t=1005945"> sample admissions essays harvard</a><br> <img src="img/puntogrigio.gif" width="8" height="8"> <a style=color:#FFFFFF; href="http://forum.azpoint.net/viewtopic.php?f=23&t=1005944"> thesis on web crawler</a><br> <img src="img/puntogrigio.gif" width="8" height="8"> <a style=color:#FFFFFF; href="http://forum.azpoint.net/viewtopic.php?f=23&t=1005943"> thesis on dma controller</a><br> </td> </tr> </table> </td> </tr> </table> <table width="976" cellpadding="0" cellspacing="0" bgcolor="#41484F" align=center> <tr> <td class="text_azzurro_p" align="center"> <table border="0"> <tr> <td class="text_azzurro_p"> <a style="color:#FFF;" href="novità.asp">Comunicazioni</a> </td> <td class="text_azzurro_p"> / <a style="color:#FFF;" href="diritti.asp">Note Legali</a> </td> <td class="text_azzurro_p"> / <a style="color:#FFF;" href="staff.asp">Staff</a> </td> <td class="text_azzurro_p"> / <a style="color:#FFF;" href="collabora.asp">Collabora</a> </td> <td class="text_azzurro_p"> / <a style="color:#FFF;" href="pubb.asp">Pubblicità</a> </td> <td class="text_azzurro_p"> / <a style="color:#FFF;" target="_blank" href="http://www.juiceadv.com/privacy.asp">Privacy</a> </td> <td class="text_azzurro_p"> / <a style="color:#FFF;" href="contatti.asp">Contatti</a> </td> </tr> </table> <br><br> <font color="#FFF"> Triboo Media s.r.l. (società socio unico) - Viale Sarca 336 - Edificio 16, 20126 Milano (MI) Cap. Soc. 1.250.000,00 euro i.v. - P.IVA, C.F. e CCIAA di Milano IT06933670967 - REA MI-1924178 tel. +39 02 64741470 - fax +39 02 64741494 Società sottoposta alla direzione e coordinamento di TRIBOO SPA - all rights reserved CAP. SOC. EURO 28.740.210 I.V. - P.IVA 02387250307 - COD. FISC. e numero iscrizione al registro delle imprese CCIAA MI : 02387250307 tel.+39 02 64741401 - fax + 39 02 64741491. </font> <font color="#FFF">Utenti Connessi: <b>235</b></font> </td> </tr> </table> </td> </tr> </table> </div> <p align="center"> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-72025-1', 'auto'); ga('require', 'displayfeatures'); ga('send', 'pageview'); </script> <font color="#FFF"><font color="#94D0F6" size=1><br>Pagina creata in 0,09sec. <font size=1><i>Powered by <a style="color:#FFFFFF;" href="http://www.juiceadv.com/">JuiceADV S.r.l.</a></i></font></font> <br> <img src="img/stats.gif" width="25" height="22" alt="Stats v0.1 (0,000sec.)"> </font><br></p> <p align="center"></p> <script charset="utf-8" type="text/javascript" src="http://www.leonardo.it/script/mh/v2?align=center&ide=215&bgfromcolor=7C90BA&bgtocolor=FFFFFF&area=hi-tech"></script> <img src="http://bh.juiceadv.com/Behav.ashx" style="display:none;" width="1" height="1" /> <!--<script language="JavaScript" src="http://www.juiceadv.com/banner_ext.asp?User=24&Tipo=101&nkey=4"></script>--> </BODY> </HTML>