"herausklickbares" Popupfenster

[ChiliPictures]

Hallo,

Ich suche schon sehr lange ein script bzw codes für ein Popupfenster das beim Darüberfahren heraus kommt.
Habe es schon mit hover versucht, bin aber auf keinen grünen Zweig gekommen.
Hier ist ein Beispiel: Beispiel

Vielleicht bin ich ja nur zu dumm zu googeln, aber ich habe nichts Passendes gefunden.
Bitte um hilfe, ich bin kurz davor zu verzweifeln :cry:

lg chilipictures

 

[THE_fan]

Keine Ahnung was du meinst.

Was ist denn auf der Seite, was "herausklickbar" ist?!

 

[ChiliPictures]

Entschuldigung, hab vergessen zu sagen, was ich meine. Das Facebook-Login Fenster in der Linken Ecke oben meine ich. ;)
Welches beim darüberfahren herauskommt.

 

[threadi]

Das ist ein simples Flyout, animiert über JavaScript. In diesem Fall ist das wohl eine Individualprogrammierung des Domainhosters. Du kannst sowas durchaus auch selbst basteln, brauchst nur CSS und JavaScript. CSS für die Gestaltung (völlig dir überlassen). jQuery ist eine umfangreiche JavaScript-Bibliothek die dir dabei auch helfen könne (Funktion animate() z.B.).

 

[ChiliPictures]

Danke für deine Hilfe, aber mit JS bin ich noch nicht wirklich vertraut, könntest du mir vielleicht ein Beispiel geben wie so etwas aufgebaut ist?

 

[threadi]

Schau dir mal auf der schon verlinkten Seite die Demo weit unten an:
.animate() – jQuery API

Da siehst Du wie so etwas wirken kann. Und der Code steht auch gleich drüber. Das es aufklappt erfordert dann "nur" eine Anpassung der animate()-Eigenschaften.

 

[ChiliPictures]

Die Anpassung ist mein Problem :/

 

[threadi]

Wie sieht denn dein Entwurf bisher aus? Was willst Du ein-, was ausklappen?

 

[ChiliPictures]

Ich hätte mir gedacht das am Anfang nur FACEBOOK steht und beim darüberfahren der LIKE-BUTTON herausfährt. Ich hatte gestern eine Idee. Einfach ein Dropdownmenü nehmen und verändern. Da kam dann schon das erste Problem - wie kann man das Menü so konstruieren, dass sich das Menü nicht von oben nach unten öffnet sondern von unten nach oben?

 

[threadi]

Die Idee ist gut. Aber ohne Quellcode kann man dir dann auch keine konkreteren Tipps geben.

 

[ChiliPictures]

Nur vorweg, das Dropdown Menü habe ich von http://cssmenumaker.com/; habe es danach an meine Bedürfnisse angepasst - oder es zumindestens versucht ;)

hier der html code:

...
<style media="all" type="text/css">@import "menu/menu_style.css";</style>
<div class="menu">
<ul>
<li><a href="" target="_self" >ChiliPictures auf Facebook</a>
<ul>
<li><a href="" target="_self"></a></li>
</ul>
</li>
</ul>
</div>
...


hier der css code:

.menu{

border:none;

font: 67.5% "Lobster";

font-size:14px;

font-weight:bold;
}


.menu ul{


list-style:none;

}


.menu li{

float:left;

padding:0px;
}


.menu li a{

background:#333333;

color:#cccccc;

display:block;

line-height:35px;

margin:0px;

padding:0px 25px;

text-align:center;

text-decoration:none;
}



.menu li ul{

background:#333333;

display:none;

position:absolute;

width:225px;

z-index:200;

/*top:1em;

/*left:0;*/
}


.menu li:hover ul{

display:block;
}


.menu li li {

display:block;

}


.menu li ul a{

display:block;

height:35px;

font-size:12px;

}

 

[threadi]

Das ist doch schonmal ein guter Anfang. Du müsstest dem <ul> welches aufklappen soll noch eine Id geben, z.B.:

<ul id="aufklappen">

und dem Link der angeklickt werden soll auch:

<a href="#" id="aufklapplink">

Und dann jQuery einbinden und die Animation wie hier definieren. Nur müsstest Du sie für dich anpassen. In dem Fall also:

#('#[COLOR="red"]aufklapplink[/COLOR]').click(function() {
  $('#[COLOR="red"]aufklappen[/COLOR]').animate({
[COLOR="red"]    display: 'block',
    height: '+=10'[/COLOR]
  }, 5000, function() {
    // Animation complete.
  });
});

sollte schon ausreichen. Was ich hier im Vergleich zur Vorlage für dich angepasst habe, habe ich rot markiert.

 

[ChiliPictures]

Muss ich da noch .aufklappen{ den jQuery Code } im css teil deffinieren?

 

[threadi]

Wenn Du genau hinschaust ist das eine ID, keine Klasse. Und nein, diese ID dient nur dazu, dass das jQuery-Script auf das Element zugreifen kann. Du musst nichts im CSS definieren, aber kannst es wenn Du es für nötig erachtest.

 

[ChiliPictures]

Ops Wie peinlich. Ja ok also einfach das Script einfügen und fertig?

 

[threadi]

Im Idealfall ja. Aber manchmal muss man bei der Einbindung von jQuery auch etwas beachten. Alles dazu steht wie schon mehrmals gesagt auf der verlinkten Webseite.

 

[ChiliPictures]

Meinst du die Scriptangaben im Headbereich?

 

[threadi]

Ja, lies dir einfach mal die Seite durch. Es gibt auch viele deutsche Anleitungen für jQuery.