| Autor |
Nachricht |
ginobranco
Threadersteller
Dabei seit: 08.06.2009
Ort: Hamburg
Alter: 40
Geschlecht: 
|
Verfasst Mi 25.04.2012 09:59
Titel Hoover Flyout? |
  |
|
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:
| Code: | | <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"> </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> |
CSS
| Code: | .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
|
|
| |
  |
 |
jense
Dabei seit: 04.11.2003
Ort: Dizzledope
Alter: 47
Geschlecht:
|
Verfasst Mi 25.04.2012 10:05
Titel
|
|
|
|
javascript vergessen?
|
|
| |
|
|
|
Anzeige
|
|
|
ginobranco
Threadersteller
Dabei seit: 08.06.2009
Ort: Hamburg
Alter: 40
Geschlecht:
|
Verfasst Mi 25.04.2012 10:07
Titel
|
|
|
Ja..
Ich habs wie gesagt aus einer Seite.
Ich würde einfach gerne den Effekt nachbauen, aber ich finde dazu nichts im Netz 
|
|
| |
|
|
jense
Dabei seit: 04.11.2003
Ort: Dizzledope
Alter: 47
Geschlecht:
|
Verfasst Mi 25.04.2012 10:18
Titel
|
|
|
| ginobranco hat geschrieben: | Ja..
|
also problem gelöst? 
|
|
| |
|
|
ginobranco
Threadersteller
Dabei seit: 08.06.2009
Ort: Hamburg
Alter: 40
Geschlecht:
|
Verfasst Mi 25.04.2012 10:27
Titel
|
|
|
Nein,
weil ich gar nicht weiss, wo ich da weiter machen soll!?
Gibt es dazu keine Tutorials?
|
|
| |
|
|
snuwie
Dabei seit: 06.07.2010
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 25.04.2012 11:01
Titel
|
|
|
Gib doch mal den Link zur Seite, wie's aussehen soll... 
|
|
| |
|
|
fyll
Dabei seit: 20.09.2003
Ort: Augsburg
Alter: 39
Geschlecht:
|
Verfasst Do 26.04.2012 09:19
Titel Re: Hoover Flyout? |
|
|
| ginobranco hat geschrieben: | | ...Ps. Habe den Code aus einer Seite will es nur umbauen, habe leider zu dem Thema auch keine Tutorials gefunden.. Danke |
Du würdest dir und uns viel Zeit und Stress sparen, wenn du statt rauszukopieren, es einfach mal von Grund auf lernst und dir deine Dinge selbst bauen kannst - ohne kommst du eh keinen Meter weiter.
Dass du nix zui dem Thema gefunden hast, wundert mich auch nciht.
Wenn du nach "hoover" suchst, wirst wohl entweder Infos über Dämme oder Autoren finden 
Im Prinzip is das aber ganz einfach:
Du baust ein Login-Feld, das unsichtbar ist (display:none im CSS) und einen Button.
Du sagst via JavaScript, dass bei hover(<- ein o) auf den Button, das Login-Feld sichtbar wird.
Wenn du danach suchst, findest sicher drölfmillionen Anleitungen zu.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Bei Hoover oder click Div erweitern bzw. Text einblenden
Lücke bei Flyout Menü im ie7... -.-
problem mit flyout menü in ie6
CSS und IE - Problem mit Flyout-Menü
Flyout Menu - Table?
(A CSS only validating flyout menu) Problem im IE
|
|
Willkommen auf dem Portal für Mediengestalter
