Cikkajánló
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
Mára elkészítettem még kettő darab G-Portálos kinézetet. Valahogy mostanában ehhez van kedvem. Mondjuk nem tudom, hogy Kylie Jenner mennyire lehet nagy szám nálunk, de tetszenek a fotósorozatai, így az
Ha már elsőnek leírtam a rendes táblázat készítését, gondoltam leírok még egy verziót, mikor nem táblázatban, hanem DIV kódba teszitek a tartalmat. Nekem személy szerint egyre megy. Kinézetre úgy
Emma Roberts G-Portálos téma 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
Függőleges menü 09.


Javascript kód
Töltsd le a .js fájlt innen, majd töltsd fel a saját tárhelyedre és a kódban cseréld le az URL címét.
 

<script src="/js/fuggoleges-menu-09.js"></script>


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

<ul class="glossymenu" id="verticalmenu">
    <li>
        <a href="/">Főmenü 1.</a>
    </li>
    <li>
        <a href="/">Főmenü 2.</a>
    </li>
    <li>
        <a href="/">Főmenü 3.</a>
    </li>
    <li>
        <a href="/">Főmenü 4.</a><ul>
            <li>
                <a href="/">Almenü 1.</a>
            </li>
            <li>
                <a href="/">Almenü 2.</a>
            </li>
            <li>
                <a href="/">Almenü 3.</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="/">Főmenü 5.</a>
    </li>
    <li>
        <a href="/">Főmenü 6.</a>
    </li>
    <li>
        <a href="/">Főmenü 7.</a>
        <ul>
            <li>
                <a href="/">Almenü 4.</a>
            </li>
            <li>
                <a href="/">Almenü 5.</a>
            </li>
            <li>
                <a href="/">Almenü 6.</a>
            </li>
        </ul>
    </li>
</ul>


CSS kód
 

<style type="text/css">
.glossymenu, .glossymenu li ul{ /* a menü szélessége, kerete legyen-e, stb. */
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 150px;
    border: 0px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{ /* a menü link színe, stílusa, stb */
    color: #f2f2f2;
    background-color: #612C61;
    display: block;
    width: auto;
    padding: 6px;
    text-decoration: none;
    font-family: Tahoma;
    font-size: 12px;
    font-weight: bold;
    border-bottom: 3px solid #F6F6F6;
}
.glossymenu li a:hover{ /* a menü, ha ráviszed az egeret */
    color: #612C61;
    background-color: #E2D8D8;
}
.glossymenu li ul{
    position: absolute;
    width: 150px;
    left: 0;
    top: 0;
    display: none;
}
.glossymenu li ul li{
    float: left;
}
.glossymenu li ul a{ /* az oldalsó menü link színe */
    width: 150px;
    color: #f2f2f2;
}
.glossymenu .arrowdiv{ /* főmenünél az almenü jelölése */
    position: absolute;
    right: 6px;
    background-color: #000000;
}
/* Holly Hack for IE */
* html .glossymenu li {
    float: left;
    height: 1%;
}
* html .glossymenu li a {
    height: 1%;
}</style>

lindadesign Hozzászólások
1 854 megtekintés

Hozzászólások