kostenloser Webspace werbefrei: lima-city


Slide In-Out Menü

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    venusgeist

    Kostenloser Webspace von venusgeist

    venusgeist hat kostenlosen Webspace.

    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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. webdesignerin

    Kostenloser Webspace von webdesignerin

    webdesignerin hat kostenlosen Webspace.

    Hallo venusgeist! :wave:

    Meinst Du soetwas: Vertical Fly-Out Menu?

    Solch ein Menü hab ich selber in Verwendung und bin absolut zufrieden damit. :smile:


    Gruß,
    webdesignerin :angel:

    Beitrag zuletzt geändert: 15.6.2012 12:23:31 von webdesignerin
  4. 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.
  5. Autor dieses Themas

    venusgeist

    Kostenloser Webspace von venusgeist

    venusgeist hat kostenlosen Webspace.

    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 :)
  6. 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.
  7. Autor dieses Themas

    venusgeist

    Kostenloser Webspace von venusgeist

    venusgeist hat kostenlosen Webspace.

    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.
  8. daswing

    Moderator Kostenloser Webspace von daswing

    daswing hat kostenlosen Webspace.

    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
  9. Autor dieses Themas

    venusgeist

    Kostenloser Webspace von venusgeist

    venusgeist hat kostenlosen Webspace.

    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 :)
  10. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!