Tre Menu in css e javascript e html

L' aspetto estetico di un portale è sempreimportante, ed alla sua base vi stanno, tra le altre cose, imenu. I web designer si stanno sbizzarrendo oltre l'immaginabile per creare menu accattivanti, originali ed allostesso tempo comodi; c'è chi usa il Flash, chi ilDHTML, chi quelli in CSS, chi in JavaScript.

In questo tutorial vedremo proprio come dar vita adinteressanti menu combinando JavaScript e CSS.

Vediamo innanzitutto come creare una ComboBox contenentiopzioni che, al click, aprono siti web differenti.

 

    <script type="text/javascript"><!--function jsMenu(combobox){var URL=document.combobox.selection.options[document.combobox.selection.selectedIndex].value;window.location.href=URL;}//--></script>

 

 

Una variabile URL memorizza l' indirizzo della paginascelta tramite selezione dalla ComboBox. L' elementopunta ad un form chiamato combobox, dentro al qualec'è la stessa ComboBox contenente le varieopzioni. Quindi avremo una combobox chiamataselection:

    document.combobox.selection.options[....]

A questo punto gli elementi nella ComboBox possono esserescelti, ed il codice sotto riportato restituisce il valoredell' opzione scelta dall' utente:

    document.combobox.selection.options[document.combobox.selection.selectedIndex].value

 

Vediamo ora come integrare lo script appena creato nella formcombobox:

    <form name="combobox1"><select name="selection" size="1" style="background-color:#663399;font-family:Arial;font-size:12;color:#FFFF00;"><option value="page4.html">Open Page 4<option value="page3.html">Open Page 3<option value="page2.html">Open Page 2<option value="page1.html">Open Page 1</select><input type="button" value="Visit Site"onClick="javascript:jsMenu(this)"style=" background-color:#663399;color:#FFFF00;font-family:Arial;font-size:12;"></form>

 

Come si potrà notare, si è utilizzato uno stileinterno, tanto nel definire lo stile ed il colore dellaComboBox, quanto per gli attributi del bottone nella form.

Avviandoci sempre più nel complesso, ma anchenell' interessante ed accattivante, vediamo come creareun rollover menu; ciascun effetto di rollover assoceràun diverso colore dell' elemento del menu. Ecco il codicerelativo:

 

    <html><script language="javascript"><!--  function mouseover(menu,page){menu.style.background='#6633C0';description.innerHTML=page;}  function mouseout(menu){menu.style.background='#663390'description.innerHTML='&nbsp;'}--></script><table cellpadding="2" cellspacing="0"width="100">  <tr><td id="item1" style="cursor:hand;background-color:#663399"onMouseOver="mouseover(item1,'')"onMouseOut="mouseout(item1)"onClick="location.href='page1.html'"><div align="center">Page 1</div></td>  </tr>  <tr><td id="item2" style="cursor:hand;background-color:#663399"onMouseOver="mouseover(item2,'')"onMouseOut="mouseout(item2)"onClick="location.href='page2.html'"><div align="center">Page 2</div></td></tr>  <tr><td id="item3" style="cursor:hand;background-color:#663399"onMouseOver="mouseover(item3,'')"onMouseOut="mouseout(item3)"onClick="location.href='page3.html'"><div align="center">Page 3</div></td></tr>  <tr><td id="item4" style="cursor:hand;background-color:#663399"onMouseOver="mouseover(item4,'')"onMouseOut="mouseout(item4)"onClick="location.href='page4.html'"><div align="center">Page 4</div></td></tr>  <tr><td id="item5" style="cursor:hand;background-color:#663399"onMouseOver="mouseover(item5,'')"onMouseOut="mouseout(item5)"onClick="location.href='page5.html'"><div align="center"></div></td></tr><tr><td><font id="description"size="1"></font></td></tr></table></html>

 

 

Bisognerà naturalmente sostituire l' URL contenutoin location.href con quello al quale si vuol rimandare l'utente nel caso in cui vi clicki sopra.

Tali menu sono tra i più utilizzati, grazie alla lorosemplicità di sviluppo ed al gradevole effetto graficoche conferiscono.

Sarebbe molto interessante riuscire a coniugare un menu inJavaScript, come quello appena mostrato, con uno stile CSS.Come esempio di ciò, riportiamo l' HTML di un sitodel genere di YouTube che fa uso di uno stile moltoaccattivante e semplicissimo da riprodurre su qualsiasi sitoweb. Ecco l' HTML del menu:

    <html><head><link rel="stylesheet"type="text/css" href="submenu.css"></head><ul>   <li><a href="#">Home</a></li>   <li><a href="#">About Site</li>  <li><a href="#">Upload Movie</li>  <li><a href="#">Watch Movies</a>     <ul><li><a href="#">Action</a></li> <li><a href="#">Sci-Fi</a></li><li><a href="#">Virals</a></li> <li><a href="#">Mysterious</a></li> <li><a href="#">Hilarious</a></li>     </ul>  </li>  <li><a href="#">Tutorials</a>     <ul><li><a href="#">Video Compression</a></li> <li><a href="#">Shooting for the Web</a></li><li><a href="#">Popular Famous Shorts</a></li><li><a href="#">Why Host Movies?</a></li> <li><a href="#">Learn to Edit Video</a></li>     </ul>  </li>  <li><a href="#">Competitions</a>     <ul><li><a href="#">Best 3 minute Short Movie</a></li> <li><a href="#">Best Screenplay - Win a WII</a></li>    </ul>  </li>  <li><a href="#">Contact Us</a></li></ul></html>

 

Come possiamo notare, sarà semplicissimopersonalizzarlo alle nostre esigenze. Bene, ora vaperò associato ad un file CSS esterno, chiamatosubmenu.css, e dichiarato nella tag<HEAD>.

Tale stile esterno è il seguente:

 

    ul {  margin:0;   width:180px;  list-style:none;}ul li {  position:relative;}li ul {  top:0;   position:absolute;  left:145px;  display:none;}ul li a {  border:1px solid;  padding:5px;  display:block;  text-decoration:none;  color:blue;  background:white; }li:hover ul { display: block; }

 

 

Naturalmente il codice è editabile in tuttalibertà, per adattarlo ai propri gusti ed alle proprieesigenze. Tra le modifiche da apportarvi vi è il fattoche i sotto-menu, definiti dal <UL> sonodisordinati, e vanno invece posti sotto la voce di menurelativa. Altro accorgimento è relativo ai linkscontenuti nei sotto-menu, che sarebbe meglio porre inrisalto, magari sottolineandoli; per farlo, aggiungervi lastringa text-decoration:none. Con l' opzionepadding: 5px viene definito lo spazio cheintercorrerà tra un elemento e l' altro del menu,ed è anch' esso liberamente personalizzabile.



Ti potrebbe interessare anche

commenta la notizia