Tagchen ich schon wieder. Es geht wieder ums Menü, aber diesmal ums Untermenü.
Ich wollte in meinen Menü so ein Efekt wie hier auf der Seite einbauen.
http://www.cssplay.co.uk/menus/slide_fly.html
nur mit den Unterschied das mein Menü mit Bildern gemacht ist, und das Untermenü ach mit Bilder sein soll. Es ist bei mir nur ein Untermenü mit zwei Punkten.
quasi so:
[Bild 1]
[Bild 2]
[Bild 3]
[Bild 4]
[Bild 5]
[Bild 5.1]
[Bild 5.2]
[Bild 6]
[Bild 7]
Jetzt zu meiner Frage. Ist das überhaupt zu realisieren?
Ich habe mir den Quellcode schon mal angesehn, aber da gibt es doch das ein oder ander was ich ncoh nicht so versteh. Hab es schon mal probiert in meine Seite einzubasteln, aber irgendwie haut das noch nicht so wirklich hin.
hier mal der bisherige Code für das Menü
html:
CSS:
Ich hab leider noch nicht gepeillt wo bzw. was die Funkion ist die das hoch und runter fahren lässt, und wie es geht das das Untermenü kommt und wieder geht. Also wie du dir sicher denken kannst wenn du das so liest ist das Untermenü einfach mit in der Reihe eingereit.
Wäre lieb wenn mir jemand mal einen kleinen Tip geben könnte wo ich mir in der Beziehung noch paar Tips holen könnte oder vielleicht kann auch hier sich jemand die Mühe machen und mir hier etwas dazu erklären.
***lg Pielo***
Ich wollte in meinen Menü so ein Efekt wie hier auf der Seite einbauen.
http://www.cssplay.co.uk/menus/slide_fly.html
nur mit den Unterschied das mein Menü mit Bildern gemacht ist, und das Untermenü ach mit Bilder sein soll. Es ist bei mir nur ein Untermenü mit zwei Punkten.
quasi so:
[Bild 1]
[Bild 2]
[Bild 3]
[Bild 4]
[Bild 5]
[Bild 5.1]
[Bild 5.2]
[Bild 6]
[Bild 7]
Jetzt zu meiner Frage. Ist das überhaupt zu realisieren?
Ich habe mir den Quellcode schon mal angesehn, aber da gibt es doch das ein oder ander was ich ncoh nicht so versteh. Hab es schon mal probiert in meine Seite einzubasteln, aber irgendwie haut das noch nicht so wirklich hin.
hier mal der bisherige Code für das Menü
html:
Code:
<ul id="nav1">
<li><a href="mich.html" id="mich" target="frame"><span>link 1</span></a></li>
<li><a href="html.html" id="html" target="frame"><span>link 2</span></a></li>
<li><a href="smileys.html" id="smileys" target="frame"><span>link 3</span></a></li>
<li><a href="guides.html" id="guides" target="frame"><span>link 4</span></a></li>
<li class="sub"> <a href="texte.html" id="textehaupt" target="frame"><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
<li><a href="texte.html" id="texte" target="frame"><span></span></a></li>
<li><a href="gehirn.html" id="gehirn" target="frame"><span></span></a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="musik.html" id="musik" target="frame"><span>link 6</span></a></li>
<li><a href="http://..." id="gb" target="frame"><span>link 7</span></a></li>
<li><a href="links.html" id="links" target="frame"><span>link 8</span></a></li>
</ul>CSS:
Code:
/* Link Einstellungen Menü-Button */
ul#nav1 {
margin:0;
padding:0;
list-style:none;
position: absolute;
top: 300px;
left: 30px;
}
ul#nav1 a {
display:block;
width:99px;
height:57px;
margin: 0 0 0 0;
}
/* Bilder für die Links inkl Efekt */
/* link_1 (mich) */
ul#nav1 li a#mich:link, ul#nav1 li a#mich:visited {
background-image:url(Page_neu/mich-off.gif);
}
ul#nav1 li a#mich:hover {
background-image:url(Page_neu/mich-off.gif);
}
ul#nav1 li a#mich:active, ul#nav1 li#current a#mich {
background-image:url(Page_neu/mich-on.gif);
}
/* link_2 (html) */
ul#nav1 li a#html:link, ul#nav1 li a#html:visited {
background-image:url(Page_neu/html-off.gif);
}
ul#nav1 li a#html:hover {
background-image:url(Page_neu/html-off.gif);
}
ul#nav1 li a#html:active, ul#nav1 li#current a#html {
background-image:url(Page_neu/html-on.gif);
}
/* link_3 (Smileys) */
ul#nav1 li a#smileys:link, ul#nav1 li a#smileys:visited {
background-image:url(Page_neu/smileys-off.gif);
}
ul#nav1 li a#smileys:hover {
background-image:url(Page_neu/smileys-off.gif);
}
ul#nav1 li a#smileys:active, ul#nav1 li#current a#smileys {
background-image:url(Page_neu/smileys-on.gif);
}
/* link_4 (guides) */
ul#nav1 li a#guides:link, ul#nav1 li a#guides:visited {
background-image:url(Page_neu/guides-off.gif);
}
ul#nav1 li a#guides:hover {
background-image:url(Page_neu/guides-off.gif);
}
ul#nav1 li a#guides:active, ul#nav1 li#current a#guides {
background-image:url(Page_neu/guides-on.gif);
}
/* link_5 (texte) */
ul#nav1 li a#textehaupt:link, ul#nav1 li a#textehaupt:visited {
background-image:url(Page_neu/texte-off.gif);
}
ul#nav1 li a#textehaupt:hover {
background-image:url(Page_neu/texte-off.gif);
}
ul#nav1 li a#textehaupt:active, ul#nav1 li#current a#textehaupt {
background-image:url(Page_neu/texte-on.gif);
}
/* link_6 (musik) */
ul#nav1 li a#musik:link, ul#nav1 li a#musik:visited {
background-image:url(Page_neu/musik-off.gif);
}
ul#nav1 li a#musik:hover {
background-image:url(Page_neu/musik-off.gif);
}
ul#nav1 li a#musik:active, ul#nav1 li#current a#musik {
background-image:url(Page_neu/musik-on.gif);
}
/* link_7 (book) */
ul#nav1 li a#gb:link, ul#nav1 li a#gb:visited {
background-image:url(Page_neu/book-off.gif);
}
ul#nav1 li a#gb:hover {
background-image:url(Page_neu/book-off.gif);
}
ul#nav1 li a#gb:active, ul#nav1 li#current a#book {
background-image:url(Page_neu/book-on.gif);
}
/* link_8 (links) */
ul#nav1 li a#links:link, ul#nav1 li a#links:visited {
background-image:url(Page_neu/links-off.gif);
}
ul#nav1 li a#links:hover {
background-image:url(Page_neu/links-off.gif);
}
ul#nav1 li a#links:active, ul#nav1 li#current a#links {
background-image:url(Page_neu/links-on.gif);
}
/* Untermenü
Link Texte */
ul#nav1 li a#texte:link, ul#nav1 li a#texte:visited {
background-image:url(Page_neu/storys.gif);
}
ul#nav1 li a#texte:hover {
background-image:url(Page_neu/storys.gif);
}
ul#nav1 li a#texte:active, ul#nav1 li#current a#texte {
background-image:url(Page_neu/storys.gif);
}
/* Link Gehirn */
ul#nav1 li a#gehirn:link, ul#nav1 li a#links:visited {
background-image:url(Page_neu/Gehirn.gif);
}
ul#nav1 li a#gehirn:hover {
background-image:url(Page_neu/Gehirn.gif);
}
ul#nav1 li a#gehirn:active, ul#nav1 li#current a#links {
background-image:url(Page_neu/Gehirn.gif);
}Ich hab leider noch nicht gepeillt wo bzw. was die Funkion ist die das hoch und runter fahren lässt, und wie es geht das das Untermenü kommt und wieder geht. Also wie du dir sicher denken kannst wenn du das so liest ist das Untermenü einfach mit in der Reihe eingereit.
Wäre lieb wenn mir jemand mal einen kleinen Tip geben könnte wo ich mir in der Beziehung noch paar Tips holen könnte oder vielleicht kann auch hier sich jemand die Mühe machen und mir hier etwas dazu erklären.
***lg Pielo***
. aber leider auch alle anderen Links in der Reihe 
