Während der Arbeit an einer meiner letzten Websites, habe ich mir ein Script zusammengebastelt, mit dem man mit JS und CSS eine Schublade animieren kann. Der Code ist nicht perfekt, da ich auf der Website etwas komische Umstände hatte und noch keine zeit gefunden habe, den Code für allgemeine Anwendung zu optimieren.
Schritt 1 “Das JS”:
<script type=”text/javascript”>
$(document).ready(function() {
$(“.topMenuAction”).click( function() {
if ($(“#openCloseIdentifier”).is(“:hidden”)) {
$(“#slider”).animate({
marginLeft: “0px”
}, 500 );
$(“#topMenuImage”).html(‘<img src=”./images/open.png” alt=”open” />’);
$(“#openCloseIdentifier”).show();
} else {
$(“#slider”).animate({
marginLeft: “441px”
}, 500 );
$(“#topMenuImage”).html(‘<img src=”./images/close.png” alt=”close” />’);
$(“#openCloseIdentifier”).hide();
}
});
});
</script>
Ich werde den Code nicht groß erklären, sondern nur die Dinge, welche es sich zu ändern lohnt.
(‘<img src=”./images/open.png” alt=”open” />’);
In diesem Snippet wird ein Bild festgelegt, welches beim Öffnen der Schublade angezeigt wird.
(‘<img src=”./images/close.png” alt=”close” />’);
Wie nicht unschwer zu erraten, definiert dieser Code das Bild, welches im offenen zustand und während dem schließen angezeigt wird.
marginLeft: “441px”
Dies legt fest, um wie viele Pixel die Schublade nach in diesem Fall rechts geht. Bei diesem Beispiel sind es also 441px, um welche die Schublade nach rechts herausfährt. (andere Richtungen mit marginTop usw…)
Schritt 2 “Das CSS”:
#slidermesser{
position:absolute;
height:670px;
width: 720px;
left: 217px;
top: -3px;
overflow:hidden;visibility:visible;
}
#sliderWrap {
margin: 0 auto;
width: 300px;
z-index:4;}
#slider {
position: absolute;background-image:url(./images/slider.png);
background-repeat:no-repeat;
background-position: bottom;
width: 333px;
height: 147px;
z-index:10;
left: -195px;
top: 135px;}
#slider img {
border: 1px;
}
#sliderContent {
left: -246px;
top: 358px;position: absolute;
text-align:left;
background-color:#4B4B4B;
color:#333333;
height:127px;
width: 440px;
font-weight:bold;
padding: 10px;}
#openCloseWrap {
position:absolute;
margin: 143px 0 0 120px;
font-size:12px;
font-weight:bold;
left: 69px;
top: 211px;}
Für fortgeschrittene CSSer kein Problem anzupassen, denke ich. Bei Fragen: Die Frage als Komment zu diesem Beitrag schreiben.
Schritt 3 “HTML”:
<div id=”slidermesser”>
<div id=”sliderWrap”>
<div id=”openCloseIdentifier”></div>
<div id=”slider”>
<div id=”sliderContent”>
Beliebiger Content, egal was.
</div>
<div id=”openCloseWrap”>
<a href=”#” id=”topMenuImage”>
<img src=”./images/open.png” >
</a>
</div>
</div>
</div>
</div>
Auch hier, bei Fragen: Kommentar posten.
Das Ergebniss:
Bei mir sah das dann so aus:
Schublade ausgefahren
Ich hoffe ich konnte einigen von euch helfen. Ich selbst war ziemlich lange auf der Suche nach sowas und habe nichts gefunden. Und habe dann in anlehnung an ein anderes Script dieses programmiert. Denn: selbst ist der/die Mann/Frau!
