Kodları lütfen aşağıdaki butonları kullanarak renklendirin. Örnek: <php> echo "Selam Dünya"; </php>
Yardım
karakter kaldı

click yapıldığında sabit kalan submenu nasıl yaparım

Merhabalar,

Ben bir navigation menu oluşturdum. Bu navigation menuden li a ile taglenmiş bir item tıklandığında buna ait span içerisindeki submenüleri bulan ve sayfada gösteren bir javascript kodu yazmaya çalışıyorum. Şuan sadece click yapıldığında sayfa değişene kadar yan tarafta submenüyü görüyorum ama sabit bir şekilde menü kalmıyor yan tarafta. Bir kaç yol denedim yapamadım. Son çarem herbir li a yi farklı id lerle tanımlamak ve her birinin span i için ayrı idler ve divler yaratıp aşağıdaki kodu uygulamak olacak:
$(document).ready(function(){

    $("#sys").click(function() {

        $("#subNavApp").hide();
        $("#subNavAcc").hide();
        $("#subNavSys").fadeIn(800);
        $('*').removeClass('active');
        $(this).addClass('active');
    });
});
</javascipt>

Ama ben bunu yapmadan hali hazırdaki kodun neden çalışmadığını öğrenmek istiyorum. Size css, javascript ve html kodlarını gönderiyorum. Bana hatalarımı ve ne yapmam gerektiğini açıklarsanız sevinirim. Dediğim gibi Administration kısmı tıklanınca  Administration sayfası gözüküyor ve yan tarafta da mesela menü de Administration, Teachers, Staff bir anlık gözüküyor ve kayboluyor. Bense Administration sayfasındayken yan tarafta o sayfa ile ilgili submenülerin de durmasını istiyorum. 

Teşekkürler

<javascript>    
$(document).ready(function() {
            $("ul#topnav li a").click(function(){
            $(this).find("li span").show();  
            $(this).find("li span").removeClass('active');  
            });

            });


Bu kısımda html kısmı
<div id="logac"><span><a href="index.php?n=Main.LogIn">Login</a></span></div>
<div id="menu"><ul id="topnav"> <div id="wrapper"> 
<li><a href="index.php?n=Main.HomePage">Main</a></li>
<li><a href="index.php?n=Admin.Admin">Administration</a>
<span><a href="index.php?n=Admin.Teachers">Teachers</a> <a href="index.php?n=Admin.Staff">Staff</a>
</span>
</li>
<li><a href="index.php?n=Education.Education">Education</a>
<span> <a href="index.php?n=Education.Beginner">Beginner Level</a><a href="index.php?n=Education.Intermediate">Intermediate Level</a>
 </span>
</li>
</ul></div> 
</div>

#wrapper{
        border-top:20px  solid #9F173A;
        border-right: 20px solid #9F173A;
        border-left: 20px solid #9F173A;
        border-bottom: 6px solid #9F173A;
        
        opacity:0.75;
        width: 560px;
        height:22px;
        display: block;
        float: left;
        -moz-border-radius-bottomleft: 10% 5%;
        -moz-border-radius-topleft: 150px;
        -moz-border-radius-bottomright: 10% 5%;
        -moz-border-radius-topright: 150px;
}
ul#topnav {
        
	float: left;
	width: 930px;
	list-style: none;
	position: relative; 
	font-size: 1.2em;
        padding-top: 39px;
        padding-left: 200px;
        padding-bottom: 5px
    
        

}
ul#topnav li {
	float: left;     
	margin:0;
        padding: 3px;
  
}
ul#topnav li a {
	padding: 0px 10px;
	display: block;
	color: #FFFFFF;
	text-decoration: none;
        font-weight: bold;
        text-decoration: underline;
             
}
ul#topnav li a:active { background: #C01C46;}
ul#topnav li span{
	float: left;
	padding:  0px;
	position: absolute;
	left: 0px;
	display: none;
        margin-bottom: 50px;
        height: 120px;
	width: 200px;
        margin-top: 5px;
	background:#9F173A;
        font-size: 12px;
	color: #fff;
	/*--Bottom right rounded corner--*/
        bottom-left: 20px;
	-moz-border-radius-bottomleft: 10px 5px;
        -moz-border-radius-bottomright: 10% 5%;
        -moz-border-radius-bottomright: 100px;

}
ul#topnav li a:active span { display: block; }
ul#topnav li span a { display:list-item; margin-top: 20px;}
ul#topnav li span a:active {text-decoration: underline;}
+0
-0
Cevaba KatılıyorumKatılmıyorum
Cevap Yaz Yorum Yaz Arşivime Ekle Takip Et

Cevaplar

  • infochn adlı üyenin fotoğrafı
    9 yıl önce yazılmış
    17 cevap - 2 soru
    Menu.css

    a:focus{outline: 0px;}
    ul#topnav {
    	margin: 0; padding: 0;
    	float: left;
    	width: 970px;
    	list-style: none;
    	position: relative;
    	font-size: 1.2em;
    	background: #000;
    }
    ul#topnav li {
    	float: left;
    	margin: 0; padding: 0;
    	border-right: 1px solid #555; 
    }
    ul#topnav li a {
    	padding: 10px 15px;
    	display: block;
    	color: #f0f0f0;
    	text-decoration: none;
    }
    ul#topnav li:hover { background: #1376c9 url(topnav_active.gif) repeat-x; }
    
    ul#topnav li span {
    	float: left;
    	padding: 15px 0;
    	position: absolute;
    	left: 0; top:35px;
    	display: none; 
    	width: 970px;
    	background: #1376c9;
    	color: #fff;
    }
    ul#topnav li:hover span { display: block; }
    ul#topnav li span a {margin-left:15px; padding:3px; display: inline; } 
    .active1{background:#1376c9;}
    .active2{background:navy;}
    
    


    Main.html

    <html>
    <head>
    <link href="menu.css" rel="stylesheet" type="text/css"> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
    <script type="text/javascript" src="menu.js"></script> 
    </head>
    <body>
    	
    <ul id="topnav">
        <li><a href="/MenuTest/Main.html">Main</a></li>
        <li>
            <a href="javascript:void(0);">Administration</a>
            <span>
                <a href="/MenuTest/Administration.Teahcers.html">Teachers</a> |
                <a href="/MenuTest/Administration.Staff.html">Staff</a>
            </span>
        </li>
        <li><a href="javascript:void(0);">Education</a>
            <span>
                <a href="/MenuTest/Education.Beginner.html">Beginner Level</a> |
                <a href="/MenuTest/Education.Intermediate.html">Intermediate Level</a>
            </span>
        </li>
    </ul>
    
    </body>
    

    </html>

    menu.js
    $(document).ready(function(){
    	
    	$("ul#topnav li").click(function() {
    		AnaMenuGoster($(this));
    	});
    
    	/*Hangi sayfada ise o menüyü otomatik seçecek*/
    	var url = location.pathname + location.search;
    	url = url.toLowerCase();
        
        $("ul#topnav li a").each(function(){
            if($(this).attr('href').toLowerCase() == url)
            {
                if($(this).parent().get(0).tagName.toLowerCase() == 'li')
                {
                    AnaMenuGoster($(this).parent());
                }
                else if($(this).parent().get(0).tagName.toLowerCase() == 'span')
                {
                    $(this).addClass('active2');
                    AnaMenuGoster($(this).parent().parent());
                }
                else
                 return;
            }
        });
        
    
    	
        
    });
    
    function AnaMenuGoster(jqObj)
    {
    
    	MenuleriGizle();
    	jqObj.addClass('active1');
    	jqObj.find("span").show();
    }
    
    function MenuleriGizle()
    {
    	$("ul#topnav li span").hide();
    	$("ul#topnav li").removeClass('active1');
    
    }