• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Aufklapp Menü in einem div

P

Paiden

Neues Mitglied
ich such eig sowas wie ne vertikale navi wo ich draufklicken muss um den verstecken darin enthaltenen div container einzublenden...

so ziemlich genau das was hier auf dieser website (oben rechts)zu sehen ist.

Microsoft Download Center

Ich weiß das es über html und css funktionieren kann...


mfg Paiden


=====================================================

Bearbeitungsstatus:

so das mit dem aufklappmenü habe ich soweit hinbekommen, ist es irgendwie so angepasst das ich nur 3 solcher container erstellen kann -.-

worauf muss ich achten? und wie füge ich weitere kategorien relativ einfach hinzu?

HTML: 
<?phpheader("content-type: text/html");
$white_list=array('foo','bar','foobar');
if(!isset($_GET['menu']) || !in_array($_GET['menu'],$white_list))  
$menu_default='foo';else  $menu_default=$_GET['menu'];?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Menü-Test</title>

<script type="text/javascript">var currentshown = 'none';
function show(id){  

// Wenn geöffnetes Menü geklickt...  
if(show==currentshown) {    

//dann schließes es, ...    
document.getElementById('menu_'+currentshown).style.display='none';    

// ...merke dir, dass nix mehr offen is ...    
currentshown='none';      

//... und mach sonst nix weiter    
return;   }
  
// Wenn ein Menü offen ist, ...  
if(currentshown != 'none')    

// ... schließe das geöffnete    
document.getElementById('menu_'+currentshown).style.display='none';
  
// Öffne das gewünschte Menü  
document.getElementById('menu_'+id).style.display='block';  

// Merke dir das neue geöffnete Menü  currentshown=id;}
function show(id){  if(show==currentshown) return; if(currentshown != 'none')    

document.getElementById('menu_'+currentshown).style.display='none';  
document.getElementById('menu_'+id).style.display='block';  
currentshown=id;}

</script>
</head>

<body>
<h1>Menutest</h1>
<ul>  
<li><a href="#" onclick="show('foo');">foo-Menü</a>    
<ul id="menu_foo" style="display: none;">      
<li><a href="#">foo 1</a></li>      

<li><a href="#">foo 2</a></li>      
<li><a href="#">foo 3</a></li>      
<li><a href="#">foo 4</a></li>    
</ul>  
</li>  

<li><a href="#" onclick="show('bar');">bar-Menü</a>    
<ul id="menu_bar" style="display: none;">      
<li><a href="#">bar 1</a></li>      
<li><a href="#">bar 2</a></li>      
<li><a href="#">bar 3</a></li>      
<li><a href="#">bar 4</a></li>      
<li><a href="#">bar 5</a></li>    
</ul>  
</li>  

<li><a href="#" onclick="show('foobar');">foobar-Menü</a>    
<ul id="menu_foobar" style="display: none;">      
<li><a href="#">foobar 1</a></li>      
<li><a href="#">foobar 2</a></li>      
<li><a href="#">foobar 3</a></li>    
</ul>  
</li>

</ul>

<script type="text/javascript">show('<?=$menu_default?>');</script>

</body>
</html>


mfg Paiden
 
Zuletzt bearbeitet:
Werbung:
Hallo,

also das ist mit Javascript gemacht was die css classe ändert.
das mit jquery wird das natürlich etwas schicker bzw. gleich wie bei deiner Wunschseite :O)
ca. in der mitte ist ein Beispiel: .slideToggle() – jQuery API

Nun zu deinem, begrenzt ist da nichts.
da sind zwei sachen, einmal das per Link auf die Seite schon ein eine beliebiges aufgeklappt machen kannst, das ist der obere PHP teil mit
PHP: 
$white_list=array('foo','bar','foobar');
einfach die neuen eintragen oder das ganze löschen wenn das nicht brauchst.

Neues Menü muss halt nur die gleich strucktur haben, sonnst kannst 100te machen.
nur die beiden XXXXX must ersetzen durch ein eindeutiges wort, dies dann auch oben in den php mit rein kommt
Code: 
[COLOR=#000080]<li>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000FF]"#"[/COLOR] onclick=[COLOR=#0000FF]"show('XXXXX');"[/COLOR]>[/COLOR]foobar-Menü[COLOR=#008000]</a>[/COLOR]     [COLOR=#000080]
<ul id=[COLOR=#0000FF]"menu_XXXXX"[/COLOR] style=[COLOR=#0000FF]"display: none;"[/COLOR]>[/COLOR]       [COLOR=#000080]
<li>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000FF]"#"[/COLOR]>[/COLOR]foobar 1[COLOR=#008000]</a>[/COLOR][COLOR=#000080]</li>[/COLOR]       [COLOR=#000080]
<li>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000FF]"#"[/COLOR]>[/COLOR]foobar 2[COLOR=#008000]</a>[/COLOR][COLOR=#000080]</li>[/COLOR]       [COLOR=#000080]
<li>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000FF]"#"[/COLOR]>[/COLOR]foobar 3[COLOR=#008000]</a>[/COLOR][COLOR=#000080]</li>[/COLOR]     [COLOR=#000080]
</ul>[/COLOR]   [COLOR=#000080]
</li>[/COLOR]
Cheffchen
 
genau das habe ich probiert gehabt. mit eindeutigen wörtern wie "box1" "boxeins" "eins" usw...

aber wenn ich das bei beiden stellen ändere zeigt mir mein container nix an -.-


mfg Paiden


==================

AAAAAAAAAAH die Glühbirne ist angesprungen^^ ich hab mein Fehler erkannt! ich danke dir!

jetzt fehlt eigentlich nur noch das I-tüpfelchen und zwar wenn ich auf eine kategorie klicke die gerade offen ist das ich sie auch wieder schließen kann, und evtl. einer art animation das es langsam ausfährt... der code .slideToggle(500) funktioniert leider nicht.


mfg Paiden
 
Zuletzt bearbeitet:
Werbung:
Cheffchen schrieb:
Hallo,

musst natürlich jquery einbinden, hier mal was fertiges:

Easy to Style jQuery Drop Down Menu Tutorial | Queness
bei See the Demo siehst das in Aktion und darunter gibts alles zum Download, wobei alles relativ ist, eine js Datei und halt in der index die befehle.

Cheffchen

EDITE: hier noch was einfaches fertiges: Edit this Fiddle - jsFiddle
Zum Vergrößern anklicken....


ja genauso meinte ich! aber ich bekomms nicht hin beim zweiten link das einzubauen -.- bei mir bleibt der inhalt dann versteckt!

help pls.


mfg Paiden
 
Hallo,
Bahnhof, sag ich mal, wie beim zweiten bleibt versteckt.

was nimmst nun, ein link wäre nicht schlecht.
Die beiden die ich gezeigt habe sind sehr einfach und ohne link weis nich nicht wo was falsch gemacht hast.

Cheffchen
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben