Frage bezüglich Navi /Css

mfwenzel · 16.04.2009

Moin moin,
folgende Frage:

Ich hätte gerne eine reine CSS-Navi mit einem dropdown Effekt.
Nun habe sind alle, die ich per google gefunden habe mit diesem hover Effekt belastet, ich möchte aber, dass die Unterpunkte "bestehen" bleiben.

Man riet mir das ganze mit a:ative und dann die div's mit display zu formatieren. Nur: Wie geht das genau?

Danke schon mal im vorraus!

LG
maddy

Giraffengesicht · 16.04.2009

AW: Frage bezüglich Navi /Css

versuchs mal hiermit:
Dynamic Drive DHTML Scripts- Switch Menu

mfwenzel · 16.04.2009

AW: Frage bezüglich Navi /Css

ja so was meinte ich, vielen Dank!

mfwenzel · 16.04.2009

AW: Frage bezüglich Navi /Css

hm ist leider doch nicht das, was ich gesucht habe...

Castordesigns · 16.04.2009

AW: Frage bezüglich Navi /Css

lord_of_terror_ffm schrieb:
hm ist leider doch nicht das, was ich gesucht habe...

beschreibe mal genau was du suchst und wir helfen dir weiter

mfwenzel · 17.04.2009

AW: Frage bezüglich Navi /Css

ja irgendwie schon das, was Giraffengesicht gepostet hat, aber etwas einfacher gestrickt...geht das? ^^

Also irgendwie... bin ich noch nicht glücklich damit

eine Frage vielleicht... Wie bekomme ich es hin, dass ein DIV ..N U R.. angezeigt wird, wenn der übergeordnete Listenpunkt acitve ist?

Castordesigns · 17.04.2009

AW: Frage bezüglich Navi /Css

lord_of_terror_ffm schrieb:
ja irgendwie schon das, was Giraffengesicht gepostet hat, aber etwas einfacher gestrickt...geht das? ^^

Also irgendwie... bin ich noch nicht glücklich damit

eine Frage vielleicht... Wie bekomme ich es hin, dass ein DIV ..N U R.. angezeigt wird, wenn der übergeordnete Listenpunkt acitve ist?

was meinst du mit active?
a:active?
oder rollover?
oder wenn man auf der Entsprechenden Seite ist?

mfwenzel · 17.04.2009

AW: Frage bezüglich Navi /Css

also: ich habe folgende navi

Link1
Link2
Link3

wenn ich jetzt auch Link1 bin (also a:active), dann soll submenu Link1.1 kommen also der div "Submenu" soll nur kommen, wenn Link1 active ist...

Doitsu · 17.04.2009

AW: Frage bezüglich Navi /Css

Kleine frage: Warum soll es ein reiner CSS-Code sein? Mit paar Zeilen Javascript ist das schnell gemacht..
Oder geht es darum, falls derjenige Javascript aus hat? Wenn ja, kA.. Mit hover bekomm ich es auch noch hin, aber so ganz ohne Javascript wirst du bei active nicht weiter kommen, weil das :active element fuer Listen nicht geht, bzw. geht schon, aber sobald man die Maus los laesst wars das auch. ^^

Jedenfalls hier ein kleiner code, falls es mit Javascript auch akzeptabel ist..

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>
<style type="text/css">
<!--
div#nav li { list-style-type:none; }
-->
</style>
<script type="text/javascript">
//<!--

var oldnav = "";
function show_subnav(id){
	var subnav = document.getElementById(id);
	if (subnav.style.display = 'none'){
		subnav.style.display = 'block';
		if(oldnav != "") {
			oldnav.style.display = "none";
		}
	} else if (subnav.style.display == 'block'){
		subnav.style.display = 'none';
	}
	oldnav = subnav;
}

//-->
</script>
</head>
<body>
<div id="nav">
  <ul>
    <li> <a href="javascript:show_subnav('nav1')">1</a>
      <ul id="nav1" style="display:none;">
        <li>punkt 1</li>
        <li>punkt 2</li>
      </ul>
    </li>
    <li> <a href="javascript:show_subnav('nav2')">2</a>
      <ul id="nav2" style="display:none;">
        <li>punkt 1</li>
        <li>punkt 2</li>
      </ul>
    </li>
    <li> <a href="javascript:show_subnav('nav3')">3</a>
      <ul id="nav3" style="display:none;">
        <li>punkt 1</li>
        <li>punkt 2</li>
      </ul>
    </li>
  </ul>
</div>
</body>
</html>

stb_87 · 17.04.2009

AW: Frage bezüglich Navi /Css

Doitsu schrieb:
Kleine frage: Warum soll es ein reiner CSS-Code sein? Mit paar Zeilen Javascript ist das schnell gemacht..
Oder geht es darum, falls derjenige Javascript aus hat? Wenn ja, kA.. Mit hover bekomm ich es auch noch hin, aber so ganz ohne Javascript wirst du bei active nicht weiter kommen, weil das :active element fuer Listen nicht geht, bzw. geht schon, aber sobald man die Maus los laesst wars das auch. ^^

Jedenfalls hier ein kleiner code, falls es mit Javascript auch akzeptabel ist..

Du kannst auch mit PHP eine kleine Abfrage einbauen, das die entsprechende aktive Kategorie ausliest und dem Tag eine entsprechende Klasse zuweist:

Code:

php ->

$aktiv = $_GET['active'] ($_POST post geht auch)

und im HTML dann so:

<a href="#" class="<?php $active ?>">...</a>

Selbstverständlich musst du dann einen entsprechenden Parameter entweder an den Link hängen oder über ein verstecktes input-Feld...

Mal also grober Anstoß...

Doitsu · 17.04.2009

AW: Frage bezüglich Navi /Css

.. was bedeuten wuerde, das bei jedem Klick auf einem Menue die Seite neu geladen werden muesste - stell ich mir sehr Benutzerfreundlich vor, vor allem bei Groesseren Projekten ..
Da dann doch lieber die 8 Zeilen JS und fuer leute, die kein JS verwenden eine CSS-Hover alternative.

MfG..

stb_87 · 17.04.2009

AW: Frage bezüglich Navi /Css

Aso, sorry, war gedanklich ganz woanders.

Da hilft in der Tat nur etwas JS bzw. AJAX

Castordesigns · 17.04.2009

AW: Frage bezüglich Navi /Css

lord_of_terror_ffm schrieb:
also: ich habe folgende navi

Link1

Link2

Link3

wenn ich jetzt auch Link1 bin (also a:active), dann soll submenu Link1.1 kommen also der div "Submenu" soll nur kommen, wenn Link1 active ist...

du scheinst da etwas zu verwechseln...
du sprichst immer von a:active
active bedeutet aber, dass es nur so lange erscheint, wei du die Maus gedrückt hältst, da es aber natürlich ein link ist und du somit auf eine SEite kommst ist das evt. auch der gewünschte effekt.

Ich habe dir mal den von dir beschriebenen Effekt nur mit CSS gebaut (a:active)

(headernavigation)

auf der Seite, auf die du dann geleitet wirst muss man natürlich die Box auf display:block stellen...

ist dies der gewünschte Effekt?

mfwenzel · 18.04.2009

AW: Frage bezüglich Navi /Css

danke erst mal an alle Antworten.
Prinzipiell habe ich gegen js gar nix, nur hab ich 0 Ahnung davon. ^^

@ so isses (fast) perfekt, geht das noch, dass auch mehrer Listenelemente eingeblendet werden können und nicht nur einer?

@ du hast recht, a:active ist das falsche, glaube visited wäre in dem Falle richtig gewesen.

Castordesigns · 18.04.2009

AW: Frage bezüglich Navi /Css

Das ist eignelich das selbe wie schon gepostet wurde nur, dass man mehrere Menupunkte anwählen kann ohne dass der andere wieder verschwindet. (auch sonst ist der Code kürzer)

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html>
<head>
<style type="text/css">
<!--
.menuCategory {
   font-weight: bold;
   background-color: #F2F3F5;
   color: #036;
   padding: 2px;
  /*/*/border-top: 1px dashed #99ADC2;/* */
  /*/*/margin-top: 1px;/* */
}
-->
</style>

<script language="JavaScript" type="text/javascript">
function toggle(obj) {
  with (document.getElementById(obj).style) { display = (display == 'none') ? 'block' : 'none'; }
}
</script>

</head>

<body>

<a href="javascript:toggle('menu_1')"><div class="menuCategory">menu item 1</div></a>
<div id='menu_1'><div class='menuTopic'>content to menu item 1</div></div>

<a href="javascript:toggle('menu_2')"><div class="menuCategory">menu item 2</div></a>
<div id='menu_2'><div class='menuTopic'>content to menu item 2</div></div>

</body>
</html>

nennt sich übrigens ein "Switch Menu"

mfwenzel · 29.04.2009

AW: Frage bezüglich Navi /Css

nahezu perfekt...

eine kleine Bitte noch, wie bekomme ich das hin, dass das Menü am Anfang geschlossen ist? Also nur die Überpunkte sichtbar sind?

Lieben Dank!

Maddy

mfwenzel · 04.05.2009

AW: Frage bezüglich Navi /Css

schafft des keiner? ich hab 0 plan von java ^^

Doitsu · 04.05.2009

AW: Frage bezüglich Navi /Css

1. Javascript, nicht Java.
2. ist das eher CSS, style="display:none;" ?!
in den div menu_x mit rein.

mfwenzel · 05.05.2009

AW: Frage bezüglich Navi /Css

Hab das jetzt in den Submenu gemacht mit dem display:none

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html>
<head>
<style type="text/css">
<!--
.menuCategory {
   font-weight: bold;
   background-color: #F2F3F5;
   color: #036;
   padding: 2px;
  /*/*/border-top: 1px dashed #99ADC2;/* */
  /*/*/margin-top: 1px;/* */
}
#menu_1 {
    display: none;
}
-->
</style>

<script language="JavaScript" type="text/javascript">
function toggle(obj) {
  with (document.getElementById(obj).style) { display = (display == 'none') ? 'block' : 'none'; }
}
</script>

</head>

<body>

<a href="javascript:toggle('menu_1')"><div class="menuCategory">menu item 1</div></a>
<div id='menu_1'><div class='menuTopic'>content to menu item 1</div></div>

<a href="javascript:toggle('menu_2')"><div class="menuCategory">menu item 2</div></a>
<div id='menu_2'><div class='menuTopic'>content to menu item 2</div></div>

</body>
</html>

Jetzt noch eine Kleinigkeit:

Wenn ich den Link "menucategory" anklicke, dann muss ich ihn ZWEI mal anklicken, bis sich das subemnu öffnet... woran könnte da liegen?

Doitsu · 05.05.2009

AW: Frage bezüglich Navi /Css

schreib das stylesheet genau in den tag rein, dann hat sich das auch erledigt.
edit:
oder ..

Code:

  with (document.getElementById(obj).style) { display = (display == 'none'[COLOR="Red"] || display==''[/COLOR]) ? 'block' : 'none'; }