2018. 04. 24.Coppermine | Thumbnails képek méretének változtatása egyszerűen
2018. 04. 18.Videó | PNG készítése Photoshop-ban
2018. 04. 17.Coppermine | Eredeti kép megnyitása új lapon és nem új ablakban
2018. 04. 03.Képről szöveg másolása
2018. 04. 02.Coppermine Galéria költöztetése
Coppermine Gallery themes

Coppermine Gallery themes
81 napja
111 néző

WordPress themes

WordPress themes
82 napja
114 néző

G-Portál themes

G-Portál themes
82 napja
67 néző

Tumblr themes

Tumblr themes
82 napja
101 néző

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


2 315 megtekintés

Hozzászólások