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

Menüpunkte bei Aktivierung (Klick) mit Text versehen

T

TheBoby

Neues Mitglied
Hallo zusammen,
ich bin noch recht unerfahren was html angeht und suche nach einer Möglichkeit das bei einem Klick auf ein Menüpunkt ich einen entsprechenden Text angezeigt bekomme.
Beispiel: Ich klicke auf den Button Darsteller im Menue und es erscheint eine Liste mit den Darstellern. Das ursprüngliche Menü bleibt dabei weiter Sichbar / Nutzbar.
Beispiel Code:
Code: 
<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">Darsteller</a></li>
  <li><a href="#contact">Autoren</a></li>
  <li><a href="#about">About</a></li>
</ul>
</body>
</html>

Ist so etwas möglich und wenn ja WIE.

Besten Dank im Voraus
MfG The Boby
 
das ist mit Javascript und unter bestimmten voraussetzungen auch nur mit Css möglich.

Mit Js.
Einen container erstellen wo alles drinne ist was sichtbar sein soll , den man dann ein display:none; gibt.
Dann ein Button erstellen.Der wird ,mit einen click event überwacht und sobald man button klickt kriegt der container wieder display:block
Das sollte der helfen dabei https://www.w3schools.com/jsref/prop_style_display.asp
 
Ich weis nicht so recht nach welchen Stichpunkten ich hier suchen könnte um ein entsprechendes Beispiel zu finden. CSS oder JS wäre beides ein mögliche Variante welche ich gerne ausprobieren möchte.
Hättest Du ggf. noch ein Code Schnipsel der mir weiter helfen könnte?
 
hast du mein Link nicht gesehen ?
Wenn man da ließt und weiter runter scrollen tut zeigen die ein Beispiel
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_display_toggle


Damit soltest du es hin bekommen

Wenn es geklappt hat sollte manden funktions aufruf noch ändern
Das onclick="myFunction() sollte man dann mit einer Id ersetzten die dann ein eventlistener bekommt.
Das zeigen wir dann wenn du soweit bist .

Wenn du dann noch lust hast zeige ich dir eine pure Css Variante .Solche sachen brauch man wenn man User ansprechen will die kein Javascript aktiviert haben, oder auch wenn du Ebay verkäufer bist , da ist kein Javascript Code erlaubt.
 
Zuletzt bearbeitet:
Hallo Basti,
keine Ahnung warum, aber ich habe diesen Link wirklich nicht gesehen. Nach einigem probieren bin ich aber troz alledem nicht zum Ziel gekommen. Ich habe derher das ganze so um gestellt das ich mittels PHP sowohl das Menü als auch Kopf/Fusszeile ausgelagert habe und für jeden Menüprunkt eine eigene php Seite mit entsprechenden Text erstellt habe.
Ich habe aktuell noch problem was die Darstellung des Menüs angeht da dieses teilweise durch das Hintergrundbild überlager wird wenn es auf geklappt wird. Ich hoffe das ich dies aber auch noch hin bekommen. Ggf. würde ich mich dann aber gerne noch mal melden wollen sofern ich dies nicht hin bekomme.

Besten Dank aber noch mal für die Hilfestellung.
VG
 
TheBoby schrieb:
ich suche nach einer Möglichkeit das bei einem Klick auf ein Menüpunkt ich einen entsprechenden Text angezeigt bekomme.
Beispiel: Ich klicke auf den Button Darsteller im Menue und es erscheint eine Liste mit den Darstellern. Das ursprüngliche Menü bleibt dabei weiter Sichbar / Nutzbar.
Zum Vergrößern anklicken....

Bei Codepen gibt es reichlich Vorlagen
 
Zuletzt bearbeitet:
Sehr gute Links Basti, wenn ich jetzt nicht zu 98% mit meinen Menü mit bis zu 4 Ebenen fertig wäre, würde ich da wohl noch mal ansetzen. Inhaltlich liege ich derzeit bei rund 20 Seiteninhalten und genau da lag mein Problem wenn ich dies alles in eine Datei rein schreibe, könnte dies recht unübersichtlich werden und ein fehler würde ggf. auch alle anderen betreffen.
Aber die Seiten sind Vermerkt. Vielen Dank für diesen Link!!
 
Bezugnehmen auf den Ursprünglichen Post habe ich noch eine Suche eingebaut.
Hierbei bin ich nach dieser Anleitung vorgegangen: How TO - Filter/Search List.
Dies funktioniert für das Top Menü ohne probleme aber für Submenüs leider nicht.
Beispiel Code:
Code: 
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

#### Mein Menüauszug
        <li class="submenu"><a href="#" title="Legal issues">Rechtliches</a>
   <ul id="myUL">
        <li><a href="call.php" title="contact">Kontakt</a></li>
        <li><a href="ds.php" title="privacy statement">Datenschutzerklärung</a></li>
        <li><a href="im.php" title="impressum">Impressum</a></li>
        <li><a href="koril.php" title="koril">Konzern Richtlinien</a></li>
   </ul>

##### das Original Script:
<script>
function myFunction() {
    var input, filter, ul, li, a, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        txtValue = a.textContent || a.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}

Rechtliches findet er aber Kontakt, Datenschutz etc. leider nicht.
Wo liegt hier mein fehler?
Besten Dank noch mal
VG und ein schönen Samstag abend
 
Du solltest mal das ganze Menü posten damit man den rest sehen könnte .
Aber denke das liegt hier dran
Code: 
 ul = document.getElementById("myUL");

Wenn du mal die ID ankuckst , und die ID in deinen Menü suchst, wirst du sehen das das Script nur noch das finden kann was unter ihn im DOM ist .

Bei deinen Jetzigen Code kann er nur noch das finden.
Code: 
 <li><a href="call.php" title="contact">Kontakt</a></li>
        <li><a href="ds.php" title="privacy statement">Datenschutzerklärung</a></li>
        <li><a href="im.php" title="impressum">Impressum</a></li>
        <li><a href="koril.php" title="koril">Konzern Richtlinien</a></li>

auf dieser Zeile
Code: 
   <li class="submenu"><a href="#" title="Legal issues">Rechtliches</a>
Hast du keinen zugriff mit der Suche.

Jetzt solltest du wissen was du tun mußt damit es geht .
Wenn du dann immer noch nicht weiter kommst solltest du mal das ganze Script posten damit man dir auch richtig helfen kann.
An besten bei Codepen dann
 
Das sind ja ganz schön Anforderungen die hier gestellt werden :-) Echt klasse macht spass das ganze.
Also ich habe jetzt einen entsprechenden Test HTML Code erstellt: Suche im Menü
Das ich, so habe ich auch vermutet, keinen Zugriff auf die LI Teile habe ist richtig, aber leider bin ich noch nicht soweit um hier entsprechend abhilfe zu schaffen.
Ich habe versucht dem <li> noch ein <li id="myli"> zu sprendieren aber das hat leider auch nicht geholfen.

Die Suche kommt leider nie in den tieferen Ebenen an.
Geren würde ich hier noch mal Deine Hilfe in Anspruch nehmen wollen.
Besten Dank und einen schönen Sonntag noch.
Ps. Wenn man Codepen mit php nutzen möchte, setzt man dann einfach im JS teil den php Code ein?
 
TheBoby schrieb:
1.= Das sind ja ganz schön Anforderungen die hier gestellt werden :-) Echt klasse macht spass das ganze.

2.= Ich habe versucht dem <li> noch ein <li id="myli"> zu sprendieren aber das hat leider auch nicht geholfen.

3.= Geren würde ich hier noch mal Deine Hilfe in Anspruch nehmen wollen.
4.= Besten Dank und einen schönen Sonntag noch.
5.= Ps. Wenn man Codepen mit php nutzen möchte, setzt man dann einfach im JS teil den php Code ein?
Zum Vergrößern anklicken....


1= Naja ,das ist kein muß , aber das würde deinen Helfer nee menge erleichtern. In deinen post #8 konnte man nicht sehen das dein Code über 3 Ebenen hinweg geht. Dewegen wahr das mit Codepen schon ganz gut.

2= Denk dran das eine ID nur einmalig auf einer Seite existieren darf. Deswegen würde der Code sowieso nicht richtig laufen. Dafür gibt es querySelectorAll .

3= Kommt gleich.
4=Sonntag wahr gut , Danke.

5= Bei Codepen kann man kein php Code benutzen. Du kannst ihn zwar einfügen , damit die Helfer sehen was das Php da macht , aber laufen tut der Php Code nicht. Dafür gibt es andere Seite wie Phpfiddle
 
Als Besucher deiner Seite würde ich bei der Suche k.... gehen.
Suche ist ja schön und gut, doch wenn in der letzte ebene was gefunden wird muss man sich ja trotzdem durch die Ebene zappen.
Da mir das nicht gefällt und auch keine KL geben will habe ich das so gebaut wie mir das Gefallen tut.

Wenn dir das nicht gefallen tut kannst du aber mit dem Code was anfangen.
Damit kannst du sehen wie man alle ebenen durchsucht und kannst den dann für deine Variante nutzen.
Wenn du das trotzdem nicht hinbekommen solltest, dann sag Bescheid .

Menüpunkte bei Aktivierung (Klick) mit Text versehen

Menüpunkte bei Aktivierung (Klick) mit Text versehen Hallo zusammen, ich bin noch recht unerfahren was html angeht und suche nach einer Möglichkeit das bei einem Klick auf ein Menüpunkt ich einen entsprechenden Text angezeigt bekomme. Beispiel: Ich klicke auf den Button Darsteller im Menue und...
basti1012.bplaced.net basti1012.bplaced.net
 
Zuletzt bearbeitet:
Hallo,
besten Dank .@ basti für Idee, leider ist es nicht so ganz das was ich mir vorstelle.
Ich habe eine Suche über jQuery gefunden, diese habe ich auch in das Menü eingebaut.
Die Suche funktoniert soweit auch aber leider verschwindet die Suche nach eingabe des ersten Burchstaben.
Leider verstehe ich zu wenig von Java und würde hier gerne noch mal um hilfe bitten.
Ein Beispiel findet sich hier: https://codepen.io/TheBob1/pen/LYYNgKO
Wie bekomme ich es hin, das nach eingabe des ersten Buchstaben nicht die Suche verschwindet?

Beste Dank im Voraus
 
Sempervivum schrieb:
Du kannst das einfach beheben, indem Du das Eingabefeld aus dem <ul> herausziehst:
Zum Vergrößern anklicken....
Das wäre die einfachste Lösung.
Falls das Suchfeld doch da drinne bleiben muß ,kannst du das in der Suche auch ausschießen.
Code: 
$("#myList li:not(:last-child)")
In denn Fall muß das Suchfeld aber immer an der letzen stelle stehen.
Also an besten wie es schon gezeigt wurde das Suchfeld da raus nehmen
 
Besten Dank Basti,
ich habe es jetzt doch ausserhalb der UL gemacht, es hat zwar leider den Nachteil das wenn man die Größenansicht verändert sich dann auch das Suchfeld verschiebt, aber letztlich ist die funktion so wenisgtens zu 100% funktional.
Besten Dank noch mal
 
TheBoby schrieb:
es hat zwar leider den Nachteil das wenn man die Größenansicht verändert sich dann auch das Suchfeld verschiebt,
Zum Vergrößern anklicken....
das könnte man vieleicht auch nocht beheben, dazu mußt du mal das ganze Ergebniss zeigen. Jenachdem könnte man da mit einen extra Container oder auch mit Javascript noch was dran drehen.
Aber mach mal erst dein Menü kommplett fertig ( mit Css ) und dann kann man mal kucken ob man da noch was machen kann ?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben