NullAhnung
Aktives Mitglied
und ich fang an mich mit CSS zu beschäftigen...
nun ich habe folgende Situation mit der ich nicht weiter komme:
CODE <!DOCTYPE html>
<html>
<head>
....
<!-- miniMenü links -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
//FMENU
$(document).scroll(function(){
if($(this).scrollTop() > 200)
{
$('#mmenu').css({"left":"0px"});
}
else
{
$('#mmenu').css({"left":"-150px"});
}
});
</script>
</head>
<body>
<!-- ................................. M I N I M E N U ................................. -->
<div id="mmenu">
<div id="balken">
<p class="test">TEEEEEEST</p>
</div>
</div>
</body>
</html>
hierzu habe ich folgende Klassen gebästelt:
CODE #mmenu {
position: fixed;
top: 0px;
z-index: 910;
transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out; /* Firefox 4 */
-webkit-transition: all 0.9s ease-in-out; /* Safari and Chrome */
-o-transition: all 0.9s ease-in-out; /* Opera */
}
#balken { width: 30px; height: 400px; background-color : #00c09e; z-index: 920; position: absolute;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 5px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out; /* Firefox 4 */
-webkit-transition: all 0.4s ease-in-out; /* Safari and Chrome */
-o-transition: all 0.4s ease-in-out; /* Opera */
}
#balken p{
left: -350px; font-size: 24px;
}
#balken:hover p{
background-color: red; cursor: pointer;
left: 50px;
}
das mit dem Einblenden von #balken und so funktioniert wunderbar... nur wird der p-tag "TEEEEEEST" auch sofort mit eingeblendet... eigentlich will ich, dass dieser Teil nach dem hover über #balken erstangezeigt wird.... hab aber kein Plan wie das zu bewerkstelligen ist...
nun ich habe folgende Situation mit der ich nicht weiter komme:
CODE <!DOCTYPE html>
<html>
<head>
....
<!-- miniMenü links -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
//FMENU
$(document).scroll(function(){
if($(this).scrollTop() > 200)
{
$('#mmenu').css({"left":"0px"});
}
else
{
$('#mmenu').css({"left":"-150px"});
}
});
</script>
</head>
<body>
<!-- ................................. M I N I M E N U ................................. -->
<div id="mmenu">
<div id="balken">
<p class="test">TEEEEEEST</p>
</div>
</div>
</body>
</html>
hierzu habe ich folgende Klassen gebästelt:
CODE #mmenu {
position: fixed;
top: 0px;
z-index: 910;
transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out; /* Firefox 4 */
-webkit-transition: all 0.9s ease-in-out; /* Safari and Chrome */
-o-transition: all 0.9s ease-in-out; /* Opera */
}
#balken { width: 30px; height: 400px; background-color : #00c09e; z-index: 920; position: absolute;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 5px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out; /* Firefox 4 */
-webkit-transition: all 0.4s ease-in-out; /* Safari and Chrome */
-o-transition: all 0.4s ease-in-out; /* Opera */
}
#balken p{
left: -350px; font-size: 24px;
}
#balken:hover p{
background-color: red; cursor: pointer;
left: 50px;
}
das mit dem Einblenden von #balken und so funktioniert wunderbar... nur wird der p-tag "TEEEEEEST" auch sofort mit eingeblendet... eigentlich will ich, dass dieser Teil nach dem hover über #balken erstangezeigt wird.... hab aber kein Plan wie das zu bewerkstelligen ist...