• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Ausklappbarer Effekt

Status
Für weitere Antworten geschlossen.
J

Joken

Neues Mitglied
Hi Community,

Ich bin noch ein ziemlicher Neuling in sachen javascript.

Ich wollte wissen wie man einen Auklappeffekt hinbekommt, hab gehört das soll mit jQuery gehen, aber ich habe keine ahnugn wie...
Und wenn JS deaktiviert ist soll man auf eine Andere Seite gelangen.
Also wenn man auf das image geht soll die Liste ausgefahren kommen, ich goffe ihr wisst was ich meine.

Grüsse, Joken
 
Werbung:
Werbung:
Werbung:
Ok, also es klappt schon ganz gut, nur eine Frage habe ich noch

verstaendlich.png
 
So hab rausgefunden das die Zeile für die Breite die hier ist

Code: 
ul#Navigation li:hover ul {
  	position:absolute;
	top:42px;
	left:-20px;
	width:200px;
           display:block;  /* Unternavigation in modernen Browsern einblenden */
  }

Aber der nimmt "width" nicht wahr, er ignoriert es
 
Werbung:
Also das ist der Link zur Seite

Noel's & Erik's Wheelie Page

EDIT:

Also ich will die Großen buttons weiter zusammen rücken, aber wenn ich das mache werden die Felder (die beim hovern eingeblenter werden) auch kleiner
 
Zuletzt bearbeitet:
Korrigiere erstmal die html-Fehler:
HTML: 
<a href="#Beispiel">
<body onload="MM_preloadImages('img/menu/bikes2.png')">
<a href="bikes.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','img/menu/bikes2.png',2)">
<img src="img/menu/bikes1.png" name="Image2" border="0" id="Image2" />
</a>
</a>
In <a> darf weder <body> noch ein weiteres <a> stehen.
 
Werbung:
Ok, done, ich hoffe es passt so, jetzt möchte ich halt noch die Felder mit dem gehoverten breiter haben
 
ul li ul kannst du auch schon vor dem :hover verbreitern:
Code: 
  ul#Navigation li ul {
    margin: 0; padding: 0;
    top:0px; left:0px;
    display: none;
    text-align:center;
[COLOR="DarkRed"][B]    position:absolute;
    top:42px;
    left:-40px;
    width:200px;[/B][/COLOR]
  }
Nur das display brauchst du bei :hover verändern:
Code: 
  ul#Navigation li:hover ul {
     display:block;
 }

Die Breite haben die links noch durch diese css-Angabe:
Code: 
  ul#Navigation a, ul#Navigation span {
    display: block;
[COLOR="#8b0000"][B]    width:120px;[/B][/COLOR]
...
}

Überschreibe sie für ul li ul a:
Code: 
 ul#Navigation li ul a {
width: 100%;
  }
 
Ok, danke! Funktioniert soweit, CSS datei sieht jetzt so aus, habt ihr noch verbesserungsvorschläge?

Code: 
/* MENU */

  div#Rahmen {
  	top:200px;
  	position:absolute;
  	height:42px;
    width: 980px;
    padding: 0px;
    border: 1px solid #606060;
	right:10px;
    background-image:url('../img/menu_bg.png');
	z-index:2;
	-moz-border-radius:10px 10px 10px 10px;
  }
  * html div#Rahmen {  /* Korrektur fuer IE 5.x */
    width: 48.7em;
    width: 47.1em;
  }
  div#Rahmen div {
     clear: left;
  }
  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }

  ul#Navigation li {
    list-style: none;
    float: right;  /* ohne width - nach CSS 2.1 erlaubt */
    position: relative;
    margin: 0; padding: 0;
  }
  * html ul#Navigation li {  /* Korrektur fuer den IE 5 und 6 */
    margin-bottom: -0.4em;
  }
  *:first-child+html ul#Navigation li {  /* Korrektur fuer den IE 7 */
    margin-bottom: -0.1em;
  }

  ul#Navigation li ul {
    margin: 0; padding: 0;
    top:0px; left:0px;
    display: none;  /* Unternavigation ausblenden */
	position:absolute;
    top:42px;
    left:0px;
    width:300px;
  }
  * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */
    left: -1.5em;
    lef\t: -0.4em;
  }
  *:first-child+html ul#Navigation ul {  /* Workaround fuer den IE 7 */
    background-color:silver; padding-bottom:0.4em;
  }
  ul#Navigation li:hover ul {
  	position:absolute;
	top:42px;
	width:180px;
    display:block;  /* Unternavigation in modernen Browsern einblenden */
	background-color:#DDDDDD;
	text-align:center;
  }
  ul#Navigation li ul li {
    float: none;
    display: block;
    margin-bottom: 0px;
  }

  ul#Navigation a, ul#Navigation span {
    display: block;
    width:100%;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding:0px;
    text-decoration: none; font-weight: bold; background-color:#DDDDDD;
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 8.6em;   /* Breite nach altem MS-Boxmodell für IE 5.x */
    w\idth: 6.4em;  /* korrekte Breite fuer den IE 6 im standardkonformen Modus */
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-left-color: black; border-top-color: black;
    color: #000000; text-decoration:underline;
	width:100%;
  }
 
Werbung:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben