Witam, robię stronkę i mam menu wykonane w JavaScripcie. Niestety, odnośnik umieszczony w nim nie działa, dopóki JS jest włączone.

Strona: www.grafa3d.republika.pl/POD/index.html

Kod:

<script type="text/javascript" language="JavaScript"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Payable On Death - centrum informacji</title> <style type="text/css" media="screen"> @import url('main.css'); @import url('menu.css'); </style> <body bgcolor="#320002"> <script src="mootools.js" type="text/javascript" charset="utf-8"></script> <script src="menu.js" type="text/javascript" charset="utf-8"></script> <script src="main.js" type="text/javascript" charset="utf-8"></script> <center> Logo
Strona glowna</li> Biografia</li> Sklad</li> Dyskografia</li> Media</li> Forum</li> </ul>
</center>

 

</body> </html>
menu.js:

```javascript
var SlideList = new Class({
    initialize: function(menu, options) {
        this.setOptions(this.getOptions(), options);

        this.menu = $(menu), this.current = this.menu.getElement('li.current');

        this.menu.getElements('li').each(function(item){
            item.addEvent('mouseover', function(){ this.moveBg(item); }.bind(this));
            item.addEvent('mouseout', function(){ this.moveBg(this.current); }.bind(this));
            item.addEvent('click', function(event){ this.clickItem(event, item); }.bind(this));
        }.bind(this));

        this.back = new Element('li').addClass('background').adopt(new Element('div').addClass('left')).injectInside(this.menu);
        this.back.fx = this.back.effects(this.options);
        if(this.current) this.setCurrent(this.current);
    },

    setCurrent: function(el, effect){
        this.back.setStyles({left: (el.offsetLeft)+'px', width: (el.offsetWidth)+'px'});
        (effect) ? this.back.effect('opacity').set(0).start(1) : this.back.setOpacity(1);
        this.current = el;
    },

    getOptions: function(){
        return {
            transition: Fx.Transitions.sineInOut,
            duration: 500, wait: false,
            onClick: Class.empty
        };
    },

    clickItem: function(event, item) {
        if(!this.current) this.setCurrent(item, true);
        this.current = item;
        this.options.onClick(new Event(event), item);
    },

    moveBg: function(to) {
        if(!this.current) return;
        this.back.fx.custom({
            left: [this.back.offsetLeft, to.offsetLeft],
            width: [this.back.offsetWidth, to.offsetWidth]
        });
    }
});

SlideList.implement(new Options);

main.js:

window.addEvent('domready', function() {
    // orange menu demo
    if($('fancymenu'))
        FancyExample = new SlideList($E('ul', 'fancymenu'), {transition: Fx.Transitions.backOut, duration: 700, onClick: function(ev, item) { ev.stop(); }});

    // profile demo
    if($('pictureselect')) PictureSelect = new SlideList('pictureselect', { onClick: function(ev, item) { ev.stop(); } });

});

menu.css:

#fancymenu {
    position: center;
    height: 29px;
    width: 500px;
    background: url('images/bg.gif') no-repeat top;
    padding: 15px;
    margin: 10px 0;
    overflow: hidden;
}

#pictureselect {
    position: relative;
    height: 1%; /* ie bug */
}

#fancymenu ul, #pictureselect {
    padding: 0;
    margin: 0;
}

/* Don't apply padding here (offsetWidth will differ in IE)
    If you need padding add it to the child anchor */
#fancymenu ul li, #pictureselect li {
    float: left;
    list-style: none;
}

#fancymenu ul li a, #pictureselect li a  {
    text-indent: -500em;
    z-index: 10;
    display: block;
    float: left;
    height: 30px;
    position: relative;
    overflow: hidden;
}

#pictureselect li {
    height: 54px;
}

#pictureselect li a {
    height: 54px;
    width: 62px;
}

#menu_glowna a {
    width: 78px;
    background: url('images/menu_glowna.png') no-repeat center !important;  
}

#menu_biografia a {
    width: 96px;
    background: url('images/menu_biografia.png') no-repeat center !important;   
}

#menu_sklad a {
    width: 66px;
    background: url('images/menu_sklad.png') no-repeat center !important;   
}

#menu_dyskografia a {
    width: 116px;
    background: url('images/menu_dyskografia.png') no-repeat center !important; ;
}

#menu_media a {
    width: 66px;
    background: url('images/menu_media.png') no-repeat center !important;   
}

#menu_forum a {
    width: 71px;
    background: url('images/menu_forum.png') no-repeat center !important;   
}

#nopicture a {
    background: url('images/no_picture.gif') no-repeat center;
}

#picture_1 a {
    background: url('images/picture_1.jpg') no-repeat center;
}

#picture_2 a {
    background: url('images/picture_2.jpg') no-repeat center;
}

#picture_3 a {
    background: url('images/picture_3.jpg') no-repeat center;
}

#picture_4 a {
    background: url('images/picture_4.jpg') no-repeat center;
}

#fancymenu li.background {
    background: url('images/bg_menu_right.png') no-repeat top right !important;
    background: url('images/bg_menu_right.gif') no-repeat top right;
    z-index: 8;
    position: absolute;
    visibility: hidden;
}

#fancymenu .background .left {
    background: url('images/bg_menu.png') no-repeat top left !important;
    background: url('images/bg_menu.gif') no-repeat top left;
    height: 30px;
    margin-right: 9px; /* 7px is the width of the rounded shape */
}

#pictureselect li.background {
    background: url('images/bg_images.gif') no-repeat top;
    z-index: 8;
    position: absolute;
    width: 53px;
    visibility: hidden;
}

#pictureselect li.background .left { display: none; }

#userprofile {
    margin-top: 15px;
    background: url('images/bg_form.gif') no-repeat top left;
    width: 360px;
    height: 180px;
    overflow: hidden;
    padding: 0 15px;
}

#userprofile h4 {
    font: bold 11px Verdana;
    margin-bottom: 10px;
}

#userprofile p.input {
    background: #EBEBEB;
    overflow: hidden;
    padding: 0 !important;
    padding: 2px 0;
}

#userprofile p.input input {
    display: block;
    margin: 3px;
    width: 348px;
    border: 1px solid #D4D4D4;
    padding: 3px 0 3px 4px;
}

#userprofile p.input input:focus {
    border: 1px solid #999;
}

// od czegoś tag `` wymyślili - Cold</b></quote>