Jquery Mouse Eylemlerinde CSS Kullanımı

Merhaba.

Jquery ile mouse üzerine gelince css ile genişlik artırma, mouse üzerinden çekilince genişlik eksiltme uygulaması yapmak istiyorum.

Resimde kırmızı ile işaretlediğim yere tıklayınca sidebarım küçülüyor.

Sidebar küçük haldeyken mouse ile üzerine gelince genişliyor üzerinden çekilince daralıyor.
Buraya kadar sıkıntı yok ancak şöyle bir sorunum var.

Tekrar kırmızı ile işaretlediğim yere tıkladıktan sonra mouse olayları halen devam ediyor.
Ben bu mouse olayını sadece sidebar küçük haldeyken çalışır durumda olsun istiyorum.

Ayrıca sidebar küçük haldeyken üzerine gelince absolute olarak açılsın istiyorum. İçerik kısmının sağa tarafa kaymaması için.

$(function(){

    $( "#bars" ).on( "click", function() {
        var sidebarstatus = $("#bars").hasClass("sidebar-hidden");

        if(sidebarstatus == true){
            $( ".main-sidebar" ).css({"min-width":"300px", "width":"300px", "transition":"all 0.4s"});
            $( "#bars" ).removeClass("sidebar-hidden");
        }else{

            $( "body" ).css({"position":"relative"});

            $( ".main-sidebar" ).css({"min-width":"56px", "width":"56px", "transition":"all 0.4s", "position":"absolute", "z-index":"999"});
            $( "#bars" ).addClass("sidebar-hidden");

            $(".main-sidebar").mouseover(function(){
                $(".main-sidebar").css({"min-width":"300px", "width":"300px", "transition":"all 0.4s", "top":"0", "left":"0","z-index":"999"});
            });
            $(".main-sidebar").mouseout(function(){
                $(".main-sidebar").css({"min-width":"56px", "width":"56px", "transition":"all 0.4s",  "top":"0", "left":"0","z-index":"999"});
            });
        }

    });

});

HTML

<!doctype html>
<html lang="tr">
<head>
    <title>PANEL</title>
</head>
<body>

	<aside class="main-sidebar">
		<div class="logo"><i class="fas fa-leaf fa-2x"></i>LOGO</div>
	</aside>

	<main class="main">

		<header class="main-header">
			<i id="bars"></i>
			HEADER
		</header>

		<section class="main-content">CONTENT</section>

		<footer class="main-footer">FOOTER</footer>

	</main>

</body>
</html>

Jquery Mouse Eylemlerinde CSS Kullanımı

Soru hatalı mı? 👎

Cevap yaz

Cevaplar (0)