2017. 11. 27.Coppermine | Egérre felugró ablak tartalmának megváltoztatása
2017. 11. 26.GIF készítése egy pillanat alatt
2017. 11. 26.FREE theme | Dakota Johnson WordPress theme
2017. 11. 25.WordPress alapvető használata
2017. 11. 24.Ingyenes | Eliza Taylor G-Portálos téma
009.png

Eliza Taylor

001.png

Little Mix

040.png

Gal Gadot

008.png

Girls' Generation

Vízszintes menü 13.

 

Változtatások
1. Ha több képet szeretnél használni, akkor a menükódban plusz menüt kell létrehozni és a CSS kódban is kell hozzá rendelni a CSS részt.
2. Ha nagyobb vagy kisebb képeket szeretnél használni az is lehetséges.
Ezekre a változtatásokra én már nem fogok írni új kódot. Ha változtatni szeretnél valamin, akkor kísérletezz a kóddal. Az alap kód adott. A többi rajtad áll ;)


Javascript kódok
Az 5 darab .js fájl letölthető itt: első, második, harmadik, negyedik, ötödik
A fájlokat lementés után töltsd fel a saját tárhelyedre és az én kódomban az URL címeket írd át a saját .js fájljaid URL címeivel.
 

<script src="/js/vizszintes-menu-13.js"></script>
<script src="/js/vizszintes-menu-13-01.js"></script>
<script src="/js/vizszintes-menu-13-02.js"></script>
<script src="/js/vizszintes-menu-13-03.js"></script>
<script src="/js/vizszintes-menu-13-04.js"></script>


Menü kódja
A / (per jel) helyére kell írnod a menük hivatkozás címeit.
 

<div class="jimgMenu">
    <ul>
        <li class="landscapes">
            <a href="/">Landscapes</a>
        </li>
        <li class="people">
            <a href="/">People</a>
        </li>
        <li class="nature">
            <a href="/">Nature</a>
        </li>
        <li class="abstract">
            <a href="/">Abstract</a>
        </li>
    </ul>
</div>


CSS kód
Semmi más dolgod nincsen, mint kicserélni  a képek url címét a sajátodra. Előtte persze szerkeszd meg a képedet, írd rá a szöveget és csak aztán töltsd fel a tárhlyedre a képeket. A képek mérete 320 x 200 pixeles legyen! Ennyi. Semmi mást nem kell állítani a CSS-ben, mivel csak képekből áll úgy is.
 

<style type="text/css">
.jimgMenu {
    width: 570px; /* egész doboz szélessége */
    height: 200px;
    overflow: hidden;
    margin: 0px;
}
.jimgMenu ul {
    list-style: none;
    margin: 0px;
    display: block;
    height: 200px;
    width: 1340px;
}
.jimgMenu ul li {
    float: left;
}
.jimgMenu ul li a {
    text-indent: -1000px;
    background:#FFFFFF none repeat scroll 0%;
    border-right: 2px solid #fff;
    cursor:pointer;
    display:block;
    overflow:hidden;
    width:78px;
    height: 200px;
}
.jimgMenu ul li.landscapes a {
    background: url(/images/scripts/menustilusok/vizszintes-menu/vizszintes-menu-13-01.jpg) repeat scroll 0%;
}
.jimgMenu ul li.people a {
    background: url(/images/scripts/menustilusok/vizszintes-menu/vizszintes-menu-13-02.jpg) repeat scroll 0%;
}
.jimgMenu ul li.nature a {
    background: url(/images/scripts/menustilusok/vizszintes-menu/vizszintes-menu-13-03.jpg) repeat scroll 0%;
}
.jimgMenu ul li.abstract a {
    background: url(/images/scripts/menustilusok/vizszintes-menu/vizszintes-menu-13-04.jpg) repeat scroll 0%;
    min-width: 310px;
}
.clear {
    clear: both;
}
--></style>


Forrás: link


2 389 megtekintés

Hozzászólások