menubalken aanmaken met Spry
wanneer de muisaanwijzer boven een menubalk zweeft, verschijnt er een submenu. Menubalken maken het mogelijk om veel menu-opties te openen vanuit een schoon, overzichtelijk hoofdmenu. De interactiviteit die ze bieden wanneer een bezoeker met de muisaanwijzer zweeftover een menuoptie voegt een dynamisch element toe aan een webpagina.
menubalk widgets kunnen horizontaal of verticaal zijn:
- verticale menubalken worden meestal uitgelijnd in frame, tabelkolom of andere opmaakobjecten (zoals een DIV of een AP DIV) aan de linkerkant van de pagina.
- horizontale menubalken worden meestal uitgelijnd aan de bovenkant van de pagina en kunnen daar worden geplaatst zonder in een opmaakobject te worden ingevoegd.
met de Spry-widget voor het invoegen van menubalk-widgets kunt u menubalken genereren met twee niveaus van submenu ‘ s. Daarom kan een gebruiker op een menuoptie klikken, een submenu met een nieuwe set opties zien, een van die opties kiezen en uit het tweede submenu kiezen.
volg deze stappen om een menubalk-widget te genereren:
- sla de pagina op waarin de widget wordt ingevoegd.
- Kies Invoegen > Spry > Spry Menubalk. Wanneer het dialoogvenster Spry-menubalk verschijnt, kiest u horizontaal of verticaal formaat.
- na het genereren van een menubalk widget, kunt u enkele basis menubalk eigenschappen definiëren in de eigenschap inspector. Selecteer menu-items of submenu-items aan de linkerkant van de Property inspector; pas ze vervolgens aan zoals u wilt (zie Figuur 4):
- voer in het tekstvak de tekst in die in het menu verschijnt.
- voer in het vak koppeling de koppeling in die wordt geopend wanneer het item wordt geklikt.
- voer in het titelvak de toegankelijkheidstekst in die in het browservenster verschijnt wanneer een gebruiker de muisaanwijzer boven een menuoptie plaatst.
- laat het doelvak leeg om de verwijzing in hetzelfde browservenster te openen, orenter _blank om de verwijzing in een nieuw browservenster te openen.
- gebruik de plus ( + ) en minus ( – ) knoppen boven het menu of submenu (orsub-submenu) kolommen om nieuwe menu-items toe te voegen of te verwijderen. Gebruik de Verplaats Item omhoog en verplaats Item omlaag indien nodig om de volgorde van menu-items te wijzigen.
Figuur 4 Definieerniveaus van menubalkopties in de Property inspector.
wanneer u een menubalk-widget maakt of selecteert, verschijnt er een knop stijlen uitschakelen in de eigenschappenvenster. Het uitschakelen van stijlen heeft geen invloed op hoe de stijl wordt weergegeven in een browser, maar schakelt eerder de opmaak in het documentvenster uit. U kunt de opmaak van verschillende menubalk eigenschappen van aselect menubalk aan te passen met behulp van de CSS stijlen Paneel.
elke menubalk genereert minstens een dozijn CSS-stijlen. De meeste van deze CSSstyles definiëren positionering en grootte van de menu ’s en submenu’ s die verschijnen wanneer auser met de muisaanwijzer over een menu-optie gaat. De standaard positionering van deze menu ‘ s is meestal prima en hoeft niet te worden aangepast. U annuleert een aangepaste menubalk door het definiëren van uw eigen links en tekst, en geef het een onderscheidende indeling door het aanpassen van tekst en achtergrondkleuren.
sommige CSS-stijlopties beheren relatief onopvallende elementen van de menubalk, maar ze kunnen allemaal worden bewerkt in het paneel CSS-stijlen. Om de stijlen te bewerken die zijn gekoppeld aan een menubalk-widget, vouwt u SpryMenuBarHorizontal uit om een lijst met klassestijlen weer te geven die zijn gekoppeld aan dit typogram. Het selecteren van een van deze klasse stijlen in het bovenste deel van de CSS stijlen paneel kunt u bewerkenproperties voor die stijl in de onderste helft van de CSS stijlen Paneel.
om de achtergrond of tekstkleur voor de menubalk te wijzigen, selecteert u de opmaakprofiel.Menubarhorizontale a (voor een verticale menubalk, ul.Menubarverticaal a). Met de stijl geselecteerd in het CSS-stijlen Paneel, gebruik je de achtergrond-kleur staal in de onderste helft van het CSS-stijlen paneel om een nieuwe achtergrondkleur te kiezen, en gebruik je de kleur staal om de kleur van het lettertype te veranderen (zie Figuur 5).
Figuur 5 de tekstkleur voor een menubalk wijzigen.
een andere optie is om de achtergrond – en tekstkleur van een zwevende-overhorizontale menuoptie te wijzigen met behulp van deze items:
- ul.MenuBarHorizontal a. MenuBarItemHover
- ul.MenuBarHorizontal a. MenuBarItemSubmenuHover
- ul.MenuBarHorizontal a. MenuBarSubmenuVisible
de stijl voor verticale menubalken is vergelijkbaar, maar met verticaal in plaats vanhorizontal in de stijlnaam.
zoals u begint te zien, bieden Spry-menubalken veel, veel aanpasbare elementen. Voor de beste resultaten, experimenteer. In wezen bewerk je de inhoud van menubalken in de eigenschappencontrole of door een van de vele gegenereerde CSS-stijlen te selecteren en deze te bewerken in het CSS-stijlpaneel.
Oké, je staat er nu alleen voor! Veel plezier met deze en andere Sprywidgets. En vergeet niet om contact te houden en laat me weten hoe ze werken op uw sites.