Cikkajánló
Igazából tanácsot szeretnék adni a G-Portálosoknak, (akik bármilyen rajongói vagy másféle oldalt vezetnek) arról, hogy milyen modulba írják a napi/heti/stb frissítéseket. Sok helyen látom, hogy vannak olyan szerkesztők, akik
Sziasztok :) Akadt némi időm így készítettem egy teljesen egyszerű G-Portálos kinézetet, amit lehet blogra vagy rajongói oldalra is simán használni. Semmi extra szolgáltatás nincsen a témában. Egyszerű szürke
Az ingyenesen letölthető Sosugary galéria mellett, ha egyedi saját Sosugary galéria kinézetet szeretnétek, akkor idén (az-az december 31-ig) ingyen lehet megrendelni tőlem. Vagy is, aki ezután rendeli meg, attól
Blog téma G-Portálra 2.0 Betűtípus kereső Teszteld oldalad felbontását URL cím értelmezése CSS kód beillesztése G-Portálra
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 776 megtekintés

Hozzászólások