dropdown footer

[Penske1]

Haalösche

Ich möchte gerne einen footer-Bereich haben der beim hovern nach oben ausfährt. Ansich hab ich das ja auch hinbekommen, bin aber nicht ganz zufrieden.
Wie in der Skizze zu sehen soll der blaue Bereich nach oben hin erscheinen. Der auslösende Punkt soll das grüne sein. Ob das grüne mit ausfährt oder unten stehen bleibt ist egal.

Nun ist es aber so, dass das ganze Teil ausfährt wenn man den Zeiger auf der gleichen horizontalen Ebene wie das grüne Teil hat. Es soll aber nur ausfahren wenn man den Zeiger genau über das grünen schiebt, also nicht per klicken. Die blaue Fläche soll auch zu 100% über das ganze Bild gehen.

Der Code ist bis jetzt so:

:::HTML:::

<div class="footer_out">
    <div class="slide_out">
      </div>
    <div class="footer_in">
        <div class="footer_content">
          </div>
      </div>
  </div>

:::CSS:::

.footer_out {
    height: 30px;
    width: 100%;
    position: fixed;
    bottom: 0; }
.slide_out {
    height: 30px;
    width: 70px;
    float: right;
    margin-right: 100px;
    background: #008000; }
.footer_content{
    width: 980px;
    height: 55px;
    margin-top: 15px; }
.footer_in {
    height: 75px;
    width: 100%;
    background: #0099FF;
    position: fixed;
    bottom: 0px;
    bottom: -70px;
    -webkit-transition-duration: 0.7s;
    -moz-transition-duration: 0.7s;
    -o-transition-duration: 0.7s;
    transition-duration: 0.7s; }
.footer_out:hover .footer_in {
    bottom: 0; }

Das ganze sollte in css erstellt sein da ich von javascript null Plan hab.

Hier ist die Skizze:

http://abload.de/img/skizzed1rli.jpg

Da hoff ich mal dass es verständlich war und dass mir jemand helfen kann.

Danke!

 

[Crysis nerd]

Du möchtest, dass es hochfährt, wenn man slide_out hovert. Du hast aber den "hochfahr" effekt bei footer_out gemacht. Also das ganz unten sagt wenn footer_out gehovert wird, dann hat footer_in die Eigenschaft bottom: 0;
Das müsstest du gegen slide_out austauschen. Allerdings musst du auch noch einen anderen Selektor verwenden, und zwar den indirect neighbour selector ~.
Das sieht dann so aus: Edit this Fiddle - jsFiddle
Dabei gibt es aber noch Probleme, wie du merkst.

Und zwar: Wenn das Grüne teil nicht mit hochfährt, dann wird es verdeckt, man hovert es nicht mehr und es geht leider nicht mehr. Da würde ich das grüne teil einfach mit hochfahren lassen. Sieht auch wohl besser aus später.

Grüße

 

[Penske1]

Ja, so weit so gut. Das grüne kann auch ruhig mitgehen, is schon schöner. Nur wie mach ich das jetzt? Kriegs leider nich zurecht gefummelt

 

[nay]

Ich glaube, dass es mit CSS nicht möglich ist, dass die grüne Box alleine der auslösende Punkt ist. Ich würde den hover-Effekt auf den ganzen footer machen Edit this Fiddle - jsFiddle

Ich weiß nicht genau was es bringen soll, wenn das Grüne mitgeht

 

[Penske1]

@nay
So hatte ich es ja schon. Ich will nur nicht dass es über die ganze Breite auslöst sonder nur an einem bestimmten Platz, dem grünen Feld. Ob der grüne Breich nun mitgeht oder nicht ist ja wie gesagt egal, wäre nur etwas schöner wenn es das täte.

 

[nay]

Schau mal, ich habe eine Lösung gefunden: http://jsfiddle.net/PDNY4/5/

Wieder was gelernt

 

[Penske1]

Oh ja, sauberle schaut gut aus!
Noch ein wenig tuning damit's nach was aussieht und raus damit

Besten Dank für die Mühen
Bis neulich.