Slide In-Out Menü
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
all
ausfahren
blocken
button
code
effekt
eigenschaft
entsprechenden text
gerade langeweile
glauben
http
list
maus
realisieren
suchen
text
tip
url
vorschau
vorstellung
-
Also irgendwie bin ich doof oder doof,
habe jetzt schon ne weile alles durchforstet was ich so finden konnte (auch über Google ;) )
aber irgendwie bin ich wirklich zu blöd was zu finden.
Ich möchte für meine Webseite ein Menü erstellen welches an der linken Seite ist
aber nicht so das man gleich sieht welcher Menüpunkt es ist, sondern das es beim rauf gehen mit
der Maus sich aufschiebt und halt sich wieder einklappt wenn man mit der Maus runter ist
und sich wenn die Maus auf dem nächsten "Button" kommt sich das nächste aufschiebt.
Der Balken, Button was auch immer soll halt erst z.B. ein kleiner silberner kasten sein, der dann zu einem
Silbernen Balken auf geht mit dem entsprechenden Text der Verlinkung!!
Das würde ich gerne mit CSS erreichen, vielleicht hat jemand von euch ein Tipp wo iich den passenden Code
im WorldWideWeb finde oder mir sogar direkt was zukommen lassen kann :)
Das wäre super....
Beitrag zuletzt geändert: 15.6.2012 12:17:51 von venusgeist -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hallo venusgeist!
Meinst Du soetwas: Vertical Fly-Out Menu?
Solch ein Menü hab ich selber in Verwendung und bin absolut zufrieden damit.
Gruß,
webdesignerin
Beitrag zuletzt geändert: 15.6.2012 12:23:31 von webdesignerin -
Ich glaube, dass ist nicht ganz das, was er sucht.
Such mal nach CSS3 Transitions und beschäftige dich damit. Das dürfte dir den gewünschten Effekt ermöglichen.
Zusammen mit der Pseudo-Eigenschaft Hover und als Block formatierten Links kannst du dann ein solches Menü realisieren. -
So webdesignerin hat mir den tipp gegeben das mal bildlich darzustellen damit man
eher weiß was ich meine also habe ich mal mich *grins* künsterlich betätigt
eingefahrenes Menü --> so soll es aussehe wenn ein menü nicht ausgeklappt ist
Ausgeklapptes Menü -->so soll es aussehe wenn ein menü ausgeklappt ist
natürlich ist alles ziemlich unpropotoniert aber ich denke so kann man es sich besser vorstellen
wie ich das meine.
hoffe nun kann man mir besser helfen :) -
cyclobox schrieb:
Ich glaube, dass ist nicht ganz das, was er sucht.
Such mal nach CSS3 Transitions und beschäftige dich damit. Das dürfte dir den gewünschten Effekt ermöglichen.
Zusammen mit der Pseudo-Eigenschaft Hover und als Block formatierten Links kannst du dann ein solches Menü realisieren.
Wie wärs, wenn du dich mit Vorschlägen beschäftigst, bevor du sie abtust?
Das was ich gepostet habe ist nämlich genau das, was du brauchst. -
cyclobox schrieb:
cyclobox schrieb:
Ich glaube, dass ist nicht ganz das, was er sucht.
Such mal nach CSS3 Transitions und beschäftige dich damit. Das dürfte dir den gewünschten Effekt ermöglichen.
Zusammen mit der Pseudo-Eigenschaft Hover und als Block formatierten Links kannst du dann ein solches Menü realisieren.
Wie wärs, wenn du dich mit Vorschlägen beschäftigst, bevor du sie abtust?
Das was ich gepostet habe ist nämlich genau das, was du brauchst.
Danke Cyclobox das kommt dem schon sehr nahe und arbeite schon mit,
auch wenn es noch nicht ganz so ist was ich suche.
ich hatte auch nur das zweite gepostet damit man mal per bild sehen kann wie ich es mir vorstelle!
würde das gerne halt als button ausfahren lassen daran arbeite ich gerade mit dem code
für CSS3 Transitions. -
Hallo,
hatte gerade langeweile, deshalb habe ich mal fix deine Vorstellung umgesetzt:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" > <head> <title>CSS3 Menü</title> <link href="css-menu.css" hreflang="de" type="text/css" rel="stylesheet" media="screen" lang="de" /> </head> <body> <div class="menu"> <ul> <li> <a href="#" >Test</a><br /> </li> <li> <a href="#" >Ein langer Test</a><br /> </li> <li> <a href="#" >kurz Test</a><br /> </li> </ul> </div> </body> </html>
und die CSS:
body { margin: 0; padding: 0; } a { text-decoration: none; color: #FFFFFF; } .menu { margin: 0; padding: 0; text-align: right; } .menu > ul { list-style: none; margin: 10px 0; padding: 0; } .menu > ul > li { width: 350px; padding: 10px 0 10px 10px; } .menu ul li a { text-decoration: none; color: #FFFFFF; position: relative; left: -340px; background: #333333; text-align: right; padding: 5px 20px 5px 150px; margin-bottom: 10px; -webkit-transition:All 1s ease; -moz-transition:All 1s ease; -o-transition:All 1s ease; } .menu ul li:hover a { text-decoration: none; color: #FFFFFF; left: -200px; }
Wenn der Webspace wieder on ist, lade ich mal die Demo hoch.
MfG Stephan -
Super daswing, das hat mir echt geholfen und ist genau das was ich gesucht habe.
habe es gerade ausprobiert, war schon selber dank cyclobox auf dem weg aber hatte probleme
mit dem text und dem verkleinerten Einzuges.
Vielen dank........ :)
von mir aus kann das hier natürlich geschlossen werde :) -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage