Az oldal menüje
 
Az év weboldala - 2013


Photoshop leírások

Ikonbázis
Galéria
 

 
Címkék

A blogban leggyakrabban használt címkék

 

Neko

Függőleges menük
Függőleges menük : Függöleges menü 20.

Függöleges menü 20.


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/

Még nincs hozzászólás.
Csak regisztrált felhasználók írhatnak hozzászólást.
 

SZEREPJÁTÉK - Csatlakozz közénk és légy részese egy kalandnak - FRPG - Még nem késõ csatlakozni - SZEREPJÁTÉK    *****    VANESSA HUDGENS - A LEGNAPRAKÉSZEBB MAGYAR RAJONGÓI OLDALAD A TEHETSÉGES ÉNEKES-SZÍNÉSZNÕRÕL - VANESSA HUDGENS    *****    Ipari elektronkia szerviz, villamos kéziszerszám javitás, érintésvédelmi felülvizsgálat. elektronika-szerviz.gportal.hu    *****    Minden lány egy kicsikét királylány, minden Fiú kicsit hõs lovag. - FRPG    *****    | WATTPAD | Egy neves gimnázium, egy gazdag, arrogáns srác és egy ösztöndíjas lány nem mindennapi szerelme | WATTPAD |    *****    Szerepjáték &#8211; Csatlakozz közénk, és részese Te is a kalandoknak - FRPG    *****    Egy igazi hõs sem tudja magáról, hogy hõs. - Egy igazi hõs sem tudja magáról, hogy hõs.    *****    Nincs Új Poszt Cousin & Best Friend & A Lot More    *****    az új élet reményében, hajózz    *****    ANELIATH - varázslat és sárkányvér    *****    csillagütközés marcangolta nász    *****    Katt!Katt!Katt! Lépj be a galopp versenyparkunkba! Katt Katt!    *****    Új lovas szerepjáték! * Új lovas szerepjáték! * Lépj be a lovak csodálatos világába! Nevelj te is nálunk!    *****    ANELIATH - varázslat és sárkányvér- Te ki leszel ebben a csavaros Történetben? - SZEREPJÁTÉK    *****    Te ki leszel ebben a csavaros, mágiával, intrikával és hataloméhséggel f&#251;szerezett olvasztótégelyben?    *****    Te ki leszel ebben a csavaros, mágiával, intrikával és hataloméhséggel fûszerezett olvasztótégelyben?    *****    Vörös sziluett az emlékvárban    *****    'cause I am only human    *****    az új élet reményében, hajózz    *****    Új lovas szerepjáték! * Új lovas szerepjáték! * Lépj be a lovak csodálatos világába! Nevelj te is nálunk!