Slik installerer en jQuery trekkspill Meny i Blogger

July 23

JQuery innebygde slideup funksjonen kan hjelpe deg å plassere iøynefallende animerte trekkspill menyer på Google Blogger side. Et trekkspill meny inneholder knapper som forårsaker menyelementer som vises når du klikker. Ved hjelp av et trekkspill meny bidrar til å spare plass på en webside eller blogg ved å skjule informasjon til bloggen besøkende trenger å se det. Du trenger ikke å vite HTML eller jQuery for å legge til et trekkspill menyen til Blogger. jQuery håndterer vanskelige programmeringsoppgaver bak kulissene. Alt du trenger å gjøre er å legge en liten HTML-kode til en ny Blogger widget.

Bruksanvisning

1 Besøk Blogger-oversikten side. Klikk på "Design" knappen ved siden av bloggen du ønsker å oppdatere for å vise Rediger oppsett siden.

2 Cick "Legg til Gadget" linken i sidepanelet på høyre side av siden. Blogger viser til en Gadget side. Bla gjennom listen over gadgets og klikk "HTML / Javascript" for å vise en HTML-redigeringsboksen.

3 Lim inn følgende kode i den boksen:

<Script>
$ (Document) .ready (function () {
$ ( '. ManageItem'). Klikk (funksjon () {
$ ( '. Element') slideUp (.);
. $ (This) .next () slideDown ();
});
});
</ Script>

Denne Javascript koden bruker slideUp jQuery-funksjonen for å vise og skjule elementer i trekkspill menyen. Koden refererer klassen navnene på knappen som gjør at elementene vises og klassenavnet av elementene i menyen.

4 Lim inn koden vist nedenfor under koden som vises i siste trinn:

<Style>

.manageItem
{
markøren: pekeren;
width: 200px;
Farge: Hvit;
background-color: blue;
margin-bottom: 2 piksler;
}

.item {
width: 200px;
farge: Sort;
bakgrunn: Hvit;
display: none;
}

</ Style>

Denne CSS-kode definerer utseendet på knappene og elementer i menyen. Den .manageItem klassen setter utseendet på alle knappene i menyen. Bredde, farge og bakgrunnsfarge attributter sette knapper bredde, forgrunnsfarge og bakgrunnsfarge. Den margin-bottom attributtet styrer den vertikale avstanden mellom knappene i menyen. Det verdi er 2 piksler i dette eksempel. Dette forteller nettlesere for å skille knappene vertikalt ved to piksler. Den .item klassen styrer bredden, forgrunnsfarge og bakgrunnsfarge av elementene i menyen. Endre noen av disse verdiene i .manageItem klassen eller .item klassen til noe du liker å tilpasse sine opptredener.

5 Legg til følgende kode under Kodene i forrige trinn:

<Div class = "manageItem">
farger
</ Div>
<Div class = "element">
rød
</ Div>

<Div class = "manageItem">
Vis States
</ Div>
<Div class = "element">
Nebraska
</ Div>

<Div class = "manageItem">
Se Trees
</ Div>
<Div class = "element">
Eik
</ Div>

</ Div>

Denne koden skaper trekkspill menyen. En forelder div - "menuContainer" inneholder tre div blokker i dette eksemplet. Den første div blokken definerer en div som klassenavn er "manageItem." Dette skaper en knapp. Ordene "Farger" vises i denne div. Denne teksten vises som knappens tekst når de vises i en nettleser. Div under manageItem div har en klasse navnet "element." Dette elementet inneholder ordet «Red». Dette er et menyelement som vises når brukere klikker på den knappen. Den neste div blokken er lik. Den inneholder en div som refererer til manageItem klassen. Dens knapp tekst er "Vis States." Div nedenfor som div definerer den knappen objekt. Det elementet inneholder ordet "Nebraska". Den endelige div skaper en knapp med teksten er "Vis Trees." Når brukere klikker på den knappen, utvides trekkspill og viser "Oak". For å legge til en annen blokk, kopier koden til en av de eksisterende blokkene og endre teksten til de ordene som vises i blokken. For eksempel, for å legge til en fjerde blokk som inneholder en knapp som heter "Vis Nations" og et element som viser "Frankrike", lim inn følgende kode før den endelige "</ div>" tag som vises i koden:

<Div class = "manageItem">
Se Nations
</ Div>
<Div class = "element">
Frankrike
</ Div>

6 Klikk "Lagre" for å lagre endringene og klikk på "Lagre" knappen øverst på Rediger oppsett siden. Klikk på "Vis Blogg" å vise den oppdaterte bloggen. JQuery trekkspill menyen vises i bloggens sidepanelet. Klikk på knappene for å gjøre de ulike elementene i menyen vises og forsvinne.

Hint

Breddeverdien i CSS klassedefinisjoner er "200px" i dette eksempelet. Hvis du oppdager at denne bredden er for stor eller liten for å oppnå ønsket effekt på bloggen din, kan du justere det bredde.
Plasser noe du liker inne i "element" divs. I stedet for å vise ordet "Florida", for eksempel, kan du sette en HTML-bildekode eller en Flash-video inne i div. Når bloggen besøkende klikker elementets knappen, vil trekkspill utvide og vise elementet innhold.