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
2018. 04. 01.Gif készítése Photoshop-ban
Coppermine Gallery themes

Coppermine Gallery themes
78 napja
110 néző

WordPress themes

WordPress themes
79 napja
114 néző

G-Portál themes

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

Tumblr themes

Tumblr themes
79 napja
99 néző

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>


2 092 megtekintés

Hozzászólások