HTMLWorld - HTML, CSS, JavaScript, PHP, Java, Flash und vieles mehrHTMLWorld:   Home | Impressum
 

 
 

Anzeige 
 
HTMLWorld » Forum

Thema anzeigen - Navigation mit Untermenü

 FAQFAQ   SuchenSuchen   MitgliederlisteMitgliederliste   BenutzergruppenBenutzergruppen   RegistrierenRegistrieren 
 ProfilProfil   Einloggen, um private Nachrichten zu lesenEinloggen, um private Nachrichten zu lesen   LoginLogin 

Navigation mit Untermenü

 

Neues Thema eröffnen   Neue Antwort erstellen    HTMLWorld Foren-Übersicht
   JavaScript
Vorheriges Thema:
Nächstes Thema:  
Autor Nachricht
Gast






BeitragVerfasst am: 20.03.2005 17:47:51    Titel: Navigation mit Untermenä Antworten mit Zitat

Hallo zusammen,
ich möchte in meine Website Navigationen mit Unterkategeorien einbauen. Ich habe selbst, mit Kombination von Javascript und CSS was gebastelt.ABER... leider es funktioniert nicht richtig. Das Untermenü muss verschwinden, wenn die Maus austritt, ABER das Untermenü muss solange bleiben, bis was angeklickt bzw. die Maus austritt. Ich hoffe, ich habe mich richtig ausgedrückt!!! Ich bitte euch um HILFE. Hier meine Script, welches nicht ganz funktioniert?! Viele Grüsse und Danke
<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">

<title>Button</title>
<style type="text/css" media="screen"><!--
#partner { background-color: #f4f1f1; position: absolute; top: 47px; left: 18px; width: 164px; height: 26px; visibility: visible; display: block }
a { text-decoration: none }
#unter1 { background-color: #f4f1f1; position: absolute; top: 72px; left: 74px; width: 108px; height: 66px; visibility: hidden; display: block }
#kontakt { background-color: #f4f1f1; position: absolute; top: 47px; left: 185px; width: 164px; height: 26px; visibility: visible; display: block }
#unter2 { background-color: #f4f1f1; position: absolute; top: 74px; left: 247px; width: 102px; height: 50px; visibility: hidden; display: block }
--></style>
<csactions>
<csaction name="9F240540" class="ShowHide" type="onevent" val0="unter2" val1="1"></csaction>
<csaction name="E26DF043" class="ShowHide" type="onevent" val0="unter1" val1="1"></csaction>
<csaction name="E6305D47" class="ShowHide" type="onevent" val0="unter1" val1="0"></csaction>
<csaction name="E6D5D948" class="ShowHide" type="onevent" val0="unter1" val1="0"></csaction>
<csaction name="E73D1A49" class="ShowHide" type="onevent" val0="unter1" val1="0"></csaction>
<csaction name="104001462" class="ShowHide" type="onevent" val0="unter1" val1="0"></csaction>
<csaction name="1051B0363" class="ShowHide" type="onevent" val0="unter2" val1="0"></csaction>
<csaction name="1058A6A64" class="ShowHide" type="onevent" val0="unter2" val1="0"></csaction>
<csaction name="105DF8E65" class="ShowHide" type="onevent" val0="unter2" val1="0"></csaction>
</csactions>
<csscriptdict import>
<script type="text/javascript" src="file:///C:/WINDOWS/Anwendungsdaten/Adobe/Adobe%20GoLive/Settings/JScripts/GlobalScripts/CSScriptLib.js"></script>
</csscriptdict>
<csactiondict>
<script type="text/javascript"><!--
CSAct[/*CMP*/ '9F240540'] = new Array(CSShowHide,/*CMP*/ 'unter2',1);
CSAct[/*CMP*/ 'E26DF043'] = new Array(CSShowHide,/*CMP*/ 'unter1',1);
CSAct[/*CMP*/ 'E6305D47'] = new Array(CSShowHide,/*CMP*/ 'unter1',0);
CSAct[/*CMP*/ 'E6D5D948'] = new Array(CSShowHide,/*CMP*/ 'unter1',0);
CSAct[/*CMP*/ 'E73D1A49'] = new Array(CSShowHide,/*CMP*/ 'unter1',0);
CSAct[/*CMP*/ '104001462'] = new Array(CSShowHide,/*CMP*/ 'unter1',0);
CSAct[/*CMP*/ '1051B0363'] = new Array(CSShowHide,/*CMP*/ 'unter2',0);
CSAct[/*CMP*/ '1058A6A64'] = new Array(CSShowHide,/*CMP*/ 'unter2',0);
CSAct[/*CMP*/ '105DF8E65'] = new Array(CSShowHide,/*CMP*/ 'unter2',0);

// --></script>
</csactiondict>
</head>

<body bgcolor="#e7e7e7" link="black">
<div id="partner">
<table width="164" border="1" cellspacing="2" cellpadding="0" height="19">
<tr>
<td><font size="-1" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular"><b><a onmouseover="CSAction(new Array(/*CMP*/'E26DF043'));return true;" href="#" csover="E26DF043">PARTNER</a></b></font></td>
</tr>
</table>
</div>
<div id="unter1">
<table width="108" border="1" cellspacing="2" cellpadding="0">
<tr>
<td>
<div align="center">
<font size="-1" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular"><a onclick="CSAction(new Array(/*CMP*/'E6305D47'));return CSClickReturn();" href="#" csclick="E6305D47">com</a></font></div>
</td>
</tr>
<tr>
<td>
<div align="center">
<font size="-1" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular"><a onclick="CSAction(new Array(/*CMP*/'E6D5D948'));return CSClickReturn();" href="#" csclick="E6D5D948">de</a></font></div>
</td>
</tr>
<tr>
<td>
<div align="center">
<font size="-1" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular"><a onclick="CSAction(new Array(/*CMP*/'E73D1A49'));return CSClickReturn();" onmouseout="CSAction(new Array(/*CMP*/'104001462'));" href="#" csclick="E73D1A49" csout="104001462">net</a></font></div>
</td>
</tr>
</table>
</div>
<div id="kontakt">
<table width="164" border="1" cellspacing="2" cellpadding="0" height="19">
<tr>
<td><font size="-1" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular"><b><a onmouseover="CSAction(new Array(/*CMP*/'9F240540'));return true;" href="#" csover="9F240540">KONTAKT</a></b></font></td>
</tr>
</table>
</div>
<div id="unter2">
<table width="101" border="1" cellspacing="2" cellpadding="0" height="45">
<tr height="18">
<td height="18">
<div align="center">
<font size="-1" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular"><a onclick="CSAction(new Array(/*CMP*/'1051B0363'));return CSClickReturn();" href="#" csclick="1051B0363">Lage</a></font></div>
</td>
</tr>
<tr height="18">
<td height="18">
<div align="center">
<font size="-1" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular"><a onclick="CSAction(new Array(/*CMP*/'1058A6A64'));return CSClickReturn();" onmouseout="CSAction(new Array(/*CMP*/'105DF8E65'));" href="#" csclick="1058A6A64" csout="105DF8E65">Ort</a></font></div>
</td>
</tr>
</table>
</div>
<p><br>
<br>
<br>
</p>
<table width="584" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#b9aaaa" width="700"><br>
<br>
<br>
<br>
<br>
<br>
<br>
</td>
<td></td>
<td></td>
</tr>
</table>
</body>

</html>
Nach oben
admin
Site Admin


Anmeldungsdatum: 16.01.2005
Beiträge: 323
Wohnort: Berlin

BeitragVerfasst am: 20.03.2005 17:55:31    Titel: Re: Navigation mit Untermenä Antworten mit Zitat

Anonymous hat folgendes geschrieben:

...
<csactions>
<csaction name="9F240540" class="ShowHide" type="onevent" val0="unter2" val1="1"></csaction>
<csaction name="E26DF043" class="ShowHide" type="onevent" val0="unter1" val1="1"></csaction>
<csaction name="E6305D47" class="ShowHide" type="onevent" val0="unter1" val1="0"></csaction>
<csaction name="E6D5D948" class="ShowHide" type="onevent" val0="unter1" val1="0"></csaction>
<csaction name="E73D1A49" class="ShowHide" type="onevent" val0="unter1" val1="0"></csaction>
<csaction name="104001462" class="ShowHide" type="onevent" val0="unter1" val1="0"></csaction>
<csaction name="1051B0363" class="ShowHide" type="onevent" val0="unter2" val1="0"></csaction>
<csaction name="1058A6A64" class="ShowHide" type="onevent" val0="unter2" val1="0"></csaction>
<csaction name="105DF8E65" class="ShowHide" type="onevent" val0="unter2" val1="0"></csaction>
</csactions>
<csscriptdict import>
<script type="text/javascript" src="file:///C:/WINDOWS/Anwendungsdaten/Adobe/Adobe%20GoLive/Settings/JScripts/GlobalScripts/CSScriptLib.js"></script>
</csscriptdict>
...
...


zwei sachen:
1. das script ist primitiver golive-schrott - such dir lieber ein vernünftiges irgendwo im netz
2. eben weil es aus golive kommt kann dir hier auch nur einer helfen der golive hat - schließlich liegt das script bei dir auf der platte ...

gruss,
jan.
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden Website dieses Benutzers besuchen MSN Messenger
kim



Anmeldungsdatum: 20.03.2005
Beiträge: 2

BeitragVerfasst am: 20.03.2005 18:33:50    Titel: Navigation mit Untermenä Antworten mit Zitat

....genau dewegen!!!! Ich versuche die Scripte zusammen zu basteln und was genau dahinter steckt, kann ich leider nicht nachvollziehen??? Darum brauche ich "Hilfe". Vielleicht weißt Du einen Script, den ich ohne den Schrott vom GoLive, ersetzen könnte! Es wäre toll, und vorerst Danke. gruß, Kim
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
admin
Site Admin


Anmeldungsdatum: 16.01.2005
Beiträge: 323
Wohnort: Berlin

BeitragVerfasst am: 20.03.2005 18:37:23    Titel: Antworten mit Zitat

schonmal mit google versucht?

da fände mann dann sowas wie
http://www.jswelt.de/index.php?opencat=JavaScripts
(bereich "Navigation")
...


gruss,
jan.
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden Website dieses Benutzers besuchen MSN Messenger
kim



Anmeldungsdatum: 20.03.2005
Beiträge: 2

BeitragVerfasst am: 20.03.2005 18:43:58    Titel: Navigation mit Untermenä Antworten mit Zitat

Danke, ich probiere es damit. Grüße, Kim
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
Sir Quicksand
Häufiger Poster


Anmeldungsdatum: 19.01.2005
Beiträge: 304
Wohnort: Hannover

BeitragVerfasst am: 22.03.2005 11:52:08    Titel: Antworten mit Zitat

Hi,

den folgenden Code habe ich vom Editor AceHTML 5. Das war eine Vorlage, die ich für mich modifiziert habe. Da es bißchen her ist, gebe ich jetzt keinen Kommentar zu den einzelnen Abschnitten, da ich mich erst wieder reinfuxen muß.

Viel Spaß mit den Codeschnippselns (sie funzen).

Code:

<script language="JavaScript1.2">
var menu1=new Array();
menu1[0]='<a href=Test40.htm>Menu item caption40</a><br>';
menu1[1]='<a href=Test41.htm>Menu item caption41</a><br>';
menu1[2]='<a href=Test42.htm>Menu item caption42</a><br>';
</script>


Code:

<script language="JavaScript1.2">
//reusable/////////////////////////////
var zindex=100;
var altesmenu=0;

function dropit2(whichone)
{
   if (window.themenu&&themenu.id!=whichone.id)
   themenu.style.visibility="hidden";
   themenu=whichone;
   if (document.all)
   {
      themenu.style.left=document.body.scrollLeft+event.clientX-event.offsetX;
      themenu.style.top=document.body.scrollTop+event.clientY-event.offsetY+22;
      if (themenu.style.visibility=="hidden")
      {
         themenu.style.visibility="visible";
         themenu.style.zIndex=zindex++;
      }
   }
}


function hidemenu(whichone)
{
   if (window.themenu)
   themenu.style.visibility="hidden";
}

function hidemenu2()
{
   themenu.visibility="hide";
}

if (document.all)
document.body.onclick=hidemenu;

//reusable/////////////////////////////
</script>


Code:

<div id="dropmenu0" style="position:absolute;left:0;top:0;filter:alpha(opacity=90);background-color:#f3f3ff;width:120;visibility:hidden;border:2px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu0.style.padding="4px";
for (i=0;i<menu1.length;i++)
document.write(menu1[i]);
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu0.captureEvents(Event.CLICK);
document.dropmenu0.onclick=hidemenu2;
}
</script>


Code:


      <!----------Menu 1 starts here---------->
         <ilayer height="35px">
         <layer visibility="show">
         <span class="iewrap1">
         <span class="iewrap2" onmouseover="dropit2(dropmenu0);event.cancelBubble=true;return false" onclick="dropit2(dropmenu0);event.cancelBubble=true;return false"><a href="" class=leiste_neu>Foren</a>
         </span>
         </span>
         </layer>
         </ilayer>
      <!----------Menu 1 ends here---------->
[/code]
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden Website dieses Benutzers besuchen
Sir Quicksand
Häufiger Poster


Anmeldungsdatum: 19.01.2005
Beiträge: 304
Wohnort: Hannover

BeitragVerfasst am: 26.03.2005 14:56:04    Titel: Antworten mit Zitat

Nachdem ich gemerkt habe, daß das Javascript nicht Firefoxkompatibel ist, habe ich dranrumgefummelt:

Code:
<script type="text/javascript">
function dropit(whichone, nummer)
{
   if (window.themenu&&themenu.id!=whichone.id)
   {
      themenu.style.visibility="hidden";
   }
   
   themenu = whichone;
   themenu.style.left= 200;
   themenu.style.top= 175 + nummer * 20;
   themenu.style.visibility="visible";
}

function hidemenu(){
if (window.themenu)
themenu.style.visibility="hidden";
}
</script>


Code:
<a href="" class=leiste style="position:absolute;left:150;top:155;white-space:nowrap;" onClick="dropit(dropmenu0,0);return false">erst0r Eintrag</a>
<a href="" class=leiste style="position:absolute;left:150;top:175;white-space:nowrap;" onClick="dropit(dropmenu1,1);return false">zweit0r Eintrag</a>


Code:
<div id="dropmenu0" style="position:absolute;left:0;top:0;filter:alpha(opacity=90);layer-background-color:lightyellow;background-color:lightyellow;width:200;visibility:hidden;border:0px solid blue;padding:0px">
<a href="" onClick="hidemenu();return false"><img src="bilder/logout.gif" border="0"><font face="arial" size="+1" color="#ff0000"><i> Schließen</i></font></a><br>
<a href="link1.htm" target=hauptseite class=menu>erst0r Link</a><br>
<a href="link2.htm" target=hauptseite class=menu>zweit0r Link</a><br>
</div>

<div id="dropmenu1" style="position:absolute;left:0;top:0;filter:alpha(opacity=90);layer-background-color:lightyellow;background-color:lightyellow;width:200;visibility:hidden;border:0px solid blue;padding:0px">
<a href="" onClick="hidemenu();return false"><img src="bilder/logout.gif" border="0"><font face="arial" size="+1" color="#ff0000"><i> Schließen</i></font></a><br>
<a href="link1.htm" target=hauptseite class=menu>erst0r Link</a><br>
<a href="link2.htm" target=hauptseite class=menu>zweit0r Link</a><br>
</div>
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden Website dieses Benutzers besuchen
Beiträge der letzten Zeit anzeigen:   
Neues Thema eröffnen   Neue Antwort erstellen    HTMLWorld Foren-Übersicht
   JavaScript
Alle Zeiten sind GMT + 1 Stunde
Seite 1 von 1

 
Gehe zu:  
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.