Quicknav (Submit in gleicher Reihe + fixed)

[Fkhm]

So hier bin ich mal wieder.
Habe meine Seite jetzt mal angefangen für mobile Geräte zu optimieren und hänge jetzt an 2 Punkten.

Ich möchte gerne, dass bei der Quicknav der Submit-Button in der gleichen Zeile wie die Quicknavigation selbst liegt, also nicht wie jetzt eine Zeile Tiefer.

2. Hänge ich an der position:fixed; die ich der Quicknavigation gegeben habe. Ich habe über der Quicknavigation noch ein Bild im #header. wenn ich jetzt weiter nach unten scrolle, möchte ich dass sich die Navigation oben andockt. funktioniert mit position:fixed; soweit, dass sie immer sichtbar ist, aber habe ich nach oben immer die Höhe vom Logo platz, dass heißt die Navigation sitzt ständig "in der Webseite drin", gebe ich ihr ein top:0px; überdeckt sie den header.
Außerdem ist die erste Überschrift der Seite unter der Quicknavigation so verschwunden.

css:

#header {
    z-index:555555;
}

.mod_quicknav .formbody {
    float:left;
}

.mod_quicknav.mobil {
    position:fixed;
    float:left;
    display:inline-block;
    margin-top:0;
    padding-top:0;
    background-color:#FFF;
    z-index:500;
}

.mod_quicknav .submit {
    float:left;
}

#footer .inside {
    padding-right:10px;
    padding-left:10px;
}

h1.title {
    border-bottom:2px solid #a00;
    color:#a00;
}
#main .inside {
    padding-right:10px;
    padding-left:10px;
}

Wisst ihr Rat?
Gruß

PS: Kann man die Level_2 und _3 in der Quicknavigation mobil etwas einrücken lassen?

[valentin_]

ich wuerde fuer mobile geraete generell nicht position:fixed verwenden, da es haeufig (bzw. auf aelteren geraeten) nicht richtig funktioniert.

was genau ist dein problem mit der anordnung? css grundkenntnisse hast du?


Gesendet von meinem GT-I9505 mit Tapatalk 2

[Fkhm]

Grundkenntnisse sind da, vll. auch ein bisschen mehr ;-)

Wüsste nur nicht wie ich die Quicknav oben andocken soll, ohne position:fixed;

Edit: Meine Lösung um es in eine Zeile zu bekommen, ABER ich kann die Navigation jetzt nicht mehr bedienen. Wenn ich am iPhone auf das ausklappmenü-klicke passiert nichts, beim submit button ebenso.

div.mod_quicknav form div.formbody select#ctrl_target.select {
    width:70%;
    left:2%;
    position:absolute;
}

div.mod_quicknav form div.formbody input.submit {
    width:23%;
    left:75%;
    position:absolute;
    display:inline;

Edit2: Wenn ich

div.mod_quicknav form div.formbody select#ctrl_target.select {
    width:70%;
    left:2%;
    position:absolute;

zu position: relative ändere geht es, verstehe nur nicht warum?!

[valentin_]

ok, kann halt probleme unter ios safari 5 und opera mini machen.

ich wuerde den submit button ausblenden und das select bei onchange submiten.
ansonsten (die einfachste variante) das select auf 100% breite setzen und das submit feld darueber absolut positionieren.
du koenntest auch mit % arbeiten, zb select 80% und submit 20% setzen.

Gesendet von meinem GT-I9505 mit Tapatalk 2

[Fkhm]

ich wuerde den submit button ausblenden und das select bei onchange submiten.
ansonsten (die einfachste variante) das select auf 100% breite setzen und das submit feld darueber absolut positionieren.
du koenntest auch mit % arbeiten, zb select 80% und submit 20% setzen.

Habe es fast so gelöst, nur noch etwas Platz gelassen dazwischen. Siehe oben, wie funktioniert das mit dem select onchange? Finde im Netz nicht viel darüber im Zusammenhang mit contao

[valentin_]

einfach das formular/select im template anpassen.

<select onchange="this.form.submit();" ... >

so sollte es funktionieren.

Gesendet von meinem GT-I9505 mit Tapatalk 2

[Fkhm]

Hm, ich passe ungerne templates an, wegen der Updatefähigkeit.

Soweit habe ich jetzt alles hinbekommen, außer das Level_2 von Level_1 abzuheben.

Sehs bei mir nur am iPhone, sind alle Hauptpunkte und unterpunkte auf diesem Drehrad auf einer Ebene.

[valentin_]

wie passt du templates an? diese sind immer updatefaehig. du darfst diese nich direkt in den sourceordnern aendern sondern uebees backend ueber den punkt template eine kopie anlegen und danach die datei unter /templates anpassen.

Gesendet von meinem GT-I9505 mit Tapatalk 2

[melzebub]

position fixed auf mobilen Geräten ist meistens mit Problemen verbunden, da dort der viewport bewegt wird und nicht der body gescrollt. Also völlig anderes Verhalten als bei Desktop Browsern. Chrome hat da etwas getrickst und auch iOS handhabt das mittlerweile ganz passabel, aber sicher bist du damit nicht.
Templates kopieren und in den Ordner Templates ablegen, dann bist du auch updatesicher. Button würde ich auch ausblenden. Neben der quicknavi bedeutet recht klein, man muss also zielen. Ist sicher nicht optimal für kleine Gerätebildschirme.

Gruß
Stefan

[Fkhm]

Finde den Button nicht so schlecht von der Größe her:
Unbenannt-2.png

Werde das ganze mal auf nem kleineren Bildschirm anteste, aber den habe ich gerade nicht zur Verfügung.
Jetzt noch die Frage: Wie kann ich in dieser Rolle hier:
Quicknav_iPhone.png
die Links des level_2 weiter einrücken, oder mit einem Strich vor dem Menüpunkt versehen?

Werde das mit dem bearbeiteten Template mal ausprobieren, welches Template ist denn für die Quicknav zuständig? die Datei mit der Endung .html5 oder .xhtml?

Nagut, mit dem bearbeiten des .html5 hat es geklappt. Sehr gut, denke dass ich diese Funktion lassen werde.

Habe gerade etwas versucht auszukalmmern

 <option value="<?php echo $item['href']; ?>"><?php echo str_repeat(' [nbsp] ', $item['level']); ?><?php echo $item['link']; ?></option>
<?php endforeach; ?>

undzwar das mit den

<?php echo str_repeat(' [nbsp] ', $item['level']);

weil ich dachte, so die links einrücken zu können, aber danach musste ich die template datei löschen, da die Seite dann garnicht mehr geladen hat. War das der richtige Ansatz?

Und ich habe versucht, diese Funktion nachzu bauen. Hat aber nicht geklappt:
https://community.contao.org/de/show...l=1#post186233


Edit: habe nun das [nbsp] gegen ein "--" getauscht (ohne Anführungszeichen), jetzt habe ich auf den mobilen Geräten diese 2 Striche vor den Unterpunkten. Mal sehen wie man diese FUnktion aus dem oben geposteten Thread aktivieren kann.

[Fkhm]

Habe den Titel vom Modul entfernt, die tieferen Level (bei mir gibt es nur 2) mit einem doppel strich (--) versehen und habe es als onchance versehen.
Der submit-button ist via css

submit {
display: none;}

ausgeblendet.

Hier meine angepastte mod_quicknav.html5, vielleicht kann ja nochmal jemand drüber schauen.

<!-- indexer::stop -->
<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>

<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>

<form<?php if ($this->request): ?> action="<?php echo $this->request; ?>"<?php endif; ?> method="post">
<div class="formbody">
<input type="hidden" name="FORM_SUBMIT" value="tl_quicknav">
<input type="hidden" name="REQUEST_TOKEN" value="{{request_token}}">
<label for="ctrl_target" class="invisible"><?php echo $this->targetPage; ?></label>
<select onchange="this.form.submit();" name="target" id="ctrl_target" class="select">
  
<?php foreach ($this->items as $item): ?>
  <option <?php if($this->Environment->request == $item['href']): ?>selected="selected" <?php endif; ?> value="<?php echo $item['href']; ?>"><?php echo str_repeat(' --  ', $item['level']); ?><?php echo $item['link']; ?></option>
<?php endforeach; ?>
</select>
<input type="submit" class="submit" value="<?php echo $this->button; ?>">
</div>
</form>

</div>
<!-- indexer::continue -->

Entfernt wurde der Quicknavtitel durch entfernen von

<option value=""><?php echo $this->title; ?></option>

Die einrückungen

[nbsp] 

wurden ersetzt durch

-- 

Eingfügt zwischen option und value (dafür vielen Dank Andreas aus folgendem Thread: https://community.contao.org/de/show...l=1#post186233)

<?php if($this->Environment->request == $item['href']): ?>selected="selected" <?php endif; ?>

Gute Nacht.