Drop Down

YetiZwerg · 18. Februar 2009

Hi ich hab mal wieder ein Problemchen...

Auf meiner Seite

habe ich auf der linken Seite die Navi...

Jetzt möchte ich, dass nur die Oberbegriffe zu sehen sind.

also: --- shooting --- usw.

und man durch Klicken auf diese Felder dann die darunter liegenden Spiele aufgelistet bekommt...

Wäre wirklich sehr nett, wenn mir da jemand helfen könnte...

mkG YetiZwerg

kanufrosch · 18. Februar 2009

warte mal ich gucke mal irgendwo hatte ich da was war mit javascript

maulepan · 18. Februar 2009

ich hab leider nur den code, von meiner seite.
Das ist ein dropdownmenü mit hover effect, aber ich glaube, das könnte man abändern

HTML

<!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" xml:lang="de" lang="de">




<head>
    <title>Drop DownMenü</title>
    <style>
     <!--
#menuebox {
    position: relative;
    height: 30px;
    }
.stupidie {
    display: none;
    }
#menue {
    position:absolute;
    top: 5px;
    left: 0;
    z-index: 200;
    }




#menue .aussen {
    float: left;
    display: block;
    overflow: hidden;
    width: 8em;
    height: 1.3em;
    font-weight: bold;
    text-align: center;
    background-color: #3547A2;
    color: #FFFFFF;
    border: 1px solid;
    border-color: #6B81F0;
    }
#menue .aussen:hover {
    height: auto;
    background-color: #628CFF;
    color: #fff;
    }




a.innen-1 {
    margin-top: 2px;
    }
a.innen,
a.innen-1 {
    display: block;
    width: 7.9em;
    padding: 2px 0;
    text-decoration: none;
    font-weight: normal;
    border-bottom: 1px solid #0548FF;
    background-color: #0540FF;
    color: #FFFFFF;
    }
a.innen:hover {
    display: block;
    width: 7.9em;
    padding: 2px 0;
    text-decoration: none;
    font-weight: normal;
    border-bottom: 1px solid #0548FF;
    background-color: #0831BA;
    color: #FFFFFF;
    }




a.innen-1:hover {
    display: block;
    width: 7.9em;
    padding: 2px 0;
    text-decoration: none;
    font-weight: normal;
    border-bottom: 1px solid #0548FF;
    background-color: #0831BA;
    color: #FFFFFF;
    }







span.menutag {
    display: block;
    cursor: default;
    }
     -->
    </style>
</head>




<body>
 <div id="menuebox">




    <div id="menue">
        <div class="aussen">
<span class="menutag">Titel</span>
<a class="innen-1" href="#">Untermen&uuml;</a>
<a class="innen" href="#">Untermen&uuml;</a>
<a class="innen" href="#">Untermen&uuml;</a>
<a class="innen" href="#">Untermen&uuml;</a>
<a class="innen" href="#">Untermen&uuml;</a>
<a class="innen" href="#">Untermen&uuml;</a>
        </div>
        <div class="aussen">
<span class="menutag">Titel</span>
<a class="innen-1" href="#">Untermen&uuml;</a>
<a class="innen" href="#">Untermen&uuml;</a>
<a class="innen" href="#">Untermen&uuml;</a>
        </div>




        </div>
    </div>
</body>
</html>

Alles anzeigen

YetiZwerg · 18. Februar 2009

ich fänds spitze, wenn das ohne Hover wäre... einfach und konservatives draufklicken^^

mkG YetiZwerg

hendrik232 · 18. Februar 2009

<a class="postlink" href="http://moofx.mad4milk.net/#introduction">http://moofx.mad4milk.net/#introduction</a>

Ist eine gute Javascript Bibliothek dazu.

Wenn kein JS aktiviert ist, dann ist einfach alles offen.

mfg Hendrik232

kanufrosch · 18. Februar 2009

also ich hab leider keins gefunden sorry

YetiZwerg · 18. Februar 2009

geht das nicht einfacher???
in sprachen, die ich auch verstehe (HTML / PHP)???

sry... aber ich habe im mom so viel um die Ohren ich habe kz mich jetzt noch mir JS auseinander zu setzen...

also meine Frage: Geht das einfacher und, könnt ihr mir nen fertigen Code bzw Code-Schnipsel geben?

mkG YetiZwerg

maulepan · 18. Februar 2009

klar geht sowas auch mit php, aber mit javascript geht es am schönsten, und ich glaube kaum, das hier jemand lust hat, dir einen code vorzukauen

kanufrosch · 18. Februar 2009

ich weis das es mit java geht und glaub sogar mit css aber genau weis ich net bsp hier hab jetzt leider keine zeit den quelltext durch zu arbeiten

YetiZwerg · 18. Februar 2009

ok will mal Klartext sprechen:

ich will auf meiner Seite mit diesem Design oben im Header die Links durch die Kathegorien ersetzen, die ich hier habe.

beim draufklicken sollen dann die untergeordneten Spiele angezeigt werden, die dann in einem Frame geöffnet werden.

dieser Frame soll inhalt heißen...

ganz einfach vorzustellen, doch schlimm in der Umsetzung... ich bin jetzt schon die ganze Zeit am googlen und auch den Links am folgen, doch iwie... ka... es kommt nichts, was iwie passt...

desshalb... postet lieber erst morgen oder iwann, aber schickt mir bitte einen code... ich habe im mom echt viel zu tun... die Prüfungen stehen vor der Tür...

das wäre echt sehr nett...

mkG YetiZwerg

hendrik232 · 18. Februar 2009

Mein Link ist ein fertiger Codeschnipsel.
Du musst ihn nur noch einbauen :wink:

mfg Hendrik232

YetiZwerg · 18. Februar 2009

Zitat von "hendrik232"

Mein Link ist ein fertiger Codeschnipsel.
Du musst ihn nur noch einbauen :wink:

mfg Hendrik232

das tool hat 4000 Zeilen... ich rede von einfach...

lauras · 21. Februar 2009

schau mal hier nach: http://www.javarea.de, dort gibts JS-Menues zum angucken und kopieren, die Codes sind nicht besonders kompliziert, manche funktionieren auch mit CSS. Hab mal ein Menue gesucht und innerhalb von 15 Minuten gefunden und eingebaut, hat einwandfrei funktioniert...

kanufrosch · 21. Februar 2009

ein sehr gutes z.b. <a class="postlink" href="http://www.javarea.de/index.php3?opencat=Javascript&subcat=Navigation&id=113">http://www.javarea.de/index.php3?openca ... ion&id=113</a>
<a class="postlink" href="http://www.javarea.de/index.php3?opencat=Javascript&subcat=Navigation&id=470">http://www.javarea.de/index.php3?openca ... ion&id=470</a>

lauras · 21. Februar 2009

nunja, das erste finde ich eher lästig, außerdem dachte ich er wollte ohne hover?

ich denk dafür ist dieses hier am besten geeignet:

http://www.javarea.de/index.php3?opencat=Javascript&subcat=Navigation&id=470

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<title>Foldoutmenue Vertical</title>




<style type="text/css" media="screen">
<!--
body
{
	font-family: Verdana, sans-serif;
	font-size: 14px;
	overflow: auto;
	padding: 10px;
	margin: 0px;
}




#menu, #menu ul
{
	padding: 0px;
	margin: 0px;
}




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




#menu a
{
	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>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 2</a></li>
    </ul>
  </li>




  <li onclick="mShow(this);">Options 3
    <ul>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 3</a></li>
    </ul>
  </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>




</body>
</html>

Alles anzeigen

ist nicht sonderlich kompliziert, und kürzer wird es wohl kaum gehen...

YetiZwerg · 22. Februar 2009

danke danke... ich benutze im mom noch die select-Version, da ich sonst nicht genug Platz habe... mus mir da noch was ausdenken... obwohl ich ja lieber eines der geposteten hätte...

mkG YetiZwerg

lauras · 22. Februar 2009

das ganze gibts auch in waagerecht..

YetiZwerg · 22. Februar 2009

doch auch in der Waagerechten habe ich zu wenig Platz... ich könnte natürlich auch das Impressum und den Partner in den footer stecken, dann habe ich im Head mehr Platz...

mkG YetiZwerg

lauras · 22. Februar 2009

musst du entscheiden, denke man kann das ganze auch verkleinern, außerdem hast du ja in der senkrechten am anfang auch nur soviel, wie du oberpunkte hast, vllt kann man das iwie einstellen, dass man immer nur eins aufhaben kann?

YetiZwerg · 22. Februar 2009

jetzt habe ich folgendes Prob...

Wenn ich eines Der Menüs "einbaue" (funzt alles) und dann auf einen der Links klicken will, so hüpft es..

ich habe die Seite Testweise (für euch zu sehen) auf einen Free-Webspace gelegt...

schaut es euch mal an... wie bekomme ich das hüpfenweg??? der CSS-Code, der für das Menu in Frage kommt liegt alles auf der Seite im Quellcode...

Seite hier begutachten

mkG YetiZwerg

Drop Down

Jetzt mitmachen!

Teilen