Horizontales Menü fixieren?

Mehr
3 Monate 3 Wochen her #3712 von Andre
Horizontales Menü fixieren? wurde erstellt von Andre
Hallo Leute, ich schon wieder mit ner Design-Idee....

Kann man mit einem "Custom CSS-Code" im Template eigentlich die horizontale Menüleiste fixieren, so dass sie beim scrollen am oberen Bildschirmrand "kleben" bleibt?

Gruß
André

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Mehr
3 Monate 3 Wochen her #3713 von Thomas Hunziker
Geht sicher irgendwie, hab ich aber noch nie versucht :)
Du brauchst denke ich sicher auch JavaScript dafür. Beim schnellen Googlen habe ich zB das gefunden: codepen.io/senff/pen/ayGvD

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Mehr
3 Monate 3 Wochen her #3714 von Andre
Ja, das wäre ne Möglichkeit. Ich dachte, dass man, so wie mit dem #beforehead machen kann.

#beforehead{
position: fixed;
top: 0;
z-index: 1;
}

Nur das man das mit dem Menü auch machen kann. Ist mir nur nicht gelungen. Jetzt hatte ich die Hoffnung einfach was übersehen zu haben.

Gruß
André

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Mehr
3 Monate 3 Wochen her #3715 von Matthias
Da hier Desktop und mobile Ansicht recht verschieden sind, lohnt es sich Media-Queries zu nutzen.
Das wären
/* Code für mobil + Desktop */
@media (max-width: @navbarCollapseWidth) {
    /* Code für mobiler */
}
@media (min-width: @navbarCollapseDesktopWidth) {
    /* Code für Desktop */
}
Durch die Verwendung der LESS-Variablen skaliert der Code mit der im Backend genutzten Option.

Für die mobile Variante bietet sich #topmenu_container, für die Desktopvariante #topmenu an.
Der Rest ist dann nur noch ne Design-Frage.

@Thomas: Der von dir verlinkte Code sieht ja recht simpel aus. Wäre das was fürs Template? (Ich würde das dann über Klassen regeln: sticky, sticky-mobile, sticky-desktop. So kann man selbst entscheiden, ob man das möchte.)
Ne Option für ne frei einbindbare JS wäre wahrscheinlich auch nicht schlecht.

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Mehr
3 Monate 3 Wochen her #3716 von Thomas Hunziker
@Matthias Ich hab das nur ergoogelt. Ich hab keine Ahnung ob es mit dem Allrounder funktioniert :)
Ein eigene JS kann man ja sehr einfach enbinden mittels entsprechenden Modulen oder Plugins. Oder man macht nen Override für das Menümodul-Layout, wo man dann ja auch JS einbinden kann. Ich denke nicht dass wir diese Option im Template benötigen.
Wenn es auf einfachem Weg möglich ist son Sticky Menü im Template aufzunehmen merge ich das gerne. Es gibt aber vermutlich auch schon entsprechende Menümodule im JED welche das templateunabhängig machen.

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Mehr
3 Monate 3 Wochen her - 3 Monate 3 Wochen her #3717 von Andre
Erst mal Danke, dass ihr euch damit beschäftigt. Aus vielen Ideen und Überlegungen entsteht evtl. das, was man sucht...

Was z.B. geht ist:

#topmenu ul.menu {
position: fixed;
top: 0;
z-index: 1;
}

Dann klebt das aber ständig am oberen Rand. Ich hätte eben gern, dass es an der Position steht, an der es definiert ist, und erst am oberen Rand hängen bleibt, wenn die Seite nach oben scrollt.

Ideen?
Gruß
André

Ach ja, noch was: @Thomas: Kann ich das Hintergrundbild in "Template Colors" -> 'Background Image" auch fixieren?
Letzte Änderung: 3 Monate 3 Wochen her von Andre.

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Ladezeit der Seite: 0.113 Sekunden
Powered by Kunena Forum
   
© Bakual