Hur man skapar en horisontell Meny med med HTML, CSS och jQuery192

Hur man skapar en horisontell Meny med med HTML, CSS och jQuery192 horisontell meny med HTML

Hur man skapar en horisontell Meny med med HTML, CSS och jQuery

Menyer spelar en viktig roll på webben. De tillåter användare att hitta sina lager och hjälpa dem att navigera din webbplats. När utforma menyer. användbarhet är nyckeln. Nybörjare kämpar ofta med grunderna. I den här guiden kommer jag att visa dig hur du skapar en enkel, användbar och funktionell horisontell meny med HTML och CSS. Jag kommer också att dyka lite i jQuery att lägga till animationer till din meny.

Denna handledning förutsätter att du har grundläggande kunskaper i HTML och CSS. Det rekommenderas att använda en CSS återställning konsekvens. Jag använder en av HTML5Doctor.


Det grundläggande

Låt oss börja med den grundläggande HTML-strukturen på menyn:

En meny består av en oordnad lista, och varje post i listan innehåller en länk med texten. Inte skapar onödiga divs. Du behöver inte någon.

För att lägga till en undermeny helt enkelt bo annan oordnad lista inne i objekt som kommer att ha en undermeny, så här:

Som ni kan se, skapa struktur är mycket enkel. Detta är hur det ska se ut i din webbläsare i detta skede:

Det finns flera sätt att ställa in CSS för en horisontell meny. Efter många år fann jag att detta är den snabbaste och renaste sättet att göra det:

  • Jag bestämde att flyta hela menyn att innehålla det, men du kan använda overflow dold eller ens ställa in en fast bredd för samma ändamål.
  • Det är viktigt att flyta listelementen snarare än länkarna.
  • Länkarna ska visas som block, annars kommer de inte beter sig som förväntat.
  • Absolut position undermenyn och dölja den för att ta bort den från regelbundet flöde och gör den osynlig. Dessutom ställer höga z-index för att förhindra undermenyn från att visas bakom andra element.
  • Ställ en höjd för länkelement och line-height lika med höjden för att centrera text vertikalt. Genom att ange en fast höjd i stället för att bara använda stoppning du undvika flimmer problem med jQuery animeringar senare.
  • Även om det inte är nödvändigt att ange en fast bredd för delmenypunkter, det är alltid en god praxis. Den tillåter dig att styla dem mer konsekvent senare.
  • Lägg märke till att hovringstillstånd ligger på listelementet och inte länken.

Med allt detta set, bör menyn vara redan arbetar. Försök att öppna den i webbläsaren och svävar över det tredje alternativet för att visa undermenyn.

förbättra Användbarhet

Detta steg kommer att omfatta hur man utformar menyn med några grundläggande CSS för att göra den mer lättillgänglig.

Tänk på detta är mycket grundläggande, och är tänkt att vara bara ett exempel. Du kan styla detta hur du vill. Det viktiga att komma ihåg här är, som jag nämnde tidigare att hover stater, formaterad i posterna listan och inte de länkar.

Detta är hur menyn ser så långt:

tillsats av animeringar

Detta sista steg är inte nödvändigt men det hjälper dig lägga till animeringar till din meny med enkel jQuery. Det första du behöver göra, naturligtvis, är att ringa den senaste jQuery plugin på din webbplats:

Nu ska vi lägga till en "noJS" klass till undermenyn för att kunna haka hover css tillståndet i jQuery. Detta kommer också att se till att menyn fortfarande kommer att fungera när javascript är avaktiverat.

Du måste också lägga till klassen till undermenyn CSS hovringstillstånd:

Nu när allt är klart låt oss lägga till några magiska:

Koden är ganska förklarande. Skriptet finner omedelbara barn listobjekt och lägger till en hover funktion. Inne i funktion den tar bort "noJS" klass eftersom vi använder JavaScript, och sedan berättar menyn att glida ner på hover och glider upp på FN-hover. Detta uppnås med slideToggle funktion. Stoppfunktionen förhindrar animeringen från att upprepa sig om vi svävar flera gånger.

ytterligare Notes

Menyn bör arbeta i IE7 + och alla andra moderna webbläsare. Jag brydde sig inte att stödja IE6. Jag är säker på att det skulle kunna fungera med vissa korrigeringar här och där, men det är inte syftet med den här guiden.

Jag uppmuntrar dig att prova några CSS3 egenskaper att styla din meny, möjligheterna är nästan oändliga. Jag föreslår att du använder ColorZilla gradient generator för att skapa gradienter.

Jag ser fram emot att se vad du kan göra.

Åsikter som uttrycks i artikeln är de av författaren och inte nödvändigtvis av Onextrapixel.

Källa: www.onextrapixel.com

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *

11 − 2 =