Einzelnen Beitrag anzeigen
  #7 (permalink)  
Alt 02.11.2016, 11:46
Fanello Fanello ist offline
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.04.2005
Beiträge: 68
Fanello befindet sich auf einem aufstrebenden Ast
Standard

etux, vielen Dank für deine Inputs!

Habe es jetzt dank dir schlussendlich so gelöst:

HTML-Code:
<style>
.slider div {
    background: #203a70;
    padding: 10px;
    position: absolute;
    right: 0;
		visibility: hidden;
    opacity: 0;
    transition: 0.6s;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    -webkit-transition: 0.6s;
    transform: translateX(300px);
    -webkit-transform: translateX(300px);
    -webkit-box-shadow: 0px 10px 8px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 10px 8px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 10px 8px 0px rgba(0, 0, 0, 0.25);
    color: #fff;
}

div .appear {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    -webkit-transform: translateX(0);
}
</style>


<button id="kontakt" class="btn btn-primary icon-contact">Kontakt</button>
	<button id="news" class="btn btn-primary icon-news">News</button>
	<button id="suche" class="btn btn-primary icon-search">Suche</button>


	<div class="slider">
		<div class="kontakt">Kontakt</div>
		<div class="news">News</div>
		<div class="suche">Suche</div>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script>
		$( 'button' ).click( function() {
			$class_value = '.' + $(this).attr('id');
			$( '.slider' ).find( $class_value ).toggleClass( 'appear' );
			$( '.slider' ).find( 'div' ).not( $class_value ).removeClass( 'appear' );
		});
	</script>
Macht nun genau das was ich gerne hätte.
Mit Zitat antworten