| Autor |
Nachricht |
SiriusBlack
Threadersteller
Dabei seit: 04.09.2009
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Fr 02.10.2009 08:48
Titel Drop-Down Navigation |
  |
|
Hallo Leute!
Also mein problem ist folgendes: ich will bei meiner Drop-Down Navigation das sich der Hauptmenüpunkt von grau auf weiß färbt wenn man ihn überfährt (klappt mit hover wunderbar) und wenn man ihn dann anklickt soll er weiß bleiben (habs mit active probiert, leider wird er trotzdem wieder grau wenn ich die Maus wegbewege). Erst wenn man auf einen anderen Mneüpunkt klickt soll er wieder grau werden. Der Link führt nicht auf eine andere Seite, sondern öffnet nur das Untermenü.
hab bereits danach gegoogelt, find aber nix für mich passendes.
Hier mal mein Code:
HTML:
| Code: | <table cellspacing=0 cellpadding=2 border=0 width=125>
<tr>
<td>
<a href="javascript:do_menu('m1x')" onmouseover="do_check('m1x')" onclick="test(this);" class="navi" >Produkte</a>
</td>
</tr>
</table>
</div>
<div id="m1x" class="submenu" style="top:521px;left:190px; background-color:#da014f; padding-top:60px;padding-bottom:10px;">
<table cellspacing=0 cellpadding=2 border=0 width=125>
<tr>
<td>
<a href="motorradkoffer.htm" TARGET="frame" onmouseover="do_submenu()" class="subnavi">Motorradkoffer</a><br>
<a href="gepaeckbruecke.htm" TARGET="frame" onmouseover="do_submenu()" class="subnavi">Gepäckträger</a><br>
<a href="schuztbuegel.htm" TARGET="frame" onmouseover="do_submenu()" class="subnavi">Schutzbügel</a><br>
<a href="copper_parts.htm" TARGET="frame" onmouseover="do_submenu()" class="subnavi">Chopper-Parts</a><br>
<a href="hauptstaender.htm" TARGET="frame" onmouseover="do_submenu()" class="subnavi">Hauptständer</a><br>
</td>
</tr>
</table </td>>
<td width="153" align="center">
<div id="m2" class="menu" style="top:533px;left:380px; ">
<table cellspacing=0 cellpadding=2 border=0 width=125>
<tr>
<td>
<a href="javascript:do_menu('m2x')" onmouseover="do_check('m2x')" onclick="test(this);" class="navi">Service</a>
</td>
</tr>
</table>
</div>
<div id="m2x" class="submenu" style="top:521px;left:370px; background-color:#da014f; padding-top:60px;padding-bottom:10px;">
<table cellspacing=0 cellpadding=2 border=0 width=125>
<tr>
<td>
<a href="pressehtm" TARGET="frame" onmouseover="do_submenu()" class="subnavi">Presse</a><br>
<a href="downloads.htm" TARGET="frame" onmouseover="do_submenu()" class="subnavi">Downloads</a><br>
<a href="haendlersuche.htm" TARGET="frame" onmouseover="do_submenu()" class="subnavi">Händlersuche</a>
</td>
</tr>
</table> |
CSS:
| Code: |
.menu {
position: absolute;t
op:0;z-index: 2;}
.submenu {
position: absolute;top: 22;
z-index: 1;
visibility: hide;visibility: hidden;
}
.navi{font-family: arial black;
font-size: 14pt;
color:#4b4949;
text-decoration:none;
}
.navi:hover{font-family: arial black;
font-size: 14pt;
color:#ffffff;
text-decoration:none;
}
.navi:active{font-family: arial black;
font-size: 14pt;
color:#ffffff;
text-decoration:none;
}
.navi:visited{font-family: arial black;
font-size: 14pt;
color:#ffffff;
text-decoration:none;
}
.subnavi{
padding-left:10px;
font-family: arial;
font-size: 14px;
color:#ffffff;
text-decoration: none;
line-height:2;
}
.subnavi:hover{
padding-left:10px;
font-family: arial;
font-size: 14px;
color:#000000;
text-decoration: none;
line-height:2;
} |
und JavaScript:
| Code: |
<!--
function test(x) {
if (navigator.appName == 'Microsoft Internet Explorer')
x.blur();
}
function show_layer(x)
{
if(document.layers)
document.layers[x].visibility="show";
else
document.all[x].style.visibility="visible";
}
function hide_layer(x)
{
if(document.layers)
document.layers[x].visibility="hide";
else
document.all[x].style.visibility="hidden";
}
var old;
var memold;
var subold;
if(document.layers)
{
window.captureEvents(Event.MOUSEDOWN);
window.onmousedown=do_out;
}
else
{
document.onmouseup=do_out;
}
function do_menu(x)
{
if(!old)
old=memold;
if(old!=x)
{
show_layer(x);
old=x;
} else
old="";
}
function do_check(x)
{
if(old && old!=x)
{
hide_layer(old);
show_layer(x);
old=x;
}
do_submenu();
}
function do_out()
{
if(old)
hide_layer(old);
memold=old; old="";
do_submenu();
}
function do_submenu(x)
{
if(subold)
{
hide_layer(subold);
subold="";
}
if(x)
{
show_layer(x);
subold=x;
}
}
function lade(seite) {
parent.pageFrame.location.href = seite;
}
// --> |
Von JavaScript hab ich nicht viel Ahnung, deswegen hab ich mir ein Script gesucht und es auf meine Seite angepasst.
|
|
| |
  |
 |
DesignKater
Dabei seit: 26.06.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 02.10.2009 14:22
Titel
|
|
|
|
Bei deiner verkorksten Version, google mal nach getElementByID in Verbindung mit einer Stylezuweisung und klatsch das mit deinem onClick Event zusammen.
|
|
| |
|
|
|
Anzeige
|
|
|
SiriusBlack
Threadersteller
Dabei seit: 04.09.2009
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 07.10.2009 09:00
Titel
|
|
|
Habs probiert, bringt mich nicht weiter.... 
|
|
| |
|
|
DesignKater
Dabei seit: 26.06.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 07.10.2009 09:23
Titel
|
|
|
|
Hier solltest du eine Lösung finden können.
|
|
| |
|
|
SiriusBlack
Threadersteller
Dabei seit: 04.09.2009
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 07.10.2009 10:23
Titel
|
|
|
Danke für den Link 
ich hab die navigation jetzt mal so aufgebaut wie dort beschrieben....aber dabei hover in active und onmousehover in onclick geändert, weil sich die unternavigation erst öffnen soll wenn der Menüpunkt angeklickt wird....mein problem dabei: sobald ich die Maustadte loslasse verschwindet die subnavigation wieder....
|
|
| |
|
|
DesignKater
Dabei seit: 26.06.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 07.10.2009 16:08
Titel
|
|
|
| SiriusBlack hat geschrieben: | | ....mein problem dabei: sobald ich die Maustadte loslasse verschwindet die subnavigation wieder.... |
Dann musst du dem Untermenü beim Klick auf den übergeordneten Menüpunkt eine Klasse active zuweisen. Die benötigt lediglich ein display:block. Wenn das Untermenü inaktiv ist, also noch nicht geklickt wurde, dann muss die Klasse inactive mit display:none zugewiesen werden. Damit solltest du es hinbekommen. Eventuell machst das auch über ne id active und inactive. Zumal diese ja nur einmal vorhanden sein sollte.
|
|
| |
|
|
SiriusBlack
Threadersteller
Dabei seit: 04.09.2009
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 08.10.2009 09:31
Titel
|
|
|
Erst mal vielen vielen Dank für deine Hilfe 
Naja ich bekomm das net hin dass das Untermenü eingeblendet bleibt nachdem ich es angeklickt hab und erst beim erneuten klicken wieder verschwindet... deswegen werd ich mich mit hover zufrieden geben müssen......bin glaub ich einfach zu doof dafür.... 
Naja trotzdem nochmal danke das du dir die zeit genommen hast mir zu helfen.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Probleme mit der Navigation, es soll Drop-Down Menü werden
Drop Down Menü
Drop-Down Menü
Drop Down Menü
Art drop down menü?
CSS Drop Down Menü
|
|
Willkommen auf dem Portal für Mediengestalter
