• 26-11-2012, 18:04:44
    #1
    Kurumsal Üye | R10 19.YIL
    Beyler örnekte verdiğim gibi header kısmında menu var üzerine geldiğimizde sayfamız güzel bir şekilde açılıyor ve mause açılan alandan ayırmadığımız sürece öyle kalıyor. (ie'de sorunlu)

    Demo

    Ancak ben bu açılan alanın ardına slider eklediğimde o bahsettiğim özellikleri kaybediyor.

    Demo

    Yapmak istediğim slider olduğundada hem slider arkaplanda kalsın menü üzerine açılsın.
    Hemde açılan alanda mause kaldığı sürece menü kapanmasın.
    Saatlerdir uğraşıyorum beceremedim


    Kodlar


    HTML


    Alıntı
    <ul class="genel">
    <li>
    <a href="#">MENÜ</a>
    <ul class="menu">
    <div class="icerik">Açilan Menü Içerigi</div>
    </ul>
    </li>

    </ul>

    <div id="sayfa">

    <div id="dinamikalan">
    <ul class="dinamikalan">
    <li><a href="#"><img src="slider/1.png" alt=""/></a></li>
    <li><a href="#"><img src="slider/2.png" alt=""/></a></li>
    <li><a href="#"><img src="slider/3.png" alt=""/></a></li>
    <li><a href="#"><img src="slider/4.png" alt=""/></a></li>
    </ul>

    <div class="sayfa_buton">
    <a href="#" id="onceki"><img src="images/ok2.png" alt="" /></a>
    <a href="#" id="sonraki"><img src="images/ok1.png" alt="" /></a>
    </div>

    </div>


    CSS


    Alıntı
    body {font: 13px Helvetica; margin: auto; background-position: 50% 0; background-image:url('../images/background.jpg'); background-repeat:no-repeat;}
    ul, li, ol, table, tr, td, h1, h2, h3, h4, h5, h6, p, form, input, select, textarea, button, img {padding: 0; margin: 0; border: 0; list-style: none}
    a {text-decoration: none}
    *:focus {outline: 0}
    .clear {clear: both}

    ul.genel {width: 1024px; height: 50px; margin: 0 auto; background-color : rgba(0, 0, 0, 0.5);}

    ul.genel li {
    display: block;
    margin: 0 auto;

    }

    ul.genel li a{
    padding: 22px 0 0 126px;
    color: #fff;
    display: block;
    text-decoration: none;
    width: 32px;
    font-weight:bold;

    }


    ul.genel li span.subhover {background-position: center bottom; cursor: pointer;}

    ul.genel li ul.menu {
    list-style: none;
    position: absolute;
    left: 0; top: 50px;
    background-color : rgba(0, 0, 0, 0.8);
    margin: 0; padding: 0;
    display: none;
    float: left;
    width: 100%;
    -moz-border-radius-bottomleft: 2px;
    -moz-border-radius-bottomright: 2px;
    -webkit-border-bottom-left-radius: 2px;
    -webkit-border-bottom-right-radius: 2px;
    }

    .icerik
    {width: 1024px; height: 377px;
    background-color : rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    }

    #sayfa {width: 1024px; height: 377px; position: relative; margin: 0 auto}

    #dinamikalan {width: 1024px ;height: 377px; overflow: hidden;}
    #dinamikalan ul li {width: 860px; height: 377px; overflow: hidden; margin: 0 auto}
    .sayfa_buton {position: absolute; bottom: 120px; right: 0;}
    .sayfa_buton a#onceki {margin-right: 954px }
    .sayfa_buton a#sonraki {margin-right: 0 }

    JQUERY



    Alıntı
    /////////////////////////// Üst Hızlı Menü Alanı ///////////////////////////

    $(function(){

    $("ul.menu").parent().append("<a></a>");

    $("ul.genel li a").hover(function() {

    $(this).parent().find("ul.menu").slideDown('slow') .show();

    $(this).parent().hover(function() {
    }, function(){
    $(this).parent().find("ul.menu").slideUp('slow');
    });

    }).hover(function() {
    $(this).addClass("subhover");
    }, function(){
    $(this).removeClass("subhover");
    });

    });

    /////////////////////////// Slider Alanı ///////////////////////////


    $(function(){
    $(".sayfa a:first").addClass("aktif");
    $("ul.dinamikalan li").hide();
    $("ul.dinamikalan li:first").show();
    var toplamLi = $("ul.dinamikalan li").length;
    var deger = 0;

    $(".sayfa a").click(function(){
    var indis = $(this).index();
    $("ul.dinamikalan li").hide();
    $("ul.dinamikalan li:eq("+indis+")").fadeIn(500);
    $(".dinamikalan a").removeClass("aktif");
    $(this).addClass("aktif");
    return false
    });

    $("a#sonraki").click(function(){
    $(".sayfa a").removeClass("aktif");
    $("ul.dinamikalan li").hide();
    if (deger < toplamLi - 1){
    deger++;
    $("ul.dinamikalan li:eq("+deger+")").fadeIn(500);

    $(".sayfa a:eq("+deger+")").addClass("aktif");
    }else {
    deger = 0;
    $("ul.dinamikalan li:first").fadeIn(500);
    $(".sayfa a:first").addClass("aktif");
    }
    return false
    });

    $("a#onceki").click(function(){
    $(".sayfa a").removeClass("aktif");
    $("ul.dinamikalan li").hide();
    if (deger > 0){
    deger--;
    $("ul.dinamikalan li:eq("+deger+")").fadeIn(500);

    $(".sayfa a:eq("+deger+")").addClass("aktif");
    }else {
    deger = toplamLi - 1;
    $("ul.dinamikalan li:last").fadeIn(500);
    $(".sayfa a:last").addClass("aktif");
    }
    return false
    });

    $dondur = function(){
    $(".sayfa a").removeClass("aktif");
    $("ul.dinamikalan li").hide();
    if(deger < toplamLi - 1){
    deger++;
    $("ul.dinamikalan li:eq("+deger+")").fadeIn(500);
    $(".sayfa a:eq("+deger+")").addClass("aktif");
    }else {
    deger = 0;
    $("ul.dinamikalan li:first").fadeIn(500);
    $(".sayfa a:first").addClass("aktif");
    }
    return false
    }

    var dinamikalanDondur = setInterval('$dondur()',5000);
    $("#dinamikalan").hover(function(){
    clearInterval(dinamikalanDondur);
    }, function(){
    dinamikalanDondur = setInterval('$dondur()',5000);
    });

    });
  • 26-11-2012, 18:07:15
    #2
    açılır menüye z-index uygulayabilirsin.
  • 26-11-2012, 18:12:21
    #3
    Kurumsal Üye | R10 19.YIL
    z-index uyguladım sağ sol butonlar çalışmıyor buseferde
  • 26-11-2012, 18:12:38
    #4
    genel class ına position: relative; z-index: 1; özelliklerini ekleyip deneyin.
  • 26-11-2012, 18:22:18
    #5
    Kurumsal Üye | R10 19.YIL
    frdtrkc adlı üyeden alıntı: mesajı görüntüle
    genel class ına position: relative; z-index: 1; özelliklerini ekleyip deneyin.
    İstediğim oldu ama bu seferde açılan tam menüde genişliği etkiledi
    Bakın
  • 26-11-2012, 18:40:13
    #6
    Kodlama mantığın hatalı 1024px genişlik vermişsin ayrıca o ul'yi bir div içine alırsan daha iyi olur.