Så här skapar du en rullgardinsmeny i HTML och CSS

En rullgardinsmeny (kallas också en rullgardinsmeny) ger en klar och tydlig vy över alla huvudavsnitt på en webbsida och de relaterade underavsnitt som finns i dem. För att göra delarna synliga är den enda åtgärd som användaren behöver för att flytta muspekaren över huvudmenyalternativen. Skapa en rullgardinsmeny innebär att du använder HTML- och CSS-stilark.

Del 1

Skapandet av HTML-koden

Skapa huvudmenyn. För att skapa en navigeringsfält som sträcker sig över bredden på webbsidan använder du normalt taggen

. Sätt in taggen vald inom elementet

. På så sätt kan du enkelt ändra menyns stil.

Tilldela ett attribut "klass" till varje sektion av menyn. Detta attribut är mycket viktigt och kommer senare att användas för att ändra stilen för varje element genom CSS stilark. Tilldela ett attribut "klass" annorlunda än sektionen

som kommer att innehålla menyraden och sektionen

class ="nav-wrapper">

Lägg till listan över objekt som kommer att visas i menyn. Taggen

(oorderad lista) kommer att innehålla huvudmenyerna i menyn, som alla befolkade av de olika objekten genom att använda taggen

. För att visa rullgardinsmenyn för varje avsnitt måste användaren helt enkelt placera muspekaren över den. Den sektion som identifierats av taggen

måste ha följande attribut "klass": "clearfix". Senare kommer dessa data att vara mycket viktiga eftersom det kommer att låta dig hantera stilen på menyn via CSS-arken.

Home

medarbetare

Kontakta

Ange länkarna. Om huvudmenyerna i menyn också ska fungera som en länk till relevanta webbsidor är det dags att skapa länkar. Även om dessa sektioner inte har en sida att peka på, skapa en dummy länk med ett ankare som inte existerar i HTML, till exempel "#!". På det sättet, när användaren placerar den på objektet i menyn i fråga, kommer muspekaren att ändra sitt utseende. I vårt exempel, till skillnad från de andra två elementen som presenteras, avsnittet "Kontakta" på menyn pekar inte på någon webbsida:

Home

medarbetare

Kontakta

Skapar listorna över delsektioner i varje rullgardinsmeny. Efter att ha slutfört skapandet av CSS-stilark blir dessa listor de rullgardinsmenyer som användaren kan visa. Näst dessa objekt i huvuddelen av den lämpliga menyn. Också i detta fall kom ihåg att inkludera attributet i varje element "klass" och att skapa den relativa hyperlänken som ses i föregående steg.

Home

medarbetare

Michael Jordan

Stephen Hawking

Kontakta

Rapportera ett problem

Kundtjänst

Del 2

Skapa CSS Style Sheets

Öppna CSS-stilarket. Om du inte redan har gjort det, inom sektionen "huvud" av ditt HTML-dokument måste du infoga länken till CSS-stilarket som ska användas. Denna artikel förklarar inte grunderna för hur man använder och skapar ett CSS-stilark, till exempel för att ändra bakgrundsfärgens eller textens färg.

Lägg till koden "clearfix". Kom ihåg attributet "klass" namnges "clearfix" läggs till i strukturen som innehåller elementen i huvudmenyn? Normalt visas objekten i en rullgardinsmeny på en transparent bakgrund och kan också omges av andra element. En snabb ändring av CSS stilark löser detta visningsproblem. Nedan är en enkel och elegant lösning, men tyvärr inte stöds av Internet Explorer 7 och tidigare versioner:

.clearfix: efter {

innehåll: "";

display: bord;

}

Skapa den grundläggande layouten. Följande kod har menyn längst upp på sidan, gömmer objekten i rullgardinsmenyerna. Bara för att fokusera endast på koden som är relevant för våra syften, reduceras den CSS-kod som här visas avsiktligt till det lägsta som krävs. Du kan sedan slutföra det genom att ange alla ytterligare egenskaper du behöver, till exempel marginalhantering och textcentrering.

.nav-wrapper {

bredd: 100%;

bakgrund: # 008B8B;

}

.nav-meny {

positioner: relativ;

display: inline-block;

}

.undermeny {

position: absolute;

display: none;

bakgrund: # 555;

}

Visar elementen i rullgardinsmenyerna. För tillfället är de objekt som jag komponerar rullgardinsmenyerna konfigurerade att inte visas. Så nästa steg är att visa rullgardinsmenyn relaterad till huvuddelen av menyn där användaren har placerat muspekaren:

.nav-menyn ulli: svävar > ul {

display: block;

}

Obs! Om objekten i rullgardinsmenyerna pekar på andra undermenyer, tillämpas alla egenskaper som läggs till i det här lagret på alla föremål. Om du vill att den beskrivna stilen bara ska tillämpas på den första nivån i rullgardinsmenyerna måste du använda följande kod: ".nav-menyn > ul".

Välj rullgardinsmenyerna. För att göra användargränssnittet mer intuitivt rapporterar webbdesigners normalt att ett menyalternativ innehåller en rullgardinsmeny som visar en liten nedåtriktad pil bredvid den. Följande kod lägger till den här lilla ikonen bredvid varje element i huvudmenyn:

.nav-menyn > ul > li: efter {

innehåll: " 25bC"- / * unicode-kod som identifierar freaccia-symbolen * /

typsnittstorlek: .5em;

display: block;

position: absolut;

}

Obs! Du kan ändra positionen där pilen visas med egenskaperna beroende på dina behov "topp", "botten", "höger" eller "vänster".

Obs! Om vissa delar av huvudmenyn inte innehåller en rullgardinsmeny, lägg inte till koden i fråga till klassen "nav-menyn". I stället skapar du en andra klass, namngiven till exempel "rullgardins", och tilldela det uteslutande till dessa element "dem" av HTML-koden som måste visa pilikonen. Observera att i HTML-koden som ses i den första delen av den här guiden behöver du då hänvisa till den här klassen istället för klassen "nav-menyn".

Redigera CSS-egenskaper baserat på dina behov. Vid denna tidpunkt bör menyn på din webbplats fungera ordentligt, men du måste få lite tweaks för att förbättra ditt utseende. För detta ändamål kan du använda de otaliga egenskaperna hos CSS stilark, till exempel attribut "stoppning" eller "bakgrund". Om du inte har mycket erfarenhet av att hantera de grundläggande egenskaperna hos ett CSS-stilark, hänvisar du till följande artikel. Använd egenskaperna hos CSS-stilarken för att ändra utseendet och positionen för varje elementklass.

tips

I HTML5 kan du enkelt lägga till en rullgardinsmeny till ett formulär med hjälp av elementet
Följande HTML-tagg , det genererar ingen åtgärd. Om detta verkar vara en för grov lösning kan du ändra markörens grafiska utseende med hjälp av CSS-stilark.
Om du vill använda provkoden med en kopia och klistra in, kom ihåg att ta bort den del som är relaterad till skapandet av punktlistor.

Visa mer ... (4)

Dela på sociala nätverk:

Relaterade