Cikkajánló
Felkerültek a galériába a Portfólió albuma a nagyjából pár hónapja rendelt kinézetek. Nem tudom, hogy mi történt főleg most ősszel, mert magamhoz képest elég sok rendelés összegyűlt. Főleg azért
A napokban kaptam egy kérdést arról, hogyan lehet azt megcsinálni, hogy a középső modul görgethető lehessen. De csak a középső modul. Bevallom én eddig ennek nem néztem semmilyen formában
Több kérdést kaptam már arról, hogy meg lehet-e csinálni azt, hogy a címkék vesszővel vagy ponttal vagy valamivel el legyenek választva egymástól. Ehhez a G-Portáltól kértem segítséget, mert ha
Instagram doboz weboldalra Project dobozok és egy Elit csere effekt Elit csere effekt szöveggel és képekkel Lana Del Rey és Kylie Jenner G-Portálos témák Maisie Williams G-Portálos téma
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 097 megtekintés

Hozzászólások