2017. 11. 27.Coppermine | Egérre felugró ablak tartalmának megváltoztatása
2017. 11. 26.GIF készítése egy pillanat alatt
2017. 11. 26.FREE theme | Dakota Johnson WordPress theme
2017. 11. 25.WordPress alapvető használata
2017. 11. 24.Ingyenes | Eliza Taylor G-Portálos téma
009.png

Eliza Taylor

001.png

Little Mix

040.png

Gal Gadot

008.png

Girls' Generation

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


1 976 megtekintés

Hozzászólások