PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : [HTML/CSS/JS] Aufklappbares Menü (Anleitung)



CeleronD
21.05.2011, 02:00
Hallo!

Wollte mal kurz was loswerden...hab nun endlich das Aufklappbare Menü geschafft zusammen zubauen, funtioniert sogar. (Auf und zu werden in Cookies gespeichert).

Man erstelle eine JavaScript Datein Namens aufzu.js, die in den Ordner Ajax kommt mit dem Inhalt:


function aufzu(id){
if(document.getElementById(id).style.display == 'none') {
document.getElementById(id).style.display = 'block';
setCookie(id, '0');
} else {
document.getElementById(id).style.display = 'none';
setCookie(id, '1');
}
}

function getCookie(Name){
var re=new RegExp(Name+"=[^;]+", "i");
if (document.cookie.match(re))
return document.cookie.match(re)[0].split("=")[1];
return "";
}

function setCookie(name, value){
document.cookie = name+"="+value + ";path=/;expires=Thu, 31-Dec-2099 00:00:01 GMT";
}Dann öffnet man die lib/header.php und füge zu den passenden Zeilen die hier hinzu:


<script type="text/javascript" src="ajax/aufzu.js"></script>Die einzelnen Boxen erstellt man so: (Hier ein Beispiel bei der Top10)


<a href="javascript:aufzu('top10')"><? menuehead("Top10 Klicker");?></a>
<div id="top10">
<? $klicksrang = db_query ('SELECT k.klicks,u.nickname FROM '.$db_prefix.'_tagrally k RIGHT JOIN '.$db_prefix.'_userdaten u ON u.uid = k.uid WHERE k.klicks>0 ORDER BY klicks DESC LIMIT 10');
$rang = 1;
while ($klickliste=mysql_fetch_array($klicksrang)) {
echo '
<table cellpadding="0" cellspacing="0" border="0" width="133px">
<tr>
<td width="9px" align="right"><small>'. $rang++ .'</small> </td>
<td align="left" widht="80px"><small>&nbsp;'.$klickliste[nickname].'</small></td>
<td width="25px" align="right"><small>'.number_format($klickliste[klicks],0,",",".").'</small></td>
</tr>
</table>
';
}
?>
</div>
<script type="text/javascript">
if (getCookie("top10") == '1') { aufzu('top10'); }
</script>
<? menuefoot();?>Wichtig dabei ist jeder Box ein eigenen namen zuzuweisen. Hier der Name der Name der Box "top10".

Bei einem Include macht man das sio dann:


<a href="javascript:aufzu('tkb')"><? menuehead("Tages-Klick-Bonus");?></a>
<div id="tkb">
<? include ("content/smilie.php");?>
</div>
<script type="text/javascript">
if (getCookie("tkb") == '1') { aufzu('tkb'); }
</script>
<? menuefoot();?>Hier wieder darauf achten das die Box einen eigenen Namen hat, hier der ist der Name der Box "tkb".

Bei jeder Box muss man also 4x den Namen ändern. Tut man das nicht, öffnen/schliessen sich die Boxen falsch.

Ich hoffe das passt alles und ich hab nix falsch beschrieben. Falls was ist einfach mal nachfragen.

rene_1992
21.05.2011, 02:49
Getestet ;)

&

Funktioniert. :)

Mfg rene_1992 - René Röbel

CeleronD
21.05.2011, 03:10
Perfekt. Danke fürs probieren.

rene_1992
21.05.2011, 03:12
Keine Uhrsache :)

CeleronD
26.05.2011, 23:00
Weiss einer wie man das nun so hinbekommt daß das Menü nicht mehr zuklappt sondern sanft oder langsam oder als rollen zu geht?

Sam2004
27.05.2011, 12:01
Moin,

mich auch mal für das nette Schnippsel bedanken wollte. Vor einem Jahr hab ich sowas in ähnlicher weise auch schon verbaut, aber mit mehr Code xD und auch net ganz so schick^^...ist deiner besser :thumb:

Zu deiner Frage: Wenn mal hier schauen magst http://www.javarea.de/ , findest sicherlich was du suchst. Dabei ist auch ein Forum mit vielen Usern die sich auf js spezialisiert haben :yes:
Außerdem ist dort auch das ein oder andere kostenlose Schnippsel zu haben ;)

LG

CeleronD
27.05.2011, 14:11
Danke schön, werde mal vorbei schauen mal sehn was es da so gibt.

Sam2004
22.06.2011, 20:02
Was muss man denn ändern, dass es auch mit Seamonkey funzt?
Ich bin da recht flexibel was die auswahl meiner Browser angeht.

In FF funktioniert das auf und zu klappen, in SM nicht.

LG

*ed*
Im Userbereich funzt SM auch, aber im Admin nicht.

CeleronD
22.06.2011, 20:12
Ich habe gerade SeaMonkey installiert und da funzt das Auf und Zuklappen tadelos.

Sam2004
22.06.2011, 20:42
Muss ich wohl wieder gepfuscht haben...danke dir für Rückmeldung...

Sam2004
21.04.2012, 11:41
Kann mir mal einer verraten wie das ohne Cookies funzt?

Ziel soll sein, dass der User nach löschen der Cookies, seine bis dato selbst verwaltete Einstellung beibehält und nicht immer wieder nach Login neu machen muss, sprich die Bereich einklappen die er nicht brauch.

Hab da keine Idee. Hab den Teil für Cookies rausgenommen, kein Erfolg. Bin noch nicht so der Experte von JS

Danke für Tipp.
LG

CeleronD
21.04.2012, 12:26
In dem Beispiel funzt es nicht ohne Cookies. Wie auch? Irgendwo müssen die Einstellung ja gespeichert werden. Es wird bestimmt auch anders gehen. Weiss aber nur die Möglichkeit. Wenn stören schon die 4 weiteren Klicks?

Sam2004
21.04.2012, 12:43
In dem Beispiel funzt es nicht ohne Cookies. Wie auch? Irgendwo müssen die Einstellung ja gespeichert werden. Es wird bestimmt auch anders gehen. Weiss aber nur die Möglichkeit. Wenn stören schon die 4 weiteren Klicks?
Hast ja recht^^

Wer sagt, dass es bei 4 klicks bleibt :biggrin1: ...für die User von heute, ist doch jeder klick schon zu viel *duck und wech*

Danke für Info.
LG

Lokutos
21.04.2012, 16:14
Speichern in der Datenbank
und beim login aus der datenbank wieder ins cooky lesen...

Sam2004
21.04.2012, 21:27
Speichern in der Datenbank
und beim login aus der datenbank wieder ins cooky lesen...
Und wie? :shocked::playball:

Sam2004
24.04.2012, 10:29
Sonst noch wer ne Idee? Hab da nämlich kein Plan was in die DB muss und was nicht. Danke.

Xenon
24.04.2012, 18:22
Sonst noch wer ne Idee? Hab da nämlich kein Plan was in die DB muss und was nicht. Danke.
Sofern es in den Cookies gespeichert wird der wert amchst du folgendes:
- Logout: Prüfen was vorhanden ist. Welche werte dafür verantwortlich sind und diese prüfen mit der DB altdb = cookies , dann passiert nichts und wenn altdb != cookies dann wirds mit den neuen werten überschrieben
- Login: Prüfen was in der DB gespeichert ist, und dies in die Cookies schreiben.

Andersweitig kannst du es auch so machen, dass er antsatt es in die Cookies zu schreiben es direkt in die DB schreibst aber das wären zuviele DB abfragen.

hankfromhelvete
24.04.2012, 22:44
Andersweitig kannst du es auch so machen, dass er antsatt es in die Cookies zu schreiben es direkt in die DB schreibst aber das wären zuviele DB abfragen.

Wären zwar "viele" DB-Anfragen, aber wenn ein User den Cookie löscht ohne sich auszuloggen, muss er das alles nochmal neu einstellen.

Masterphil
24.04.2012, 23:48
Hi, Lokotus hat schon recht, der Ansatz mit der DB psart dir die Cookies.

Menü1 aufegeklappt: Ja/Nein = 1/0
Menü2 aufegeklappt: Ja/Nein = 1/0
etc.

Denke mal so ähnlich ist dies auch bei Klamm umgesetzt mit den Boxen.

Wäre an für sich aber halt ein neues Addon wenn das wer umsetzt.

MfG

Xenon
25.04.2012, 00:30
Wären zwar "viele" DB-Anfragen


Hi, Lokotus hat schon recht, der Ansatz mit der DB psart dir die Cookies.




Andersweitig kannst du es auch so machen, dass er antsatt es in die Cookies zu schreiben es direkt in die DB schreibst aber das wären zuviele DB abfragen.
Ich wäre immer noch für die Cookie lösung, weil was löscht der user auch seine cookies, hat er nichts zusuchen bei der funktion im browser :biggrin1:

Sam2004
25.04.2012, 12:24
Hi, Lokotus hat schon recht, der Ansatz mit der DB psart dir die Cookies.

Menü1 aufegeklappt: Ja/Nein = 1/0
Menü2 aufegeklappt: Ja/Nein = 1/0
etc.

Denke mal so ähnlich ist dies auch bei Klamm umgesetzt mit den Boxen.

Wäre an für sich aber halt ein neues Addon wenn das wer umsetzt.

MfG

Benutzerfreundlich ist das auch nicht wirklich, aber wäre eine Alternative. Die option mit den Cookies gefällt mir nicht wirklich.

Man könnte ja in die Navigation 2 Punkte setzen bzw icons mit auf und zu...oder sowas in der Art. Das kann ja jeder selber machen wie er lustig ist.
Danke für den Tipp.
LG

frisbee
20.05.2012, 21:40
Ich finde die Anleitung richtig gut.

Allerdings habe ich nun eine Frage...

Gehen wir mal davon aus das sich ein User mit gesäuberten Cookies einloggt. Dann sind alle Menüs, welche mit diesem Code versehen wurde automtaisch ausgeklappt.

Ich möchte aber das EIN Menü automatisch eingeklappt ist wenn ein User mit sauberen Cookies sich einloggt.

Ich habe den Code nicht nur auf die Menüs angewendet, sondern auch auf Überkategorien. Und genau diese Überkategorien sollen eingeklapt sein wenn der User saubere Cookies hat, den das macht so ein Menü erst wirklich Sinnvoll :)

jpwfour
21.05.2012, 17:06
...Dann sind alle Menüs, welche mit diesem Code versehen wurde automtaisch ausgeklappt.

Ich möchte aber das EIN Menü automatisch eingeklappt ist wenn ein User mit sauberen Cookies sich einloggt.
...

Dieses Element einfach von vornherein mit

style="display:none"versehen, bspw.:

<div id="top10" style="display:none">