Neko

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: 200x384 px

A linkelés úgy történik, hogy a # helyére kell beírni a képed URL címét így:

  <li>
            <a href="//aranymeli.gportal.hu"><span>Ismerj meg</span> <span>Rólam</span></a><img src="//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1383394485_73.jpg" /></li>
        <li>

Kép URL címének a leírása itt:
//aranymeli.gportal.hu/gindex.php?pg=35318106&nid=6287820

Ha azt szeretnéd, hogy a linked új ablakban nyíljon meg, akkor a linkednek így kell kinéznie:
"//aranymeli.gportal.hu" target="_blank"
Az idézőjelekre ügyeljetek!

Menükód

<div id="mh-menu">
    <ul>
        <li>
            <a href="#"><span>Ismerj meg</span> <span>Rólam</span></a><img src="//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1383394485_73.jpg" /></li>
        <li>
            <a href="#"><span>Oldal Információk</span> <span>Az oldal dolgai</span></a><img src="//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1383394477_52.jpg" /></li>
        <li>
            <a href="#"><span>Mindennapjaim</span> <span>Blog</span></a><img src="//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1383394470_55.jpg" /></li>
        <li>
            <a href="#"><span>Beszélgessünk</span> <span>Chat</span></a><img src="//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1383394462_84.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: http://tympanus.net/codrops/2012/01/22/how-to-spice-up-your-menu-with-css3/

Súgó Még nincs hozzászólás.

Frissítés

Csak regisztrált felhasználók írhatnak hozzászólást.