CSS3 Navigering - ett vackert CSS3 navigering exempel (2 / 3 steg)
Steg 2: CSS koderna för navigeringsfältet CSS3
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
huvuddelen-menyn {
marginal: 50px auto;
bredd: 910px;
}
/ * Topp Logo del * /
.brand {
text-align: center;
bredd: 908px;
höjd: 48px;
line-height: 48px;
Border: 1px solid rgb(25,25,25);
border-radius: 4px 4px 0 0;
position: relative;
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));
Box-shadow: indrag 0 1px 0 rgb (62,63,65), infälld 1px 0 0 rgba(75,75,80,0.4);
}
.brand .btn-gruppen {position: absolute; topp: 0; vänster: 8px;}
.brand Sök-fältet {position: absolute; topp: 0; höger: 20px;}
/ * Logga in och registrera del * /
.brand knappen {
höjd: 27px;
padding: 0 15px;
linje-höjd: 25px;
Border: 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);
Box-shadow: indrag 0 1px 0 rgb (77,77,78), 0 1px 0 rgb(42,43,44);
teckensnitt-vikt: 500.
text-shadow: 1px 1px 0 rgb(15,15,16);
-webkit-övergången: färg 300 MS lätthet;
-moz-övergången: färg 300 MS lätthet;
övergången: färg 300 MS lätthet;
}
.brand .sign-i {border-radius: 14px 0 0 14px; gränsen-rätt: 0 ingen;}
.brand .register {border-radius: 0 14px 14px 0;}
/ * Logotyp * /
.brand .logo {
Color:RGB(255,255,255);
font-size: 25px;
font-weight: djärvare;
text-shadow: 0-1px 0 rgb(111,111,111), 0 - 2px 0 rgb(32,33,34);
}
/ * Rutan * /
.brand ingång {
bredd: 140px;
höjd: 26px;
gränsen: none;
padding: 0 0 0 30px;
border-radius: 13px;
Color:RGB(255,255,255);
Background-Color:RGB(0,0,0);
Box-shadow: 0 1px 0 rgb(43,44,45);
}
.brand Sök-ikonen {
position: absolute;
display: block;
vänster: 10px;
topp: 0;
font-family: ikonen-söka;
font-size: 13px;
Color:RGB(100,100,100);
markör: pekaren;
-webkit-övergången: färg 300 MS lätthet;
-moz-övergången: färg 300 MS lätthet;
övergången: färg 300 MS lätthet;
}
/ * Hovringseffekten * /
.brand knapp: hover {color:rgb(255,255,255);}
.brand knapp: aktiv {background:-*-linear-gradient(top,rgb(15,16,17),rgb(41,42,43) 50%,rgb(67,68,68));}
.brand Sök-ikonen: hover {color:rgb(255,255,255);}
/ * CSS3 navigeringsfältet del * /
.nav {bakgrunden-färg: rgb (175,175,175), border-radius: 0 0 4px 4px;}
.nav > li {float: left;}
/ * Objekt/knapparna i navigeringsfältet * /
.nav > li > en {
display: block;
Color:RGB(50,50,50);
höjd: 38px;
font-size: 13px;
font-weight: bold;
linje-höjd: 38px;
padding: 0 20px;
Border: 1px solid;
marginal-rätt: 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));
text-shadow: 0 1px 0 rgb(229,229,229);
}
.nav > li:first-barn en {border-radius: 0 0 0 4px;}
.nav > senaste-barn {position: släkting;}
.nav > senaste-barn > en {
border-radius: 0 0 4px 0;
padding: 0 32px 0 22px;
marginal: 0;
}
/ * Triangeln markör för droppa-ned menyn * /
.nav > senaste-barn > en: före {
innehåll:'';
position: absolute;
höger: 15px;
topp: 18px;
gränsen: 5px solid insyn.
Border-Color:RGB(50,50,50) transparent transparent transparent;
}
/ * Hover och aktiva effekten av objekt/navigeringsknapparna * /
.nav > li:hover > en {
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) > en: aktiv {background:-*-linear-gradient(top,rgb(203,203,203),rgb(255,255,255));}
.nav > li:hover ul {display: block;}
/ * Den droppa-ned menyn * /
.mer-sport {
position: absolute;
bredd: 478px;
Top: 100%.
höger: 0;
marginal-top: 13px;
stoppning: 46px 0 61px 0;
Border: 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);
Visa: none;
}
/ * Fylla upp utrymmet mellan navigeringsfältet och undermenyn * /
.mer-sport: före {
innehåll:'';
position: absolute;
bredd: 100%.
höjd: 14px;
botten: 100%.
vänster: 0;
}
/ * Skapa triangel markören * /
.mer-sport: efter {
innehåll:'';
position: absolute;
botten: 100%.
höger: 40px;
bredd: 0;
höjd: 0;
gränsen: 5px solid insyn.
färg: transparent transparent rgb(227,227,227) insyn.
}
/ * Använda display: inline-block att förverkliga flera kolumner layouter * /
.mer-sport li {
display: inline-block;
bredd: 153px;
Vertical-align: topp;
}
/ * elementet label stil för varje kolumn * /
.mer-sport li en {
display: block;
marginal-vänster: 13px;
Color:RGB(0,0,0);
font-size: 13px;
font-weight: bold;
stoppning: 2px 5px;
text-shadow: 0 1px 0 rgb(240,240,240);
border-radius: 7px;
}
/ * huvud * /
.mer-sport .header {
display: block;
position: absolute;
topp: 0;
vänster: 0;
marginal-vänster: 18px;
linje-höjd: 48px;
Color:RGB(33,33,33);
text-shadow: 0 1px 0 rgb(246,246,246);
}
/ * fot * /
.mer-sport .footer {
display: block;
position: absolute;
botten: 0;
vänster: 0;
bredd: 100%.
Color:RGB(145,145,145);
text-shadow: 0 1px 0 rgb(242,242,242);
linje-höjd: 49px;
Background-Color:RGB(228,228,228);
border-radius: 0 0 3px 3px;
text-strecksatsen: 20px;
}
/ * Knappen sidfot * /
.mer-sport .footer en {
position: absolute;
höger: 10px;
Top: 50%.
marginal-top:-15px;
Color:RGB(50,50,50);
text-shadow: 0 1px 0 rgb(247,247,247);
höjd: 28px;
linje-höjd: 28px;
padding: 0 12px;
text-strecksatsen: 0;
Border: 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));
Box-shadow: indrag 0 1px 0 rgb (255,255,255), 0 1px 3px rgb(210,210,210);
-webkit-övergången: alla 300 MS lätthet;
-moz-övergången: alla 300 MS lätthet;
övergången: alla 300 MS lätthet;
}
/ * Hover kurspåverkan element * /
.mer-sport li en: hover {
Color:RGB(0,31,99);
Background:RGB(150,150,150);
}
/ * Hover och aktiv effekt av knapparna * /
.mer-sport .footer en: hover {color:rgb(0,31,99);}
.mer-sport .footer en: aktiv {background:-*-linear-gradient(top,rgb(234,234,234),rgb(252,252,252));}
/ * ikon * /
{
font-family: "ikon-Sök";
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: normala;
font-style: normala;
}
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------