Cikkajánló
A Bővebben link átnevezését már elég sokan tudjátok, nem is ez a legfontosabb része ennek a cikknek. Inkább arról van szó, ahogy az ikont használjátok előtte. Mindenhol úgy látom,
Ez örök kérdés már évek óta sok mindenkitől, így azt hiszem itt az ideje, hogy külön bejegyzésben is leírjam, hol lehet a Coppermine galériában beállítani azt, hogy a főoldalon
Sziasztok. Nem nagyon szoktam ilyesmit csinálni, de muszáj megosztanom veletek Virág egyik nagyon jó kis szövegdobozát. Tisztára beleszerettem. Nagyon tetszik és tök egyedi :) És még van az oldalán
Sosugary Gallery | Jennifer Lawrence téma Szövegdoboz | Kattintásra kijelöli és másolja a szöveget Ingyenes téma | Coppermine Gallery free theme Prémium téma | Sophie Turner WordPress theme WordPress | Letöltés számláló
Vízszintes menü 16.
Menü 1 Menü 2 Menü 3

 

 

 

Menü kódja

 

<colormenu>
<color><a href="ide jön az URL cím">Menü 1</a></color>
<color><a href="ide jön az URL cím">Menü 2</a></color>
<color><a href="ide jön az URL cím">Menü 3</a></color>
</colormenu>

 

CSS kód
A kódban mindenhol meg van jelölve, amin lehet állítani. A többi beállítást nem kell bántani, csak ha tudod mit csinálsz :)

 

<style type="text/css">
colormenu color { /* ezeket nem kell bántani */
     background:#000000;
     list-style: none;
     height: 30px;
     float:left;
     padding:10px 5px;
}
colormenu color a { /* a menü kinézete */
    font-family: Arial, Helvetica, sans-serif !important; /* betűtípus a menüben */
    width: 180px; /* menü szélessége */
    height: 30px; /* nem kell bántani */
    line-height: 33px; /* nem kell bántani */
    border-bottom: 4px solid #636393;
    padding:0px;
    color: #ffffff !important; /* betű színe */
    font-size:15px !important; /* betá mérete */
    font-weight:normal !important;
    text-align:center;
    text-decoration: none;
    display: block;
    -webkit-transition: .2s all linear;
    -moz-transition: .2s all linear;
    -o-transition: .2s all linear;
    transition: .2s all linear;
}
color:nth-child(1) a { /* az első menü alatt a csík színe */
    border-color: #636393;
}
color:nth-child(2) a { /* a második menü alatt a csík színe */
    border-color: #B5222D;
}
color:nth-child(3) a { /* a harmadik menü alatt a csík színe */
    border-color: #D4953C;
}
color:nth-child(1) a:hover {
    border-bottom: 30px solid #636393; /* első menü alatt a feljövő háttér */
    height: 1px;
    color: #ffffff; /* betű színe */
}
color:nth-child(2) a:hover { /* 2. menü alatt a feljövő háttér */
    border-bottom: 35px solid #B5222D;
    height: 1px;
    color: #ffffff; /* betű színe */
}
color:nth-child(3) a:hover {
    border-bottom: 35px solid #D4953C; /*3. menü alatt a feljövő háttér */
    height: 1px;
    color: #ffffff; /* betű színe */
}
-->    </style>

 


Forrás: link

lindadesign Hozzászólások
1 932 megtekintés

Hozzászólások