menuleiste mit hover und active effekt

Liber · 19. März 2024

liebes forum

ich möchte eine menuleiste mit 5 positionen, waagrecht, nur schrift, mit hover effect rot und fett, und active oder focus-within. wenn man draufklickt soll die schrift rot und fett bleiben, damit man sich die breadcrumbs sparen kann.

ich habe den chat gpt ziemlich gefordert. der konnte es nur mit javascript lösen. geht das wirklich nicht mit css?

joomla 5 auf xampp

gruss liber

Indigo66 · 20. März 2024

Deine Angaben sind zu mager, um Dir effektiv helfen zu können.

Joomlaversion ungenau, und keinen Link zum Problem.

Zu Deinem Thema gibt das die Forensuche her: RE: Menü klappt nicht auf

Liber · 20. März 2024

neuer versuch:

joomla 5.0.3 auf xampp, deshalb kein link. ich habe ein ganz einfaches template mit dem namen test-template heruntergeladen. menu waagrecht habe ich hingekriegt. hover effekt (rot und fett) klappt auch. nun möchte ich gerne, dass der menupunkt rot und fett bleibt, wenn man draufgeklickt hat, damit man sich die breadcrumbs sparen kann. das wäre glaube ich mit a:active oder a:focus möflich. klappt aber nicht. beiliegend der template.css code.

gruss liber

hier der code:

Code

html, body {
height:101%;
text-align:left;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
body {
margin:0;
padding:0
}
.clear{
clear:both;
}
#container {
margin:15px auto;
width:980px;
border:1px solid #ddd;
background-color:#f9f9f9;
}
header {
padding:30px;
border-bottom:1px solid #ddd;
}
.headerlogo{
font-size:25px;
}
nav{
padding:10px;
border-bottom:1px solid #ddd;
background-color:#fff;
}
nav ul li {
display: inline;
margin-right: 10px; /* Abstand zwischen den Menüpunkten anpassen */
}


nav ul li a {
text-decoration: none;
color: #000;
}


nav ul li a:hover {
font-weight: bold;
color: red;
}


nav ul li a:active {
font-weight: bold;
color: red;
}


#main{
padding:10px;
}
#left{
float:left;
width:200px;
padding:10px;
border:1px solid #ddd;
background-color:#fff;
}
#content{
float:left;
padding:10px 20px;
width:695px;
}
footer{
padding:10px 10px 0;
}

Alles anzeigen

Elwood · 20. März 2024

Zitat von Liber

ich habe ein ganz einfaches template mit dem namen test-template heruntergeladen.

Wie heißt das Template?

Wo hast du es heruntergeladen?

Liber · 20. März 2024

hallo elwood

das template stammt von der website: joomla-templates.de und heisst "test_template".

es ist teil eines tutorials. es würde mir eigentlich gut passen, weil es so einfach ist und nicht so viele funktionen und positionen hat. wie gesagt: eigentlich geht es nur um den effekt, dass der menupunkt rot und fett bleibt, wenn er angeklickt wird.

der hover klappt, das active nicht.

gruss liber

WM-Loose · 20. März 2024

Willst du uns keinen Link zum Problem angeben?

#2 war doch klar formuliert?

Benno · 20. März 2024

@Dirk

Zitat von Liber

joomla 5.0.3 auf xampp,

Freundliche Grüße,

Benno

Stef · 20. März 2024

Liber,

Wenn du also eines von diesen veraltete Template genommen hast, dann wird das nichts.
Du solltest ein Template für Joomla 5 nehmen. Das Cassiopeia Template ist ja schon mit dabei bei der Joomla 5 Installation.

Liber · 21. März 2024

vielen dank für eure bemühungen. hier noch ein paar einwände:

1

wenn man das forum durchsucht, wimmelt es von leuten, die mit dem standard template (cassiopeia, nature, beez oder purity usw.) nicht klarkommen, weil sie einfach zu kompliziert sind und zu viel können.

2

ich war früher typograph und habe meine eigenen vorstellungen einer webseite. ich habe bis jetzt ausser diesem uralt template kein template gefunden, das so einfach ist, wie ich es gerne hätte: titel, menuleiste, inhalt, footer.

3

ich habe den html und css youtube kurs von tutorialgarage ziemlich vollständig absolviert und viel gelernt.

viele werden jetzt sagen: dann mach doch die seite mit html! ich möchte es aber in joomla machen, weil ich meine alte seite in joomla habe, und weiss, wie man sie bedient (fotos, videos und musik einfügen, formulare einfügen usw.)

4

wenn ich joomla 5 auf xampp installiert habe und dieses uralt template installiere, mache ich eine kopie davon und kann dann im backend fröhlich an der index.php und dem template.css herumfummeln. wenn ich mich verhaue, lösche ich die kopie und mache eine neue.

5

wenn alles funktioniert und das template das macht, was ich will, ist es dann ein problem, wie alt das template ist? ich will ja nicht mehr funktionen.

6

mein problem ist wahrscheinlich ein css problem und kein joomla. wie oben schon ein paar mal beschrieben, klappt der active befehl nicht, sprich: wenn ich mit der maus auf den menueintrag klicke, sollt er rot und fett bleiben.

7

meine alte webseite http://www.brandhoelzler.ch ist mittlerweile 10 jahre alt. wenn ich das backend öffne, werde ich mit fehlermeldungen und warnungen überschüttet. sie ist auch nicht responsiv. deshalb wollte ich die seite von grund auf neu machen, aber das aussehen etwa beibehalten. dort klappt übrigens der active befehl, wie ihr oben im menu sehen könnt.

8

gibt es irgendwo ein forum für css? das w3 schools kenne ich. ist super gemacht, aber konnte mein problem auch nicht lösen.

gruss und nichts für ungut

liber

Stef · 21. März 2024

Zitat von Liber

5
wenn alles funktioniert und das template das macht, was ich will, ist es dann ein problem, wie alt das template ist? ich will ja nicht mehr funktionen.

Das Template muss kompatibel mit Joomla 5 sein !

Gemäss Beitrag #8 ist das veraltete Template nicht mit Joomla 5 kompatible.

Sieger66 · 21. März 2024

Ich habe mir mal das test_template-3.0.zip kurz angeschaut und gesehen das es keine php-Dateien im html-Ordner und keinen Javascript-Code enthält. Somit dürfte es zumindest keine Sicherheitsrelevanten Probleme haben da diesbezüglich dann schließlich nur die Joomla-Core-Dateien und die index.php zur Anwendung kommen.

In der index.php des Templates ist ja nur das im nachfolgenden Spoiler:

Spoiler anzeigen

Darin sehe ich als Laie auch keine möglichen Sicherheitprobleme.

CSS kann du ja selbst nach belieben anpassen.

Stelle die Site Online z.B. in einer Sub-Domain und gib uns einen Link.

Kannst die Test-Site zusätzlich per .htaccess vor öffentlichem Zugriff schützen und hier die Zugangsdaten oder Zuganglink hinterlegen.

Siehe dazu dann z.B. auch:

Frontendzugang nur über Link

Allenfalls JFile sollte man wohl in der index.php ersetzen durch

Code

use Joomla\CMS\Filesystem\File;

... File::exists( $unser_header_bild ) ...

wenn man wert darauf legt das das Joomla-Template auch ohne aktiviertes compat-Plugin läuft...

Dautrich · 21. März 2024

Zitat von Liber

2
ich war früher typograph und habe meine eigenen vorstellungen einer webseite. ich habe bis jetzt ausser diesem uralt template kein template gefunden, das so einfach ist, wie ich es gerne hätte: titel, menuleiste, inhalt, footer.

Was hindert Dich denn daran, Cassiopeia zu benutzen. Alle Modulpositionen, die Du nicht belegen willst, bleiben einfach leer. Dafür brauchst Du nicht an irgendwelchem HTML-Code herumzuschrauben und bekommst das responsive Verhalten gleich umsonst dazu.
Wenn man eine Website wirklich individuell gestalten will, bleibt einem ohnehin die Beschäftigung mit CSS nicht erspart. Aber Cassiopeia kennen hier viele Leute recht gut, sodass Du im Zweifelsfall hier schnell Hilfe bekommst. Und Ratschläge zur Anpassung von Cassiopeia findet man im Internet (deutsch- und englischsprachig) wie Sand am Meer.

Mir wäre Deine angedachte Vorgehensweise viel zu aufwändig!

Liber · 21. März 2024

Sieger66

vielen dank für deine bemühungen. dann würdest du also meinen, dass das template problemlos auf jomomla 5 laufen könnte.

warum gibt mir niemand antwort auf meine frage bezüglich template.css menupunkte beim anklicken dauerhaft fett und rot.

hover funktioniert ja auch.

gruss liber

Sieger66 · 21. März 2024

Wo der Fehler im CSS liegt lässt nun mal am einfachsten mit einem Link zum Problem klären...

Kannst es ja mal mit dem folgenden probieren:

Code

nav ul li a:focus {
font-weight: bold;
color: red;
}

Dautrich · 21. März 2024

Bei Cassiopeia könnten Dir hier wahrscheinlich jemand auch ohne Link helfen.....

Sieger66 · 21. März 2024

Gut das wir in einer Demokratie leben sonnst müßte möglichersweise jeder das gleiche Template und Auto und Smartphonebetriebssytem benutzen...

Liber · 21. März 2024

Sieger66

genau das funktioniert nicht!

Dautrich

ich probiers nochmal, aber beispielsweise die menuleiste unter dem titel, nur mit schrift und eben mit diesem hover und active effect, wo muss ich die bearbeiten. soll ich zuerst ein child template erstellen. man soll ja nichjt im original code herumfummeln. wird denn das child template bei einem update auch überschrieben?

chr-hl · 21. März 2024

Zitat von Liber

soll ich zuerst ein child template erstellen

Wenn Du noch CSS-Anpassungen vornimmst, die in der user.css gespeichert werden, dann ist das nach meiner Meinung nicht erforderlich.

Christian

Sieger66 · 21. März 2024

Zitat von Liber

Sieger66
genau das funktioniert nicht!

Wahrscheinlich mußt du die CSS-Klasse .active verwenden z.B.:

Code

nav .active a {
font-weight: bold;
color: red;
}

Ist aber möglicherweise noch zu unspezifisch um zu wirken.

Elwood · 21. März 2024

Alternative wäre das kostenlose Astroid-Framework.

Dort kannst du es sogar direkt im Framework einstellen, ohne eine CSS zu verändern.

BTW:

Könntest du bitte Groß-/Kleinschreibung beachten?

Kann man besser lesen!