Vervolgkeuzemenu in html. Een horizontaal menu centreren uitlijnen

Deze regel wordt voorafgegaan door 2 regels, schijnbaar irrelevant (Home
en Verticaal menu bekijken). Het kost iemand die niet bekend is met nieuw materiaal (dat wil zeggen alleen het materiaal waarvoor je hebt geschreven) tijd om te beseffen dat deze regels niet nodig zijn voor het vervolgkeuzemenu. Of zijn die nog nodig?

Er zijn 3 regels in de kop in uw voorbeeld. Hiervan is er slechts één gerelateerd aan het onderwerp (geeft de naam van het DSN-bestand aan), en de andere 2 niet. Het maakt het ook moeilijk om de stof onder de knie te krijgen. Bovendien leidt zo'n header op mijn computer over het algemeen tot onjuiste weergave van tekst, aangezien ik niet "utf-8", maar "Windows -..." moet zetten.

In het voorbeeld is het niet duidelijk dat de woorden "style.css", "block-menu" en "nav" geen trefwoorden zijn, maar door de gebruiker gedefinieerde namen. Ik heb het experimenteel ontdekt

Kortom, ik zou graag zien dat de voorbeelden alleen bevatten wat relevant is voor de zaak, zodat de regels die niet duidelijk zijn in de context geschreven zouden worden wat voor soort "relevant voor de zaak" ze hebben.

• Log in om reacties achter te laten

Oleg za, 20-09-2014 - 23:50

Het meest omvangrijke commentaar !!!
Reacties worden pas na moderatie doorgegeven, dus je hebt je reactie niet direct gezien.
Ik zal proberen alles te beantwoorden. Laten we beginnen met te vragen waarom dit hier is. Er zijn twee links gelekt uit de werkende versie.
Over de verkeerde weergave van de tekst. Je kon deze pagina lezen en becommentariëren ondanks het feit dat deze dezelfde codering heeft als het voorbeeld in de post.
Dit bericht is niet bedoeld voor absolute beginners en is geschreven op verzoek van abonnees. Als je absoluut alles uitlegt, moet je praten over klassen en identifiers, blokken, positionering, pseudo-selectors, cascade, enzovoort. Een behoorlijk lang artikel zal blijken en, belangrijker nog, nutteloos.
ul.nav li: hover> ul (display: block;) toont het eerder verborgen item. Als we het per letter ontleden, dan (hier bekijken we de code parallel) wanneer we de muisaanwijzer over het menu-item (ul.nav li) bewegen: de hover wordt geactiveerd en de eerste geneste lijst> ul zal zichtbaar zijn vanwege het feit dat de weergegeven waarde verandert van geen in blok.

Haba, hallo!

Er verschijnen veel goede oplossingen van verschillende specialisten op Codepen en ik vind dat de beste daarvan op één plek moeten worden verzameld. Daarom begon ik 2 jaar geleden interessante scripts over verschillende onderwerpen op mijn computer op te slaan.

Ik plaatste ze vroeger in de cloud IDE productgroep dhr. Gefest, dit waren samenstellingen van 5-8 oplossingen. Maar nu begon ik 15-30 scripts te verzamelen in verschillende onderwerpen (knoppen, menu's, tips, enzovoort).

Zulke grote sets zouden aan meer professionals moeten worden getoond. Daarom plaats ik ze op Habr. Ik hoop dat ze nuttig voor je zullen zijn.

In deze review bekijken we gelaagde menu's.

Platte horizontale navigatie

Leuke navigatiebalk met soepel verschijnende submenu's. De code is goed gestructureerd, js wordt gebruikt. Afgaande op de gebruikte functies, werkt het in ie8 +.
http://codepen.io/andytran/pen/kmAEy

Material Nav Header met uitgelijnde dropdowns

Responsieve linkbalk met submenu met twee kolommen. Alles gebeurt in css en html. Toegepaste css3-selectors die niet worden ondersteund in ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ

Vervolgkeuzemenu voor soepele accordeon

Stijlvol verticaal menu met soepele drop-down elementen. Overgang, transform js-code wordt gebruikt.
http://codepen.io/fainder/pen/AydHJ

Pure CSS donker inline navigatiemenu

Donkere verticale navigatiebalk met pictogrammen van ionicons. Javascript wordt toegepast. In ie8 zal het waarschijnlijk werken zonder animatie.
http://codepen.io/3lv3n_snip3r/pen/XbddOO

Puur CSS3 Mega-vervolgkeuzemenu met animatie

Stijlvol menu met twee uitvoerformaten: horizontaal en verticaal. Er wordt gebruik gemaakt van iconen en css3-animatie. In ie8 zal het er zeker verschrikkelijk uitzien, maar in andere browsers is alles cool.
Verticale link: http://codepen.io/rizky_k_r/full/sqcAn/
Horizontale link: http://codepen.io/rizky_k_r/pen/xFjqs

Vervolgkeuzemenu CSS3

Een horizontaal menu met grote items en een vervolgkeuzelijst met links. Schone en minimalistische code zonder js.
http://codepen.io/ojbravo/pen/tIacg

Eenvoudig puur CSS-vervolgkeuzemenu

Eenvoudig maar stijlvol horizontaal menu. Gebruikt door font-awesome. Alles werkt in css en html, geen js. In ie8 zal werken.
http://codepen.io/Responsive/pen/raNrEW

Bootstrap 3 mega-vervolgkeuzemenu

Een uitstekende oplossing voor online winkels. Toont meerdere niveaus van categorieën en grote afbeeldingen (bijvoorbeeld voorraadartikelen). Het is gebaseerd op boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/

Platte navigatie

Stijlvolle navigatiebalk met soepele submenu's. Het wordt weergegeven met problemen in oudere browsers.
http://codepen.io/andytran/pen/YPvQQN

3D geneste navigatie

Horizontaal menu met hele gave animaties zonder js!
http://codepen.io/devilishalchemist/pen/wBGVor

Responsief Mega-menu - Navigatie

Horizontaal responsief menu. Ziet er goed uit, maar de mobiele versie is een beetje zwak. Gebruikte css, html en js.
http://codepen.io/samiralley/pen/xvFdc

Puur CSS3-menu

Originele menukaart. Met eenvoudige en schone code zonder js. Gebruik voor wow-effecten.
http://codepen.io/Sonick/pen/xJagi

Volledig CSS3-vervolgkeuzemenu

Een kleurrijk vervolgkeuzemenu met één nestniveau. Er wordt gebruik gemaakt van iconen uit font-awesome, html en css.
http://codepen.io/daniesy/pen/pfxFi

Vervolgkeuzelijst alleen CSS

Best een goed horizontaal menu met drie nestniveaus. Werkt zonder js.
http://codepen.io/riogrande/pen/ahBrb

Vervolgkeuzemenu's

Een minimalistisch menu met het originele effect van het verschijnen van een geneste lijst met items. Ik ben blij dat deze oplossing ook zonder javascript is.
http://codepen.io/kkrueger/pen/qfoLa

Puur CSS-vervolgkeuzemenu

Een primitieve maar effectieve oplossing. Alleen css en html.
http://codepen.io/andornagy/pen/xhiJH

Pull-menu - Menu-interactieconcept

Een interessant concept van een menu voor een mobiele telefoon. Ik heb dit niet eerder gezien. Gebruikt html, css en javascript.
http://codepen.io/fbrz/pen/bNdMwZ

Maak een eenvoudig vervolgkeuzemenu

Schone en eenvoudige code, geen js. In ie8 zal het zeker werken.
http://codepen.io/nyekrip/pen/pJoYgb

Vervolgkeuzelijst pure CSS

Geen slechte oplossing, maar er worden te veel klassen gebruikt. Ik ben blij dat er geen js is.
http://codepen.io/jonathlee/pen/mJMzgR

Drop-down menu

Mooi verticaal menu met minimale javascript-code. JQuery wordt niet gebruikt!
http://codepen.io/MeredithU/pen/GAinq

CSS 3 vervolgkeuzemenu

Een horizontaal menu met extra bijschriften kan uw site goed verfraaien. De code is eenvoudig en duidelijk. Javascript is niet van toepassing.
http://codepen.io/ibeeback/pen/qdEZjR

Leuke oplossing met veel code (html, css en js). Er zijn 3 submenu-indelingen uitgevonden. De oplossing is zeer geschikt voor online winkels.
http://codepen.io/martinridgway/pen/KVdKQJ

CSS3 Menu Dropdowns (Speciale Oplossing)!

Donker horizontaal menu met dertien (13) animatie-opties! Ik raad je zeker aan om het te lezen, het zal van pas komen in het dagelijks leven.
http://codepen.io/cmcg/pen/ofFiz

PS
Ik hoop dat je genoten hebt van het samenstellen van 23 oplossingen. Wil je ze verder lezen, doorloop dan onderstaande enquête.
Geniet van je werk, allemaal.

De groeten! Als u een beginnende lay-outontwerper bent, zult u vroeg of laat het feit tegenkomen dat u uw pagina's op de een of andere manier nieuw leven wilt inblazen, ze op zijn minst een beetje interactief wilt maken. CSS-animaties kunnen je hierbij helpen. Maar je moet weten waar en hoe je ze moet toepassen.

Vandaag vertel ik het je hoe maak je een vervolgkeuzemenu op schoonCSS en hoe voeg je er gladheid aan toe? met behulp van CSS-animatie. Als je het niet weet, is het tijd om vertrouwd te raken met de basis.

Lay-out van het HTML + CSS-menu

Laten we eerst, zodat we iets hebben om mee te werken, een eenvoudig menu op één niveau opstellen. Laten we ons niet te veel druk maken over het ontwerp, voor de duidelijkheid, dit is genoeg:

Wat we hebben? De meest gewone ongeordende lijst met de identifier "top_menu" en met links verpakt in de elementen van deze lijst. Alles is banaal en eenvoudig. Bij hover veranderen de menu-items van kleur ... je weet dit al en begrijpt hoe je het moet doen (hoop ik).

Een menu op het tweede niveau toevoegen

Om een ​​gelaagd menu te maken, moeten we een tweede ongeordende lijst aan de eerste toevoegen. Ik denk dat je het ergens in de eerste lessen hebt gehaald. En ook het feit dat je het niet alleen in onze lijst moet invoegen, maar ook in het lijstelement, dat wil zeggen de tag " li", Direct na de sluiting" een "tag.

We positioneren de geneste lijsten absoluut in relatie tot " li"Waarin wordt geïnvesteerd. En alles " li»Het bovenste niveau is gepositioneerd ten opzichte van ( familielid). Om ervoor te zorgen dat het vervolgkeuzemenu ONMIDDELLIJK na ons hoofdmenu komt, moet het (de vervolgkeuzelijst - " inner_menu”) U moet instellen

Positie: absoluut; top 100%;

Dat wil zeggen dat de opvulling vanaf de bovenrand van de ouder gelijk is aan de hoogte van de ouder. Heel logisch, naar mijn mening.

Naast positionering, moet u het vervolgkeuzemenu opmaken als een menu op het hoogste niveau. Een appel van een appelboom, zoals ze zeggen...

Zoals je kunt zien, ziet ons vervolgkeuzemenu er nog niet uit als een vervolgkeuzelijst, maar hangt en bungelt. Maar niets, we lossen het snel op.

Hoe maak je een dropdown-menu echt dropdown

Makkelijker kan niet! Om onze geneste lijst te maken, hoeft u deze alleen maar te verbergen! En dan alleen openen wanneer de muiscursor over het menu-item op het hoogste niveau gaat dat een vervolgkeuzemenu bevat. Het klinkt misschien een beetje ingewikkeld, maar in werkelijkheid kan het worden opgelost met slechts een paar regels code.

Voeg het vervolgkeuzemenu toe:

Geen weergeven;

En om het weer te geven, moet u zich registreren:

#top_menu> li: hover> ul (weergave: blok;)

Wat vertelt dit hele stelletje selecteurs ons? We lezen vanaf het einde. We stellen stijlen (zichtbaarheid) in voor de lijst op het tweede niveau, die zich in het lijstelement op het eerste niveau bevindt, maar deze stijlen werken alleen als we de muis (hover) over de "li "die onze lijst op het tweede niveau bevat.

Ik hoop dat ik mezelf duidelijk heb gemaakt. Zo niet, probeer het dan meerdere keren te lezen. Beter nog, begrijp het gewoon door naar de code te kijken. Laten we eens kijken wat we hebben:

Ja, we lijken te hebben bereikt wat we wilden - we hebben een vervolgkeuzemenu gemaakt, een echt vervolgkeuzemenu, fuck it! Maar hij mist iets. Weet je wat? Gladheid! Alles ziet er immers uit alsof het menu niet uitvalt, maar gewoon verschijnt. En heel scherp, zelfs ogenblikkelijk, zou ik zeggen.

Laten we wat meer magie op hem doen.

Soepele vervolgkeuzelijst is eenvoudig

Laten we dus een soepel vervolgkeuzemenu maken in pure CSS. Waarom doe je dit? Omdat mensen er dol op zijn als alles glad en zacht is... en het er mooi uitziet. Er zal een pluspunt zijn voor de bruikbaarheid van uw site. Laten we gaan!

Onthoud dat u alleen nauwkeurige wiskundige waarden kunt animeren, zoals 50px en 300px, 0 en 100%, 0,5 en 1,0, enzovoort. In ons geval kunnen we de twee staten van ons vervolgkeuzemenu niet animeren ( Geen weergeven; en weergave: blok;).

Maar we kunnen ze vervangen door transparantie - dekking: 0 en dekking: 1. En stel de tijd in gedurende welke ons menu zal verschijnen vanuit de transparante staat. Ja, het werkt, maar het is niet helemaal het effect dat je zou verwachten. Dus laten we het een beetje moeilijker maken. Maar het is het waard, geloof me.

Om de animatie vloeiender en voorspelbaarder te maken, moesten we een vaste hoogte instellen voor de vervolgkeuzemenu-items, hoewel het ook zonder had gekund. Er zijn veel methoden, bedenk gewoon combinaties en los problemen op.

Zoals je aan de code kunt zien, hebben we de hoogte van de dropdown-items en hun transparantie geanimeerd. Dit bleek voldoende te zijn om een ​​mooie vloeiende animatie van het dropdown menu te maken.

Wat hadden we nodig voor de animatie? Twee toestanden van onze menu-items, evenals de eigenschap overgang, die deze toestanden heeft geïnterpoleerd, dat wil zeggen, alle tussenliggende waarden in het toegewezen tijdsinterval heeft gevuld. Dat is alles!

Het had nog eenvoudiger kunnen zijn met jQuery, maar we zeiden eerst dat we vandaag met pure CSS gaan werken. En je had het nog mooier kunnen maken door Bezier-curven toe te voegen aan de animaties, maar dit onderwerp gaat vandaag een beetje buiten het bestek van vandaag. Maar we komen er later zeker nog op terug.

Uitgang:

Nu kun je tegen je vrienden en familie opscheppen dat je weet hoe je een vervolgkeuzemenu in pure CSS kunt maken. Dit is een heel nuttige vaardigheid die steeds weer van pas zal komen. Nou, oordeel zelf, hoeveel sites heb je gezien met een statisch menu? Nee, de meeste sites hebben een vervolgkeuzemenu.

Dit was trouwens mijn eerste CSS-tutorial. Beschrijf hoe je het leuk vindt? Heb je alles duidelijk uitgelegd of moet je er nog meer op kauwen? En is het de moeite waard om artikelen te blijven schrijven over CSS-levenshacks?

Bedankt voor uw aandacht en graag tot ziens!

Heb je tot het einde gelezen?

Was dit artikel behulpzaam?

Niet echt

Wat vond je precies niet leuk? Was het artikel onvolledig of onjuist?
Schrijf in opmerkingen en we beloven te verbeteren!

Hallo lieve lezers van mijn blog! Het artikel van vandaag zal zeer nuttig zijn voor beginnende lay-outontwerpers. Sinds vandaag maken we samen met u een eenvoudig horizontaal menu. Voordat we rechtstreeks naar de lay-out gaan, wil ik een paar woorden zeggen over waarom ik heb besloten dit specifieke onderwerp voor het artikel te kiezen.

In feite is alles vrij eenvoudig, toen ik nadacht over het onderwerp van de volgende les voor de site, begon ik mijn ervaring met het bestuderen van lay-out te onthouden en te analyseren, waar ik mee te maken kreeg in de beginfase om mezelf te worden als lay-out ontwerper, wat voor mij het meest onbegrijpelijk was bij het bestuderen van dit gebied enz. Ik heb mezelf al deze vragen gesteld om beter te begrijpen wat interessant kan zijn voor iemand die zijn reis als lay-outontwerper begint. En voor mij persoonlijk kwamen de meeste vragen op toen ik begon met het bestuderen van lay-out, over de lay-out van verschillende menu's, vooral als het gaat om menu's met meerdere niveaus. En dus zullen we het vandaag hebben over het menu, en meer specifiek over het horizontale menu. Hier gaan we!

Laten we beginnen met de lay-out van ons horizontale menu!

Zoals je waarschijnlijk al vermoedt, is het eerste wat we moeten doen een html-pagina met standaard opmaak maken en de stylesheet eraan koppelen. Ik zal niet in detail op deze stap ingaan, aangezien ik nog steeds hoop dat je niet beginner genoeg bent om je in detail te vertellen wat lichaam en hoofd zijn en hoe stijlen met elkaar verbonden zijn. Ik zal alleen zeggen dat ik naast de stijlen voor ons menu de eenvoudigste reset naar het css-bestand zal schrijven om de stijlen opnieuw in te stellen en dezelfde inspringing in alle browsers te bereiken. Zo ziet mijn eenvoudigste reset eruit:

Ik zal ook niets in detail zeggen over het opnieuw instellen van stijlen, aangezien dit in feite een onderwerp is voor een ander artikel, het enige dat u over de bovenstaande code moet weten, is dat dankzij deze code alle pagina-elementen die we zullen schrijven zullen hebben hun marges en marges worden teruggezet naar nul. padding, dit moet worden gedaan om ervoor te zorgen dat onze pagina er in alle browsers hetzelfde uitziet.

Dus wat hebben we in dit stadium? We hebben een html-pagina met standaard opmaak:

En we hebben een stylesheet gekoppeld aan deze pagina (de mijne is style.css), met de volgende inhoud:

De volgende stap is het maken van de html-opmaak voor ons menu.

Hoe de opmaak voor het menu te maken

In onze opmaak gebruiken we een nieuwe tag