hurtige paneler og menulinjer fra Spry's Spry-kontroller

oprettelse af menulinjer med Spry

når musemarkøren svæver over en menulinje, vises en undermenu. Menulinjertillade, at der er adgang til mange menupunkter fra en ren, ryddelig hovedmenu. Den interaktivitet, de giver, når en besøgende svæver musepunktetover en menupunkt tilføjer et dynamisk element til en hjemmeside.

menulinjekontrol kan være vandret eller lodret:

  • lodrette menulinjer er typisk justeret i ramme, tabelkolonne ellerandre layoutobjekter (såsom en DIV eller en AP DIV) på venstre side afsiden.
  • vandrette menulinjer er typisk justeret øverst på siden og kan placeres der uden at blive indsat i et layoutobjekt.

Spry-kontrollen til indsættelse af menulinjekontroller giver dig mulighed for at generere menulinjer med to niveauer af undermenuer. Derfor kan en bruger klikke på et menupunkt, seen undermenu med et nyt sæt indstillinger, vælge en af disse indstillinger og vælge fraen anden undermenu.

følg disse trin for at generere en menulinjekontrol:

  1. gem den side, hvor kontrollen skal indsættes.
  2. Vælg Indsæt > Spry > Spry Menulinje. Når dialogboksen Spry-menulinjen vises, skal du vælge vandret eller lodret format.
  3. når du har genereret en menulinjekontrol, kan du definere nogle grundlæggende menulinjeegenskaber i Egenskabsinspektøren. Vælg menupunkter eller undermenupunkter påvenstre side af Egenskabsinspektøren; rediger dem derefter, som du vil (se Figur4):
    • i tekstfeltet skal du indtaste den tekst, der vises i menuen.
    • i feltet Link skal du indtaste det link, der åbnes, når elementet erklikket på.
    • i feltet Titel skal du indtaste tilgængelighedsteksten, der vises i vinduet, når en bruger svæver musemarkøren over et menupunkt.
    • lad målfeltet være tomt for at åbne linket i det samme bro.ser-vindue, orenter _blank for at åbne linket i et nyt bro. ser-vindue.
  4. Brug knapperne plus ( + ) og minus ( – ) over kolonnerne menu eller undermenu (orsub-undermenu) til at tilføje eller slette nye menupunkter. Brug knapperne Flyt element op og flyt element ned efter behov for at ændre rækkefølgen af menupunkter.
figur 4

figur 4 Definingniveauer af menulinjeindstillinger i ejendomsinspektøren.

når du opretter eller vælger en menulinjekontrol, vises en Turn Styles Off-knap i Egenskabsinspektøren. Deaktivering af typografier påvirker ikke, hvordan typografien gengives i en bro.ser, men deaktiverer snarere formatering i dokumentvinduet. Du kan justere formateringen af forskellige menulinjeegenskaber for envalgt menulinje ved hjælp af panelet CSS-stilarter.

hver menulinje genererer mindst et dusin CSS-stilarter. De fleste af disse CSSstyles definerer positionering og størrelse af menuer og undermenuer, der vises, når auser svæver musemarkøren over en menupunkt. Standardplaceringen af disse menuer er normalt fin og behøver ikke justeres. Du kan oprette en tilpasset menulinje ved at definere dine egne links og tekst og give det et karakteristisk format ved at tilpasse tekst og baggrundsfarver.

nogle af CSS-stilindstillingerne styrer relativt uklare elementer afmenulinjen, men alle kan redigeres i CSS-stilpanelet. For at redigere de stilarter, der er knyttet til en menulinjekontrol, skal du udvide Sprymenubarhorisontal for at vise en liste over klassestilarter, der er knyttet til dette typografiark. Hvis du vælger en af disse klassestilarter i den øverste del af panelet CSS Styles, kan du redigere egenskaber for den stil i den nederste halvdel af panelet CSS Styles.

hvis du vil ændre baggrunden eller tekstfarven for menulinjen, skal du vælge styleul.Menubarhorisontal a (for en lodret menulinje, ul.Menubartical a). Med den stil, der er valgt i panelet CSS-stilarter, skal du bruge baggrundsfarveprøveboksen iDen nederste halvdel af panelet CSS-stilarter til at vælge en ny baggrundsfarve og bruge farveprøven til at ændre Skrifttypefarve (se figur 5).

figur 5

figur 5 Ændring af tekstfarve til en menulinje.

en anden mulighed er at ændre baggrunden og tekstfarven på en svævende overhorisontal menupunkt ved hjælp af disse elementer:

  • ul.Menubarhorisontal a. MenuBarItemHover
  • ul.Menubarhorisontal a. Menubaritemsubmenuover
  • ul.MenuBarSubmenuVisible

stilen til lodrette menulinjer er ens, men med lodret i stedet forvandret i stilnavnet.

som du begynder at se, tilbyder Spry menulinjer mange, mange tilpasselige elementer. For de bedste resultater, eksperiment. I det væsentlige redigerer du indholdet af menulinjer enten i ejendomsinspektøren eller ved at vælge enaf de mange genererede CSS-stilarter og redigere det i CSS-stilpanelet.

Okay, du er på egen hånd nu! Hav det sjovt med disse og andre spurvefugle. Og husk tostay i kontakt og lad mig vide, hvordan de arbejder ud på dine sites.

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.