Cikkajánló
Kellemes estét :) Hoztam mára még négyféle project szövegdobozt és kilencféle elit csere ikon effektet. Az összes egyesével megnézhető az alábbi linkeken. Válogassatok :) A project dobozoknál és az
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,
Sokszor feltűnik, hogy használtok egyedi betűtípust a Google Fonts-ról. Ami egy nagyon jó szokás igazából és mindenkinek ezt is ajánlom használatra, mert kevesebb macera és biztos, hogy mindenhol a
Blog téma G-Portálra 2.0 Betűtípus kereső Teszteld oldalad felbontását URL cím értelmezése CSS kód beillesztése G-Portálra
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>

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

Hozzászólások