 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
wandgucker
Threadersteller
Dabei seit: 22.02.2002
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Di 24.01.2006 17:47
Titel CSS Drop Down Menü |
  |
|
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 10:11, insgesamt 1-mal bearbeitet
|
|
| |
  |
 |
way2hot
Dabei seit: 14.03.2004
Ort: Jüchen-Gierath
Alter: 41
Geschlecht: 
|
Verfasst Mi 25.01.2006 10:08
Titel
|
|
|
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; }
} |
|
|
| |
 |
|
|
Anzeige
|
|
|
wandgucker
Threadersteller
Dabei seit: 22.02.2002
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 25.01.2006 11:19
Titel CSS Drop Down Menü |
|
|
|
Danke für deine Antwort, aber irgendwie funzt es nicht..muss noch etwas rumexperimentieren.
|
|
| |
|
|
way2hot
Dabei seit: 14.03.2004
Ort: Jüchen-Gierath
Alter: 41
Geschlecht:
|
Verfasst Mi 25.01.2006 11:47
Titel Re: CSS Drop Down Menü |
|
|
| 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;
} |
|
|
| |
|
|
Benutzer 4545
Account gelöscht
Ort: -
|
Verfasst Do 08.06.2006 07:29
Titel
|
|
|
|
ganz dumme frage: wo genau in den code muss ich das einsetzen damit das funktioniert?
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Art drop down menü?
Drop Down Menü
Drop Down Menü
Drop-Down Menü
Drop-Down-Menü in joomla
CSS Drop-Down Menü mit Javascript
|
|
|
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.
|
|
