drop down menue


 
Neues Thema eröffnen   Neue Antwort erstellen    Webmaster Forum -> Hilfe für Webmaster -> Javascript
Vorheriges Thema anzeigen :: Nächstes Thema anzeigen  
Autor Nachricht
Mad Dog
Mitglied
Beitragdrop down menue Antworten mit Zitat
hallo .. ich hab da ein kleines problemchen ..

ich habe mir das drop down menue aus dem archiv geladen und würde es gern in meine hp einbinden ..

jetzt das problem ..

solange ich das menue alleine im browser teste ohne das es in die website eingebunden ist funktioniert es wunderbar .. sobald ich es jetzt aber einbinde erscheint es zwar und die hauptlinks erscheinen .. nur das gesammte untermenue geht nichtmehr auf ..

woran kann das liegen?

die css liegt auf dem server .. die js-datei ebenso .. alleine geht ja auch ..

die site css hat andere begriffe und auch kein js code ..

ich wollte das menue auch per php einbinden erscheinen auch nur die hauptlinks, das untermenue geht nicht auf ..

was mache ich falsch?


hier mal der code



Code:
<!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">
<head>
   
   <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
   <link rel="stylesheet" href="images/style.css" type="text/css" />
    <link rel="stylesheet" type="text/css" href="http://www.deep-cleaning.de/site/menue.css">
    <SCRIPT type="text/javascript" src="http://www.deep-cleaning.de/site/menue.js"></SCRIPT>
   <title>Deep Cleaning</title>
</head>
<body>
   <div class="content">
      <div class="header">
      <img align="right" src="/images/bannerrechts.GIF">
   </div>
      
      <div class="bar">
         
      </div>
      
      <div class="menue"> 


<div id="mainMenu">
      <ul id="menuList">
              <li class="menubar">
                   <a accessKey="1" class="starter" href="#">Startseite</a></li>
                   

              <li class="menubar">
                   | <a accessKey="2" class="starter" href="#">Unsere Leistungen</a></li>
                   <ul id="menu3_1" class="menu">

               <li><a title="Matratzenreinigung" href="#" >Matratzenreinigung</a></li>
               <ul id="menu3_1" class="menu">
               <li><a title="Warum Matratzentiefenreinigung?" href="#" >Warum Matratzentiefenreinigung?</a></li>
               <li><a title="Vorteile Matratzenreinigung" href="#">Vorteile der Matratzenreinigung</a></li>
               
               <li><a title="Preise" href="#" >Preise</a></li>
               
               </ul>
               <li><a title="Teppichreinigung" href="#" >Teppichreinigung</a></li>
                  <ul id="menu3_1" class="menu">
                    <li><a title="Warum Teppichtiefenreinigung?" href="#" >Warum Teppichtiefenreinigung?</a></li>
               <li><a title="Vorteile Teppichreinigung" href="#">Vorteile der Teppichreinigung</a></li>

                    <li><a title="Preise" href="#" >Preise</a></li>
                  </ul>
                  
      <li><a title="Polsterreinigung" href="#" >Polsterreinigung</a>
          <ul id="menu3_1" class="menu">
      <li><a title="Warum Polstertiefenreinigung?" href="#" >Warum Polstertiefenreinigung?</a></li>
                    <li><a title="Vorteile Polsterreinigung" href="#">Vorteile der Polsterreinigung</a></li>

                    <li><a title="Preise" href="#" >Preise</a></li>
               </ul>
                   </ul>
              
              <li class="menubar">
                   | <a accessKey="3" class="starter" href="#">Hotel / Gewerbe</a></li>

                   <ul id="menu3" class="menu">
               <li><a title="Hotel" href="#" >Hotel</a>
               <li><a title="Krankenh&auml;user / Altenheime" href="#" >Krankenh&auml;user / Altenheime</a></li>
               <li><a title="Gewerbe" href="#" >Gewerbe</a></li>
               
               </li>
            </ul>
              | <li class="menubar">
                   <a accessKey="4" class="starter" href="#">Referenzen</a></li>
                   <ul id="menu4" class="menu">
               
               <li><a title="Unsere Kunden &uuml;ber uns" href="#" >Unsere Kunden &uuml;ber uns</a></li>
               <li><a title="Referenzobjekte" href="#" >Referenzobjekte</a>
               </li>
                  
               

                   </ul>
              | <li class="menubar">
                   <a accessKey="5" class="starter" href="#">Aktuelles</a></li>
                   <ul id="menu5" class="menu">
               <li><a title="Aktionen" href="#" >Aktionen</a></li>
               <li><a title="Geschenkgutscheine" href="#" >Geschenkgutscheine</a></li>
               <li><a title="Jobangebote" href="#" >Jobangebote</a>
               </li>
                   </ul>
          <li class="menubar">
                   | <a accessKey="6" class="starter" href="#">Kontakt</a></li>
                   <ul id="menu6" class="menu">
               <li><a title="Option 1" href="#" >Anfrage Privat</a></li>
               <li><a title="Option 2" href="#" >Anfrage Gewerbe</a></li>

               <li><a title="Impressum/Disclaimer" href="#" >Impressum/Disclaimer</a></li>
               <li><a title="Option 4" href="#" >AGB</a></li>
                   </ul>
              </li>
            </ul>
   </div>

      
     </div>
      
      <div class="left">
         <h3>Willkommen</h3>
         <div class="left_box">


das ist jetzt nur der teil wo der code eingebunden ist ..
den js habe ich nicht angerührt und bei der css hab ich nur die farben geändert ..

ich hoffe mir wird jemand helfen ..


gruss
18 Aug 2009 21:02
Benutzer-Profile anzeigen Private Nachricht senden
axinio Internet Marketing
Werner
Homepage-Total.de
Moderator
Beitrag Antworten mit Zitat
Das Menü habe ich auch auf meiner Website:

Habe ein geändertes Javascript eingebaut (es zeigt keine Fehler mehr an!)

PHP-Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
 <!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">
<head>
   
   <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
   <link rel="stylesheet" href="images/style.css" type="text/css" />
    <link rel="stylesheet" type="text/css" href="http://www.deep-cleaning.de/site/menue.css">

    <SCRIPT type="text/javascript">
/*
XHTML/CSS/DHTML Semantically correct drop down menu 
Author: Sam Hampton-Smith - Site: http://www.hampton-smith.com
*/
    var currentMenu = null;
    var mytimer = null;
    var timerOn = false;
    var opera = window.opera ? true : false;

    if (!document.getElementById)
        document.getElementById = function() { return null; }
    
    function initialiseMenu(menu, starter, root) {
//      var menuId = menu.attributes(0).value;
        var leftstarter = false;
    
        if (menu == null || starter == null) return;
            currentMenu = menu;
        starter.onmouseover = function() {
            if (currentMenu) {
                if (this.parentNode.parentNode!=currentMenu) {
                    currentMenu.style.visibility = "hidden";
                }
                if (this.parentNode.parentNode==root) {
                    var tempCurrentMenu = currentMenu
                    while (tempCurrentMenu.parentNode.parentNode!=root) {
                        tempCurrentMenu.parentNode.parentNode.style.visibility = "hidden";
                        tempCurrentMenu = tempCurrentMenu.parentNode.parentNode;
                    }
                }
                currentMenu = null;
                this.showMenu();
                }
        }
        menu.onmouseover = function() {
            if (currentMenu) {
                currentMenu = null;
                this.showMenu();
                }
        }   
    
        starter.showMenu = function() {
            if (!opera) {
                if (this.parentNode.parentNode==root) {
                    menu.style.left = this.offsetLeft + "px";
                    menu.style.top = this.offsetTop + this.offsetHeight + "px";
                }
                else {
                    menu.style.left = this.offsetLeft + this.offsetWidth + "px";
                    menu.style.top = this.offsetTop + "px";
                }
            }
            else {
                if (this.parentNode.parentNode==root) {
                    menu.style.left = this.offsetLeft + "px";
                    menu.style.top = this.offsetHeight + "px";
                }
                else {
                    menu.style.left = this.offsetWidth + "px";
                    menu.style.top = this.offsetTop + "px";
                }
            }
            menu.style.visibility = "visible";
            currentMenu = menu;
        }

        starter.onfocus  = function() {
            starter.onmouseover();
        }
        menu.onfocus     = function() {
        }
        menu.showMenu = function() {
            menu.style.visibility = "visible";
            currentMenu = menu;
            stopTime();
        }
        menu.hideMenu = function()  {
            if (!timerOn) {
                mytimer = setInterval("killMenu('" + this.id + "', '" + root.id + "');", 650); // 700 ####
                timerOn = true;
                for (var x=0;x<menu.childNodes.length;x++) {
                    if (menu.childNodes[x].nodeName=="LI") {
                        if (menu.childNodes[x].getElementsByTagName("UL").length>0) {
                            var menuItem = menu.childNodes[x].getElementsByTagName("UL").item(0);
                            menuItem.style.visibility = "hidden";
                        }
                    }
                }
            }
        }
        menu.onmouseout = function(event) {
            this.hideMenu();
        }
        starter.onmouseout = function() {
            for (var x=0;x<menu.childNodes.length;x++) {
                if (menu.childNodes[x].nodeName=="LI") {
                    if (menu.childNodes[x].getElementsByTagName("UL").length>0) {
                        var menuItem = menu.childNodes[x].getElementsByTagName("UL").item(0);
                        menuItem.style.visibility = "hidden";
                    }
                }
            }
            menu.style.visibility = "hidden";
        }
}
    function killMenu(menu, root) {
        menu = document.getElementById(menu);
        root = document.getElementById(root);
        menu.style.visibility = "hidden";
        for (var x=0;x<menu.childNodes.length;x++) {
            if (menu.childNodes[x].nodeName=="LI") {
                if (menu.childNodes[x].getElementsByTagName("UL").length>0) {
                    var menuItem = menu.childNodes[x].getElementsByTagName("UL").item(0);
                    menuItem.style.visibility = "hidden";
                }
            }
        }
        while (menu.parentNode.parentNode!=root) {
            menu.parentNode.parentNode.style.visibility = "hidden";
            menu = menu.parentNode.parentNode;
        }
        stopTime();
    }
    function stopTime() {
        if (mytimer) {
             clearInterval(mytimer);
             mytimer = null;
             timerOn = false;
        }
    } 

    window.onload = function() {
        var root = document.getElementById("menuList");
        getMenus(root, root);
    }

function getMenus(elementItem, root) {
    var selectedItem;
    var menuStarter;
    var menuItem;
    for (var x=0;x<elementItem.childNodes.length;x++) {
        if (elementItem.childNodes[x].nodeName=="LI") {
            if (elementItem.childNodes[x].getElementsByTagName("UL").length>0) {
                menuStarter = elementItem.childNodes[x].getElementsByTagName("A").item(0);
                menuItem = elementItem.childNodes[x].getElementsByTagName("UL").item(0);
                getMenus(menuItem, root);
                initialiseMenu(menuItem, menuStarter, root);
            }
        }
    }
}
</SCRIPT>

   <title>Deep Cleaning</title>
</head>
<body>
   <div class="content">
      <div class="header">
      <img align="right" src="/images/bannerrechts.GIF">
   </div>
      
      <div class="bar">
      </div>




<div class="menue"> 
<div id="mainMenu">
      <ul id="menuList">



<!-- Beispiel für ein Menü -->

<li class="menubar"><a href="seite1.htm" class="starter">Startseite</a>
 <ul id="menu0" class="menu">
  <li><a href="seite1.htm">Seite 1</a></li>
  <li><a href="seite2.htm">Seite 2</a></li>
  <li><a href="seite3.htm">Seite 3</a></li>
 </ul>
</li>



<!-- Beispiel für ein Menü mit Untermenü -->

<li class="menubar"><a href="seite5.htm" class="starter">Testseite</a>
<ul id="menu5" class="menu">
<li><a href="seite6.htm">Seite 6</a></li>
<li><a href="seite7.htm">Seite 7 &raquo;</a>
<ul id="menu5_1" class="menu">
<li><a href="seite8.htm">Seite 8</a></li>
<li><a href="seite9.htm">Seite 9</a></li>
</ul>
</li>







   </div>
     </div>
      
      <div class="left">
         <h3>Willkommen</h3>
         <div class="left_box">

_________________
Bei Fragen oder Fehlermeldungen - Bitte ausführlichen Code posten!
Wie man Fragen richtig stellt
19 Aug 2009 20:40
Benutzer-Profile anzeigen Private Nachricht senden Website dieses Benutzers besuchen
Mad Dog
Mitglied
Beitrag Antworten mit Zitat
Very Happy Very Happy
Super .. vielen Dank !!!

Ich bekomme es allerdings nicht hin das es als externe js funktionert . Was mache ich da falsch?

Hier der Code wenn ich es als externe js einbinden möchte .. fehlt wieder das Untermenue

PHP-Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 <!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">
<head>
   
   <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
   <link rel="stylesheet" href="images/style.css" type="text/css" />
    <link rel="stylesheet" type="text/css" href="http://www.deep-cleaning.de/site/menue.css">

<!-- Hier der Verweis zur JS-Datei -->

<SCRIPT type="text/javascript" src="http://www.deep-cleaning.de/scripte/dropdown.js"></SCRIPT>
  

   <title>Deep Cleaning</title>
</head>
<body>
   <div class="content">
      <div class="header">
      <img align="right" src="/images/bannerrechts.GIF">
   </div>
      
      <div class="bar">
      </div>




<div class="menue">
<div id="mainMenu">
      <ul id="menuList">



<!-- Beispiel für ein Menü -->

<li class="menubar"><a href="seite1.htm" class="starter">Startseite</a>
 <ul id="menu0" class="menu">
  <li><a href="seite1.htm">Seite 1</a></li>
  <li><a href="seite2.htm">Seite 2</a></li>
  <li><a href="seite3.htm">Seite 3</a></li>
 </ul>
</li>




<!-- Beispiel für ein Menü mit Untermenü -->

<li class="menubar"><a href="seite5.htm" class="starter">Testseite</a>
<ul id="menu5" class="menu">
<li><a href="seite6.htm">Seite 6</a></li>
<li><a href="seite7.htm">Seite 7 &raquo;</a>
<ul id="menu5_1" class="menu">
<li><a href="seite8.htm">Seite 8</a></li>
<li><a href="seite9.htm">Seite 9</a></li>
</ul>
</li>

 </div>
     </div>
      
      <div class="left">
         <h3>Willkommen</h3>
         <div class="left_box">


hier die komplette CSS
PHP-Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
 body { 
    padding: 0; 
    margin: 0; 
    font: 0.7em Tahoma, Arial, sans-serif; 
    line-height: 1.5em;
    background: #FFFFFF; 
    color: #454545; 
}

a {    color: #E0691A;    background: inherit;}
a:hover { color: #6C757A; background: inherit; }

h1 { font: normal 2.1em Tahoma, Arial, Sans-Serif; letter-spacing: +1px; padding: 7px 0 0 8px; margin: 0; }
.dark  { color: #737373; background: inherit; font-weight: bold; }
h1 a, h2 a { text-decoration: none; }
h1 a:hover, h2 a:hover { color: #FF6600; background: inherit; }
h2 { margin: 0; padding: 0; font: bold 1.2em Tahoma, Arial, Sans-Serif; letter-spacing: +1px; }
h2 { font-size: 1.2em; margin-bottom: 5px; color: #000; background: inherit; }

p {    margin: 0 0 5px 0; }

ul { margin: 0; padding : 0; list-style : none; }

form {     margin: 0; }



/* layout
   ------ */

.content { 
    margin: 0 auto;
    width: 780px;
    padding: 10px; 
}

.header { 
    height: 160px;
    background: #007CC2;
    color: #808080;
    margin: 3px 0;
    padding: 0px 0 0 0;
    border-bottom: 1px solid #ccc;
    background-image:url('LOGO x x 160.JPG');
    background-repeat:no-repeat;
}

.logo {
    
}



.bar { 
    clear: both;
    font-size: 1.1em;
    height: 20px; 
    color: #FFFFFF;
    margin: 0 0 0 0px; 
    background: #007CC2;
}
        input.datum {
                font-size:9pt;
                background-color:#007CC2;
                color:#FFFFFF;
                border:solid 0px;

}

        input.zeit{
                font-size:9pt;
                background-color:#007CC2;
                color:#FFFFFF;
                border:solid 0px;

}


 /* MENUE
   ------ */

.menue { 
    background: #007CC2; 
    color: #808080;
    clear: both;
    height:25px;
    
    padding: 2px 2px 2px 2px;
    margin: 5px 0;
}


.grey {
    color: #808080;
    background: inherit;
    font-weight: normal;
}

.search_form { float: right; }

.subheader {
    margin: 0px 0 10px 0;
    border-bottom: 1px solid #eee;
    padding: 5px 0 5px 0;
    background: #A4A4A4;
    color: #fff;
}

/* left side
   --------- */

.left {
    float: left;
    width: 70%;
    margin: 0 0 10px 0;
}

.left h3 {
    text-align: center;
        letter-spacing: +1px;
    clear: both;
    background: #0099FF url(corner.gif) no-repeat top right;
    color: #FFF;
    padding: 7px 0 7px 10px;
    font: bold 1.1em Tahoma, Arial, Sans-Serif;
    margin: 0 0 0px 0;
}
    .left_side {
        float: left;
        width: 180px;
        padding: 0 0 0 10px;
        margin: 10px 0;
    }
        
    .left_side a, .right_side a { color: #414141; background: #FFF; }
        
    .right_side {
        float: right;
        width: 220px;
        background: #FFF url(dotted.gif) repeat-y;
        color: #414141;
        padding: 0 0 0 40px;
        margin: 5px 0;
    }
        
    .left_box { margin: 5px 0 10px 0; color: #000; background: #FFF; padding: 5px 0; }
    
        
/* right side
   ---------- */
        
.right {
    float: right;
    width: 29.6%;
    margin: 0 0 10px 0;
}

.right h3 {
    letter-spacing: +1px;
    background: #007CC2  url(corner.gif) no-repeat top right;;
    color: #FFF;
    padding: 7px 0 7px 10px;
    font: bold 1.1em Tahoma, Arial, Sans-Serif;
    margin: 0 0 3px 0;
}

    .right_articles {
        background: #f5f5f5;
        color: #414141;
        padding: 5px;    
        margin: 5px 0 3px 5px;
    }
    
.image {
    float: left;
    margin: 0 9px 3px 0;
}

/* footer
   ------ */

.footer { 
    clear: both;
    text-align: center;
    padding: 10px 0 10px 0;
    margin: 0;
    border-top: 1px solid #ccc;
    line-height: 1.8em;
}

.footer a { color: #808080; background: #fff; } 



Habe es jetzt erstmal komplett in einer php-datei gespeichert und eingebunden.
Und hier wieder das gleiche Problem wenn ich das Menue via php einbinden möchte habe ich wieder eine Leerzeile.


hier der Code wo ich es einbinde

PHP-Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 <!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">
<head>
   
   <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
   <link rel="stylesheet" href="images/style.css" type="text/css" />
    <link rel="stylesheet" type="text/css" href="http://www.deep-cleaning.de/site/menue.css">
  

   <title>Deep Cleaning</title>
</head>
<body>
   <div class="content">
      <div class="header">
      <img align="right" src="/images/bannerrechts.GIF">
   </div>
      
      <div class="bar">
      </div>




<!-- hier wird es eingebunden -->
<div class="menue"> 

<?php include('site/dropdown.php'); das Fragezeichen und die Klammer stehen eigentlich da .. nur hier nicht 
     
</div>
      
      <div class="left">
         <h3>Willkommen</h3>
         <div class="left_box">



der Code der zu includierenden Datei ist das js und dann der Quellcode vom dropdown-menue
so funktioniert es nur eben diese Leerzeile die sich da reinmogelt .. hmpf..
19 Aug 2009 23:08
Benutzer-Profile anzeigen Private Nachricht senden
axinio Internet Marketing
Beiträge der letzten Zeit anzeigen:   
Neues Thema eröffnen   Neue Antwort erstellen    Webmaster Forum -> Hilfe für Webmaster -> Javascript Alle Zeiten sind GMT + 1 Stunde
Seite 1 von 1

 
Gehe zu:  

Ähnliche Beiträge
Thema Webmaster Forum Antw. Autor Verfasst am
Keine neuen Beiträge Drop down - Menü in Frames CSS 2 LadyMalia 30 Jan 2010 11:23 Letzten Beitrag anzeigen
Keine neuen Beiträge Drag&Drop 2 Bilder gleichzeitig b... Javascript 0 Tolonath 23 Jan 2010 20:15 Letzten Beitrag anzeigen
Keine neuen Beiträge HTML / PHP Hilfe, wie kriege ich den ... PHP / MySQL 6 siebenohrhase 17 Jun 2009 12:41 Letzten Beitrag anzeigen
Keine neuen Beiträge Drop Down Menü für PHP mit Bildern ? Javascript 31 N@tur3 02 März 2009 21:40 Letzten Beitrag anzeigen
Keine neuen Beiträge EInbinden des Drop Down Menüs auf mei... Javascript 0 Hiasmen 30 Dez 2008 18:43 Letzten Beitrag anzeigen