2018. 01. 02.Mi lesz a G-Portállal?
2018. 01. 01.Coppermine | Magyar nyelvű galéria (hungarian.php)
2017. 12. 23.Saját videó beágyazása weboldalba
2017. 12. 18.Coppermine vagy Sosugary galéria?
2017. 12. 18.Coppermine | Egyedi főoldali tartalom
Eliza Taylor

Eliza Taylor
39 napja
7 néző

Little Mix

Little Mix
39 napja
16 néző

Gal Gadot

Gal Gadot
39 napja
7 néző

Girls' Generation

Girls' Generation
39 napja
11 néző

Vízszintes menü 25.

 

Javascript kódja
Innen mentsétek le, majd töltsétek fel a saját tárhelyetekre és a lenti kódban az URL címet cseréljétek le. Az URL címről itt olvashattok bővebben.

 

<script src="/js/vizszintes-menu-25.js"></script>

 

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

 

<div align="center">
<div class="effect-2">
<a href="/"><span data-hover="Index">Főoldal</span></a> <a href="/"><span data-hover="Lucy menü">Lucy Hale</span></a> <a href="/"><span data-hover="Videók">Média</span></a> <a href="/"><span data-hover="Képek">Galéria</span></a> <a href="/"><span data-hover="www">Website</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);
.effect-2 a span { /* menü kinézete */
font-family: 'Roboto Slab', serif;
font-size: 16px;
color: #ffffff;
letter-spacing: 1px;
text-transform: uppercase;
position: relative;
display: inline-block;
padding: 14px 14px;
background: #4E4E4E;
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.csstransforms3d .effect-2 a span::before { /* ez marad, esetleg a background részt módosítsátok. Forgatásnál, AZ AHOGY FORDUL háttér színe */
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
background: #000000;
content: attr(data-hover);
-webkit-transition: background 0.3s;
-moz-transition: background 0.3s;
transition: background 0.3s;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.effect-2 a:hover span,
.effect-2 a:focus span {
-webkit-transform: rotateX(90deg) translateY(-22px);
-moz-transform: rotateX(90deg) translateY(-22px);
transform: rotateX(90deg) translateY(-22px);
}
.csstransforms3d .effect-2 a:hover span::before,
.csstransforms3d .effect-2 a:focus span::before { /* menü kinézete, ha ráviszed az egeret */
text-align: center;
line-height: 49px;
background: #EACDF3;
}
</style>


1 405 megtekintés

Hozzászólások