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

Pulldown menü erstellen?

C

coolkay

Neues Mitglied
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: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script language="JavaScript" type="text/JavaScript">
<!--
function toggle(name) {
  if(document.getElementById(name).style.display == "none") document.getElementById(name).style.display = "";
  else document.getElementById(name).style.display = "none";
}

//-->
</script>

<title>Unbenanntes Dokument</title>
<link href="style.css" rel="stylesheet" type="text/css" />

</head>


<body>

<table width="900" border="0" cellspacing="0" cellpadding="0" id="conbox">
  <tr>
    <td colspan="2" valign="top" id="head"><?php include('header.php'); ?></td>
  </tr>
  <tr>
    <td valign="top" id="menul"><?php include('menu.php'); ?></td>...


und meine Menü Datei so:
HTML: 
<p>&nbsp;</p>
<p>Home<br>
  <br>
  <a onClick="toggle('bloc1.0');" href="#" style="cursor:hand">Die Chefs</a><br>
  <div id="bloc1.0" style="display:none">
  		<a onClick="toggle('bloc1.1');" href="#" target="_self">-Dr.A</a><br>
  		<div id="bloc1.1" style="display:none">
        --V<br>
  		-- Spezialisierungen<br></div>
  -DrA &amp; Dr.B<br>
  		<a onClick="toggle('bloc1.2');" href="dr_b.php" target="_self">-Dr.B</a><br>
  		<div id="bloc1.2" style="display:none">
  		--Vita<br>
		-- Spezialisierungen<br> </div></div>
<br>

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
 
HTML: 
                <ul class="menu" id="menu">
                    <li><a href="#" class="menulink">Home</a>
                        <ul>

                            <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>

JS code:
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:
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:
dolxck.gif

speicher unter header.gif


Sollte fuktionieren ist ein einfaches Dropdown menu!
 
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?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben