10-Links.HTML
<$
var cssClass = article.cssClass
""; var inlineCss = article.inlineCss
"";
if ( cssClass ) {cssClass = "sidenav " + cssClass;}
else {cssClass = "sidenav";}
if ( inlineCss ) {inlineCss = ' style="' + inlineCss + '"';}
var FeHgCol = article.value("fenster-hg-farbe","");
var FeBordCol = article.value("fenster-border","");
var GeschwMS = article.value("geschw","");
var cssselector = '' + '.sidenav ';
var headstyle = "";
if ( FeHgCol !== "" ){headstyle += cssselector + "{background-color: " + FeHgCol + " !important;}\n";}
if ( FeBordCol !== "" ){headstyle += cssselector + "{border-left: 1px solid " + FeBordCol + " !important;}\n";}
if ( GeschwMS !== "" ){headstyle += cssselector + "{transition: " + GeschwMS + "ms !important;}\n";}
system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<$
var cssClass = article.cssClass
""; var inlineCss = article.inlineCss
"";
if ( cssClass ) {cssClass = "sidenav a " + cssClass;}
else {cssClass = "sidenav a";}
if ( inlineCss ) {inlineCss = ' style="' + inlineCss + '"';}
var FeTextGr = article.value("fenster-textgroesse","");
var FeLinkCol = article.value("fenster-link-farbe","");
var cssselector = '' + '.sidenav a ';
var headstyle = "";
if ( FeTextGr !== "" ){headstyle += cssselector + "{font-size: " + FeTextGr + "px !important;}\n";}
if ( FeLinkCol !== "" ){headstyle += cssselector + "{color: " + FeLinkCol + " !important;}\n";}
system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<$
var cssClass = article.cssClass
""; var inlineCss = article.inlineCss
"";
if ( cssClass ) {cssClass = "sidenav a:hover " + cssClass;}
else {cssClass = "sidenav a:hover";}
if ( inlineCss ) {inlineCss = ' style="' + inlineCss + '"';}
var FeLinkColHov = article.value("fenster-link-farbe-hover","");
var cssselector = '' + '.sidenav a:hover ';
var headstyle = "";
if ( FeLinkColHov !== "" ){headstyle += cssselector + "{color: " + FeLinkColHov + " !important;}\n";}
system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<$
var cssClass = article.cssClass
""; var inlineCss = article.inlineCss
"";
if ( cssClass ) {cssClass = "button-sidenav " + cssClass;}
else {cssClass = "button-sidenav";}
if ( inlineCss ) {inlineCss = ' style="' + inlineCss + '"';}
var ButCol = article.value("farbe-text-button","");
var ButHgCol = article.value("hg-farbe-button","");
var ButTop = article.value("pos-button","");
var cssselector = '' + '#button-sidenav ';
var headstyle = "";
if ( ButCol !== "" ){headstyle += cssselector + "{color: " + ButCol + " !important;}\n";}
if ( ButHgCol !== "" ){headstyle += cssselector + "{background-color: " + ButHgCol + " !important;}\n";}
if ( ButTop !== "" ){headstyle += cssselector + "{top: " + ButTop + "px !important;}\n";}
system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<$
var Breakpoint = article.value("button-drehen","");
var MobPosBut = article.value("mobile-pos-button","");
var headstyle = '@media (max-width: ' + Breakpoint + 'px) {';
headstyle += '#button-sidenav {';
headstyle += 'writing-mode:' + 'vertical-rl;';
headstyle += 'right:' + '-14px;';
headstyle += 'padding:' + '5px 18px 5px 4px;';
headstyle += 'top: ' + MobPosBut + 'px !important;';
headstyle += 'margin-top:' + '70px;';
headstyle += '}';
headstyle += '}';
system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<$
var Breakpoint = article.value("button-drehen","");
var headstyle = '@media (max-width: ' + Breakpoint + 'px) {';
headstyle += '#button-sidenav:hover {';
headstyle += 'right:' + '-4px;';
headstyle += '}';
headstyle += '}';
system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<$
var FeMobPx = article.value("fenster-ab-px","");
var AbstO = article.value("mobile-abstand-oben","");
var headstyle = '@media (max-height: ' + FeMobPx + 'px) {';
headstyle += '.sidenav {';
headstyle += 'padding-top: ' + AbstO + 'px !important;';
headstyle += '}';
headstyle += '}';
system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<$
var FeMobPx = article.value("fenster-ab-px","");
var MobSize = article.value("mobile-schriftgroesse","");
var headstyle = '@media (max-height: ' + FeMobPx + 'px) {';
headstyle += '.sidenav a {';
headstyle += 'font-size: ' + MobSize + 'px !important;';
headstyle += '}';
headstyle += '}';
system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<!--
***********************************************************************************
* Widget ZP / Widgets fuer Zeta Producer
* <$= article.widgetName $>
* Mario Gross / widget-zp.de
***********************************************************************************
-->
<$=system.partial("article-begin.html")$>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a <$= system.partial('zplink-expanded.html', 'link1') $>><$= article.value("linktext1") $></a>
<a <$= system.partial('zplink-expanded.html', 'link2') $>><$= article.value("linktext2") $></a>
<a <$= system.partial('zplink-expanded.html', 'link3') $>><$= article.value("linktext3") $></a>
<a <$= system.partial('zplink-expanded.html', 'link4') $>><$= article.value("linktext4") $></a>
<a <$= system.partial('zplink-expanded.html', 'link5') $>><$= article.value("linktext5") $></a>
<a <$= system.partial('zplink-expanded.html', 'link6') $>><$= article.value("linktext6") $></a>
<a <$= system.partial('zplink-expanded.html', 'link7') $>><$= article.value("linktext7") $></a>
<a <$= system.partial('zplink-expanded.html', 'link8') $>><$= article.value("linktext8") $></a>
<a <$= system.partial('zplink-expanded.html', 'link9') $>><$= article.value("linktext9") $></a>
<a <$= system.partial('zplink-expanded.html', 'link10') $>><$= article.value("linktext10") $></a>
<a <$= system.partial('zplink-expanded.html', 'link11') $>><$= article.value("linktext11") $></a>
<a <$= system.partial('zplink-expanded.html', 'link12') $>><$= article.value("linktext12") $></a>
<a <$= system.partial('zplink-expanded.html', 'link13') $>><$= article.value("linktext13") $></a>
<a <$= system.partial('zplink-expanded.html', 'link14') $>><$= article.value("linktext14") $></a>
<a <$= system.partial('zplink-expanded.html', 'link15') $>><$= article.value("linktext15") $></a>
</div>
<div id="button-sidenav" onclick="openNav()">
<span>☰ <$= article.value("text-button") $></span>
</div>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "<$= article.value("fenster-breite") $>px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
<!--############ ANFANG HINWEISFENSTER FUER LIVEVORSCHAU -->
<$ if ( system.preview ) { $>
<!-- Preview-Code nur für internen Vorschau -->
<div style="background-color:#d7daee; padding:15px; border-radius: 10px; box-shadow: inset 0px 0px 20px rgba(0, 51, 255, 0.99);">
<img src="https://www.zella.de/widget/bilder/wzp.png" style="float:left; margin-right:33px;">
<p style="font-size: 1.2em; font-weight: bold; color:#0371df">Seiten-Navigation</p>
<p style="color:#0371df">Hier können Sie das Widget öffnen oder löschen. Dieser Hinweis wird nur in der internen Vorschau angezeigt.</p>
</div>
<$ } else { $>
<$ } $>
<!--########## ENDE HINWEISFENSTER FUER LIVEVORSCHAU -->
<$=system.partial("article-end.html")$>