leider noch unvollständiger Versuch ein Menü von Rechts nach links zu verlegen

    Ich richte mir gerade auf der Basis eines freien HTML-Templates (CCA-Lizens) eine neue Webseite ein.
    Hier ein früher Stand mit Menü rechts:
    1) Ursprüngliche Version mit Menü Rechts

    Da ich eine Englische Sprachversion haben möchte und die Sprachauswahl oben rechts haben möchte habe ich das Seiten Menü von Rechts nach links verlegt,
    2) Aktuelle Version mit Menü Links das sich aber trotzdem leider von der Mitte her nach links öffnet
    Das das ausklappbare Menü sich mit einer reihe von Transitions (ursprünglich vom rechten Rand zur Mitte öffnet habe ich dieses öffnen noch nicht ensprechend ändern können.
    Ursprünglich öffnet sich das Menü vom Rechten Rand zur Mitte des Bildschirmes hin.
    Nach dem ich das Menü und das Icon um Aufklappen jetzt an den linken Rand gelegt habe, öffnet es sich immer noch in der selben Richtung wie vorher was also heißt von der Mitte zum Linken Rand

    Hat irgendwer ein Idee wo mit ich die transitions für die Öffnung auch so ändern kann, dass sich das Menü von Links zur Mitte öffnet wie es urspünglich sich von Rechts zur Mitte geöffnet hat
    Ich hoffe mit dieser Frage gegen keine hier geltenden Regeln zu verstoßen und wäre sehr dankbar, wenn jemand z.B. per Untersuchung des Quelltextes eine Idee hätte, wie ich das Menü auch mit den Öffnungs transitions an die Linke Seite anpassen kann.

    Danke für jeden hilfreichen Tipp!

    Das scheint mir einfach zu sein: Das Menü wird durch transform: translate() aus dem sichtbaren Bereich verschoben. Damit das nach links passiert musst Du nur einen negativen Wert verwenden:

    Code
    #menu {
    -moz-transform: translateX(-22em);
    -webkit-transform: translateX(-22em);
    -ms-transform: translateX(-22em);
    transform: translateX(-22em);
    -moz-transition: -moz-transform 0.45s ease, visibility 0.45s;
    -webkit-transition: -webkit-transform 0.45s ease, visibility 0.45s;
    -ms-transition: -ms-transform 0.45s ease, visibility 0.45s;
/* usw. das vorhandene CSS */

    Stimmt, das ging schnell. Bin ich aber so nicht darauf gekommen herzlichen Dank !!!!!

    noch eine echte Kleinigkeit: Die ursprünglichen Pastellartigen Background und Mouseover Farbtöne habe ich weitgehend nach meinem Geschmack ändern können nur das Menü-Icon des eingeklappten Menüs ist leider z[Blockierte Grafik: https://klassik.8sf.de/rosa-menue-icon.jpg]iemlich Bonbonfarben und ich finde einfach nicht im main.css wo ich diesen Farbton ändern könnte. Ich habe schon sämtliche "#" im main. CCode danach abgesucht.

    Guten Morgen, das ist auch ein wenig verzwickt: Das Menü-Icon ist jeweils eine Inline-SVG-Grafik für das Pseudoelement ::before bzw. ::after.

    :: before für das :hover. Ab Zeile 2959 in main.css

    Dort findet man aber relativ leicht die Farbe als Hex-Wert und kann sie umändern:
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cstyle%3Eline %7B stroke-width: 8px%3B stroke: %23000000%3B %7D%3C/style%3E%3Cline x1='0' y1='25' x2='100' y2='25' /%3E%3Cline x1='0' y1='50' x2='100' y2='50' /%3E%3Cline x1='0' y1='75' x2='100' y2='75' /%3E%3C/svg%3E"); Die vier Nullen hinter dem stroke: damit habe ich zum Test die Farbe auf schwarz geändert und es hat funktioniert.


    Um den Text des SVG lesbar zu machen, kann man ihn z. B. hier decodieren:
    https://www.urldecoder.org

    Hallo Sempervivum,
    Ich finde dass das eigentlich ziemlich plausiobel klingen könnte, aber für meine Html-Kenntnisse echt ein paar Stockwerke zu hoch. Immerhin dier Link zum Dekodierer ist cool.

    Aber das mit den Nullen hab ich da noch nicht wirklich verstanden wenn es um die Stalle "stroke: %23000000%3B" geht, dann sind da ja ohnehin schon 6 Nullen was ja als Hexacode so ziemlich Schwarz ist also wenn das etwas mit der rosa Farbe beim mit der Maus drübergehen zu tun haben sollte, müssten da doch eigentlich ganz andere Zahlen stehen die erstmal einen rosa Hexacode ergeben den man dann ändern könnte um die Farbe beim "Hover" bzw. Mouseover-Effekt zu ändern. Iich finde aber nun mal aufs Biegen und Brechen keinen weiteren Mouseover oder Hover-Effekt der so einen Rosa Hexacode hätte.


    Also ich finde das auch ziemlich heftig. Aber die IDee mit dem Decoder ist klasse könnte mir auch in anderen Situaitonen behilflich sein.

    Zitat

    also wenn das etwas mit der rosa Farbe beim mit der Maus drübergehen zu tun haben sollte, müssten da doch eigentlich ganz andere Zahlen stehen die erstmal einen rosa Hexacode ergeben

    Das trifft vollkommen zu, als ich das heraus kopiert habe, stand da auch eine andere Farbe drin, ich habe die Werte nur mit Nullen überschrieben, um es zu testen und sicher zu gehen, dass es auch funktioniert. Wenn Du direkt ab Zeile 2959 nachsiehst, wird Du einen anderen Code finden für das Rosa.

    Nochmal für die selbe Seite eine andere Frage Da ich bei einem dunklem Background des Menüs dunkle Mouseover Verfärbungen keinen Sinn machen - denn das was man gerade mit der Maus berührt wird so eher unsichtbar, habe ich ich die Hover Farbe wieder zurück auf das helle Rot gestellt.


    Für den mit der index.html-Seite verlinkten Seiten titel finde ich so eine Farbe bei Mouseover aber echt ziemlich unpassend.

    Gibt es eine Möglichkeit irgendwo im main.css oder in der html-Seite selbst eine zusätzliche Regel für den Seitentitel mit einer anderen Färbung als dem Rosa zu definieren. Im html file hat dieser "title" ohnehin schon eine eigene Klassifizierung "<span class="title">"xxxx </span> .

    Im main.css finde ich aber nix mit "title".
    Kann ich da selbst irgendetwas definieren, das mir zu einer anderen dunkleren Mouseoverfarbe anstelle von Rosa im Seitentitel verhilft.
    Die nach wie vor im Aufbau befindliche Seite findet man hier:
    https://klassik-resampled.de

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden