tag:help.rocksolidthemes.com,2012-07-23:/discussions/contao/35139-verwendung-bereichsnavigation-von-oneo-in-tao-verwenden
RockSolid Themes: Discussion
2018-12-21T19:09:52Z
tag:help.rocksolidthemes.com,2012-07-23:Comment/46687936
2018-12-19T08:58:38Z
2018-12-19T08:58:39Z
Verwendung: Bereichsnavigation von Oneo in Tao verwenden
<div><p>-</p></div>
Sid
tag:help.rocksolidthemes.com,2012-07-23:Comment/46687936
2018-12-19T12:16:23Z
2018-12-19T12:16:23Z
Verwendung: Bereichsnavigation von Oneo in Tao verwenden
<div><p>Vielen Dank für Ihre Frage.</p>
<p>Der dazugehörige Skript-Block (<code>// Anchor navigation active status</code>) aus der Datei <em>files/oneo/js/script.js</em> muss ebenfalls übernommen werden.</p>
<p>Die Listenpunkte lassen sich mit folgendem CSS-Code entfernen.</p>
<pre>
<code>.area-navigation ul {
list-style: none;
}</code>
</pre></div>
RockSolid Themes
tag:help.rocksolidthemes.com,2012-07-23:Comment/46687936
2018-12-19T14:34:14Z
2018-12-19T21:56:38Z
Verwendung: Bereichsnavigation von Oneo in Tao verwenden
<div><p>Hallo und danke für die schnelle Antwort.<br>
Gehört ( // Smooth scrolling ) und ( // Anchor jumping on page load ) auch zu dem Menü?<br>
Hab alles in die .js eingetragen, aber leider ohne Erfolg.<br>
Der aktive Menüpunkt bleibt nach wie vor nicht makiert und die Prev/Next-Buttons funktionieren auch nicht richtig.<br>
Hier der Link zur Seite: [Link entfernt]</p></div>
Sid
tag:help.rocksolidthemes.com,2012-07-23:Comment/46687936
2018-12-20T06:15:17Z
2018-12-20T06:15:17Z
Verwendung: Bereichsnavigation von Oneo in Tao verwenden
<div><blockquote>
<p>Gehört ( // Smooth scrolling ) und ( // Anchor jumping on page load ) auch zu dem Menü?</p>
</blockquote>
<p><code>// Smooth scrolling</code> hat den Effekt, dass sich die Seite animiert zu der Scrollposition bewegt anstatt direkt an die Position zu springen.</p>
<p><code>// Anchor jumping on page load</code> ist bereits in einer Form im Tao-Theme enthalten und sollte nicht aus Oneo übernommen werden.</p>
<blockquote>
<p>Hab alles in die .js eingetragen, aber leider ohne Erfolg.</p>
</blockquote>
<p>Die JavaScript-Datei enthält einen Syntax-Fehler, bitte entfernen Sie die Zeile 844 <code>})();</code> (diese ist doppelt vorhanden).</p></div>
RockSolid Themes
tag:help.rocksolidthemes.com,2012-07-23:Comment/46687936
2018-12-20T15:22:47Z
2018-12-20T15:22:48Z
Verwendung: Bereichsnavigation von Oneo in Tao verwenden
<div><p>Hallo und danke für die schnelle Rückmeldung.<br>
Hab den Wald vor lauter Java Skript nicht gesehen.<br>
Danke das war's, perfekt, Jetzt läuft alles! ... Ihr seid spitze!<br>
Hättet ihr noch eine Idee, was ich am CSS ändern muss damit die Formatierung passt?<br>
(meinte nicht den list-style der ul sondern die verschobenen Prev/Next-Buttons)</p>
<pre>
<code>.area-navigation {
z-index: 999;
position: fixed;
top: 0;
right: 30px;
right: calc(30px + var(--safe-area-right));
height: 100%;
display: table;
}
@media screen and (max-width: 1280px) {
.area-navigation {
right: 1.5625%;
right: calc(1.5625% + var(--safe-area-right));
margin-right: -12px;
}
}
@media screen and (max-width: 900px) {
.area-navigation {
right: 2.08333%;
right: calc(2.08333% + var(--safe-area-right));
}
}
@media screen and (max-width: 599px) {
.area-navigation {
display: none;
}
}
.area-navigation ul {
display: table-cell;
vertical-align: middle;
padding: 0;
width: 24px;
list-style: none;
}
.area-navigation li {
margin: 4px 0;
text-align: center;
}
.area-navigation a {
position: relative;
display: inline-block;
width: 18px;
height: 18px;
margin: 0;
padding: 4px;
outline: none;
color: #50adc8;
text-decoration: none;
}
.area-navigation a:after {
content: "";
display: block;
width: 10px;
height: 10px;
/* border: 2px solid rgba(113, 124, 142, 0); */
border-radius: 100%;
background-color: rgba(255, 255, 255, 0.8);
box-shadow: rgb(119, 119, 119) 0px 0px 2px;
background-clip: padding-box;
}
.area-navigation a:hover:after,
.area-navigation a.active:after {
background-color: rgb(119, 119, 119);
box-shadow: rgba(255, 255, 255, 0.5) 0px 2px 0px -1px inset, rgba(0, 0, 0, 0.3) 0px -2px 0px -1px inset, rgb(85, 85, 85) 0px 0px 0px 1px;
}
.area-navigation a.prev,
.area-navigation a.next {
width: 24px;
height: 24px;
padding: 5px;
border: 2px solid rgba(255, 255, 255, 0.8);
border-radius: 100%;
-webkit-transition: -webkit-transform 0.1s;
-moz-transition: -moz-transform 0.1s;
-o-transition: -o-transform 0.1s;
transition: transform 0.1s;
}
@media screen and (max-width: 1280px) {
.area-navigation a.prev,
.area-navigation a.next {
display: none;
}
}
.area-navigation a.prev:after,
.area-navigation a.next:after {
font: 10px/1 "RockSolid Icons";
content: "\e01a";
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
display: block;
}
.area-navigation a.prev:after,
.area-navigation a.prev:hover:after,
.area-navigation a.next:after,
.area-navigation a.next:hover:after {
color: rgb(119, 119, 119);
background-color: rgba(255, 255, 255, 0.8);
box-shadow: rgb(119, 119, 119) 0px 0px 2px;
border: 4px solid rgba(255, 255, 255, 0.8);
}
.area-navigation a.prev:hover,
.area-navigation a.next:hover {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
}
.area-navigation a.prev.is-disabled,
.area-navigation a.next.is-disabled {
visibility: hidden;
pointer-events: none;
}
.area-navigation a.prev > span,
.area-navigation a.next > span {
display: none;
}
.area-navigation a.next:after {
content: "\e015";
}
.area-navigation a > span {
position: absolute;
top: 50%;
right: 100%;
max-width: 0;
overflow: hidden;
margin: -0.5em 0.5em 0 0;
font-size: 0.93333em;
line-height: 1;
white-space: nowrap;
-webkit-transition: max-width 0.3s cubic-bezier(0, 1, 1, 1);
-moz-transition: max-width 0.3s cubic-bezier(0, 1, 1, 1);
-o-transition: max-width 0.3s cubic-bezier(0, 1, 1, 1);
transition: max-width 0.3s cubic-bezier(0, 1, 1, 1);
}
.area-navigation a:hover > span {
max-width: 999px;
-webkit-transition: max-width 0.6s cubic-bezier(0.75, 0, 1, 1);
-moz-transition: max-width 0.6s cubic-bezier(0.75, 0, 1, 1);
-o-transition: max-width 0.6s cubic-bezier(0.75, 0, 1, 1);
transition: max-width 0.6s cubic-bezier(0.75, 0, 1, 1);
}
.area-navigation.-invert-controls a {
color: white;
}
.area-navigation.-invert-controls a:after {
border-color: rgba(255, 255, 255, 0);
background-color: white;
}
.area-navigation.-invert-controls a:hover:after,
.area-navigation.-invert-controls a.active:after {
border-color: white;
background-color: rgba(255, 255, 255, 0.25);
}
.area-navigation.-invert-controls a.prev:hover,
.area-navigation.-invert-controls a.prev.active,
.area-navigation.-invert-controls a.next:hover,
.area-navigation.-invert-controls a.next.active {
color: white;
}
.area-navigation.-invert-controls a.prev:after,
.area-navigation.-invert-controls a.prev:hover:after,
.area-navigation.-invert-controls a.next:after,
.area-navigation.-invert-controls a.next:hover:after {
background-color: transparent;</code>
</pre>
<p>... bis auf die Farben und den Abstand zur Main-Nav, wurde am Standard-Code nichts verändert.</p></div>
Sid
tag:help.rocksolidthemes.com,2012-07-23:Comment/46687936
2018-12-20T15:30:43Z
2018-12-20T15:30:44Z
Verwendung: Bereichsnavigation von Oneo in Tao verwenden
<div><p>.</p></div>
Sid
tag:help.rocksolidthemes.com,2012-07-23:Comment/46687936
2018-12-21T07:18:41Z
2018-12-21T07:18:41Z
Verwendung: Bereichsnavigation von Oneo in Tao verwenden
<div><p>Bitte fügen Sie zusätzlich folgenden CSS-Code ein:</p>
<pre>
<code>.area-navigation a.prev,
.area-navigation a.next {
padding: 0;
border: 0;
width: 18px;
height: 18px;
}
.area-navigation a.prev:after,
.area-navigation a.next:after {
margin: 0;
}</code>
</pre></div>
RockSolid Themes
tag:help.rocksolidthemes.com,2012-07-23:Comment/46687936
2018-12-21T11:18:57Z
2018-12-21T19:09:40Z
Verwendung: Bereichsnavigation von Oneo in Tao verwenden
<div><p>Danke, perfekt, hat funktioniert.</p></div>
Sid
tag:help.rocksolidthemes.com,2012-07-23:Comment/46687936
2018-12-21T11:20:55Z
2018-12-21T19:09:40Z
Verwendung: Bereichsnavigation von Oneo in Tao verwenden
<div><p>Danke, perfekt, hat funktioniert</p></div>
Sid