Come creare un menù a tendina in Ajax : REDAZIONE

D	L	M	M	G	V	S
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

« Niente panico! | Homepage | Come inserire un banner pubblicitario sotto l'header »

02/08/2010

Come creare un menù a tendina in Ajax

Alcuni dei MyBlogger più seguiti hanno inserito all’interno delle proprie colonne laterali dei un menù a tendina, come ad esempio i ragazzi di Very Inutil People.
Alcuni di voi ci hanno chiesto come fanno e oggi vi mostriamo come creare in pochi passi un menù a tendina espandibile e personalizzabile, come questo:

Guarda la DEMO.

Dal pannello di gestione del blog andiamo in “Presentazione > Opzioni avanzate” e in queste 5 pagine:
- Modello della home-page
- Modello della pagina dei commenti
- Modello della pagine di link permanente
- Modello della pagina categoria
- Template tags

incolliamo il seguente codice tra le tag <head> e </head>:

    <script type="text/javascript" 
    src="http://scripts.xoom.it/scripts/jquery.js"></script>
    <script type="text/javascript" 
    src="http://scripts.xoom.it/scripts/dropmenu/alternate.js"></script>

Ora andiamo nella sezione “Presentazione > Contenuto delle barre laterali di navigazione” e in fondo alla pagina clicchiamo sul bottone “Aggiungi un testo”. Si aprirà una finestra dove dovremo incollare il seguente codice:

    <img src="http://scripts.xoom.it/scripts/dropmenu/categorie.jpg" 
    width="184" height="40" class="menu_head" />
    <center>
    <ul class="menu_body">
    <li><a href="#">Menu1</a></li>
    <li><a href="#">Menu2</a></li>
    <li><a href="#">Menu3</a></li>
    <li><a href="#">Menu4</a></li>
    </ul>
    </center>

Vediamo nel dettaglio cosa contiene questo script.

    <img src="http://scripts.xoom.it/scripts/dropmenu/categorie.jpg" 
    width="184" height="40" class="menu_head" />

mostra una immagine che, una volta cliccata, farà apparire il menù a tendina. Potete utilizzare questa che vi diamo a disposizione oppure una personalizzata da voi.

Per inserire una vostra immagine dovete semplicemente modificare l’url e le dimensioni dell’immagine all’interno dello script senza però toccare il valore di “class”, in questo modo:

    <img src="http://URL_Immagine_Personale" 
    width="Valore_Larghezza" height="Valore_Altezza" 
    class="menu_head" />

Il resto del codice si occupa di visualizzare le voci di menù che volete inserire.
Ogni riga come questa contiene una nuova voce testuale con link:

    <li><a href="#">Menu1</a></li>

Diamo un titolo, senza renderlo visibile, al nuovo oggetto che abbiamo creato. Salviamolo e pubblichiamolo in una colonna. A questo punto, se andiamo nel nostro blog vedremo soltanto la nostra immagine seguita da un elenco testuale. Per dare un aspetto grafico più conforme al nostro blog, dovremo modificare alcuni parametri nel Foglio di stile.

Quindi, andiamo in “Presentazione > Opzioni avanzate” e clicchiamo sul bottone “Modifica modello” del Foglio di stile ed incolliamo il seguente codice:

      
    sidebar ul {
    padding: 0px;
    margin: 0px;
    list-style:none;
    }
    .sidebar li {
    margin: 0px 0px 0px 0px;
    list-style-type: none;
    list-style:none;
    }
    .menu_head{border:1px solid #998675;}
    .menu_body {display:none; width:184px;
    border-right:1px solid #998675;
    border-bottom:1px solid #998675;
    border-left:1px solid #998675;}
    .menu_body li{background:#493e3b;}
    .menu_body li.alt{background:#362f2d;}
    .menu_body li a{color:#FFFFFF; 
    text-decoration:none; padding:10px; 
    display:block;}
    .menu_body li a:hover{font-weight:bold;}

Modificando questi attributi possiamo scegliere i colori e le dimensioni da dare allo sfondo e al testo del menù a tendina. Una volta modificate le impostazioni come piacciono a noi, salviamole e andiamo a vedere l’effetto finale.

Se volete creare un menù a tendina che mostra in automatico le categorie che avete creato all’interno del vostro blog, basta sostituire il codice dell’oggetto creato nella sezione “Presentazione > Contenuto delle barre laterali di navigazione” con questo:

    <img src="http://scripts.xoom.it/scripts/dropmenu/categorie.jpg" 
    width="184" height="40" class="menu_head" />
    <center>{categories assign="category"}{if $category.first}
    <div id="box-categories" class="box-decorator1">
    <div class="box-decorator2"><div class="box-decorator3"> 
    <div class="decorator1"> <div class="decorator2"></div></div> 
    <div class="boxcontent-decorator1">
    <div class="boxcontent-decorator2">
    <div class="boxcontent-decorator3"> 
    <ul class="menu_body">{/if}<li>
    <a href="{$category.url|urlchar|lower}/">{$category.name}</a>
    </li> {if $category.last}</ul> </div></div></div> 
    </div></div></div>{/if} {/categories}</center>

Buon lavoro!