Progettazione menu in Javascript / Myclads.com

Progettazione menu in Javascript

June 7

JavaScript è un linguaggio Web integrato in tutti i principali browser che è possibile utilizzare per rendere le pagine Web fare un sacco di trucchetti. Progettare menu di navigazione di un sito web è una delle cose più comuni che è possibile utilizzare JavaScript da fare, e dal momento che è relativamente facile da fare, è un modo comune per i principianti per imparare la lingua. Se sei già familiarità con HTML e CSS, troverete che è facile da inserire nel codice JavaScript e creare, pagine conformi agli standard puliti.

Fondazione di JavaScript Menu Design

JavaScript menu design utilizza due strumenti semplici: \ "onmouseover, \" che innesca un evento che accada quando si sposta il mouse sopra qualcosa, e \ "onmouseout, \" che innesca un evento che accada quando il mouse va altrove.

Diciamo che abbiamo un menu di navigazione in cima alla nostra pagina con due voci, \ "Informazioni \" e \ "Argomenti. \" Quando qualcuno si libra sia elemento della lista, vogliamo un sottomenu di pop-up sotto messa in vendita di più opzioni. Quindi abbiamo bisogno di creare due funzioni: quella che consente un menu di apparire sotto ogni voce con \ "onmouseover, \" e quella che consente il menu a scomparire con \ "onmouseout \".

Per fare questo, abbiamo bisogno di aggiungere il seguente codice JavaScript nella sezione <head> della pagina:

<Script type = \ "text / javascript \">
// <! [CDATA [

funzione di nascondere (menu) {
var menuStyle = document.getElementById (menu) .style
ANDARE
menuStyle.display = \ "none \"
ANDARE
}

funzione di spettacolo (menu) {
var menuStyle = document.getElementById (menu) .style
ANDARE
menuStyle.display = \ "blocco \"
ANDARE
}

//]]>
</ Script>

Le prime due righe e le ultime due righe appena dichiarano che la sezione del documento in mezzo verrà utilizzato JavaScript. Il codice tra crea due funzioni chiamate \ \ "nascondere \" e "spettacolo. \" Ogni funzione prima crea una variabile denominata \ "menuStyle, \" che riconosce un menu dal suo ID, e poi cambia lo stile di quel menu impostandolo a visualizzare = \ Display = \ "none \" o Va bene se non è ancora del tutto chiaro "blocco \".; una volta si vede in azione, sarete in grado di capire meglio.

È inoltre necessario aggiungere un altro po 'di JavaScript alla fine delle tue pagine, prima che il </ body> tag di chiusura, che impedisce il sottomenu di apparire sulla pagina di default:

Questo utilizza la funzione \ "nascondere \" appena creata per nascondere ogni sottomenu. In questo esempio, \ "sottomenu-1 \" e \ "sottomenu-2 \" sono gli ID di ogni sottomenu.

Attuazione nel codice HTML

Ora che la fondazione JavaScript è a posto, è in realtà necessario attivare dentro il codice HTML. In primo luogo, creare il sistema di menu HTML. Il modo più pulito per farlo è con i link non ordinate incorporati dentro l'altro in questo modo:

<Ul>
<Li> Informazioni su
<Ul>
<Li> <a href=\"#\"> Bio </a> </ li>
<Li> <a href=\"#\"> contatto </a> </ li>
</ Li>
</ Ul>

Ora, è possibile aggiungere \ "onmouseover \" e \ "onmouseout \" attribuisce al livello superiore <li> tag:

<Ul>
<Li onmouseover = \ "javascript: spettacolo ( 'sottomenu-1') \" onmouseout = \ "javascript: nascondere ( 'sottomenu-1') \"> Informazioni su
<Ul>
<Li> <a href=\"#\"> Bio </a> </ li>
<Li> <a href=\"#\"> contatto </a> </ li>
</ Li>
</ Ul>

Tutto questo significa che quando qualcuno passa sopra \ "A proposito, \" la funzione \ "Mostra \" farà sì che il sottomenu sotto di esso appaia. Quando il mouse si allontana dal \ "A proposito, \" la funzione \ "nascondere \" farà sì che il sottomenu a scomparire.

Mettere tutto insieme

Ora che avete il progetto in atto, è necessario attenersi all'interno di un documento completo e agghindare il design con un po 'di CSS in modo che tutti i display in modo corretto. L'esempio che segue è una pagina completa che funziona come valido rigoroso codice XHTML e usa un po 'di stile di base di CSS. Incollarlo in un editor di testo, salvarlo come file HTML, e aprirlo in un browser Web per vedere i risultati. Apportare modifiche al CSS, come si vede in forma, e provare ad aggiungere un'altra opzione di menu e sottomenu.

<! DOCTYPE HTML PUBLIC \ "- // W3C // DTD XHTML 1.0 Strict // EN \" \ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<Html xmlns = \ "http://www.w3.org/1999/xhtml\" dir = \" ltr \ "lang = \" en-US \ ">

<Head>
<Meta http-equiv = \ "Content-Type \" content = \ "text / html; charset = UTF-8 \" />
<Title> Esempio Menu JavaScript </ title>

body {
font-family: Georgia, sans-serif
ANDARE
}

un {
color: # FF3A00
ANDARE
text-decoration: none
ANDARE
}

a: hover {
text-decoration: underline
ANDARE
}

ul {
list-style-type: nessuno
ANDARE
margin: 0
ANDARE
padding: 10px
ANDARE
}

li {
float: left
ANDARE
padding: 10px
ANDARE
border: 1px solid #ddd
ANDARE
margin-left: -1px
ANDARE
}

Li ul {
position: absolute
ANDARE
margin: 10px -11px
ANDARE
border: 1px solid #ddd
ANDARE
}

Li Li {
float: none
ANDARE
margin: 5px 0
ANDARE
clear: both
ANDARE
border: 0
ANDARE
}

</ Style>

<Script type = \ "text / javascript \">
// <! [CDATA [

funzione di nascondere (menu) {
var menuStyle = document.getElementById (menu) .style
ANDARE
menuStyle.display = \ "none \"
ANDARE
}

funzione di spettacolo (menu) {
var menuStyle = document.getElementById (menu) .style
ANDARE
menuStyle.display = \ "blocco \"
ANDARE
}

//]]>
</ Script>

</ Head>

<Body>

<Ul>

<Li onmouseover = \ "javascript: spettacolo ( 'sottomenu-1') \" onmouseout = \ "javascript: nascondere ( 'sottomenu-1') \">
Di
<Ul id = \ "sottomenu-1 \">
<Li> <a href=\"#\"> Bio </a> </ li>
<Li> <a href=\"#\"> contatto </a> </ li>
</ Ul>
</ Li>

<Li onmouseover = \ "javascript: spettacolo ( 'sottomenù-2') \" onmouseout = \ "javascript: nascondere ( 'sottomenù-2') \">
Temi
<Ul id = \ "sottomenu-2 \">
<Li> <a href=\"#\"> Film </a> </ li>
<Li> <a href=\"#\"> TV </a> </ li>
<Li> <a href=\"#\"> Musica </a> </ li>
<Li> <a href=\"#\"> Teatro </a> </ li>
</ Ul>
</ Li>

</ Ul>

</ Body>

</ Html>