Maak een horizontale menu voor de site zelf

Horizontale menu hebben vrijwel elke locatie - het is een belangrijk onderdeel, als het kan met het uiterlijk en de bruikbaarheid aan te trekken of, omgekeerd, schrikken bezoekers. Laten we leren hoe je een elementaire horizontale menu te maken: maak het "skelet" naar HTML, om de basisvaardigheden van het creëren van de knie. U kunt zeker vinden een kant menu, maar veel mooier om te leren hoe het zelf te ontwikkelen. Het is best leuk.

Leer te menu maken

We proberen niet af te wijken van de semantiek, die zich houden aan de leidende figuren van de lay-out. Eerst moet je een "skelet" voor onze menu's om HTML te maken, leren basisvaardigheden om hun eigen horizontale menu's te maken. En dan zal het te versieren, met behulp van style sheets. Laat onze horizontale menu bevat 5 items. Het eerste item wordt doorgestuurd naar de homepage. Het tweede punt - "Over ons". De derde - "Onze awards". Vierde - "Het is leuk." Vijfde - "Contact".

HTML-code ziet er als volgt uit:

Wie kent niet: ul tag wordt gebruikt voor de kogel, de elementen beginnen met de li. Li-tags erven de stijlen die worden toegepast op de ul.

Ul - blokelement van de lijst zal worden uitgerekt tot de breedte. Li is een blok.

Dus, maak een index.html. We verzamelen onze code. Op dit punt, geeft de browser een verticale in plaats van een horizontale menu. Maar wij met u doel - om een horizontale menu voor de site te maken. Hiervoor moeten we CSS.

Wat is CSS?

Als u nog niet aan de ontwikkeling van de sites onder de knie, is het noodzakelijk om kennis te maken met het concept van Cascading Style Sheets. In feite zijn de regels voor het formatteren, verwerking, die worden toegepast op verschillende elementen op de pagina's van een web-site. Als we de eigenschappen van de elementen in standaard HTML te beschrijven, moet u dit meerdere keren te herhalen, u een verdubbeling van de dezelfde stukken van de code te krijgen. laadtijd van de pagina op de computer van de gebruiker zal groeien. Om dit te voorkomen, is er een CSS. Het volstaat om slechts eenmaal een bepaald element te beschrijven, en dan gewoon aan te geven waar om de eigenschappen van een bepaalde stijl te gebruiken. Het is mogelijk om de beschrijving van niet alleen de tekst van de pagina zelf, maar ook in een ander bestand. Dit zal toelaten om toe te passen de beschrijving van de verschillende stijlen op alle pagina's van de site. Het is ook handig om een aantal pagina's aan te passen, het aanpassen van de CSS-bestand. Style sheets kunt u werken met lettertypen op een beter niveau dan de HTML, het helpen om te voorkomen dat verslechtering van de grafische pagina's van de site.

Opmaakmodellen gebruiken voor het menu ontwikkeling

CSS-code voor het menu:

1. # My_1menu {list-style: none; padding: 6; Breedte: 800 pixels; margin: auto;}
2. # My_1menu li {float: left; font: cursief 18px Arial;}
3. # My_1menu a {color: # 756; display: block; hoogte: 55 pixels; line-height: 55 pixels; padding: 0px 15px 0px 15px; achtergrond: #dfc; text-decoration: none;}
4. # My_1menu a: hover {color: #foa; achtergrond: # 788;}

Laten we nu eens kijken naar de resulterende horizontale CSS menu.

# My_1menu - dus er is stijl opdracht voor UL-element met id = my_1menu, list-style: none - deze opdracht om de sporen van de geplande items te verwijderen.

width: 800px - de breedte van ons menu is 800 pixels.

padding: 0 - dit verwijdert de opvulling binnen.

margin: auto - vyravnivnie horizontale menu in het midden van onze pagina.

# My_1menu li - het toewijzen van stijlen li-elementen.

height: 55 pixels - menu hoogte.

# My_1menu a: hover - het toewijzen van stijlen om element en wanneer het wordt geïnduceerd muis.

We zullen elke regel niet in detail beschrijven, zoals elke ontwikkelaar zijn parameters hier kunt opgeven. Dit basis voor het gebruik van stijlen in het menu op de website. U kunt het een meer afgewerkt en mooie verschijning, met behulp van foto's. Wijs element maar bijvoorbeeld background: url (img1.png) herhaal-x. Laat er background: url (img2.png) herhaal-x naar een: hover.

Gebruik je fantasie, creatieve voorkeuren. Dan op basis van die kennis over hoe je een eenvoudig menu op de website te maken, kunt u een pagina met zijn eigen unieke ontwerp te ontwikkelen.