Verticaal CSS menu: het zelf te doen

Sommige webmasters hebben geen tijd wil besteden aan het ontwikkelen van de grond af eenvoudige elementen die reeds bestaan. Zij zijn van mening dat er geen punt in je tijd te verspillen aan iets dat lang is geweest. In feite, voor degenen die net het beheersen van HTML en CSS, is het belangrijk om jezelf een heleboel dingen om een goed begrip van hun werk. Dit geldt voor het menu. Maak een verticale CSS menu's. Het zal worden gebaseerd op HTML en CSS, zonder het gebruik van Javascript en JQuery. Elk menu is een lijst van links die leiden naar pagina's van de site.

basisstappen

Om een eenvoudige maken verticale menu CSS, moet u de volgende stappen:

1. Bepaal eerst een lijst met links (met behulp van code HTML), waarvan het menu zal zijn. Geef ze een naam, bijvoorbeeld, zijn als volgt:

1. Thuis.
2. Onze geschiedenis.
3. Begeleiden.
4. Services.
5. Contacten.

2. Dan Styling koppelingen als u wilt met behulp van CSS.

We schrijven de HTML-code, in my_Vmenu.html bestand te behouden en te zien hoe het eruit zal zien in de browser:

Dit is de basis (skelet) van ons menu. # 1, # 2, enz. worden vervangen door verwijzing. Zie hoe het eruit ziet in een browser. De foto die u niet wilt. Nu moeten we beginnen met de elementen van de stijl te beschrijven, om een complete verticale CSS menu's te maken.

beschrijving stijlen

Maak een bestand my_Vmenu.css, die alles wat je wilt het uiterlijk van een dergelijk belangrijk element van de site te verbeteren in te stellen. Hier is de code, waarvan de invoering zal de verticale CSS menu's te revitaliseren. Het schrijven en de nieuw bestand, en dan zullen we een dichter te nemen bezoeken de betekenis van de grote lijnen die worden gegeven.

Gedetailleerde beschrijving gebruikte stijlblad

Beschouw nu de details van onze CSS verticale menu:

list-style-type kunt u de lijst met markers te verwijderen. Door het instellen van "0" om de marge en opvulling verwijder de extra vulling in de lijst. Zoals kan worden gezien van de HTML-code, het menu is een lijst, en de stijlen zijn gedefinieerd met behulp van CSS.

ul # my_Vmenu - de algemene stijl van de hele lijst.

ul # my_Vmenu li a - stijl banden tussen de tag li.

ul # my_Vmenu li a: hover - een beschrijving van het type met inachtneming van menu-items in een tijd waarin men zweeft over mensen.

ul # my_Vmenu li een overspanning - tekst beschrijving (titel menu).

Vergeet niet dat bestanden my_Vmenu.css my_Vmenu.html en moet worden bewaard in dezelfde directory. Ze kunnen echter worden in verschillende mappen, maar dan is het belangrijk om te registreren in my_Vmenu.html bestandspad naar my_Vmenu.css. Wees voorzichtig, omdat de nieuwkomers om dit probleem te vaak.

Style moet worden aangesloten tussen de hoofd-tags in een html-bestand. menu_1.png en menu_2.png - dit is de foto voor de foto menu-item in de normale toestand en zweven.

Het is beter om de beelden in een aparte map op te slaan voor afbeeldingen, noem maar op my_images, maar pas vervolgens de CSS-code. Schrijf wanneer deze beelden worden weergegeven, kunnen ze in deze directory: url (my_images / menu_1.png) en url (my_images / menu_2.png).

In de rest van de in de CSS-code beschreven eigenschappen, gemakkelijk te begrijpen. Zij bepalen het uiterlijk van ons menu. Het is gemakkelijk op te merken dat de breedte en hoogte van goederen bedoeld voor dezelfde items in de normale toestand, en als je de muis over hen. Lettergrootte 18 pixels, opvulling specificeert de inspringing vanaf verschillende zijden van de plaatsnamen. display kunt u de weergave-eenheid ingesteld op de breedte en opvulling te stellen.

Onze verticale menu

Zoals u kunt zien, de verticale CSS menu's gemakkelijk te maken. Op basis van de gegevens van de kennis die je in staat zal zijn om het te mooi en aantrekkelijk voor bezoekers naar uw website te maken! Gebruik je fantasie, en vervolgens een stijlvolle menu op uw site te vullen.