Archivlink: javarea.de Forum > (X)HTML & CSS (allgemein) > Foldoutmenü mit Rollover (aber nur teilweise)
Vollständigen Link anzeigen: javarea.de Forum > (X)HTML & CSS (allgemein) > Foldoutmenü mit Rollover (aber nur teilweise)

Pages: [1]
geschrieben von usense am 13.04.2006 - 10:37
Hallo,
habe mir dieses menü mit rollover gebastelt (stammt größtenteils vom Foldout Horizontal).
So weit so gut. Ich möchte aber, dass die Hauptmenüpunkte diesen rollovereffekt nicht haben.
Wenn ich Änderungen vornehme gelten die leider immer für das gesamte Menü.
Hat jemand eine Lösung?
Hier der Queltext:

HTML-Quelltext
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: 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>

<!--  START JAVASCRIPT STYLE FUER MENUE -->

<script type="text/javascript">
<!--
  function montre(id) {
	  if (document.getElementById) {
		  document.getElementById(id).style.display="block";
		} else if (document.all) {
		  document.all[id].style.display="block";
		} else if (document.layers) {
		  document.layers[id].display="block";
		} } 

 function cache(id) {
	  if (document.getElementById) {
		  document.getElementById(id).style.display="none";
		} else if (document.all) {
		  document.all[id].style.display="none";
		} else if (document.layers) {
		  document.layers[id].display="none";
		} } 

//-->
</script>
<style type="text/css">
<!--
body {margin: 10px; padding: 0; font: 12px Verdana, sans-serif;}

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

div.menu {
	position: absolute;
	width: 510px;
	top: 102px;
	z-index: 3;
	left: 217px;
}

div.menu li {
float: left;
width: 100px;
}

div.menu a {
margin: 0 2px;
height: 20px;
display: block;
text-align: center;
font-weight: normal;
border: 1px solid gray;
text-decoration: none;
color: #FFFFFF;
background: #5D7D93;
}

div.menu a:hover {
background: #A7ACB2;
border: 1px solid gray; 
}

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5 {
display: none;
float: left;
width: 100px;
font-size: 11px;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a {
font-weight: normal;
border-top: 0 none;
}


.menu #ssmenu a {
	background-color: #FFFFFF;
	color: #2B3F57;
}

.menu #ssmenu a:hover {
	background-color: #ECEFF2;
}


-->
</style>

<!--  ENDE JAVASCRIPT STYLE FUER MENUE -->

</head>

<body>
<div class="menu">
  <ul>
    <li><a href="" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">P1</a>
        <ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
          <li><a href="/_seiten/team.htm">Mit</a></li>
          <li><a href="">Mot</a></li>
          <li><a href="">V</a></li>
        </ul>
    </li>
    
	
	<li><a onmouseover="montre('smenu2');" onmouseout="cache('smenu2');" href="">P2</a>
        <ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
          <li><a onmouseover="montre('smenu2');" onmouseout="cache('smenu2');" href="">P2000</a>
              <ul id="ssmenu" onmouseover="montre('smenu2');" onmouseout="montre('smenu2');">
                <li><a href="">Sub1 P2000</a></li>
                <li><a href="">Sub2 P2000</a></li>
                <li><a href="">Sub3 P2000</a></li>
            </ul>
          </li>
          <li><a href="">purpose-built</a></li>
        </ul>
    </li>
    
	
	<li><a onmouseover="montre('smenu3');" onmouseout="cache('smenu3');" href="">Sch</a>
        <ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
          <li><a href="">Sub 3.1</a></li>
          <li><a href="">Sub 3.2</a></li>
          <li><a href="">Sub 3.3</a></li>
          <li><a href="">Sub 3.4</a></li>
          <li><a href="">Sub 3.5</a></li>
        </ul>
    </li>
    <li><a onmouseover="montre('smenu4');" onmouseout="cache('smenu4');" href="">Sup</a>
        <ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
          <li><a href="">Sub 4.1</a></li>
          <li><a href="">Sub 4.2</a></li>
          <li><a href="">Sub 4.3</a></li>
        </ul>
    </li>
    <li><a onmouseover="montre('smenu5');" onmouseout="cache('smenu5');" href="">Kontakt</a>
        <ul id="smenu5" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">
          <li><a href="">Sub 5.1</a></li>
          <li><a href="">Sub 5.2</a></li>
          <li><a href="">Sub 5.3</a></li>
        </ul>
    </li>
  </ul>
</div>
</body>
</html>

geschrieben von Michael am 08.02.2008 - 15:04
du Brauchst nur diese beiden CSS Änderungen vornehmen

Die Pseudo-Klasse hover der Links unter der ID menu entfernen
HTML-Quelltext
1: 
2: 
3: 

div.menu a:hover {
 
}


und für die Untermenus anlegen
HTML-Quelltext
1: 
2: 
3: 
4: 

#smenu1 a:hover, #smenu2 a:hover, #smenu3 a:hover, #smenu4 a:hover, #smenu5 a:hover {
	background: #A7ACB2;
	border: 1px solid gray;
}


Michael

geschrieben von Danny am 08.02.2008 - 15:11
Ähm Michael,
möchtest du grad alte unbeantwortete Themen aufarbeiten?

geschrieben von Michael am 08.02.2008 - 16:46
Auch wenn vermutlich usense die Lösung bereits gefunden hat, eventuell hilfts jemanden Anderen...


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.