Pulldown menü erstellen?

html.de-Forum HTML, XHTML & CSS
1

Hey ich muss in pulldown menü erstellen
habe aber voll die Probleme

ich habe ein Code wo man durchs klicken das Menü erweitern kann aber wenn ich es versinke wird ja die Seite neu geladen und man kann dich nicht weiter durch das Menü arbeiten =(

meine Indey schaut so aus:

[HTML]

Unbenanntes Dokument ...[/HTML]

und meine Menü Datei so:
[HTML]

 

Home

Die Chefs

-Dr.A
--V
-- Spezialisierungen
-DrA & Dr.B
-Dr.B
--Vita
-- Spezialisierungen

[/HTML]

Ich muss aber nun ein Menü haben wo das laden der Seite egal ist.
Brauche dafür ein mausover Effekt oder so ich hoffe mir kann da wer helfen

MFG

<?php include('header.php'); ?>
<?php include('menu.php'); ?>
2

[HTML]


  • Home

                              <li><a href="index.php">Home</a></li>
                        <li><a href="webdesign.php">Webdesign</a></li>
                        <li><a href="tutorials.php">Tutorials</a></li>
                        <li><a href="generators.php">Generators</a></li>
                        <li><a href="kontakt.php">Kontakt</a></li>
                    </ul>
                </li>
                <li><a href="#" class="menulink">Webdesign</a></li>

                <li>
                    <a href="#" class="menulink">Tutorials</a>
                    <ul>
                        <li>
                            <a href="#" class="sub">Der Weg Zur Perfekten Website</a>
                            <ul>

                                <li class="topline"><a href="#">Einführung</a></li>
                                <li><a href="#">Der Anfang</a></li>
                                <li><a href="#">Mehr Folgt...</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" class="sub">Html</a>
                            <ul>

                                <li class="topline"><a href="#">Html Einführung</a></li>
                                <li><a href="#">Html Tutorials</a></li>
                                <li><a href="#">Html Bausteine</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" class="sub">CSS</a>
                            <ul>

                                <li class="topline"><a href="#">CSS Einführung</a></li>
                                <li><a href="#">CSS Tutorials</a></li>
                                <li><a href="#">CSS Bausteine</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" class="sub">Javascript</a>
                            <ul>
                                <li class="topline"><a href="#">Javascript Einführung</a></li>
                                <li><a href="#">Javascript Tutorials</a></li>
                                <li><a href="#">Javascript Bausteine </a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" class="sub">PHP und MySQL</a>
                            <ul>

                                <li class="topline"><a href="#">PHP Einführung</a></li>
                                <li><a href="#">MySQL Einführung</a></li>
                                <li><a href="#">PHP und MySQL Tutorials</a></li>
                                <li><a href="#">PHP und MySQL Bausteine</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>

                <li>
                    <a href="#" class="menulink">Generators</a>
                    <ul>
                        <li><a href="#">Website Generator</a></li>
                        <li><a href="#">Meta-Generator</a></li>
                        <li><a href="#">3D Schrift Generator</a></li>
                        <li><a href="#">Select-List Generator</a></li>

                        <li><a href="#">Balken-menu Generator</a></li>
                        <li><a href="#">Blind-text Generator</a></li>
                        <li><a href="#">Bookmark Generator</a></li>
                        <li><a href="#">ColorScheme Designer</a></li>
                        <li><a href="#">Countdown Generator</a></li>
                        <li><a href="#">Der CSS Hover Generator</a></li>
                        <li><a href="#">Rounded Box Generator</a></li>
                        <li><a href="#">Taschenrechner</a></li>
                    </ul>
                </li>

            </ul>

            <script type="text/javascript">
                var menu=new menu.dd("menu");
                menu.init("menu","menuhover");
            </script>

      [/HTML]

      JS code:

      var menu=function(){
    var t=15,z=50,s=6,a;
    function dd(n){this.n=n; this.h=[]; this.c=[]}
    dd.prototype.init=function(p,c){
        a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
        for(i;i<l;i++){
            var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
            h.onmouseover=new Function(this.n+'.st('+i+',true)');
            h.onmouseout=new Function(this.n+'.st('+i+')');
        }
    }
    dd.prototype.st=function(x,f){
        var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
        clearInterval(c.t); c.style.overflow='hidden';
        if(f){
            p.className+=' '+a;
            if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
            if(c.mh==c.offsetHeight){c.style.overflow='visible'}
            else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
        }else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
    }
    function sl(c,f){
        var h=c.offsetHeight;
        if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
            if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
            clearInterval(c.t); return
        }
        var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
        c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
        c.style.height=h+(d*f)+'px'
    }
    return{dd:dd}
}();

      css code:

      
ul.menu {list-style:none; margin:0; padding:0}
ul.menu * {margin:0; padding:0}
ul.menu a {display:block; color:#000; text-decoration:none}
ul.menu li {position:relative; float:left; margin-right:2px}
ul.menu ul {position:absolute; top:26px; left:0; background:#d1d1d1; display:none; opacity:0; list-style:none}
ul.menu ul li {position:relative; border:1px solid #aaa; border-top:none; width:148px; margin:0}
ul.menu ul li a {display:block; padding:3px 7px 5px; background-color:#d1d1d1}
ul.menu ul li a:hover {background-color:#c5c5c5}
ul.menu ul ul {left:148px; top:-1px}
ul.menu .menulink {border:1px solid #aaa; padding:5px 7px 7px; font-weight:bold; background:url(images/header.gif); width:134px}
ul.menu .menulink:hover, ul.menu .menuhover {background:url(images/header_over.gif)}
ul.menu .sub {background:#d1d1d1 url(images/arrow.gif) 136px 8px no-repeat}
ul.menu .topline {border-top:1px solid #aaa}

      hier die Grafik:
      http://i35.tinypic.com/dolxck.gif
      speicher unter header.gif

      Sollte fuktionieren ist ein einfaches Dropdown menu!

3

wenn meins nicht funktioniert einfach hier downloaden:

Free CSS Drop-Down Menu Framework - LWIS.NET

4

danke
aber das ist doch ein menü wo es nach unten dann auf gehen mit dem mousover oder?

in meinem fall ist das menü auf der linken seite so müsste ich es nach rechts leiten lassen wie geht dies?

5

ok ich merke gerade das hilft mir nicht weil ich noch Untermenüs habe…