2018. 05. 12.Videó | Kép élénkítése Photoshop-ban
2018. 05. 05.ColorCop színlopó program
2018. 04. 30.Coppermine | Kép és fájlméret megadása az indexképek alatt
2018. 04. 24.Coppermine | Thumbnails képek méretének változtatása egyszerűen
2018. 04. 18.Videó | PNG készítése Photoshop-ban
Coppermine Gallery themes

Coppermine Gallery themes
227 napja
553 néző

WordPress themes

WordPress themes
228 napja
177 néző

G-Portál themes

G-Portál themes
228 napja
103 néző

Tumblr themes

Tumblr themes
228 napja
153 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 623 megtekintés

Hozzászólások