2016-07-01 20 views
0

Ich habe versucht, ein Dia-Menü mit jQuery zu erstellen. Standardmäßig ist das Menü beim Laden der Seite geöffnet. Wenn ich darauf klicke, wird das Menü von rechts nach links verschoben. aber ich weiß nicht, wie wir es in seine Standardposition bringen können. oder wie wir es hin und her schieben können.Wie erstellt man ein Dia-Menü (von rechts nach links/von links nach rechts) mit jQuery

JS Fiddle: http://jsfiddle.net/pPf7N/307/

HTML

<aside class="asideMenu"> 

i'm the menu click me 

</aside> 

jQuery

$('.asideMenu').on('click', function(){ 
    $(this).css({ 
    'left':'-200px' 
    }); 
    $(this).html('<span class="openMenu"> open menu -> </span>'); 
    $('.openMenu').on('click', function(){ 
    alert('want to push the menu to its default position.'); 
    }); 
}); 

Antwort

1

bereites JS mit dieser ändern kann es hilfreich sein

$('.asideMenu').click(function() { 
 
    var clicks = $(this).data('clicks'); 
 
    if (clicks) { 
 
    $(this).css({ 
 
    \t 'left':'-10px' 
 
    }); 
 
    $(this).html('<span class="openMenu"> open menu -> </span>'); 
 
    } else { 
 
    $('.asideMenu').css({ 
 
    \t 'left':'-200px' 
 
    }); 
 
    } 
 
    $(this).data("clicks", !clicks); 
 
});
aside{ 
 
    height:900px; 
 
    width:300px; 
 
    position:absolute; 
 
    background-color:#ddd; 
 
    margin:0px; 
 
    padding:0px; 
 
    cursor:pointer; 
 
    transition:all 0.5s ease; 
 
    -webkit-transition:all 0.5s ease; 
 
} 
 
.openMenu{ 
 
    color:#000; 
 
    float:right; 
 
    cursor:pointer; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<aside class="asideMenu"> 
 

 
i'm the menu click me 
 
    
 
</aside>

1

Dies ist ein funktionierendes Beispiel, und Sie können es nach Ihren Bedürfnissen anzuwenden erarbeiten. Ich hoffe es hilft.

$('.asideMenu').on('click', function() { 
 
    if ($(this).hasClass('menuClosed')) { 
 
    $(this).removeClass('menuClosed'); 
 
    } else { 
 
    $(this).addClass('menuClosed'); 
 
    } 
 
});
aside { 
 
    height: 900px; 
 
    width: 300px; 
 
    position: absolute; 
 
    background-color: #ddd; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    left: 0px; 
    cursor: pointer; 
 
    transition: all 0.5s ease; 
 
    -webkit-transition: all 0.5s ease; 
 
} 
 
.menuClosed { 
 
    left: -200px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<aside class="asideMenu"> 
 
    i'm the menu click me 
 
</aside>

Verwandte Themen