December 12
JQuery di funzione incorporata slideUp può aiutare a posizionare i menu fisarmonica animati accattivanti sulla tua pagina di Google Blogger. Un menù a fisarmonica contiene i pulsanti che causano le voci di menu a comparire quando si fa clic. L'utilizzo di un menù a fisarmonica aiuta a risparmiare spazio su una pagina Web o un blog per nascondere le informazioni fino a quando i visitatori del blog hanno bisogno di vederlo. Non è necessario conoscere HTML o jQuery per aggiungere un menù a fisarmonica a Blogger. jQuery gestisce le attività di programmazione difficili dietro le quinte. Tutto quello che dovete fare è aggiungere un po 'di codice HTML per un nuovo widget Blogger.
1 Visita la pagina Bacheca Blogger. Fare clic sul pulsante "Design" accanto al blog si desidera aggiornare per visualizzare la pagina di modifica del layout.
2 Cick il link "Aggiungi un gadget" nel pannello laterale sul lato destro della pagina. Blogger visualizza la pagina Aggiungi un gadget. Scorrere l'elenco dei gadget e fare clic su "HTML / JavaScript" per visualizzare una casella di editing HTML.
3 Incollare il seguente codice in quella scatola:
<Script type = "text / javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </ script>
<Script>
$ (Document) .ready (function () {
$ ( '. ManageItem'). Clic (function () {
$ ( '. Item') slideUp ().;
. $ (This) .Next () slideDown ();
});
});
</ Script>
Questo codice JavaScript utilizza la funzione slideUp jQuery per mostrare e nascondere gli elementi nel menu fisarmonica. Il codice di riferimento i nomi di classe del pulsante che rende gli oggetti appaiono e il nome della classe delle voci del menu.
4 Incollare il codice riportato di seguito sotto il codice mostrato nell'ultimo passaggio:
<Style>
.manageItem
{
cursor: pointer;
width: 200px;
colore bianco ;
background-color: blue;
margin-bottom: 2px;
}
.articolo {
width: 200px;
colore nero;
Fondo: bianco;
display: none;
}
</ Style>
Questo codice CSS definisce l'aspetto dei pulsanti e voci del menu. La classe .manageItem imposta l'aspetto di tutti i pulsanti del menu. Gli attributi di larghezza, di colore e di background-color impostare la larghezza pulsanti, colore di primo piano e colore di sfondo. L'attributo margin-bottom controlla la distanza verticale tra i pulsanti del menu. Tale valore è 2px in questo esempio. Questo dice browser per separare i tasti verticalmente da due pixel. La classe .item controlla la larghezza, colore di primo piano e il colore delle voci del menu di sfondo. Modificare uno di questi valori nella classe .manageItem o la classe .item per qualcosa che ti piace di personalizzare le loro apparizioni.
5 Aggiungere il seguente codice sotto il codice elencato nel passaggio precedente:
<Div id = "menuContainer">
<Div class = "manageItem">
visualizzare i colori
</ Div>
<Div class = "oggetto">
Rosso
</ Div>
<Div class = "manageItem">
vista Uniti
</ Div>
<Div class = "oggetto">
Nebraska
</ Div>
<Div class = "manageItem">
Vista Alberi
</ Div>
<Div class = "oggetto">
Quercia
</ Div>
</ Div>
Questo codice crea il menu fisarmonica. Un div genitore - "menuContainer" contiene tre blocchi div in questo esempio. Il primo blocco div definisce un div il cui nome di classe è "manageItem." Questo crea un pulsante. Le parole "Visualizza Colors" appaiono in questo div. Questo testo apparirà come testo del pulsante quando viene visualizzata in un browser. Il div div al di sotto della manageItem ha un nome classe di "voce". Questa voce contiene la parola "rosso". Si tratta di una voce di menu che appare quando gli utenti fanno clic su tale pulsante. Il blocco div successivo è simile. Esso contiene un div che fa riferimento la classe manageItem. Il suo testo del pulsante è "View Uniti". Il div di sotto di tale div definisce elemento che del pulsante. Questo oggetto contiene la parola "Nebraska". Il div finale crea un pulsante il cui testo è "Visualizza Alberi". Quando gli utenti fanno clic su tale pulsante, la fisarmonica si espande e visualizza "Quercia". Per aggiungere un altro blocco, copiare il codice di uno dei blocchi esistenti e modificare il testo delle parole che compaiono nel blocco. Per esempio, per aggiungere un quarto blocco che contiene un pulsante denominato "Visualizza Nazioni" e un elemento che visualizza "Francia", incollare il seguente codice prima del tag finale "</ div>" che appare nel codice:
<Div class = "manageItem">
Vista Nazioni
</ Div>
<Div class = "oggetto">
Francia
</ Div>
6 Fai clic su "Salva" per salvare le modifiche e quindi fare clic sul pulsante "Salva" nella parte superiore della pagina di modifica del layout. Fai clic su "Blog" per visualizzare il blog aggiornato. Il menu a fisarmonica jQuery apparirà nel pannello laterale del blog. Fare clic sui pulsanti per rendere le diverse voci del menu appaiono e scompaiono.