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ü 26.

 

 
Menü kódja
A perjel helyére kell írni a link címeket.

 

<div id="modern-menu">
<div>
<a class="box menu" href="/"> <span>Menü 1</span></a> <a class="box menu" href="/"> <span>Menü 2</span></a> <a class="box menu" href="/"> <span>Menü 3</span></a> <a class="box menu" href="/"> <span>Menü 4</span></a>
</div>
</div>

 

CSS kód

 

<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab&subset=latin,latin-ext);
#modern-menu{
text-align: center;
}
.box{ /* menü kinézete */
font-family: 'Roboto Slab', serif !important;
font-size: 16px !important;
color: #ffffff !important;
background: #4e4e4e !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
text-decoration: none;
padding: 12px;
margin: 0 10px;
}
.box:hover{ /* menü kinézete, ha ráviszed az egeret */
background: #F3CDE6 !important;
text-decoration: none !important;
}
.menu {
position: relative;
}
.menu:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
top: 0;
right: 0;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.2s;
-webkit-transition-property: top, left, right, bottom;
-moz-transition-property: top, left, right, bottom;
-ms-transition-property: top, left, right, bottom;
-o-transition-property: top, left, right, bottom;
transition-property: top, left, right, bottom;
}
.menu:hover:before, .menu:focus:before{
-webkit-transition-delay: .1s;
-moz-transition-delay: .1s;
-ms-transition-delay: .1s;
-o-transition-delay: .1s;
transition-delay: .1s;
border: #EA95B3 solid 6px; /* körvonal kinézete - lehet pöttyös, szaggatott, stb.. is.*/
bottom: -10px;
left: -10px;
top: -10px;
right: -10px;
}
</style>


1 390 megtekintés

Hozzászólások