Neko

Ez a menü egy szimpla, egyszerű menü. Nincsen benne semmi extra dolog, de szerintem mégis jól mutat.

• Főoldal
• CSS kódok
• Grafika
• Leírások
• Kapcsolat

Menükód

<ul class="horizontal">
    <li>
        <a class="horizonttext" href="http://">Főoldal</a></li>
    <li>
        <a class="horizonttext" href="http://">CSS kódok</a></li>
    <li>
        <a class="horizonttext" href="http://">Grafika</a></li>
    <li>
        <a class="horizonttext" href="http://">Leírások</a></li>
    <li>
        <a class="horizonttext" href="http://">Kapcsolat</a></li>
</ul>

CSS kód

<style type="text/css">
.horizontal {
    border-bottom:1px solid #cccccc; /* alsó aláhúzás */
    border-top:1px solid #cccccc; /* felső aláhúzás */
    list-style:none; /* marad! */
    margin:0; /* marad! */
    padding:0; /* marad! */
    text-align:center; /* marad! */
}
.horizontal li {
    display:inline; /* marad! */
}
.horizontal a {
    display:inline-block; /* marad! */
    padding:10px; /* aláhúzás és a szöveg közti táv */
}
.horizonttext {
    font-size: 20px !important; /* szöveg mérete */
    color: #7C9750 !important; /* betűszín */
}
.horizonttext:hover {
    font-size: 20px; /* szöveg mérete */
    color: #000000 !important; /* betűszín */
    text-decoration: underline;
}
--></style>
 

Forrás: http://csswizardry.com/2011/01/create-a-centred-horizontal-navigation/

Súgó Még nincs hozzászólás.

Frissítés

Csak regisztrált felhasználók írhatnak hozzászólást.