Archivlink: javarea.de Forum > JavaScript > Foldoutmenue Horizontal
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Foldoutmenue Horizontal

Pages: [1]
geschrieben von semrok303 am 21.10.2005 - 22:43
Habe mich für ein Foldoutmenue Horizontal von javarea entschieden und es in meiner Webseite eingebastelt. Habe ein paar Probleme mit dem Queeeelltext.
1. Beim Starten der Seite ist gleich ein Menuefeld offen. Wo liegt mein Fehler?
2. Der Listenbreite der 4 Menuelisten ist leider nicht für jede eizelne Liste definierbar sondern nur global für alle. Das ist aber schlecht da die Liste Shop rein optisch zu weit von den andern Listen entfernt ist. Wie kann ich die Listenfelder einzeln in der Breite verändern?
3. Kann man die Background Farbe halbtransparent gestalten? Wenn ja , wie?

Wäre echt super wenn sich jemand meiner Sorgen annimmt........

Danke und keep smile


<html>
<head>
<title>Menue</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<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: 20px; padding: 0; font: 14pt Trebuchet MS, sans-serif;}

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

div.menu {
position: absolute;
width: 600px;
top: 168px;
left: 150px;
z-index: 3;
}

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

div.menu a {
margin: 0 ;
height: 20px;
display: block;
text-align: center;
font-weight: normal;
border: 0px solid black;
text-decoration: none;
color: #000;
background: #fff;
}

div.menu a:hover {
background: white;
border:0px solid black;
text-decoration: underline;
color: red;
}

#smenu1, #smenue2, #smenu3, #smenu4 {
display: none;
float: left;
width: 120px;
font-size: 12px;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a {
font-weight: blod;
border-top: 0px solid black;
}
-->
</style>
</head>


<div class="menu" style="width: 747; height: 128">
<dir>

<li><a onmouseover="montre('smenu1');" onmouseout="cache('smenu1');" href="Stadtinfo.htm">Tourismus</a><ul style="display: none;" id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href=""><font size="2">Unsere Stadt</font></a></li>
<li><a href=""><font size="2">Leistungen</font></a></li>
<li><a href=""><font size="2">Aktivitäten</font></a></li>
<li><a href=""><font size="2">Unterkünfte</font></a></li>
</ul></li>

<li><a onmouseover="montre('smenu2');" onmouseout="cache('smenu2');" href="Stadtinfo.htm">Veranstaltungen</a><ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href=""><font size="2">Kulturquartier</font></a></li>
<li><a href=""><font size="2">Regional</font></a></li>
</ul></li>

<li><a onmouseover="montre('smenu3');" onmouseout="cache('smenu3');" href="Stadtinfo.htm">Shop</a><ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href=""><font size="2">Literatur</font></a></li>
<li><a href=""><font size="2">Souvenires</font></a></li>
</ul></li>

<li><a onmouseover="montre('smenu4');" onmouseout="cache('smenu4');" href="Stadtinfo.htm">Ticket Service</a><ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
<li><a href=""><font size="2"Kulturquartier</font></a></li>
<li><a href=""><font size="2"Deutschlandweit</font></a></li>
</ul></li>

</div>
</html>

geschrieben von weisnix am 22.10.2005 - 17:52
Hallo,

ich habe keine Ahnung warum das so ist, aber wenn ich das style="display: none;" in das zweite ul-Tag setze ist das Menü geschlossen. Irgend wie habe ich da den Fehler nicht gefunden.

Die Breite läst sich durch die jeweiligen li-Tags Ändern. <li style="width: 120;">

Gruß

geschrieben von semrok303 am 23.10.2005 - 15:23
Erstmal danke für die kleinen hilfen!!!!!!!!!!!!!!!!!
Habe aber festgestellt, das die Untermenue föllig aus der Linie geraten sind.
Habe versucht mit text-align: center oder text-align: left das Problem zu lösen, ist leider nichts passiert. Nun wieder ????????????????? im Hirn. Wer kann dies richten?

geschrieben von René am 23.10.2005 - 17:50
Hallo semrok,

wie ist es damit?

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: 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Menue</title>

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

function cache(id)
{
	with (document)
	{
		if (getElementById)
			getElementById(id).style.display = 'none';
		else if (all)
			all[id].style.display = 'none';
		else if (layers)
			layers[id].display = 'none';
	}
}
//-->
</script>

<style type="text/css" media="screen">
<!--
body
{
	font-family: sans-serif;
	border-width: 0px;
	overflow: auto;
	padding: 20px;
	margin: 0px;
}

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

div.menu
{
	position: absolute;
	height: 130px;
	width: 600px;
	left: 150px;
	z-index: 3;
	top: 168px;
}

div.menu li
{
	font-size: 15px;
	width: 100px;
	float: left;
}

div.menu a
{
	background-color: #fff;
	text-decoration: none;
	font-weight: bold;
	display: block;
	height: 20px;
	margin: 0px;
	color: #000;
}

div.menu a:hover
{
	text-decoration: underline;
	color: #f00;
}

#smenu1, #smenu2, #smenu3, #smenu4
{
	padding-top: 10px;
	display: none;
	width: 110px;
	float: left;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a
{
	font-size: 11px;
}
//-->
</style>

</head>
<body>

<div class="menu">
  <ul>
    <li style="width: 150px;" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');"><a href="Stadtinfo.htm">Tourismus</a>

      <ul id="smenu1">
        <li><a href="">Unsere Stadt</a></li>
        <li><a href="">Leistungen</a></li>
        <li><a href="">Aktivit&auml;ten</a></li>
        <li><a href="">Unterk&uuml;nfte</a></li>
      </ul>
    </li>
    <li style="width: 205px;" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');"><a href="Stadtinfo.htm">Veranstaltungen</a>

      <ul id="smenu2">
        <li><a href="">Kulturquartier</a></li>
        <li><a href="">Regional</a></li>
      </ul>
    </li>
    <li style="width: 110px;" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');"><a href="Stadtinfo.htm">Shop</a>

      <ul id="smenu3">
        <li><a href="">Literatur</a></li>
        <li><a href="">Souvenires</a></li>
      </ul>
    </li>
    <li style="width: 130px;" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');"><a href="Stadtinfo.htm">Ticket Service</a>

      <ul id="smenu4">
        <li><a href="">Kulturquartier</a></li>
        <li><a href="">Deutschlandweit</a></li>
      </ul>
    </li>
  </ul>
</div>

</body>
</html>

geschrieben von weisnix am 23.10.2005 - 18:09
oder so:

ja da habe ich die falsche!

Edit: geändert

geschrieben von René am 23.10.2005 - 18:29
Hast du dich mit dem Anhang im Thread geirrt?

geschrieben von semrok303 am 23.10.2005 - 20:44
Danke an euch , hat alles geklappt. Bin stolz auf euch . Bye Bye

geschrieben von semrok303 am 25.10.2005 - 23:52
Hallo,
nach meiner überprüfung eurer arbeit war ich ja echt happy, nachdem das script eingebaut hatte war es dann wieder vorbei. Habe probleme mit mein IFrame der direkt unter der Menulist liegt.
Die Listenfelder werden beim Mouse kontakt zwar geöffnet aber bleiben es nicht. Was kann man tun?
mfg


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