Neko

• Home
• GRAPHICS
• TUTORIALS
• HTML /JAVASCRIPTS

A menü kódja
Ebben kell a linkjeidet megadnod egyszerű modulodban

<ul class="lavaLampWithImage" id="1">
        <li class="current">
            <a href="//aranymeli.gportal.hu">Home</a></li>
        <li>
            <a href="//aranymeli.gportal.hu/gindex.php?pg=19322271">GRAPHICS</a></li>
        <li>
            <a href="//lindadesign.gportal.hu/" target="_blank">TUTORIALS</a></li>
        <li>
            <a href="//aranymeli.gportal.hu/gindex.php?pg=18012139">HTML /JAVASCRIPTS</a></li>
    </ul>

Javascript kód
Ezt csak illeszd be oldalad forráskód nézetébe

<script type="text/javascript" src="//aranymeli.gportal.hu/portal/aranymeli/upload/285733_1335553741_08392.js"></script><script type="text/javascript" src="//aranymeli.gportal.hu/portal/aranymeli/upload/285733_1335553743_09354.js"></script><script type="text/javascript" src="//aranymeli.gportal.hu/portal/aranymeli/upload/285733_1335553742_00272.js"></script><script type="text/javascript">
        $(function() {
            $("#1, #2, #3").lavaLamp({
                fx: "backout",
                speed: 700,
                click: function(event, menuItem) {
                    return false;
                }
            });
        });
    </script>

CSS kód
Itt van pár dolog, amin lehet változtatni, ha nem tetszik éppen a narancssárga menü például.
Mentsd le a két képemet, aminek az URL-jét kiemeltem és pl. Photoshoppal készíts magadnak másikat.

<style type="text/css">
.lavaLampWithImage {
    position: relative;
    height: 29px;
    width: 421px;
    background: url("//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1335553554_66.gif") no-repeat top;
    padding: 15px;
    margin: 10px 0;
    overflow: hidden }

.lavaLampWithImage li {
    float: left;
    list-style: none }

.lavaLampWithImage li.back {
    background: url("//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1335553544_94.gif") no-repeat right -30px;
    width: 9px;
    height: 30px;
    z-index: 8;
    position: absolute }

.lavaLampWithImage li.back .left {
    background: url("//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1335553544_94.gif") no-repeat top left;
    height: 30px;
    margin-right: 9px }

.lavaLampWithImage li a {
    font: bold 14px arial;
    text-decoration: none;
    color: #fff;
    outline: none;
    text-align: center;
    top: 7px;
    text-transform: uppercase;
    letter-spacing: 0;
    z-index: 10;
    display: block;
    float: left;
    height: 30px;
    position: relative;
    overflow: hidden;
    margin: auto 10px }

.lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
    border: none }
-->
</style>

Ennyi az egész. Csak beilleszted a kódokat oldalad egyszerű moduljának forráskód nézetébe és már használod is :) A leírás egyébként kérésre készült.

Súgó Még nincs hozzászólás.

Frissítés

Csak regisztrált felhasználók írhatnak hozzászólást.