JS-Menü mit "CSS-Effekten"?

bennihaag · 27. Sep. 2008

Hallo,
hab irgendwo folgendes Menü gefunden:

Code:

<style type="text/css" media="screen">
<!--
#menu, #menu ul
{
	padding: 0px;
	margin: 0px;
}

#menu li
{
	border: 1px solid transparent;
	list-style-type: none;
	font-weight: bold;
	cursor: pointer;
	display: block;
}

#menu a
{
	text-decoration: none;
	font-weight: normal;
	padding-left: 10px;
	display: block;
}

#menu a:active, a:hover
{
    color:#FFFFFF;
    text-decoration:none;
	font-weight: normal;
	padding-left: 10px;
	display: block;
}
//-->
</style>

<script type="text/javascript">
<!--
function hideSub()
{
	if (!document.getElementsByTagName)
		return;

	var mnu    = document.getElementById('menu');
	var toplis = mnu.getElementsByTagName('li');

	for (var it = 0; it < toplis.length; it++)
	{
		var sublis = toplis[it].getElementsByTagName('li');

		for (var is = 0; is < sublis.length; is++)
			if (sublis[is].style)
				sublis[is].style.display = (toplis[it].className == 'show') ? 'block' : 'none';
	}
}

function mShow(Me)
{
	if (!Me.getElementsByTagName)
		return;

	var mylis = Me.getElementsByTagName('li');

	if (!mylis)
		return;

	for (j = 0; j < mylis.length; j++)
		mylis[j].style.display = (mylis[j].style.display == 'block') ? 'none' : 'block';
}
//-->
</script>


</head>

<body onload="hideSub();">

<ul id="menu">
  <li class="show" onclick="mShow(this);">Options 1
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 1</a></li>
    </ul>
  </li>

  <li onclick="mShow(this);">Options 2
    <ul>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 2</a></li>
    </ul>
  </li>

  <li onclick="mShow(this);">Options 3</li>

  <li onclick="mShow(this);">Options 4
    <ul>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 4</a></li>
    </ul>
  </li>
</ul>

Ist es bei diesem Menü möglich, dass die einzelnen Menüpunkte in sichtbaren Boxen bzw Zellen stehen, und diese dann beim rollover auch mit versch. Effekten versehen sind?
Lässt sich dabei auch verwirklichen, dass sich eine Grafik rechts oder links neben dem jeweiligen Menüpunkt beim rollover zeigt bzw danach wieder verschwindet?

Bin über jede Hilfe tierisch dankbar; habe leider null erfahrung in Kombination von CSS mit JavaScript...

anna55 · 27. Sep. 2008

Du kannst viel machen, hier mal ein Beispiel, die Farben musst Du natürlich so angeben, wie sie Dir gefallen und auch den Image-Pfad anpassen.

PHP:

#menu, #menu ul
{
	padding: 0px;
	margin: 0px;
	background: #eee;
	width:118px;
}

#menu li
{
	border: 1px solid transparent;
	list-style-type: none;
	font-weight: bold;
	cursor: pointer;
	display: block;
}

#menu a
{
	text-decoration: none;
	font-weight: normal;
	padding-left: 20px;
	display: block;
	background: #888;
	width:96px;
}

#menu a:hover
{
	color:#FFFFFF;
	text-decoration:none;
	font-weight: normal;
	padding-left: 20px;
	display: block;
	background: red url(images/pfeil.gif) no-repeat center left;
}

dkdenz · 28. Sep. 2008

Wieso muss man das immer so kompliziert machen...

bennihaag · 28. Sep. 2008

tausend dank

so ähnlich wollte ich das haben; aber leider kann ich jetzt über diese Methode noch nicht die Oberpunkte steuern, sondern nur die Unterpunkte zw. <ul> und </ul>.
"Options 1", "Options 2" etc. sollen sich farblich beim hover natürlich genauso verhalten - aber das wird über das JavaScript gesteuert, oder? wie genau wird das dann gemacht?

schonmal vielen Dank für jede Hilfe!!!

anna55 · 28. Sep. 2008

Geht auch über CSS, hier der gesamte Style:

PHP:

#menu a
{
	text-decoration:none;
	padding-left: 20px;
}

#menu a:hover
{
	display:block;
	text-decoration:none;
	padding-left: 20px;
	background: yellow url(images/pfeil.gif) no-repeat center left;
}

#menu, #menu ul
{
	padding: 0px;
	margin: 0px;
	background: #eee;
	width:118px;
}

#menu li
{
	border: 1px solid transparent;
	list-style-type: none;
	font-weight: bold;
	cursor: pointer;
	display: block;
}

#menu ul li a
{
	text-decoration: none;
	font-weight: normal;
	padding-left: 20px;
	display: block;
	background: #888;
	width:96px;
}

#menu ul li a:hover
{
	color:#FFFFFF;
	text-decoration:none;
	font-weight: normal;
	padding-left: 20px;
	display: block;
 	background: red url(images/pfeil.gif) no-repeat center left;
}

Edit: Und im body fügst Du bei den Menüpunkten ein

Code:

 <li class="show" onclick="mShow(this);">[COLOR="red"]<a href="#">[/COLOR]Options 1[COLOR="red"]</a> [/COLOR]

bennihaag · 29. Sep. 2008

ahh danke, klappt super.
Noch 2 Fragen bzw. Probleme hab ich:

1)
Leider ist die Darstellung im Firefox und IE sehr verschieden; im IE sind die einzelnen Listenelemente viel höher (also mehr Fläche um den Text rum; im Firefox ist das Element nur so hoch wie der Text) und im IE ist ein sehr großer hässlicher Abstand zwischen den einzelnen (<li>)Unterpunkten. Gibts da ne einfache Möglichkeit, das zu beheben und dem Firefox anzupassen?

2) gehört aber eher zu Javascript als zu CSS:
jetzt wird immer, wenn ein Unterpunkt in dem Menü angeklickt wird, die ganze "Unterpunkte"-Gruppe geschlossen. Kann die einfach "geöffnet" bleiben? Man kann sie ja manuell wieder schließen, indem man auf den Oberpunkt klickt.
Und: geht es sogar, dass immer nur maximal eine Unterpunkte-Gruppe geöffnet sein kann? Also sobald Option 2 angeklickt wird, muss sich Option 1 schließen etc.?

Bin für jede Hilfe im Voraus schonmal sehr dankbar...

anna55 · 29. Sep. 2008

zu 1)
CSS

PHP:

#menu a, #menu .single
{
	text-decoration:none;
	padding-left: 20px;
	color: #000;
}

#menu a:hover
{
	display:block;
	text-decoration:none;
	padding-left: 20px;
	background: yellow url(images/pfeil.gif) no-repeat center left;
}

#menu, #menu ul
{
	padding: 0px;
	margin: 0px;
	background: #eee;
	width:118px;
}

#menu li
{
	border: 1px solid transparent filter: alpha(opacity=80);

	list-style-type: none;
	font-weight: bold;
	cursor: pointer;
	display: block;

}

#menu ul li a
{
	text-decoration: none;
	font-weight: normal;
	padding-left: 20px;
	display: block;
	background: #888;
	width:96px;
}

#menu ul li a:hover
{
	color:#FFFFFF;
	text-decoration:none;
	font-weight: normal;
	padding-left: 20px;
	display: block;
 	background: red url(images/pfeil.gif) no-repeat center left;
}

HTML

PHP:

<ul id="menu">
  <li class="show" onclick="mShow(this);"><a href="#">Options 1</a>
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 1</a></li>
    </ul>
  </li>

  <li onclick="mShow(this);"><a href="#">Options 2</a>
    <ul>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 2</a></li>
    </ul>
  </li>

  <li class="single">Options 3

  </li>

  <li onclick="mShow(this);"><a href="#">Options 4</a>
    <ul>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 4</a></li>
    </ul>
  </li>
</ul>

Option 3 hat keine Unterpunkte, deshalb erfährt es eine extra Behandlung.

In Sachen JS müssten die JS-Fachleute etwas sagen.

bennihaag · 30. Sep. 2008

vielen dank

habs zwar noch nicht ausprobiert - aber warum verwendest du alpha(opacity=..), um die höhe des listenelements anzupassen?

anna55 · 30. Sep. 2008

bennihaag schrieb:
..warum verwendest du alpha(opacity=..), um die höhe des listenelements anzupassen?

Nun, Dein li-Element ist mit border:transparent notiert. Damit das für den IE6 funktioniert, brauchst Du einen Filter.
Stu Nicholls | CSSplay | Transparent Borders in IE

Du kannst den Rand aber auch weglassen.

Was Deine Fragen zur JS-Funktion angeht: Willst Du nicht vielleicht gleich ein Menü nehmen, dass Deine Anforderungen erfüllt?

Ich weiß nicht, ob Du bewusst darauf geachtet hast, dass das Menü, das mit JavaScript funktioniert, auch benutzbar und zu sehen ist (einschließlich der Unterpunkte), wenn JS deaktiviert ist. Falls ja, dann schau Dich doch mal auf dieser Seite um. Das erste Menü im grünen Kasten sollte für Dich perfekt sein. Und wie Du unterschiedliche Farben und kleine Grafiken reinbekommst, weißt Du ja jetzt.

JS-Menü mit "CSS-Effekten"?

bennihaag

New member

anna55

Moderator

dkdenz

New member

bennihaag

New member

anna55

Moderator

bennihaag

New member

anna55

Moderator

bennihaag

New member

anna55

Moderator