tag:help.rocksolidthemes.com,2012-07-23:/discussions/contao/41388-verwendung-mobile-navigation-bei-desktopRockSolid Themes: Discussion 2019-06-05T06:50:27Ztag:help.rocksolidthemes.com,2012-07-23:Comment/471774062019-04-15T07:00:09Z2019-04-15T07:00:09ZVerwendung: Mobile Navigation bei Desktop<div><p>Produkt: Oneo Contao<br>
Contao-Version: 4xx<br>
Browser und Browserversionen: alle</p>
<p>Hallo, ich würde gerne das mobile menu bereits bei Desktopgröße verwenden. Viele Websites schalten auf mobile um, sobald man die Seite ein wenig nach oben scrollt. Ist das auch mit Oneo möglich? Vielen Dank!</p></div>michael.wiegaertnertag:help.rocksolidthemes.com,2012-07-23:Comment/471774062019-04-15T13:36:38Z2019-04-15T13:36:38ZVerwendung: Mobile Navigation bei Desktop<div><p>Vielen Dank für Ihre Frage.</p>
<p>Wie Sie die mobile Navigation auch für andere Bildschirmgrößen aktivieren können ist in folgendem Beitrag beschrieben: <a href="http://help.rocksolidthemes.com/discussions/contao/11684">http://help.rocksolidthemes.com/discussions/contao/11684</a></p>
<blockquote>
<p>Viele Websites schalten auf mobile um, sobald man die Seite ein wenig nach oben scrollt.</p>
</blockquote>
<p>Dass die komplette Darstellung der Seite wechselt sobald man nach oben scrollt ist und so von keiner Website bekannt. Können Sie und dafür ein Beispiel senden?</p></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/471774062019-04-15T13:46:38Z2019-04-15T13:55:55ZVerwendung: Mobile Navigation bei Desktop<div><p>Sorry,</p>
<p>ich meinte natürlich das Umschalten auf Mobile Navigation.</p>
<p>Mit freundlichen Grüßen<br>
Michael Wiegaertner</p></div>michael.wiegaertnertag:help.rocksolidthemes.com,2012-07-23:Comment/471774062019-04-15T13:52:47Z2019-04-15T13:56:04ZVerwendung: Mobile Navigation bei Desktop<div><p>Hallo,</p>
<p>vielen Dank für die Antwort! Ich habe das leider falsch ausgedrückt. Natürlich will ich nur die Mobile Navigation in allen Seiten haben. Aber wie funktioniert das mit dem nach oben wegscrollen? Kann ich das nur über jquery realisieren? Siehe <a href="http://www.spiegel.de">www.spiegel.de</a> (ein einfaches Beispiel)</p>
<p>Ich würde das natürlich über die gesamte Breite machen!</p>
<p>Mit freundlichen Grüßen<br>
Michael Wiegaertner</p></div>michael.wiegaertnertag:help.rocksolidthemes.com,2012-07-23:Comment/471774062019-04-15T15:11:16Z2019-04-15T15:11:16ZVerwendung: Mobile Navigation bei Desktop<div><p>Wenn wir Sie richtig verstehen, möchten Sie die mobile Navigation erst ab einer bestimmten Scrollposition einblenden lassen?</p>
<p>Falls ja, können Sie das z. B. mit folgendem JavaScript-Code realisieren:</p>
<pre>
<code>jQuery(window).on('scroll resize domready load', function() {
jQuery('.main-navigation-mobile-open').css('display', jQuery(window).scrollTop() > 500 ? '' : 'none');
});</code>
</pre>
<p>Ersetzen Sie dabei <code>500</code> mit der gewünschten Scrollposition.</p></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/471774062019-06-04T11:26:55Z2019-06-04T12:58:01ZVerwendung: Mobile Navigation bei Desktop<div><p>Hallo,</p>
<p>danke noch mal für die Hilfe. Leider kann ich das Script nicht zum laufen bringen. Meine Vorgehensweise:</p>
<ol>
<li>Ich habe das JS in eine Datei mit Namen "swapnav.js" kopiert.<br></li>
<li>Dann habe ich den Wert 500 auf 10 geändert.<br></li>
<li>Danach habe ich die Datei unter "/files/vsteiner/js/" abgelegt.<br></li>
<li>Dann habe ich im Seitenlayout im Bereich Eigener JavaScript-Codefolgende Zeile eingefügt (Kopie der darüber liegenden Zeile)<br>
""</li>
</ol>
<p>Das Script wird geladen, kann im Inspector nachvollzogen werden. Der Inspector zeigt keine Fehler an. Leider hat das Script auch keine Auwirkung.</p>
<p>Was mach ich falsch??</p>
<p>Mit freundlichen Grüßen<br>
Michael Wiegaertner</p></div>michael.wiegaertnertag:help.rocksolidthemes.com,2012-07-23:Comment/471774062019-06-04T13:04:53Z2019-06-04T13:04:53ZVerwendung: Mobile Navigation bei Desktop<div><p>Zusätzlich zu dem JavaScript wird auch der CSS-Code aus dem oben verlinkten Ticket benötigt damit die mobile Navigation angezeigt wird:</p>
<pre>
<code>.main-navigation-mobile-open {
display: block;
}
.main-navigation-mobile.is-enabled {
display: block;
}</code>
</pre>
<p>Damit wir Ihnen zielgerichteter weiterhelfen können, schicken Sie uns bitte einen Link zur betroffenen Seite.</p></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/471774062019-06-04T13:42:57Z2019-06-04T13:47:17ZVerwendung: Mobile Navigation bei Desktop<div><p>Sorry, habe ich vergessen: [Link entfernt]</p></div>michael.wiegaertner