Slider s overflow:hidden a vysúvacie menu

Ahojte,

Mám jeden problém s jQuery sliderom. Ide o to, že slider má nastavenú hodnotu overflow hidden aby ostatné obrázky v slideri zostali skryté. Viď http://mig-studio.net/slider/stav2/ keď si myšou prejdete po #item1 a #item2 zistíte, že menu sa schová pod slider takže nie je vidieť.

Preto som skúsil odstrániť overflow:hidden viď http://mig-studio.net/slider/stav1/ . Rozblovacia ponuka sa síce už neschováva pod slider ale obrázky ktoré budú kolovať vidno všetky čo je logické.

Ako to správne nastaviť tak, aby tu ponuku bolo vidieť po rozbalení a zároveň aby boli skryté obrázky za sliderom ? Ďakujem za rady.

Aha, už ten problém vidím, sorry.

nejsem si jistý zda to vůbec půjde...jelikož to máš v Divu, který je vnořený v slideru a ten má nastavenou výšku...ale z dovolením si okopíruju kod a zkusím to.

Liborec - Ďakujem, budem vďačný za akúkoľvek pomoc

Zkoušel sem vše možné, ale nepodařilo se mi to. Jediné řešení je celému Divu nastavit automatickou výšku, ale celé se to pak rozhodí a nejde to rozumně seskládat. Ještě to zkusím přepsat ten kod.

Bol by som veľmi rád ak by sa to dalo vyriešiť, začínam byť z toho mierne frustrovaný.

Já to bych viděl nějak takhle: v CSS zakomentovat transformace + všechny stávající styly pro menu(.sub), po najetí do položky seznamu vložit naklonované menu přímo do body, absolutně ho napozicovat a animovat pomocí JS:

JS:

Kód:

$(function() {
    $('.slider-2 .box-top ul > li').mouseenter(function() {
        var
            $caption = $('.name-box', this),
            offset = $caption.offset();
        $('<div></div>')
            .attr('id', 'slider-menu')
            .css({
                top: offset.top,
                left: offset.left
            })
            .append($('.sub', this).clone())
            .appendTo('body')
            .animate({top: '+=' + $caption.outerHeight()}, 500);                            
    });
    $('body').delegate('#slider-menu', 'mouseleave', function() {
        $(this).remove();
    });
});

CSS:

Kód:

.slider-2 .sub {
    display: none;
}

#slider-menu {
    display: block;
    position: absolute;
    padding: 226px 0 0;
    margin: -226px 0 0;
    width: 215px;
    z-index: 1000;
}

#slider-menu ul {
    margin: 0;
    border: 1px solid #e1e1e1;
    padding: 0;
    list-style: none;
}


#slider-menu a {
    color: #6c6c6c;
    text-decoration: none;
    opacity: 0.9;
}

#slider-menu a:hover {
    color: #000000;
    opacity: 1;
}

#slider-menu a + a li {
    border-top: 1px solid #e1e1e1;
}

#slider-menu li {
    padding: 7px 10px;
    width: 193px;
    line-height: 18px;
    font-size: 15px;
    text-align: left;
    background: #ffffff;
}

#slider-menu li:hover {
    background: #eeeeee;
}

Pár postřehů:

- jQuery 1.5 už je poměrně zastaralá verze
- Místo <ul><a><li></li></a></ul> bych spíš použil <ul><li><a></a></li></ul>
- Mohl bych vědět, co má znamenat ten 83459 znaků dlouhý řádek se styly, vložený za hlavičkou? ;-)

Ďakujem vyskúšam. To HTML som ja nerobil :) a správne má byť <ul><li><a></a></li></ul> to som si ani nevšimol. Kód doupravujem. Ďakujem odskúšam.

Zkusil sem to taky tak a funguje mi to :) Dobrá práce 800XE :)

Dík. I když je to jenom takovej nástřel, bude si to muset asi trochu doladit.