skapa menyrader med Spry
när muspekaren svävar över en menyradkommer en undermeny. Menyradertillåta många menyalternativ att nås från en ren, stilren huvudmeny. Interaktiviteten de ger när en besökare svävar musen pointerover ett menyalternativ lägger till ett dynamiskt element på en webbsida.
menyraden widgets kan vara horisontell eller vertikal:
- vertikala menyrader är vanligtvis inriktade i RAM, tabellkolumn, ellerAndra layoutobjekt (t.ex. en DIV eller en AP DIV) på vänster sida av sidan.
- horisontella menyrader är vanligtvis inriktade högst upp på sidan och kan placeras där utan att infogas i ett layoutobjekt.
den Spry widget för att infoga menyraden widgets kan du skapa menyrader med två nivåer av undermenyer. Därför kan en användare klicka på ett menyalternativ, seen undermeny med en ny uppsättning alternativ, välj ett av dessa alternativ och välj frånen andra undermeny.
för att skapa en menyrad widget, följ dessa steg:
- spara sidan där widgeten ska infogas.
- Välj Infoga > Spry > Spry Menyraden. När dialogrutan Spry menyrad visas väljer du horisontellt eller vertikalt format.
- när du har skapat en menyradswidget kan du definiera några grundläggande menyradegenskaper i egenskapsinspektören. Välj menyalternativ eller undermenyobjekt påvänster sida av egenskapsinspektören; ändra dem sedan som du vill (se Figur4):
- i textrutan anger du texten som kommer att visas i menyn.
- i rutan Länk anger du länken som öppnas när objektet ärklickat.
- i rutan Titel anger du tillgänglighetstexten som kommer att visas i webbläsarfönstret när en användare håller muspekaren över ett menyalternativ.
- lämna målrutan tom för att öppna länken i samma webbläsarfönster, ellerblank för att öppna länken i ett nytt webbläsarfönster.
- använd knapparna plus ( + ) och minus ( – ) ovanför kolumnerna menu eller submenu (orsub-submenu) för att lägga till eller ta bort nya menyalternativ. Använd flytta objektet upp ochflytta objekt ner knappar som behövs för att ändra ordningen på menyalternativ.
Figur 4 Definiinglevels av menyraden alternativ i egenskapen inspector.
när du skapar eller väljer en menyradswidget visas en avstängningsknapp i egenskapsinspektören. Att stänga av stilar påverkar inte hur stilen återges i en webbläsare, utan stänger snarare av formateringen i dokumentfönstret. Du kan justera formateringen av olika menyradegenskaper för en markerad menyrad med hjälp av CSS-Formatpanelen.
varje menyrad genererar minst ett dussin CSS-stilar. De flesta av dessa CSSstyles definierar positionering och storlek på menyer och undermenyer som visas när auser svävar muspekaren över ett menyalternativ. Standardpositioneringen avdessa menyer är vanligtvis bra och behöver inte justeras. Du kanskapa en anpassad menyrad genom att definiera dina egna länkar och text, och ge den adistinctive format genom att anpassa text och bakgrundsfärger.
några av CSS-stilalternativen styr relativt inkonsekventa element imenyraden, men alla kan redigeras i CSS-Formatpanelen. För att redigera stilar associerade med en menyrad widget, expandera Sprymenubarhorisontal todisplay en lista över klass stilar associerade med denna formatmall. Om du väljer en av dessa klassformat i den övre delen av CSS-Formatpanelen kan du redigeraegenskaper för den stilen i den nedre halvan av CSS-Formatpanelen.
för att ändra bakgrund eller textfärg för menyraden, välj styleul.Menubarhorisontal a (för en vertikal menyrad, ul.MenuBarVertical a). Med den valda stilen i CSS-Formatpanelen, använd rutan bakgrundsfärg i den nedre halvan av CSS-Formatpanelen för att välja en ny bakgrundsfärg och använd färgrutan för att ändra teckensnittsfärg (se Figur 5).
Figur 5 Ändra textfärg för en menyrad.
ett annat alternativ är att ändra bakgrunden och textfärgen på ett svävat-överhorisontellt menyalternativ med hjälp av dessa objekt:
- ul.Menubarhorisontal a. MenuBarItemHover
- ul.Menubarhorisontal a. MenuBarItemSubmenuHover
- ul.Menubarhorisontal a. MenuBarSubmenuVisible
stilen för vertikala menyrader är liknande, men med vertikal i stället förhorisontal i stilnamnet.
som du börjar se, erbjuder Spry menyrader många, mångaanpassningsbara element. För bästa resultat, experimentera. I huvudsak redigerar du innehållet i menyraderna antingen i egenskapsinspektören eller genom att välja enav de många genererade CSS-stilarna och redigera den i CSS-Stylespanelen.
Okej, du är på egen hand nu! Ha kul med dessa och andra Sprywidgets. Och kom ihåg tostay i kontakt och låt mig veta hur de tränar på dina webbplatser.