Computers, Software
Hoe maak je een drop-down CSS menu's maken
Vandaag zullen we de vraag: "Hoe kan ik een drop-down CSS menu's te maken?" Overwegen. Het moet meteen zeggen dat dit zal worden gedaan zonder het aansluiten van een extra middelen. Dat wil zeggen, het menu wordt alleen gemaakt met CSS en HTML.
opleiding
Om volledig te begrijpen wat er in zit in het artikel, moet je een beetje om kennis te maken met de theoretische materiaal. Maar als je bekend bent met pseudo-klassen zijn, kunt u deze paragraaf overslaan. Dus, om een verticale drop-down CSS menu's te maken, moeten we een element als «: hover». De pseudo «: hover» kan elke worden toegewezen HTML-tag. Hiermee kunt u het moment waarop een item Beweeg uw muis te definiëren. «A:: hover {: rode kleur;}» Zo hebben we eigendom aangesteld. Dit bericht betekent dat wanneer je de muisaanwijzer muis blijkt rood op de inhoud van een tag . Het is vermeldenswaard dat dit pseudo-element ook wordt geïnactiveerd. By the way,: heeft «hover» soortgelijke elementen verwant zijn. Maar uit deze zullen we pseudo CSS drop-down menu te creëren.
instructie
Laten we eerst begrijpen wat is een drop-down menu. Onder deze definitie krijgt veel verschillende methoden bouw van verschillende lay-outs. In dit geval zullen we analyseren een structuur uit meerdere voortdurend zichtbare voorwerpen en een aantal extra (verborgen). Laten we eindigen met de theorie en beginnen te oefenen.
- Wij creëren de lay-out van onze menu. Om dit te doen, HTML-code labeling. Maak een geneste lijst:
-
- < / ul>. Zoiets als dit zou moeten kijken als je drop-down menu. CSS om later in te grijpen. In dit geval is de hoofdlijst bestaat uit drie hoofdgebieden en twee ingesloten.
- Verberg het submenu. Hiervoor hebben we een stijlblad Definieer de volgende eigenschappen: ul ul {display: none;} Dit zal de elementen van de tweede lijst van het scherm te verwijderen.
- Maak een menu CSS, drop-down van de belangrijkste lijst. De cascading style sheets schrijven de volgende regel: ul li: hover ul {display: block;}. Dit bericht betekent dat wanneer de muis zich boven het element Li, die is gelegen in ul verschijnt op het scherm ul (bijgevoegd). Op het eerste gezicht, kan een dergelijke regeling ingewikkeld en verwarrend lijken. Maar in feite, alles is zeer eenvoudig.
- Gebruik deze lay-out zelf door het invoegen van de tags
- je eigen content. U kunt het aantal elementen van de lijst te veranderen.
decoratieve veranderingen
Zodra de indeling van het hoofdmenu klaar is, kunt u overgaan tot registratie. Waarschijnlijk veel in de eerste plaats bereid is om zich te ontdoen van markers met vermelding van het item in de lijst. Dit wordt gedaan met behulp van een enkele eigenschap CSS, namelijk de list-style-type. U moet de volgende vermelding toe te voegen: li {list-style-type: none;}. Dan kunt u het frame in te voegen en maak de achtergrond. De grens en de achtergrond u daarbij helpen. Misschien zullen sommigen niet van de pull-down menu wordt weergegeven als een aanvullende lijst, duwen op dezelfde basiselementen. Om dit te verhelpen, kunt u deze plaatsen. Om dit te doen, cascading style sheets schrijf de volgende vermelding: ul ul {position: absolute; left: 15px; rechts: 15px; top: 15px; bottom: 15px;}. Natuurlijk, de waarden die u zal uw eigen gebruiken. Afhankelijk van waar je wilt de drop-down menu's te zien, zal CSS bieden veel meer functies die verschillende effecten kunnen toevoegen en versieren onze lijsten.
conclusie
Het is weer gewezen op de bouw van het menu lay-out. Om de CSS-regels in dit geval gebruikt embedded value toe te wijzen, bijvoorbeeld ul ul. Als u in het document met andere soortgelijke structuur te voldoen, kunnen er grote problemen. In deze situaties moet je een bepaald doel te gebruiken, bijvoorbeeld, selectors of id-ID's. Het bovenstaande artikel indeling drop-down menu is bedoeld om het algemene ontwerp vertrouwd. De rest van het werk op uw schouders rust.
Similar articles
Trending Now