Horizontale Navigation mit Jquery

Computer: Software & Programmierung JavaScript & Script-Sprachen
#1

Hallo,

ich würde gerne eine horizontale Navigation mit 2 Menüpunkten mit Jquery erstellen!

Wenn ich auf den „ersten“ Menüpunkt drücke, dann sollte ein DIV-Container mit Text erscheinen (slide down). Bei nochmaligen drücken (silde up).

Wenn jetzt der „zweite“ Menüpunkt gedrückt wird … und der „erste“ Menüpunkt ist
(slide down) … dann sollte der „erste“ Menüpunkt automatisch „slide up“ machen …
und anschließend den „zweiten“ Menüpunkt „slide down“ machen … und umgedreht …

sorry, für diese Erklärung … :frowning:

Hat vielleicht jemand eine Idee, wie man sowas unter Jquery umsetzen kann?

Gruß, Andi.

#2

Das verhalten nennt sich Accordion
http://www.mediaevent.de/javascript/lib-jquery-Plugi…

#3

Dafür ist doch CSS da. Wenn deine Navigation alternativlos auf Javascript basiert, sperrst du alle NoScript-Benutzer und alle anderen aus, die Javascript ausgeschaltet haben.

Sowas geht seit Jahren mit rudimentärem CSS:

http://de.selfhtml.org/css/layouts/navigationsleiste…

Außerdem leidet mit Javascript-Navigation die Indexierbarkeit von Suchmaschinen, von barrierefrei will ich mal gar nicht reden.

Günther

Stern? Bitte gern.

#4

Das verhalten nennt sich Accordion
http://www.mediaevent.de/javascript/lib-jquery-Plugi…

Er sprach von horizontal. Und außerdem… hast du mal versucht, dieses Beispiel mit ausgeschaltetem Javascript zu bedienen? Geht nicht!

Dann läuft das nach dem Motto: NoScript-Nutzer raus!

DAS würde ich mir wirklich überlegen.

#5

Hallo Günther,

danke für deine Antwort!

Wer könnte mir eine solche Navigation in CSS oder Jquery erstellnen? Du?

Danke!

Andi.

#6

Wer könnte mir eine solche Navigation in CSS oder Jquery
erstellnen? Du?

Ähm, okay… Ich bin davon ausgegangen, dass DU gerade etwas derartiges baust und HILFE brauchst. Dein Post klang nicht so, als ob du ne vage Idee hast und jemanden brauchst, der sie dir komplett baut.

Ich kann dir das schon bauen, was bist du denn bereit dafür auszugeben? Ich bin nämlich auf gar keinen Fall billiger als ein bei dir lokal ansässiger Webdesigner.

Günther

#7

Das verhalten nennt sich Accordion

Nee macht es nicht!

#8

Hallo,

ich hab noch ein wenig gebastelt:

echo ‚jQuery(document).ready(function($) { $("#btn_test_1").click(function() { $(„div[id^=‚txt‘]:visible“).slideUp(„slow“); }, function() { $("#txt_test_1").slideToggle(„slow“); }); });‘;
echo ‚jQuery(document).ready(function($) { $("#btn_test_2").click(function() { $(„div[id^=‚txt‘]:visible“).slideUp(„slow“); }, function() { $("#txt_test_2").slideToggle(„slow“); }); });‘;
echo ‚jQuery(document).ready(function($) { $("#btn_test_3").click(function() { $(„div[id^=‚txt‘]:visible“).slideUp(„slow“); }, function() { $("#txt_test_3").slideToggle(„slow“); }); });‘;

echo ’ ';
echo ’ ';
echo ’ ';

echo ’ Test 1 ';
echo ’ Test 2 ';
echo ’ Test 3 ';

Leider werden bereits geöffnete DIV-Container nicht automatisch geschlossen!

Hat jemand vielleicht eine Idee?

Gruß, Andi.

#9

wie soll ein clicken mit CSS gehen ???

also frage falsch beantwortet .

#10

CSS ist CSS
und Gefragt wurde ein 2 Menü in JQUERY in JAVASCRIPT board

warum also die HTML/CSS board diskussion anfangen

ein element was geklickt auf und gecklickt zu gehen soll geht auch nciht mit CSS , leider
und sliden tut da auch nix .

Also wenn dann mal die Frage korrekt beantworten und nciht auf nicht existente user verweisen die vielleicht gar ncihts mit seiner Zielgruppe zu tun hat ,
Ich sag nur node.js server , da fragt keiner nach No JS kram …
tztzt echt im JavaScript board so ein unsinn ist unötig .

.

#11

wie soll ein clicken mit CSS gehen ???

#id:active
{
[…]
}

also frage falsch beantwortet .

ROFL! Du beantwortest die Frage nach horizontaler Navigation mit einem vertikalem Accordeon. DAS war also die richtige Antwort?

Und nochmal: Javascript zur Navigation einsetzen ist dumm. Insbesondere technikaffine Nutzer blockieren häufig Javascripts, die sperrt man defacto aus seiner Seite aus.

Javascript ist super für alles, was die Usability erhöht, aber eine rein JS-basierte Navigation ist dumm.

Günther

#12

CSS ist CSS
und Gefragt wurde ein 2 Menü in JQUERY in JAVASCRIPT board

warum also die HTML/CSS board diskussion anfangen

Weil das hier ein Expertenforum ist. Ein Beispiel:

Im Elektronikbrett fragt einer, ob er seine Türklingel lauter kriegt, indem er den Trafo abklemmt und das Teil gleich mit 230V anschließt.

Wenn ich nur die Frage beantworte, würde ich vielleicht auf die kurze Lebensdauer der Klingel eingehen oder sowas sagen wie: versuchs einfach.

Die richtige Antwort - die allerdings über die Frage hinausgeht - ist: Lass um Himmels Willen die Pfoten davon, das ist gefährlich.

ein element was geklickt auf und gecklickt zu gehen soll geht
auch nciht mit CSS , leider
und sliden tut da auch nix .

Mag sein, aber ohne Javascript ist die Seite unbedienbar. Da geht dann also auch nichts. Und genau DAS ist mein Rat: Es gibt sowas, aber ich würde das lassen und lieber auf CSS setzen, auch wenn es eben nicht slidet.

Also wenn dann mal die Frage korrekt beantworten und nciht auf
nicht existente user verweisen die vielleicht gar ncihts mit
seiner Zielgruppe zu tun hat ,

??? Ich existiere doch. Was meinst du?

tztzt echt im JavaScript board so ein unsinn ist unötig .

DAS sehe ich anders.

Günther

#13

Hi,

Und nochmal: Javascript zur Navigation einsetzen ist dumm.
Insbesondere technikaffine Nutzer blockieren häufig
Javascripts, die sperrt man defacto aus seiner Seite aus.

na ja, die technikaffinen User wissen zum Einen aber, dass ohne JS heutzutage immer weniger geht, und zum Anderen, wie sie JS wieder einschalten.

Klar, es gibt immer Leute, die nur zu Fuß gehen wollen. Die müssen aber damit leben, dass Autobahnen keine Gehwege anbieten.

Gut, eine Navigation nur auf JS-Basis ist schon suboptimal, aber der Fragesteller hat meines Wissens nirgends ausgeschlossen, ein entsprechendes HTML-Gerüst als Fallback zur Verfügung zu stellen.

Schöne Grüße,

Mohamed.

#14

Gut, eine Navigation nur auf JS-Basis ist schon suboptimal,

Mehr will ich doch gar nicht sagen.

aber der Fragesteller hat meines Wissens nirgends
ausgeschlossen, ein entsprechendes HTML-Gerüst als Fallback
zur Verfügung zu stellen.

Das stimmt. Der Fragesteller hat eine Idee und anschließend mich gefragt, ob ich sie ihm baue. Klingt für mich nicht so, als ob er an einen Fallback gedacht hat.

Günther

#15

lieber

Günther

alles mutmassungen ,

z.b. ein node.js server braucht kein fallback .

und zweitens , nerft diese massregelung aus der steinzeit , die wenn schon
nur für suchmaschinen gilt, nur die kann und will kein javascript , aber das kann man auch anders hinbekommen , z.b. mit diversen landingpages etc .

also willst du jetzt bei jedem ding was ein nicht HTML CSS fallback hat , hier
gleich wieder dein 19XX senf dazugeben .

Übrigens hat er den code ja selber zusammengefummelt dank meiner Hilfe ,
bei Dir ist ja noch nix rübergekommen ausser CSS luft , da es eben nicht das tut was der Frager gefragt hat .

bitte lese doch nochmal seine Frage und vertreibe deine langeweile wo anders, z.b. im html css brett .

Danke .

P.S. Frage Antwort und nicht , ich dachte , es könnte , vielleciht hat er aber nicht … etc etc … totale konjungations ins blöde ,
ach ne , du machst ja auf Professor und löst nicht die frage sondern schaffst erstmal an anderer stelle probleme die nur Du hast , aber wies aussieht der frager weniger .

#16

wäre nett wenn du es so formatierst, das man auch lesen kann was da steht .

so ist das nur anstrengend .

#17

Warum bitte werde ich hier derart angefeindet? Es gab ne Frage und ich habe meine Bedenken inkl. Link geäußert. That’s it.

Und du kommst daher uns haust mir vehement aufs Maul, weil meine Antwort nicht in dein Weltbild passt.

bitte lese doch nochmal seine Frage und vertreibe deine
langeweile wo anders, z.b. im html css brett .

DAS nenne ich mal eine Mutmaßung. Ich habe keine Langeweile, sondern möchte hier gern helfen. Ich glaube nicht, dass w-w-w sich den Weggang von aktiven Mitgliedern leisten kann. Und ich habe hier weder getrollt noch war ich sonstwie außerhalb der Nettiquette.

Ich sehe es eben anders als du, aber das ist meines Wissens erlaubt. Und auch Mohamed hat meinen grundsätzlichen Einwand verstanden und bejaht.

ach ne , du machst ja auf Professor und löst nicht die frage
sondern schaffst erstmal an anderer stelle probleme die nur Du
hast , aber wies aussieht der frager weniger .

Ist DAS deine Meinung von Hilfe? Der Frager schaut mangels Erfahrung eventuell nicht über den Tellerrand und das ist für dich völlig okay? Meinst du, der Frager wusste von vornherei, dass es bei seiner Idee ein Problem mit Suchmaschinen oder Barrierefreiheit oder abgeschaltetem Javascript geben kann? Ich wusste es nicht und deshalb habe ich ihn darauf hingewiesen.

Nur weil der nächste Frager noch nie von SQL-Injection oder von XSS gehört hat, darf ich deiner Meinung nach also nicht mehr auf potentielle Sicherheitslücken in Codebeispielen hinweisen, sondern muss stur seine Frage beantworten? Ist das dein Ernst?

Viele deiner Antworten sind ja echt brauchbar aber das hier ist echt daneben. Oder willst der einzige Experte in deinen Lieblingsbrettern sein? Anders kann ich mir diese kindischen Wutausbrüche nicht erklären.

Günther

3 Like
#18 
echo 'jQuery(document).ready(function($)
{
 $("#btn\_test\_1").click(function() { $("div[id^=\'txt\']:visible").slideUp("slow"); }, function()
 {
 $("#txt\_test\_1").slideToggle("slow"); }
 );
});';

echo 'jQuery(document).ready(function($)
{
 $("#btn\_test\_2").click(function() { $("div[id^=\'txt\']:visible").slideUp("slow"); }, function()
 {
 $("#txt\_test\_2").slideToggle("slow"); }
 );
});';

echo 'jQuery(document).ready(function($)
{
 $("#btn\_test\_3").click(function() { $("div[id^=\'txt\']:visible").slideUp("slow"); }, function()
 {
 $("#txt\_test\_3").slideToggle("slow");
 });
});';

So ist es ein wenig übersichtlicher!

Gruß, Andi.