Cikkajánló
Megrendezésre kerül A tél oldala honlapverseny itt az oldalon. Rengeteg kredit és nyeremény vár rád és az oldaladra :) Összes kredit nyeremény ismét 2.000 kredit. Nem csak a három
A cím kérdésére az őszinte válasz az lenne, hogy akármennyi, mert mindenki saját maga dönti el, hogy mennyi honlapot szeretne szerkeszteni. Ez jogos is, de az én véleményem ettől
Kérésre elkészült végre egy újabb Coppermine Galéria téma. A galéria letölthető és felhasználható forrás megjelölésével. A galériában a Photoshop fejléc is megtalálható, hogy használat előtt, ha kell, akkor átlehessen
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
Függőleges menü 14.


Leírás
A menükódban kell a képek url címét is kicserélni a sajátodra. Kiemeltem, hogy hol. A kép mérete mind a 4 képnél egyforma legyen. Ajánlott képméret: 200x384px
A linkelés úgy történik, hogy a / (per jel) helyére kell beírni a menü linkjét.
Az img src=” után pedig a kép URL címe kerül, amit előzőleg elkészítettél pl. egy képszerkesztő programban és feltölötted a saját tárhelyedre.
 

<li><a href="/"><span>Ismerj meg</span> <span>Rólam</span></a><img src="képed url címe" /></li><li>


Ha azt szeretnéd, hogy a linked új ablakban nyíljon meg, akkor a linkednek így kell kinéznie:
 

"http://weboldaladcíme.hu" target="_blank"


Az idézőjelekre ügyeljetek!


Menü kódja
 

<div id="mh-menu">
    <ul>
        <li>
            <a href="/"><span>Ismerj meg</span> <span>Rólam</span></a><img src="/images/scripts/menustilusok/fuggoleges-menu/fuggoleges-menu-14-01.jpg" />
        </li>
        <li>
            <a href="/"><span>Oldal Információk</span> <span>Az oldal dolgai</span></a><img src="/images/scripts/menustilusok/fuggoleges-menu/fuggoleges-menu-14-02.jpg" />
        </li>
        <li>
            <a href="/"><span>Mindennapjaim</span> <span>Blog</span></a><img src="/images/scripts/menustilusok/fuggoleges-menu/fuggoleges-menu-14-03.jpg" />
        </li>
        <li>
            <a href="/"><span>Beszélgessünk</span> <span>Chat</span></a><img src="/images/scripts/menustilusok/fuggoleges-menu/fuggoleges-menu-14-04.jpg" />
        </li>
    </ul>
</div>


CSS kód
 

<style type="text/css">
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
#mh-menu{
    height: 385px;
    width: 600px;
    position: relative;}
#mh-menu li a{
    display: block;
    width: 280px;
    padding: 0px 10px;
    text-align: right;
    position: relative;
    z-index: 10;
    background: #fff;
    height: 97px;
    border-right: 1px solid #ddd;
    background-color: rgba(255,255,255, 0.8);
}
#mh-menu li:nth-child(1):hover a{
    background-color: rgba(174,54,55,0.9);
}
#mh-menu li:nth-child(2):hover a{
    background-color: rgba(195, 210, 67, 0.9)
}
#mh-menu li:nth-child(3):hover a{
    background-color: rgba(211, 132, 57, 0.9);
}
#mh-menu li:nth-child(4):hover a{
    background-color: rgba(142, 116, 99, 0.9);
}
#mh-menu li a span{
    display:block;
}
#mh-menu li a span:first-child{
    font-weight: 700;
    font-size: 16px;
    color: #ddd;
    padding-top: 10px;
    font-family: 'Alegreya SC', Georgia, serif;
}
#mh-menu li a span:nth-child(2){
    font-weight: 400;
    font-style: italic;
    font-size: 28px;
    font-family: 'Alegreya SC', Georgia, serif;
    -webkit-transition: color 0.2s linear;
    -moz-transition: color 0.2s linear;
    -o-transition: color 0.2s linear;
    -ms-transition: color 0.2s linear;
    transition: color 0.2s linear;
}
#mh-menu li:hover span:nth-child(2){
    color: #fff;
}
#mh-menu li img{
    position: absolute;
    z-index: 1;
    left: 0px;
    top: 0px;
    opacity: 0;
    -webkit-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
    -moz-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
    -o-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
    -ms-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
    transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
}
#mh-menu li:hover img{
    left: 300px;
    opacity: 1;
}
--></style>


Forrás: link

lindadesign Hozzászólások
2 015 megtekintés

Hozzászólások