Flyout Button

[ginobranco]

Hallo zusammen,

erstmal Danke für`s reinschauen! :)
Ich wollte mir für meine Seite einen "Flyout Button" basteln.
Das heisst, der Button soll beim Hoovern mir mein Loginfeld anzeigen.
Das ganze sieht im Moment so aus:

<link href="testing.css" rel="stylesheet" type="text/css"> </head> 		<!-- ### header ### --> 		<div class="h" id="header"> 		  <div class="h-bar"> 			  <ul class="h-bar-nav"> 			    <li><div class="b-drop-body b-drop-r"> 				  <ul class="b-drop-nav"><li> 				</div><!-- b-drop-body -->                 </li><li id="login-flyout" class="loading"><a href="template.htm"><span class="b-drop-h"><span id="login-status">Loading</span><span class="i-arr-down-or ico"></span><span class="b-drop-h-l"></span><span class="b-drop-h-r"></span></span></a>	<div class="b-drop-body b-drop-l"><div id="ajaxlogin">&nbsp;</div><div class="b-drop-body-l"><div></div></div><div class="b-drop-body-b"><div></div></div><div class="b-drop-body-r"><div></div></div></div></li></ul>

Und hier die CSS:

.h-bar {
    font-size: 11px;
    position: absolute;
    right: 0;
    top: 52px;
    z-index: 200;
}
.h-bar-nav {
    position: absolute;
    right: 369px;
    text-align: right;
    top: -2px;
    width: 82px;
}
.h-bar-nav > li {
    background: url("http://typo3.org/typo3conf/ext/t3org_template/css/../i/h-bar-nav-li.png") no-repeat scroll 0 9px transparent;
    display: inline-block;
    float: left;
    margin-left: -1px;
    position: relative;
    text-align: left;
}

.b-drop-h {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: transparent transparent -moz-use-text-color;
    border-style: solid solid none;
    border-width: 1px 1px 0;
    display: block;
    height: 27px;
    padding: 4px 11px 0;
    position: relative;
    z-index: 11;
}
.b-drop-h-l, .b-drop-h-r {
    background: url("http://typo3.org/typo3conf/ext/t3org_template/css/../i/b-drop-h.png") no-repeat scroll 0 0 transparent;
    display: none;
    height: 31px;
    position: absolute;
    top: -1px;
    width: 2px;
    z-index: 11;
}
.b-drop-h-l {
    left: -3px;
}
.b-drop-h-r {
    background-position: -2px 0;
    right: -3px;
}

.h-bar-nav li.hover .b-drop-h, .h-bar-nav > li:hover .b-drop-h, .h-bar-nav > li:hover .b-drop-h {
    background: none repeat scroll 0 0 #FFFFFF;
    border-color: #E3E3E3;
}
.h-bar-nav > li:hover .b-drop-body, .h-bar-nav > li:hover .b-drop-h-r, .h-bar-nav > li:hover .b-drop-h-l {
    display: block;
}

.b-drop-body {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #E3E3E3;
    color: #8C8C8C;
    display: none;
    font-size: 11px;
    left: 0;
    min-width: 150px;
    padding: 13px 10px;
    position: absolute;
    top: 31px;
    z-index: 10;
}
.b-drop-body-l, .b-drop-body-l div, .b-drop-body-b, .b-drop-body-b div, .b-drop-body-r, .b-drop-body-r div {
    position: absolute;
}


.b-drop-body-r div {
    background: url("http://typo3.org/typo3conf/ext/t3org_template/css/../i/b-drop-body-b.png") no-repeat scroll -8px 0 transparent;
    height: 3px;
    right: 0;
    top: -3px;
    width: 2px;
}
.b-drop-body-b {
    background: url("http://typo3.org/typo3conf/ext/t3org_template/css/../i/b-drop-body-br.png") repeat scroll 0 0 transparent;
    bottom: -5px;
    height: 4px;
    left: 1px;
    right: 1px;
}


#ajaxlogin {
    background: url("http://typo3.org/typo3conf/ext/t3org_template/css/../i/ajax-preloader.gif") no-repeat scroll center center transparent;
    padding-top: 6px;
}

Irgendwie lädt die Seite aber nicht..

Würde mich über jede Hilfe sehr freuen!
Ps. Habe den Code aus einer Seite will es nur umbauen, habe leider zu dem Thema auch keine Tutorials gefunden.. :( Danke

 

[threadi]

Was heißt "Die Seite lädt nicht"? Sieht Du nur eine weiße Seite?

 

[ginobranco]

Hallo Threadi,
ja, also soll heißen wenn ich über den Button gehe versucht es zwar die neue Seite bzw. das Loginfeld zu laden, aber es lädt nur...
Ich schaff es nicht mein Loginfeld dort zu integrieren.
Vllt. gibt es zu dieser Funktion Tutorials? Aber ich habe nichts gefunden, weil ich nicht mal weiss wie der Effekt heisst.
Vielen Dank

 

[threadi]

Da in deinem HTML-Code kein Loginformular zu sehen ist, vermute ich, dass dir hier ein AJAX-Request fehlt. Die Seite von der Du das kopiert hast, wird so etwas garantiert irgendwo eingebaut haben. Wenn Du es genau so haben willst, musst Du folglich auch die JavaScript-Codes dazu kopieren.

Btw. würde es sich eher lohnen das selbst fertig zu bauen. AJAX braucht man dafür nicht zwingend.