Indhold

• At træde
• Del 1 af 2: Skrivning af HTML
• Del 2 af 2: Skrivning af CSS
• Tips

Med en rullemenu opretter du en klar og hierarkisk oversigt over alle vigtige dele på siden og de underafsnit, som siden indeholder. Du skal bare flytte musen over hovedafsnittene for at få underafsnittene til at vises. Du kan oprette en rullemenu ved kun at bruge HTML og CSS.

At træde

Del 1 af 2: Skrivning af HTML

1. Opret dit navigationsafsnit. Normalt bruger du nav> til navigationslinjen over hele webstedet, header> til mindre linkafsnit, der er sidebundet, eller div> hvis ingen anden mulighed synes at passe. Placer dette i et div> -element, så du kan justere stilen for både containeren og selve menuen.
   • div>
   • nav>
   • / nav>
   • / div>
2. Giv hvert afsnit en klasseattribut. Vi bruger klasseattributten senere til at ændre stilen på disse elementer med CSS. Giv både containeren og menuen deres egen klasseattribut.
   • div>
   • nav>
   • / nav>
   • / div>
3. Tilføj en liste over menupunkter. Den uordnede liste (ul>) indeholder elementerne i hovedmenuen (listeelementer li>). Hvis brugeren bevæger musen over den, ser han / hun rullemenuerne. Føj klassen "clearfix" til dit listeelement; vi kommer til dette senere i CSS-regnearket.
   • div>
   • nav>
   •       ul>
   •          li> Hjem / li>
   •          li> Medarbejdere
   •          li> Kontakt
   •          / li>
   •       / ul>
   • / nav>
   • / div>
4. Tilføj links. Hvis disse menupunkter på øverste niveau også linker til deres egne sider, kan du nu indsætte linkene. Link til et ikke-eksisterende anker (såsom "#!"), Selvom de ikke linker til noget, så brugerens markør ser anderledes ud. I dette eksempel fører Contact ingen steder, men de to andre menupunkter gør:
   • div>
   • nav>
   • ul>
   • li>a href = "/">Hjem/ a>/ li>
   • li>a href = "/ Medarbejdere">Medarbejdere/ a>
   • / li>
   • li>a href = "#!">Kontakt/ a>
   • / li>
   • / ul>
   • / nav>
   • / div>
5. Opret underlister til rullemenuerne. Når stilen er oprettet, danner disse lister rullemenuen. Placer listen i det listeelement, som brugeren vil holde musen over. Tilføj en klasseattribut og et link som før.
   • div>
   • nav>
   • ul>
   • li> a href = "/"> Hjem / a> / li>
   • li> a href = "/ Medarbejdere"> Medarbejdere / a>
   •          ul>
   •             li> a href = "/ borsato"> Marco Borsato / a> / li>
   •             li> a href = "/ titulaer"> Chriet Titulaer / a> / li>
   •          / ul>
   • / li>
   • li> a href = "#!"> Kontakt / a>
   •          ul>
   •             li> a href = "mailto: [email protected]"> Rapporter et problem / a> / li>
   •             li> a href = "/ support"> Kundesupport / a> / li>
   •          / ul>
   • / li>
   • / ul>
   • / nav>
   • / div>

Del 2 af 2: Skrivning af CSS

1. Åbn dit CSS-typografiark. Indsend et link til dit CSS-stilark i hovedafsnittet i dit HTML-dokument, hvis linket ikke allerede er der. I denne artikel dækker vi ikke det grundlæggende i CSS, såsom indstilling af en skrifttype og baggrundsfarve.
2. Tilføj clearfix-kode. Husker du at tilføje "clearfix" -klassen til menulisten? Normalt har elementerne i rullemenuen en gennemsigtig baggrund, som gør det muligt at flytte andre elementer. En simpel tilpasning til CSS kan løse dette problem. Her er en god, hurtig løsning, selvom det ikke fungerer i Internet Explorer 7 og tidligere:
   • .clearfix: efter {
   • indhold: "";
   • display: tabel;
   • }
3. Opret det grundlæggende design. Med denne kode kan du placere din menu øverst på siden og skjule rullelisten. Dette er meget enkelt med vilje, så vi kan fokusere på den relevante kode. Du kan ændre det senere med yderligere CSS-kode, såsom polstring og margen.
   • .nav-indpakning {
   • bredde: 100%;
   • baggrund: # 008B8B;
   • }
   •  
   • .nav-menu {
   • position: relativ;
   • display: inline-blok;
   • }
   •  
   • .sub-menu {
   • position: absolut;
   • display: ingen;
   • baggrund: # 555;
   • }
4. Få rullemenuerne til at vises, når du holder musen over dem. Elementerne i rullelisten er nu indstillet, så de ikke vises. Sådan får du en hel underliste til at vises, så snart du holder markøren over "forældren":
   • .nav-menu ul li: svæver> ul {
   • display: blok;
   • }
   • Bemærk - hvis yderligere menuer er skjult i menupunkterne i rullemenuen, gælder de egenskaber, der tilføjes her, for alle menuer. Hvis du kun vil have stilen til at gælde for det første niveau i rullemenuerne, skal du i stedet bruge ".nav-menu> ul".
5. Angiv med en pil, at der er en rullemenu. Webdesignere viser normalt med en pil ned, at et element åbner en rullemenu. Denne kode tilføjer den pil til hvert element i din menu:
   • .nav-menu> ul> li: efter {
   • indhold: " 25BC"; / * undslapte unicode for pil ned * /
   • skriftstørrelse: .5em;
   • display: blok;
   • position: absolut;
   •    }
   • Bemærk - Juster placeringen af ​​pilen med egenskaberne øverst, nederst, højre eller venstre.
   • Bemærk - Hvis ikke alle dine menupunkter har rullelister, skal du ikke ændre udseendet på hele klassens nav-menu. I stedet skal du tilføje en anden klasse (såsom dropdown) til hvert li-element, hvor du vil have en pil. Se denne klasse i koden ovenfor.
6. Juster polstring, baggrund og andre egenskaber. Menuen skal fungere nu, men den er ikke særlig god endnu. Med egenskaberne i CSS kan du tilpasse, hvordan hver klasse eller element ser ud, og hvor de er placeret.

Tips

• Hvis du vil føje en rullemenu til en formular, er det meget let i HTML5 med elementet vælg>.
• Linket a href = "#"> ruller til toppen af ​​siden og et link, der peger på et ikke-eksisterende anker, såsom et href = "#!">, Ruller ikke. Hvis det føles for sjusket, kan du ændre, hvordan markøren ser ud med CSS.
• Fjern alle punkttegn, når du kopierer og indsætter prøvekoden.