mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Sa 03.12.2016 19:05 Benutzername: Passwort: Auto-Login

Thema: CSS Drop Down Menü vom 24.01.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS Drop Down Menü
Autor Nachricht
wandgucker
Threadersteller

Dabei seit: 22.02.2002
Ort: -
Alter: -
Geschlecht: Weiblich
Verfasst Di 24.01.2006 16:47
Titel

CSS Drop Down Menü

Antworten mit Zitat Zum Seitenanfang

Sorry, hab die Frage zuerst ins falsche Forum gepostet-
Hi,
habe hier ein css drop down menü.
Kann mir jemand erklären wie ich den hover
zustand des Hauptmenüs erhalten kann, wenn ich mit der maus
zum untermenü gehe? So dass Link und der ausgewählte
Untermenüpunkt jeweils im hover Zustand angezeigt werden.
Muss ich dazu im js was ändern? vielen dank!

Code:
<!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>
<title>Drop Down Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
startList = function()
{
if (document.all&&document.getElementById)
{
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++)
{
node = navRoot.childNodes[i];
if (node.nodeName=="LI")
{
node.onmouseover=function()
{
this.className+=" over";
}
node.onmouseout=function()
{
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//-->
</script>
<style type="text/css">
<!--
body
{
font: normal 11px verdana;
}

ul
{
margin: 0;
padding: 0;
list-style: none;
width: 160px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}


ul li
{
position: relative;
}

li ul
{
position: absolute;
left: 159px; /* Set 1px less than menu width */
top: 0;
display: none;
}

/* Styles for Menu Items */
ul li a, a:hover
{
display: block;
text-decoration: none;
border: 1px solid #ccc; /* IE6 Bug */
border-bottom: 0;
padding: 5px;
}

ul li a
{

color: #777;
font-weight: bold;
background: #fff; /* IE6 Bug */
}

ul li a:hover
{
color: white;
background: red; /* IE6 Bug */
}

/* Holly Hack. IE Requirement \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

li:hover ul, li.over ul
{
display: block;
}
-->

</style>
</head>
<body>
<ul id="nav">
<li><a href="#">LINK</a>
<ul>
<li><a href="#">LINK 1</a></li>
<li><a href="#">LINK 2</a></li>
<li><a href="#">LINK 3</a></li>
</ul>
</li>
</ul>
</body>
</html>


edit: // Bitte in Zukunft Code Tags verwenden


Zuletzt bearbeitet von shakadi am Mi 25.01.2006 09:11, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
way2hot

Dabei seit: 14.03.2004
Ort: Jüchen-Gierath
Alter: 34
Geschlecht: Männlich
Verfasst Mi 25.01.2006 09:08
Titel

Antworten mit Zitat Zum Seitenanfang

Spontan würde ich sagen, du könntest den Untermenüpunkten einen onMouseOver zuweisen, welcher den Hauptmenüpunkt in den gewünschten Zustand setzt, jedoch nicht mit dem gewöhnlichen :hover, sondern mittels einer Klassendefinition oder dem Triggern des gewünschten Attributs. Kenne das beispielsweise von der Dreamweaver-Extension "Ebene ein-/ausblenden", bei der die visibility über den EventHandler verändert wird:

Code:
function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}


Code:
<a href="javascript:;" onclick="MM_showHideLayers('Elementname','','hide')"


Um beispielsweise den Background zu verändern, einfach das Script entsprechend verändern:

Code:
function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'#c00':(v=='hide')?'#fc0':v; }
    obj.background=v; }
}


Getestet habich das jetzt nicht, allerdings korrigiere ich da Script in der Regel dahingehend, dass ich anstatt der visibility das Attribut display beeinflussen lasse:

Code:
function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'block':(v=='hide')?'none':v; }
    obj.display=v; }
}
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
wandgucker
Threadersteller

Dabei seit: 22.02.2002
Ort: -
Alter: -
Geschlecht: Weiblich
Verfasst Mi 25.01.2006 10:19
Titel

CSS Drop Down Menü

Antworten mit Zitat Zum Seitenanfang

Danke für deine Antwort, aber irgendwie funzt es nicht..muss noch etwas rumexperimentieren.
  View user's profile Private Nachricht senden
way2hot

Dabei seit: 14.03.2004
Ort: Jüchen-Gierath
Alter: 34
Geschlecht: Männlich
Verfasst Mi 25.01.2006 10:47
Titel

Re: CSS Drop Down Menü

Antworten mit Zitat Zum Seitenanfang

wandgucker hat geschrieben:
Danke für deine Antwort, aber irgendwie funzt es nicht..muss noch etwas rumexperimentieren.


Fuck... Sorry!! Da fehlt noch die Funktion zum Suchen des Elements, der dazugehörige Aufruf ist ja in der oben genannten Funktion integriert. Hier also der fehlende Schnippsel:

Code:
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Benutzer 4545
Account gelöscht


Ort: -

Verfasst Do 08.06.2006 06:29
Titel

Antworten mit Zitat Zum Seitenanfang

ganz dumme frage: wo genau in den code muss ich das einsetzen damit das funktioniert?
 
 
Ähnliche Themen CSS Drop-Down Menü mit Javascript
Drop-Down-Menü in CSS soll nun auch im IE funktionieren
Problem mit Drop-Down Menü [CSS]
Drop Down Menü
Drop-Down Menü
Drop Down Menü
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.