Nav Menü rechtsbündig ?

[Rotweintrinker]

Hallo und gleich vorweg, ich kann leider kein PHP oder CSS, bitte daher um Nachsicht.

Ich möchte das Navigationsmenü welches zentriert steht und beim runterscrollen sich nach rechts verschiebt, dauerhaft rechtsbündig einstellen. (siehe Theme: microquix). Die nav_default.html5 sieht so aus:

<ul class="<?= $this->level ?>" role="<?= ($this->level == 'level_1') ? 'menubar' : 'menu' ?>">
<?php foreach ($this->items as $item): ?>
<?php if ($item['isActive']): ?>
<li class="<?= $item['class'] ?>"><span class="<?= $item['class'] ?>" role="menuitem"<?php if (!empty($item['subitems'])): ?> aria-haspopup="true"<?php endif; ?>><?= $item['link'] ?></span><?= $item['subitems'] ?></li>
<?php else: ?>
<li<?php if ($item['class']): ?> class="<?= $item['class'] ?>"<?php endif; ?>><a href="<?= $item['href'] ?>" title="<?= $item['pageTitle'] ?: $item['title'] ?>" <?php if ($item['class']): ?> class="<?= $item['class'] ?> animsition-link"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?= $item['accesskey'] ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?= $item['tabindex'] ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?= $item['target'] ?> role="menuitem"<?php if (!empty($item['subitems'])): ?> aria-haspopup="true"<?php endif; ?>><?= $item['link'] ?></a><?= $item['subitems'] ?></li>
<?php endif; ?>
<?php endforeach; ?>
</ul>

Kann ich hier etwas dementsprechend umändern ?

Danke
Thomas

[soweit_ok]

Man kann alles ändern, im Template z. B. mit Inline-Styles. Würde hier aber keinen Sinn ergeben. Für Formatänderungen hast Du CSS-Klassen. Die Auswirkung von Änderungen oder Zusatzformatierungen kannst Du zunächst ohne Codeänderung erstmal temporär mit Entwicklertools probieren. Je nach Browser eines der verfügbaren. Im Firefox z. B. wäre das Plugin "Firebug" sehr gut geeignet.

Du guckst Dir mit einem solchen Tool erstmal an, wie die Navi formatiert ist. Zentrierung erfolgt oft einfach mittels "text-align:center" im ul-Element. Ändern auf "text-align:right". Es gibt auch andere Möglichkeiten. Vorstehendes Beispiel wirkt sich auf den Text innerhalb des Elements aus. Will man stattdessen ein Blockelement insgesamt zentrieren, muss zunächst mal dafür gesorgt werden, dass es weniger als 100 % Breite hat, idealerweise nicht breiter als der Inhalt + erwünschte Innenabstände. Entweder mit "width:..." oder mit "display:inline-block" sowie "position:absolut" und "right:0px". Aber Achtung, absolute Positionierung sollte man hier nur verwenden, wenn entweder von einem Eltern-Element umschlossen, das ein Block-Element sein muss oder wenn es aus sonstigen Gründen nichts ausmacht, aus dem normalen Elementfluss gerissen zu werden. Bei Top-Navi, geht das u. U. gut, wenn sie ganz oben steht. Da gibt man dann den obersten sonstigen relativ oder statisch positioniertem Element den benötigten Abstand von oben. Das kann bei responsiven Layouts aber evtl. unerwünschte Nebenwirkungen haben, je nachdem, was man sonst so vorhat. Den universellen Tipp gibts hierbei nicht, hängt immer vom Context ab, in Relation zu den sonstigen Elementen und ggf. Animationen oder auch dynamischem Überschreiben des CSS zur Laufzeit.

Anhand des Templates kann man das nicht sehen. Theoretisch kann man zwar auch alles im Template tun, was man will, praktisch wäre es aber in diesem Fall nicht. Falls Du eine zusätzliche Klasse irgendwo brauchen kannst, oder eine ID, kannst Du die natürlich hinzufügen. Hat den Vorteil, dass es dann keine generische Klasse ist, sondern gezielt nur auf bestimmten Seiten angesprochen werden kann.

Bitte künftig bei Einsteigerfragen am besten auch den Kenntnisslevel angeben. Hier wären die CSS-Kenntnisse relevant. Kann ja sein, Du hast bereits recht gute, kamst nur nicht auf die Idee, weil Du glaubtest, das müsse man im Template machen. In dem Fall hätte nämlich ein Satz gereicht, statt eines Mini-Tutorials.

Ach ja, fast vergessen ... zuallererst natürlich erstmal in den Moduleinstellungen schauen, ob vielleicht eine Positionierungsoption gewählt werden kann. Spricht zwar nicht gegen die CSS-Variante - ist egal wo man es macht. Ggf. eine Optionswahl in den Einstellungen würde statt ext. CSS eine Inline-Formatierung bewirken. Da hättest Du dann die Wahl, Inline-Formatierungen nicht im Template vornehmen zu müssen.

[Rotweintrinker]

Vielen Dank für die sehr ausführliche Antwort. Werde ich mir nun zur Brust nehmen und mein Bestes versuchen. Hatte ja geschrieben, dass ich keine Ahnung von CSS und PHP habe, versuche aber stets dazuzulernen. Vielen Dank!!!

[soweit_ok]

Hatte ja geschrieben, dass ich keine Ahnung von CSS und PHP habe, versuche aber stets dazuzulernen. Vielen Dank!!!

Oh ja stimmt, hattest Du erwähnt, sorry. Hab ich wohl irgendwie überlesen. :-)

[Andreas]

Du kannst auch ganz einfach in der jquery.theme_script.js in Zeile 27 das letzte Slash entfernen und dem #header in deinem Seitentemplate (fe_?.html5) class="fix" hinzufügen.

Die Animation erfolgt über Javascript, welches nur die Klasse "fix" in den Header setzt. Mit dem Entfernen des Slashs deaktivierst du das dafür verantwortliche Javascript.

Kann nicht testen, habe das Theme nicht.

[Rotweintrinker]

Prima, das teste ich mal. Hatte es schon geschafft und in CSS das Ganze nach rechts gerückt, nur schiebt er beim Runterscrollen immer noch das Menü nach recht und jetzt eben nach gaaanz rechts

[Kim]

Weniger Rotwein mehr CSS

Spaß beiseite, ohne einen Link kann man da nicht viel zu sagen.
Wenn die Klasse per JS beim scrollen gesetzt wird ist es eigentlich nur noch CSS.

Beispiel:

#header nav {
    position: relative;
    float: right;
    display: block;
    margin-right: 50%;
}

#header.fix nav {
    margin-right: 0px;
}

Hatte es schon geschafft und in CSS das Ganze nach rechts gerückt, nur schiebt er beim Runterscrollen immer noch das Menü nach recht und jetzt eben nach gaaanz rechts

Hast du dem Header eine Breite gegeben?

Beispiel:

#header .inside {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

[Andreas]

Das CSS ist doch schon im Theme vorhanden. Also entweder das .fix aus dem CSS entfernen, oder die Klasse fix in den Header bringen. Das JS welches die Klasse fix beim Scrollen in den Header bringt sollte man natürlich entfernen oder deaktivieren.

[Rotweintrinker]

Oh man, vielen Dank für Eure Bemühungen. Ich bin dann wohl doch ein DAU

Könnt ihr vllt. über Firebug das Problem analysieren ?

http://www.dynamic-surf-product.de/i...hp/sg_pro.html

Jetzt das Menü zwar rechts, aber zuck immer beim scrollen.
Ich hatte jetzt im mainmenu left:275px; angegeben.

[Messa]

Du hast nicht 275px sonder nur 275 drinnen, da fehlt das "px noch.
Generell sind total überflüssigen CSS Anweisungen für die Navigation drinnen.
Hast du viel an dem gekauften Theme geändert?

Zu deinem Problem schau deine CSS Datei nach .fix durch da wird etwas geändert, dass dir in die Quere kommt.
Wie gesagt, es steht sehr viel unnötiges drinnen. Wie die UL muss nicht positioniert werden oder 200% Breite.

Es würde reichen die ul in eine div packen und die dem div text-align right zu geben.
Dann wird die Navigation direkt an den Rand des inner div gesetzt.

lg

[Rotweintrinker]

Danke, schaue mich mal durch ....
275px habe ich schon ergänzt.
An dem gekauften Theme habe ich bzgl. CSS außer den 275px noch nichts verändert.

Thx

[Andreas]

Du hast immer noch das hier in der /files/theme_files_q/theme_scripts/jquery.theme_script.js

/***********************************/
/*WINDOW SCROLL*/
/**********************************/

$(window).scroll(function() {
  if ($(window).scrollTop() >= 10){
    $('header').addClass('fix');
  }else {
    $('header').removeClass('fix');
  }

  if ($(window).scrollTop() >= 10){
    $('.scroll-head').addClass('fix');
  }else {
    $('.scroll-head').removeClass('fix');
  }
}); 

.scroll-head kann ich übrigens auf der Seite nicht finden. Hast du eventuell nicht im Einsatz.

[Rotweintrinker]

@Andreas oder wer eine Idee hat

Sorry, ich hab Deinen letzten Tip nicht ganz verstanden bzw. weiß nicht genau was ich nun tun kann
Haste nochmal einen ergänzenden Hinweis oder Tip, denn das Menü steht zwar da wo es soll, aber er zuckt noch so nervig !
DANKE .....

http://www.dynamic-surf-product.de/

[Andreas]

Deinem HEADER wird immer noch beim Scrollen die Klasse "fix" zugeordnet, dadurch entsteht dieser Effekt. Ich habe jetzt keine Lust das ganze CSS nach .fix zu untersuchen, was damit dann alles geändert wird. Aber wenn du den fix-Zustand nicht haben möchtest, dann sorge am besten dafür, dass diese Klasse erst gar nicht erzeugt wird. Deswegen mein Hinweis, dass du in dieser JS-Datei die Funktion dafür abschalten kannst.

Und dann hatte ich noch den Hinweis gegeben, dass JS auch nach $('.scroll-head') sucht, ich auf der Seite aber kein Element mit der Klasse "scroll-head" finden kann. Womit du das wahrscheinlich auch deaktivieren kannst.

[Rotweintrinker]

Danke Andreas, ich mach mich dann mal an die Arbeit

[Rotweintrinker]

Ich habe den Eintrag unter "Window Scroll" gelöscht. Es zuckt nicht mehr ;-) DANKE!