Het maken van menu's is waarschijnlijk een van de belangrijkste punten bij de ontwikkeling van sites en programma's. Daarnaast is een goede uitwerking en logisch ontwerp van zo'n menu het gezicht van een site of welk programma dan ook. Laten we bijvoorbeeld Microsoft nemen en het besturingssysteem Windows 7. Na de release van Windows 7 hoorde Microsoft veel kritiek die voor zichzelf niet flatteus was. Er is veel kritiek geweest, maar meestal onhandig geplaatste menu-items. Lees aandachtig deze tutorial over hoe je een horizontaal dropdown-menu maakt met CSS en Expression Web. Tagstijlen zullen veranderen om het menu te maken
instructies:
Stap 1
Ga naar Stijlen beheren en klik vervolgens op de knop Nieuwe stijl. Geef de naam Selector ul li aan de nieuwe stijl die u zojuist hebt gemaakt. Vergeet ook niet om ervoor te zorgen dat de nieuwe stijl moet worden gedefinieerd in het drop-down.css-bestand.
Stap 2
Om een horizontaal menu uit te rekken, moet u de menu-items vertellen dat het horizontaal zal zijn. Vervolgens moet u de breedte van elk menu-item bepalen en alle onnodige punten voor alle lijstitems verwijderen.
Stap 3
Ga voor horizontale uitlijning naar Lay-out en stel het weergaveattribuut in op inline. Zet het float-attribuut op links. Klik op de knop Toepassen. Alle lijstitems moeten op één regel worden ingesteld. Om ervoor te zorgen dat ze elkaar niet overlappen, moet u het volgende doen: stel de Positiewaarde van het width-attribuut in op 150px. Bekijk het nu. Alle elementen van de lijst moeten even groot worden.
Stap 4
Nu moeten we proberen de stippen voor de lijstitems te verwijderen. Ga hiervoor naar Lijst en stel het kenmerk list-style –type in op geen.
Stap 5
Klik op OK om alle wijzigingen te accepteren.
Stap 6
Om de lettergrootte voor de ul li-stijl aan te passen, moet u het volgende doen. Klik in Stijlen beheren met de rechtermuisknop op de ul li-stijl die u nodig hebt om Stijl wijzigen te selecteren. Het bekende dialoogvenster voor het toevoegen of wijzigen van attributen wordt geopend. Ga naar de categorie Lettertype en stel het kenmerk font-family in op Arial, Helvetica, sans-serif. Ga vervolgens naar het kenmerk font-size en stel dit in op 0.9em. Stel daarna het attribuut text-transform in en stel de waarde ervoor in op hoofdletters.
Stap 7
De hoogte van de items in het gemaakte menu kan worden aangepast in de categorie Positie. Stel het hoogtekenmerk in op 30px.
Stap 8
Vervolgens moet u het menu.html-bestand opslaan. Om dit te doen, zal Expression Web het vereiste venster Ingesloten bestanden opslaan openen om het bestand op te slaan. Opslaan in drop-down.css-bestand. Klik op OK om op te slaan.
Stap 9
Controleer nu uw resultaat. Voor de betrouwbaarheid is het beter om het in verschillende browsers te testen. Om het verkregen resultaat in de standaardbrowser te controleren, moet u op de F12-toets op uw toetsenbord drukken.
