none
JQuery Menü Aktif Menü İtem RRS feed

  • Soru

  • Merhabalar;

    Jquery ile bir menü tasarladım hangi sayfada ise o sayfanın butonuna "active" classını eklemek istiyorum. Bunu tıklananın index ni alarak çözdüm ancak sayfayı başka bir sayfaya yönlendirdiğim zaman aktif classım doğal olarak kayboluyor. Bunu çözmek için araştırdım cookie koyarak bunu çözebileceğimi anladım ancak cookiler engelliyse sorun olacağı için bu yolu denemek istemedim. Session kullanmak istiyorum ancak JQuery ile session a nasıl erişebilirim acaba yada daha iyi bir yolu varsa yardımcı olursanız sevinirim.

    13 Haziran 2013 Perşembe 08:36

Yanıtlar

  • Session Olabilir, direk alt sayfa içindeki bir script de işgörür. Ben olsam 2. sini ya

    //masterdeki script
    <script>
       function SetCative(index) {
          //aktif eden kodlar buraya;
       }
    </script>

    //her alt sayfa da bu script olsun sadece indexi değişsin;
    <script>
    $(function(){
    SetActive(1);
    });
    </script>


    e-mail: onay[nokta]yalciner[at]hotmail[nokta]com
    MCC

    13 Haziran 2013 Perşembe 09:25
    Moderatör
  • Menu.js deki kodları ana MasterPage e aktardığım zaman sorunu çözdüm yardımlarınız için çok teşekkürler.
    13 Haziran 2013 Perşembe 12:02

Tüm Yanıtlar

  • Session Olabilir, direk alt sayfa içindeki bir script de işgörür. Ben olsam 2. sini ya

    //masterdeki script
    <script>
       function SetCative(index) {
          //aktif eden kodlar buraya;
       }
    </script>

    //her alt sayfa da bu script olsun sadece indexi değişsin;
    <script>
    $(function(){
    SetActive(1);
    });
    </script>


    e-mail: onay[nokta]yalciner[at]hotmail[nokta]com
    MCC

    13 Haziran 2013 Perşembe 09:25
    Moderatör
  • Cevabınız için teşekkür ederim;

    Projemde iki tane MasterPage var birisi diğerini MasterPage olarak kullanıyor. Ana MasterPage de tüm css ve js dosyalarını ekliyorum. Menu.js dosyasına da üstteki function ekledim ikinci MasterPage den türeyen sayfaya da alttaki function ını yazdım ancak çalışmadı. 

    13 Haziran 2013 Perşembe 10:08
  • Benim gibi harf hatası yapmış olabilirmisin :) func ismini yanlış yazmışım.

    e-mail: onay[nokta]yalciner[at]hotmail[nokta]com
    MCC

    13 Haziran 2013 Perşembe 10:15
    Moderatör
  • Yok ben doğru yazmışım :) ancak Menu.js dosyasında şöyle bir şey yaptım

    $(document).ready(SetCactive(3));
        function SetCactive(indexc) {
            alert(indexc);
            $("section#HeaderContent nav ul li").removeClass("active");
            $("section#HeaderContent nav ul li:eq(" + indexc + ")").addClass("active");
        }
    Bu şekilde yapınca ekran da 3 yazdı ama Başka bir sayfada 

    <script type="text/javascript">
        $(document).ready(SetCactive(5));
    </script>
    Böyle yapınca çalışmadı.

    13 Haziran 2013 Perşembe 10:36
  • Menu.js deki kodları ana MasterPage e aktardığım zaman sorunu çözdüm yardımlarınız için çok teşekkürler.
    13 Haziran 2013 Perşembe 12:02
  • merhaba aynı sorunu şimdi ben yaşıyorum. Menu.js derken hangi dosyadan bahsediyorsunuz. js kütüphaneden farklı bir dosya mı gerekiyor. Anlayamadım kodları tam haliyle paylaşabilirmisiniz lütfen. Ben alttaki kodda eq(x) deki x değerini elle değiştirdiğimde class uygulanıyor ama hangisine tıklarsam ona otomatik atamak istedim ve index aldım x yerine koydum gene olmadı.

      <script type="text/javascript" language="javascript">
            $(document).ready(function () { 
                $("ul#menu-active li").click(function () {
                    var index = $(this).index();
                    var dizilink = $("ul#menu-active a").toArray();
                    $.each(dizilink, function () {
                        $("ul#menu-active li:eq(index) a").addClass("active");
                    });
                });
            });
        </script>


    22 Ağustos 2013 Perşembe 08:59
  • Merhabalar;
    Menu.js diye bir javascript dosyası daha var bu dosyada menünün animation işlemleri vb. işlemleri gerçekleştirdim.

    Menu.js;

    $(function () {
        var index = null;
         var toplamMenuLi = ($("#HeaderContent nav ul li.parent").length);
         $(".MenuButtonContainer").css("width", toplamMenuLi*  115 + "px");
         
        $("section#HeaderContent nav ul li.parent").hover(function () {
            if (index == null) {
                index = $("section#HeaderContent nav ul li.active").index();
            }
            $("section#HeaderContent nav ul li:eq(" + index + ").parent").removeClass("active");
            $(".Button").stop(false, false).animate({ marginLeft: ($(this).index() * 115) + "px" }, 300);
        },
        function () {
            $(".Button").stop(false, false).animate({ marginLeft: (index * 115) + "px" }, 300);
        });
        $("section#HeaderContent nav ul li.parent").click(function () {
            $("section#HeaderContent nav ul li").removeClass("active");
        });
        $(".HeaderContainer ul li").hover(function () {
            $(this).find("ul").stop(true, true).show("fast");
        }, (function () {
            $(this).find("ul").stop(true, true).hide("fast");
        }));
        return false;
    });

    Menünün MasterPage deki kodları;

    <nav>
        <div class="MenuButtonContainer">
            <div class="Button"></div>
         </div>
         <ul>
           <li class="parent"><a href="#">ANA SAYFA</a>
           </li>
           <li class="parent">HİZMETLER<span>&#9660;</span>
               <ul>
                   <li>
                       <section class="NavaContainer"><a href="#">****</a></section>
                    </li> 
                    <li>
                        <section class="NavaContainer"><a href="#">----</a></section>
                    </li>    
                </ul>
            </li>
           <li class="parent">ÜRÜNLER<span>&#9660;</span>
               <ul>
                   <li>
                       <section class="NavaContainer"><a href="#">---</a></section>
                   </li>
                   <li>
                       <section class="NavaContainer"><a href="#">-----</a></section>
                    </li>
                </ul>
            </li>
          </ul>        
       </nav>

    Menu.css;

    .HeaderContainer #HeaderContent ul{  list-style:none;;z-index:253 !important;}
            .HeaderContainer #HeaderContent ul li{line-height:36px; z-index:251; float:left; height:36px;width:105px;margin:0 5px; text-align:center;}
                .HeaderContainer #HeaderContent ul li.parent a{line-height:36px;color: #ffffff;  text-transform:uppercase;height:36px;text-decoration: none;padding-top:10px;padding-bottom:10px;padding-left:5px;padding-right:5px;}
                    .HeaderContainer #HeaderContent ul li.parent span{padding-left:2px;font-size:10px;}
                  .HeaderContainer #HeaderContent ul li.active {padding:0;margin:0 5px; z-index:251;background:url(../Images/Header/Menu-Hover-Middle.png) repeat-x left transparent; width:105px;  float:left; -webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;height:36px;}
            .HeaderContainer #HeaderContent ul li ul{padding-top:5px;padding-bottom:5px; background-color:#22262e;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px; z-index:253 !important; height:auto; top:36px; width:170px;float:none;;display:none;}
                     .HeaderContainer #HeaderContent ul li.parent ul li{ margin:0; padding :1px 0;padding-left:5px; height:auto;width:165px;float:left;line-height:11px; text-align:left;font-size:11.7px;}
                        .HeaderContainer #HeaderContent ul li.parent ul li a{padding-bottom:10px;padding-top:10px;padding-left:5px;  }
                .HeaderContainer ul li.parent ul li:hover>.NavaContainer{background:url(../Images/Header/Menu-Hover-Middle.png) repeat-x left transparent;line-height:13px; border-radius:8px;width:160px;}
             .HeaderContainer #HeaderContent nav{float:right;margin-top:60px;}

    MasterPage e eklenecek js kodu;

    script type="text/javascript">
            function SetCactive(indexc) {
                $("section#HeaderContent nav ul li").removeClass("active");
                $(".Button").stop(false, false).animate({ marginLeft: (indexc * 115) + "px" }, 0);
                $("section#HeaderContent nav ul li:eq(" + indexc + ").parent").addClass("active");
            }
        </script>
    Alt sayfalara eklenecek js kodu;
    <script type="text/javascript">
            $(document).ready(function () {
                SetCactive(2);
            });
        </script>
    Burdaki 2 değerini sayfanın butonunun index ine göre elinizle yazmanız gerekiyor.

    22 Ağustos 2013 Perşembe 09:39
  • Master sayfada css'leri tanımladım ve aynı sayfada script tanımlamaları yaptım. Master'a bağlı olan sayfalarda da dediğiniz gibi fonksiyonu çağırdım ve parametresine elle indisi verdim (tıklananın indisi yani) ama tıkladığım anda class görünüyor tıklamayı bırakınca class kayboluyor. Kodlarımda bir eksiklik var nerede bakabilirmisiniz.

    <script src="js/jquery-1.8.3.js" type="text/javascript"></script>

        <style type="text/css">
            #menu-active
            {
                list-style-type: none;
                margin: 0;
                padding: 0;
                width: auto; /*gelecek olan menüye göre otomatik büyüyecek*/
                min-width: 500px;
                height: 35px;
                background-color: Gray;
            }
            #menu-active li
            {
                display: inline; /*float:left; özelliği ile aynı işi yapar li leri yan yana getirir. Ancak a'da display:block; yapıldığında tekrar float left belirtmeye gerek yoktur.*/
            }
            #menu-active li a
            {
                text-decoration: none;
                font-family: Arial;
                font-size: 20px;
                color: Gray;
                display: block; /*li de display:inline; kullandığımız için kutusal ol dediğmizde float left tanımlamamız gerekir*/
                float: left;
                height: 35px;
                line-height: 35px; /*yazıları dikeyde oprtalama yaptık*/
                text-align: center; /*yazıları yatayda oprtalama yaptık*/
                margin-left: 10px;
                margin-right: 10px;
                padding-left: 10px;
                padding-right: 10px;
                background-color: yellow;
            }
            #menu-active li a:hover
            {
                color: White;
                background-color: GrayText;
            }
            #menu-active li a.active
            {
                color: red;
                background-color: white;
            }

            .sari
            {
                background-color: Aqua;
                color: Gray;
            }
        </style>

         <script type="text/javascript" language="javascript">
          $(document).ready(function SetCactive(indexc) {
              $("ul#menu-active li").removeClass("active");
              $("ul#menu-active li:eq(" + indexc + ").a").addClass("active");
           });

        </script>

     <ul id="menu-active">
                    <li><asp:LinkButton ID="lnkAnaSayfa" runat="server" PostBackUrl="default.aspx" Text="Ana Sayfa"></asp:LinkButton></li>
                     <li><asp:LinkButton ID="lnkSayfa1" runat="server" PostBackUrl="sayfa1.aspx" Text="Sayfa 1"></asp:LinkButton></li>
                     <li><asp:LinkButton ID="lnkSayfa2" runat="server" PostBackUrl="sayfa2.aspx" Text="Sayfa 2"></asp:LinkButton></li>
                     <li><asp:LinkButton ID="lnkSayfa3" runat="server" PostBackUrl="sayfa3.aspx" Text="Sayfa 3"></asp:LinkButton></li>
      </ul>

    alt sayfalara ise alttaki şekilde fonksiyonu çağırdım.

    <%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="Active_Menu210813._default1" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript">
        $(document).ready(function () {
            SetCactive(1);
        });
    </script>
    </asp:Content>

    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    BURASI ANA SAYFA

    </asp:Content>

             
    22 Ağustos 2013 Perşembe 13:29
  • Ben üzerine gelindiğinde class'ın aktif olmasını sağlamıştım siz değiştirdiniz mi bilmiyorum. Kodlama yaparken butona tıklandığında sayfa post olacağı için tıklandıktan sonra active olmasını yapmamıştım.
    22 Ağustos 2013 Perşembe 14:04
  • bende de üzerine gelip tıklayınca class özelliği görünüyor ancak tıklamayı bırakınca özellik kayboluyor. Bunu çözemedim. teşekkürler.
    22 Ağustos 2013 Perşembe 15:22
  • Menu.js dosyası içerisinde ki bu kod bloğu üzerine gelindiği zaman active classının eklenmesini sağlar.
    $("section#HeaderContent nav ul li.parent").hover(function () {
            if (index == null) {
                index = $("section#HeaderContent nav ul li.active").index();
            }
            $("section#HeaderContent nav ul li:eq(" + index + ").parent").removeClass("active");
            $(".Button").stop(false, false).animate({ marginLeft: ($(this).index() * 115) + "px" }, 300);
        },
        function () {
            $(".Button").stop(false, false).animate({ marginLeft: (index * 115) + "px" }, 300);
        });
    23 Ağustos 2013 Cuma 06:08