Rollover Menu Tutorial

En rollover menu er, når et billede eller farve ændrer Når musen bevæger sig over linket, hvilket skaber en animeret føler. Hvis du vil oprette en rollover menu, en forståelse af HTML (Hyper Text Markup Language) og CSS (Content style sheets) er påkrævet. Brug af CSS og HTML giver dig mulighed for at ændre baggrundsbilledet eller farver uden behov for at genskabe hver knap.

HTML Menu Markup

Menuen bruger flere tag elementer til HTML del af menuen. Hvert tag har en åbning tag og et afsluttende tag, såsom <body> </ body>. Begyndelsen tag udtryk er den <div> tag. Det definerer en sektion eller afdeling i et HTML-dokument og bruger en unik identifyer (id). De andre elementer til din menu vil falde mellem disse to tags <div> og </ div>. Med de vigtigste container komponent oprettet, skal du skrive din menu listen ved hjælp af uordnet HTML-tag (UL) og <li> tag. Brug <a> (anker) tag med en "href" attribut til at angive linket destination (URL):

<Body>

<Div id = "nav">
<Ul>
<Li> <a href="URL"> Hjem </a> </ li>
<Li> <a href="URL"> Produkter </a> </ li>
<Li> <a href="URL"> Services </a> </ li>
<Li> <a href="URL"> Kontakt </a> </ li>
</ Ul>
</ Div>

</ Body>

Indhold Style Sheet Setup

En CSS (indhold stylesheet) tillader dig at gruppere elementer sammen for specifikke tags. Et typografiark bruger tags <style> </ style> og placeres i <head> sektion af HTML-dokumentet. Attributten "type" angiver de oplysninger, der følger, er en CSS.

Angiv grundlæggende "#nav" <div> attributter samt stil for vores uordnet liste <ul>, som margenen, bredde og fjerne kuglerne (liste-style-type). Andre egenskaber omfatter indstilling af margen og polstring til nul for at fjerne den linje led, og definere teksten stil med "font-family" og "font-size":

<Style type = "text / css">

nav {

bredde: 140px; / Brug samme bredde størrelse til "#nav en" nedenfor /
font-family: Verdana, sanf-serif;
font-size: 12px;
}

nav ul {

margin: 0;
padding: 0;
list-style-typen: none;
}

</ Style>

Opret en lidt plads mellem listen menupunkterne <li> for bedre præsentation. Følgende attribut placerer to pixels over hver listeelement:

nav li {

margin: 2PX 0 0;
}

CSS rollover-effekt

Den sidste fase er rollover effekt, som bruger klasser knyttet til de besøgte, aktive og svæver tilstande af et link (a: link, a: aktiv, a: besøgte a: hover). De grundlæggende link attributter tildelt "#nav en" gælder for alle stater i et link. Ved at bruge en mørkere baggrundsfarve for "a: hover" attribut, du skabe kontrast;

nav en {

display: block;
bredde: 140px; (Bredde skal matche "#nav" ovenfor /) /
padding: 2PX 2PX 2PX 8px;
kant: 1px solid # 000000;
baggrund: #CCCCCC;
tekst-dekoration: ingen; / Fjerner link understreger /}

nav A: link, #nav a: aktiv, #nav a: besøgte {

color: # 000000; / Sort tekst COLOR /}

nav a: hover {

kant: 1px solid # 000000;
baggrund: # 999999;
farve: #FFFFFF; / Hvid tekst COLOR /}

Tilføj et billede

For krydderi, tilføje et baggrundsbillede til menuen (#nav en: hover og nav A: link):

baggrund: # 333333 URL (billeder / background1.gif);


relaterade artiklar