Stap 2: De CSS Codes voor de navigatiebalk CSS3
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
.main-menu {}
marge: 50px auto;
breedte: 910px;
}
/ * De Top Logo deel * /
.brand {}
text-align: Midden;
breedte: 908px;
hoogte: 48px;
regelafstand: 48px;
rand: 1px solid rgb(25,25,25);
border-radius: 4px 4px 0 0;
positie: relatief;
Background:-webkit-Linear-Gradient(top,RGB(49,50,52),RGB(12,13,14));
Background:-Moz-Linear-Gradient(top,RGB(49,50,52),RGB(12,13,14));
Background:Linear-Gradient(top,RGB(49,50,52),RGB(12,13,14));
vak-schaduw: inzet 0 1px 0 rgb (62,63,65), inzet 1px 0 0 rgba(75,75,80,0.4);
}
.brand .btn-groep {positie: absoluut, top: 0; links: 8px;}
.brand .search-veld {positie: absoluut, top: 0; rechts: 20px;}
/ * Het inloggen en registreren deel * /
.brand knop {}
hoogte: 27px;
opvulling: 0 15px;
lijn-hoogte: 25px;
rand: 1px solid rgb(15,15,15);
Background:-webkit-Linear-Gradient(top,RGB(67,68,68),RGB(41,42,43) 50%,rgb(15,16,17));
Background:-Moz-Linear-Gradient(top,RGB(67,68,68),RGB(41,42,43) 50%,rgb(15,16,17));
Background:Linear-Gradient(top,RGB(67,68,68),RGB(41,42,43) 50%,rgb(15,16,17));
Color:RGB(200,200,200);
vak-schaduw: inzet 0 1px 0 rgb (77,77,78), 0 1px 0 rgb(42,43,44);
Lettertype-gewicht: 500;
tekst-schaduw: 1px 1px 0 rgb(15,15,16);
-webkit-overgang: kleur 300ms gemak;
-moz-overgang: kleur 300ms gemak;
overgang: kleur 300ms gemak;
}
.brand .ondertekenen-in {border-radius: 14px 0 0 14px; grens-rechts: 0 none;}
.brand .register {border-radius: 0 14px 14px 0;}
/ * De Logo * /
.brand .logo {}
Color:RGB(255,255,255);
lettertype-grootte: 25px;
font-weight: bolder;
tekst-schaduw: 0-1px 0 rgb(111,111,111), 0 - 2px 0 rgb(32,33,34);
}
/ * Het zoekvak * /
.brand input {}
breedte: 140px;
hoogte: 26px;
rand: none;
opvulling: 0 0 0 30px;
border-radius: 13px;
Color:RGB(255,255,255);
background-color:RGB(0,0,0);
vak-schaduw: 0 1px 0 rgb(43,44,45);
}
.brand .search-pictogram {}
positie: absoluut;
display: block;
links: 10px;
Top: 0;
lettertype-familie: pictogram-Zoek;
lettertype-grootte: 13px;
Color:RGB(100,100,100);
cursor: aanwijzer;
-webkit-overgang: kleur 300ms gemak;
-moz-overgang: kleur 300ms gemak;
overgang: kleur 300ms gemak;
}
/ * De Hover Effect * /
.brand knop: hover {color:rgb(255,255,255);}
.brand knop: actieve {background:-*-linear-gradient(top,rgb(15,16,17),rgb(41,42,43) 50%,rgb(67,68,68));}
.brand .search-pictogram: hover {color:rgb(255,255,255);}
/ * Het deel van de navigatiebalk CSS3 * /
.NAV {achtergrond-kleur: rgb (175,175,175); border-radius: 0 0 4px 4px;}
.NAV > li {float: left;}
/ * De Items/knoppen van de navigatiebalk * /
.NAV > li > een {}
display: block;
Color:RGB(50,50,50);
hoogte: 38px;
lettertype-grootte: 13px;
font-weight: bold;
lijn-hoogte: 38px;
opvulling: 0 20px;
rand: 1px solid;
marge-rechts: 1px;
Border-Color:RGB(254,254,254) rgb(227,227,227) rgb(210,210,210);
Background:-webkit-Linear-Gradient(top,RGB(248,248,248),RGB(184,184,184));
Background:-Moz-Linear-Gradient(top,RGB(248,248,248),RGB(184,184,184));
Background:Linear-Gradient(top,RGB(248,248,248),RGB(184,184,184));
tekst-schaduw: 0 1px 0 rgb(229,229,229);
}
.NAV > li:first-kind een {border-radius: 0 0 0 4px;}
.NAV > li:last-kind {positie: relatief;}
.NAV > li:last-kind > een {}
border-radius: 0 0 4px 0;
opvulling: 0 32px 0 22px;
marge: 0;
}
/ * Het driehoekje van de Drop-down Menu * /
.NAV > li:last-kind > een: vóór {}
inhoud:'';
positie: absoluut;
rechts: 15px;
boven: 18px;
rand: 5px solid transparant;
Border-Color:RGB(50,50,50) transparant transparante transparant;
}
/ * De aanwijs- en actieve Effect van de navigatie-Items/knoppen * /
.NAV > li:hover > een {}
Border-Color:RGB(255,255,255) rgb(240,240,240) rgb(221,221,221);
Background:-*-Linear-Gradient(top,RGB(255,255,255),RGB(203,203,203));
}
.NAV > li:not(:last-child) > een: actieve {background:-*-linear-gradient(top,rgb(203,203,203),rgb(255,255,255));}
.NAV > li:hover ul {display: block;}
/ * De Drop-down Menu * /
.meer-sport {}
positie: absoluut;
breedte: 478px;
Top: 100%;
rechts: 0;
margin-top: 13px;
opvulling: 46px 0 61px 0;
rand: 1px solid;
Border-Color:RGB(250,250,250) rgb(226,226,226) rgb(234,234,234);
border-radius: 4px;
Background:-webkit-Linear-Gradient(top,RGB(227,227,227),RGB(193,193,193));
Background:-Moz-Linear-Gradient(top,RGB(227,227,227),RGB(193,193,193));
Background:Linear-Gradient(top,RGB(227,227,227),RGB(193,193,193));
Color:RGB(0,0,0);
display: none;
}
/ * Opvullen van de ruimte tussen de navigatiebalk en Drop-down Menu * /
.meer-sport: vóór {}
inhoud:'';
positie: absoluut;
breedte: 100%;
hoogte: 14px;
bodem: 100%;
links: 0;
}
/ * Het driehoekje maken * /
.meer-sport: na {}
inhoud:'';
positie: absoluut;
bodem: 100%;
rechts: 40px;
breedte: 0;
hoogte: 0;
rand: 5px solid transparant;
border-color: transparant transparante rgb(227,227,227) transparant;
}
/ * Gebruik van display: inline-block te realiseren met meerdere kolommen lay-outs * /
.meer-sport li {}
display: inline-block;
breedte: 153px;
Vertical-align: top;
}
/ * element label stijl van elke kolom * /
.meer-sport li een {}
display: block;
marge-linkerzijde: 13px;
Color:RGB(0,0,0);
lettertype-grootte: 13px;
font-weight: bold;
opvulling: 2px 5px;
tekst-schaduw: 0 1px 0 rgb(240,240,240);
border-radius: 7px;
}
/ * kop * /
.meer-sport .header {}
display: block;
positie: absoluut;
Top: 0;
links: 0;
marge-linkerzijde: 18px;
lijn-hoogte: 48px;
Color:RGB(33,33,33);
tekst-schaduw: 0 1px 0 rgb(246,246,246);
}
/ * voettekst * /
.meer-sport .footer {}
display: block;
positie: absoluut;
bodem: 0;
links: 0;
breedte: 100%;
Color:RGB(145,145,145);
tekst-schaduw: 0 1px 0 rgb(242,242,242);
lijn-hoogte: 49px;
background-color:RGB(228,228,228);
border-radius: 0 0 3px 3px;
tekst-streepje: 20px;
}
/ * De voettekst knop * /
.meer-sport .footer een {}
positie: absoluut;
rechts: 10px;
Top: 50%;
margin-top:-15px;
Color:RGB(50,50,50);
tekst-schaduw: 0 1px 0 rgb(247,247,247);
hoogte: 28px;
lijn-hoogte: 28px;
opvulling: 0 12px;
tekst-streepje: 0;
rand: 1px solid rgb(200,200,200);
border-radius: 4px;
Background:-webkit-Linear-Gradient(top,RGB(252,252,252),RGB(234,234,234));
Background:-Moz-Linear-Gradient(top,RGB(252,252,252),RGB(234,234,234));
Background:Linear-Gradient(top,RGB(252,252,252),RGB(234,234,234));
vak-schaduw: inzet 0 1px 0 rgb (255,255,255), 0 1px 3px rgb(210,210,210);
-webkit-overgang: alle 300ms gemak;
-moz-overgang: alle 300ms gemak;
overgang: alle 300ms gemak;
}
/ * De hover invloed de elementen * /
.meer-sport li een: Beweeg {}
Color:RGB(0,31,99);
Background:RGB(150,150,150);
}
/ * De aanwijs- en actieve effect van de knoppen * /
.meer-sport .footer een: hover {color:rgb(0,31,99);}
.meer-sport .footer een: actieve {background:-*-linear-gradient(top,rgb(234,234,234),rgb(252,252,252));}
/ * pictogram * /
{
lettertype-familie: 'pictogram-zoeken';
src: url('font/icon-search.eot');
src: url('font/icon-search.eot?#iefix') format('embedded-opentype'),
URL('font/Icon-Search.woff') format('woff'),
URL('font/Icon-Search.ttf') format('truetype'),
URL('font/Icon-Search.svg#icon-search') format('svg');
font-weight: normaal;
tekenstijl: normaal;
}
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------