2017. 11. 20.Képes project szövegdoboz 32.
2017. 11. 18.Videó beágyazása Coppermine galériába 2.0
2017. 11. 16.Coppermine themes
2017. 11. 16.WordPress themes
2017. 11. 15.Új design a LindaDesign-on
png-keszites.flv

PNG kép készítése

demi-lovato.png

Sosugary Gallery themes

lindadesign-fantasy.png

Coppermine Gallery themes

vanessa-marano.png

G-Portál themes

Vízszintes menü 09.

Fix menü a lap tetején. Figyeld a menüt a weboldal tetején, miközben görgetsz az egérrel lefelé! Az átlátszóságon is lehet változtatni a CSS kódban.


Menü kódja
 

<div id="menu_div">
    <div id="navigationbg">
        <div id="menu">
            <ul id="nav">
                <li>
                    <a href="/">Főoldal</a>
                </li>
                <li>
                    <a href="/">Leírások</a>
                </li>
                <li>
                    <a href="/">Grafika</a>
                </li>
                <li>
                    <a href="/">Kódok</a>
                </li>
                <li>
                    <a href="/">Az oldalról</a>
                </li>
                <li>
                    <a href="/">Belépés</a>
                </li>
            </ul>
        </div>
    </div>
</div>

 

CSS kód
 


<style type="text/css">
#navigationbg { /* Menü sáv háttérszíne */
    background: #612C61;
}
#nav li a, #nav li a:hover { /* Menüben a link színe */
    color: #ffffff;
}
#nav li a:hover  { /* Menüben a link színe, ha ráviszed az egeret */
    background: #DEA8DE;
}
#nav li a, #nav li a:hover { /* árnyék a szövegnek */
    text-shadow: 0 1px 1px #333;
}
#menu_div{ /* menü helyzete */
    padding:0;
    margin:0;
    list-style:none;
    position:absolute;
    top:0px;
    left:0px;
}
#navigationbg { /* menü helyzete */
    position: fixed;
}
#navigationbg, #menu_div { /* menü helyzete */
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}
#menu_div, #navigationbg, #menu, #nav { /* menüsáv magassága */
    height: 55px;
}
#menu_div:hover, #navigationbg:hover, #nav li a:hover, #nav li ul a { /* Menü átlátszósága, ha ráviszed az egeret*/
}
#menu_div, #navigationbg, #nav li a, #menu_div:not(:hover), #navigationbg:not(:hover) {
    opacity: 0.9;/* menü átlátszósága */
}
#menu {
    width: 525px; /* nem a sáv, csak a menük össz. szélessége */
    margin:0 auto;
    padding:0;
    position: relative;
}
#nav { /* betűtípus */
    width:960px;
    margin:0;
    padding:0px;
    position: relative;
    font-family: 'Arial', Helvetica, sans-serif;
}
#nav li a,#nav li {
    float:left;
}
#nav li {
    list-style:none;
    position:relative;
}
#nav li a {
    line-height: 55px; /* menücímek helyzete fentről */
    padding:0 15px;
    text-decoration:none;
    margin:0;
    font-size:12px; /* betű mérete */
    font-weight:bold; /* vastagsága */
    text-transform:uppercase; /* minden nagybetű */
}
--></style>


1 987 megtekintés

Hozzászólások