Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów
Rozwijane menu PROBLEM :( - Wersja do druku

+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: Rozwijane menu PROBLEM :( (/thread-rozwijane-menu-problem)

Rozwijane menu PROBLEM :( - Deamon - 11-11-2010

Witam!

Jestem tutaj nowy i odrazu proszę Was o poradę.
mianowicie zrobiłem stronkę z rozwijanym menu (jak takie zrobić dowiedziałem się ze strony kurshtml.boo.pl). Wszytsko ładnie elegancko, ale chciałem wstawić
position: absolute;

I nie chce mi to zadziałać Sad Rzekomo treść która miała się rozwijać miała nachodzić na tekst poniżej niestety tak się nie dzieje.
nie wiem dlaczego ten skrypt nie działa.
Mam nadzieję, że mi coś poradzicie
SadSadSad

Tak wygląda kod który mam w indexie



<dl id="menu0">
<dt>Oferta</dt>
<dd>Dzrzwi</dd>
<dd>Schody2</dd>
<dd>Altanki</dd>
<dt>Kontakt</dt>
<dd>Telefon</dd>
<dd>Mail</dd>
<dt>Nagłówek 3</dt>
<dd>Element 3.1</dd>
<dd>Element 3.2</dd>
<dd>Element 3.3</dd>
</dl>




<script type="text/javascript">
// <![CDATA[
new Menu('menu0', 'position: absolute', );
// ]]>
</script>

RE: Rozwijane menu PROBLEM :( - Kartofelek - 12-11-2010

Moze z-index:10000. To co podałeś nie jest kompletne, można sobie zgadywać co się dzieje.

RE: Rozwijane menu PROBLEM :( - Deamon - 12-11-2010

To co mam jeszcze podać Wam abyście mogli pomóc?

RE: Rozwijane menu PROBLEM :( - Kartofelek - 12-11-2010

Style.
+ co to jest to: new Menu('menu0', 'position: absolute', );
Pewnie używasz jakiejś biblioteki. Pokaż ją. Najlepiej po prostu wystaw to na necie, wejdziemy zobaczymy, damy odpowiedź, wszyscy będą happy ;]

RE: Rozwijane menu PROBLEM :( - Deamon - 12-11-2010

menu w java script

Kod:
/**
* @author Sławomir Kokłowski {@link http://www.kurshtml.boo.pl}
* @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!)
*/

function Menu(id, style, otworz, wysun, czasRozwin, czasZwin, czasOtworz, czasZamknij, nieInicjalizuj)
{
    if (typeof czasRozwin == 'undefined' || czasRozwin < 0) czasRozwin = 25;
    if (typeof czasZwin == 'undefined' || czasZwin < 0) czasZwin = 25;
    if (typeof czasOtworz == 'undefined' || czasOtworz < 0) czasOtworz = 250;
    if (typeof czasZamknij == 'undefined' || czasZamknij < 0) czasZamknij = 500;
    
    var url = unescape(window.location.href.replace(/#.*/, ''));
    var base = window.location.protocol + '//' + window.location.host + window.location.pathname.replace(/[^\/\\]+$/, '');
    
    if (style)
    {
        if (style.indexOf(':') < 0)
        {
            document.getElementById(id).className += ' ' + style;
        }
        else
        {
            style = style.replace(/(^\s+|(\s|;)+$)/g, '').split(/\s*;\s*/);
            for (var i = 0; i < style.length; i++)
            {
                style[i] = style[i].split(/\s*:\s*/);
                for (var j = 0, c, property = ''; j < style[i][0].length; j++)
                {
                    c = style[i][0].charAt(j);
                    property += c == '-' ? style[i][0].charAt(++j).toUpperCase() : c.toLowerCase();
                }
                eval('document.getElementById("' + id + '").style.' + property + ' = "' + style[i][1].replace(/"/g, '\\"') + '"');
            }
        }
    }
    
    for (var i = 0; i < document.getElementById(id).getElementsByTagName('dt').length; i++)
    {
        var dd = new Array();
        var el = document.getElementById(id).getElementsByTagName('dt')[i].nextSibling;
        var nodeName;
        while (el && (nodeName = el.nodeName.toLowerCase()) != 'dt')
        {
            if (nodeName == 'dd')
            {
                el._dt = document.getElementById(id).getElementsByTagName('dt')[i];
                if (otworz)
                {
                    el.onmouseover = function()
                    {
                        clearTimeout(this._dt._timoutID);
                        this._dt._displayed = false;
                        this._dt.onclick();
                    }
                    el.onmouseout = function()
                    {
                        clearTimeout(this._dt._timoutID);
                        var dt = this._dt;
                        this._dt._timoutID = setTimeout(function () { dt._displayed = true; dt.onclick(); }, czasZamknij);
                    };
                }
                dd[dd.length] = el;
            }
            el = el.nextSibling;
        }
        document.getElementById(id).getElementsByTagName('dt')[i]._dd = dd;
        document.getElementById(id).getElementsByTagName('dt')[i]._timoutID = null;
        document.getElementById(id).getElementsByTagName('dt')[i]._displayed = false;
        document.getElementById(id).getElementsByTagName('dt')[i].onclick = function()
        {
            clearTimeout(this._timoutID);
            if (!this._displayed)
            {
                var el = this.parentNode.getElementsByTagName('dt')[0];
                while (el)
                {
                    if (el.nodeName.toLowerCase() == 'dt' && el != this)
                    {
                        el._displayed = false;
                        if (czasZwin) display(el, 0);
                        else display(el);
                    }
                    el = el.nextSibling;
                }
            }
            this._displayed = !this._displayed;
            if (this._displayed && czasRozwin || !this._displayed && czasZwin) display(this, 0);
            else display(this);
        };
        if (otworz)
        {
            document.getElementById(id).getElementsByTagName('dt')[i].onmouseover = function()
            {
                clearTimeout(this._timoutID);
                var dt = this;
                this._timoutID = setTimeout(function () { dt._displayed = false; dt.onclick(); }, czasOtworz);
            };
            document.getElementById(id).getElementsByTagName('dt')[i].onmouseout = function()
            {
                clearTimeout(this._timoutID);
                var dt = this;
                this._timoutID = setTimeout(function () { dt._displayed = true; dt.onclick(); }, czasZamknij);
            };
        }
    }
    
    start(document.getElementById(id).getElementsByTagName('dt')[0]);
    
    function start(dt)
    {
        var hide = true;
        var el = dt;
        while (el)
        {
            var nodeName = el.nodeName.toLowerCase();
            if (nodeName == 'dt')
            {
                dt = el;
                hide = true;
            }
            if (nodeName == 'dt' || nodeName == 'dd')
            {
                if (!nieInicjalizuj && el.getElementsByTagName('a').length)
                {
                    var active = el.getElementsByTagName('a')[0].href && unescape(el.getElementsByTagName('a')[0].href.replace(/#.*/, '')) == url;
                    if (!active)
                    {
                        var rel = el.getElementsByTagName('a')[0].getAttribute('rel');
                        if (rel)
                        {
                            var matches = (' ' + rel + ' ').match(/\s+Collection\(([^)]+)\)\s+/i);
                            if (matches)
                            {
                                matches = matches[1].split(',');
                                for (var k = 0, pos = -1; k < matches.length; k++)
                                {
                                    if (matches[k].charAt(0) == '[' && (pos = matches[k].lastIndexOf(']')) > 0)
                                    {
                                        if (new RegExp(unescape(matches[k].substring(1, pos)), matches[k].substring(pos + 1)).test(url))
                                        {
                                            active = true;
                                            break;
                                        }
                                    }
                                    else
                                    {
                                        if (/^[\/\\]/.test(matches[k])) matches[k] = window.location.protocol + '//' + window.location.host + matches[k];
                                        else if (!/^[a-z0-9]+:/i.test(matches[k])) matches[k] = base + matches[k];
                                        if (unescape(matches[k].replace(/[\/\\]\.([\/\\])/g, '$1').replace(/[^\/\\]+[\/\\]\.\.[\/\\]/g, '').replace(/#.*/, '')) == url)
                                        {
                                            active = true;
                                            break;
                                        }
                                    }
                                }
                            }
                        }
                    }
                    if (active)
                    {
                        el.className = (el.className ? el.className + ' ' : '') + 'active';
                        dt._displayed = true;
                        display(dt);
                        hide = false;
                        var el_parentNode = el.parentNode;
                        while (el_parentNode != document.getElementById(id))
                        {
                            if (el_parentNode.nodeName.toLowerCase() == 'dd')
                            {
                                var el_sibling = el_parentNode.previousSibling;
                                while (el_sibling)
                                {
                                    if (el_sibling.nodeName.toLowerCase() == 'dt')
                                    {
                                        el_sibling._displayed = true;
                                        display(el_sibling)
                                        break;
                                    }
                                    el_sibling = el_sibling.previousSibling;
                                }
                            }
                            el_parentNode = el_parentNode.parentNode;
                        }
                    }
                }
            }
            if (nodeName == 'dd')
            {
                if (hide) el.style.display = 'none';
                start(el.getElementsByTagName('dt')[0]);
            }
            el = el.nextSibling;
        }
    }
    
    function display(dt, i)
    {
        if (typeof i == 'undefined')
        {
            for (var i = 0; i < dt._dd.length; i++)
            {
                dt._dd[i].style.display = dt._displayed ? 'block' : 'none';
                if (!dt._displayed)
                {
                    for (var j = 0; j < dt._dd[i].getElementsByTagName('dt').length; j++)
                    {
                        dt._dd[i].getElementsByTagName('dt')[j]._displayed = false;
                        display(dt._dd[i].getElementsByTagName('dt')[j]);
                    }
                }
            }
        }
        else if (i < dt._dd.length)
        {
            var dir = wysun ? !dt._displayed : dt._displayed;
            var n = dir ? i : dt._dd.length - 1 - i;
            dt._dd[n].style.display = dt._displayed ? 'block' : 'none';
            if (!dt._displayed)
            {
                for (var j = 0; j < dt._dd[n].getElementsByTagName('dt').length; j++)
                {
                    dt._dd[n].getElementsByTagName('dt')[j]._displayed = false;
                    display(dt._dd[n].getElementsByTagName('dt')[j]);
                }
            }
            dt._timoutID = setTimeout(function() { display(dt, i + 1); }, dt._displayed ? czasRozwin : czasZwin);
        }
    }
}




style.css

Kod:
html, body {
    background-color: white;
    color: #000;
    margin: 0;
    padding: 0;

}

#top {
    width: 880px;
    margin:0 auto;/*wycentrowanie warstwy*/
    margin-top: 110px;
}

#NAGLOWEK {

    background-color:white;
    height:20px;
}


#LOGO {
    width: 459px;
    height:304px;
    float: left;
    overflow: hidden;
    background:url(images/element_01.gif);

}


#MENU {
    width: 421px;
    height: 304px;
    float: rightt;
    overflow: hidden;
    background:url(images/element_02.gif);


}


#TRESC {
    width: 466px;
    height: 390px;
    float: left;
    overflow: hidden;
    background:url(images/element_03.gif);
    padding-left: 70px;

}




#OBRAZY {
    width: 344px;
    height: 390px;
    float: right;
    overflow: hidden;
    background:url(images/element_04.gif);
    

}



#STOPKA {
    clear: both;
    width: 100%;
    background:url(images/element_05.gif);
}



.menu {
    

}


Teraz dacie rade jakoś dopomóc? Smile

RE: Rozwijane menu PROBLEM :( - Kartofelek - 15-11-2010

Teoretycznie powinno śmigać. Ciężko wyczuć co się dzieje, gdy nie widać rezultatu. Swoją drogą ten skrypt to dziwadło jest. Podobną rzecz napiszesz w 10linijkach z bajerami.

RE: Rozwijane menu PROBLEM :( - ixtab - 15-11-2010

Znajdź sobie plug-in jQuery lub mooTools, który zrobi to za Ciebie... Oszczędzisz sobie mnóstwo czasu