Menü Slider in Box
animierter Inhalt in rechter Box
Menü-Ticker:
Der HTML-Code für die rechte Box
Einfügen im Feld "rechte Box" (bei "Design" / "Designeinstellungen")<ul id="newsbox"> <li> <a href="/Seite.htm"> Linktext 1 </a> </li> <li> <a href="/Seite.htm"> Linktext 2 </a> </li> <li> <a href="/Seite.htm"> Linktext 3 </a> </li> <li> <a href="/Seite.htm"> Linktext 4 </a> </li> <li> <a href="/Seite.htm"> Linktext 5 </a> </li> <li> <a href="/Seite.htm"> Linktext 6 </a> </li> <li> <a href="/Seite.htm"> Linktext 7 </a> </li> </ul>- wer die Beschreibung für "mehrere Boxen" verwendet, fügt diesen hier ein
- ersetze Seite.htm durch gewünschte Seitenadresse
Der CSS-Code
Einfügen im Feld "Eigener <head> - Inhalt"/* Gesamte News-Box */ #newsbox { width: 190px; height: 155px; overflow: hidden; padding: 6px 10px 14px 0px; margin:0px 0px 0px 15px; } /* Menü Felder - mit Pfeil-Grafiken */ #newsbox li { height: 35px; padding: 0px 0px 0px 30px; list-style-type: none; background: url(//theme.webme.com/designs/clean/arrows/black.png) no-repeat;} /* Linkfarbe */ #newsbox a { color: #000000; text-decoration: none;}
Das Javascript einfügen
Einfügen im Feld "Eigener <head> - Inhalt", nach dem --> </style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var first = 0;
var speed = 500;
var pause = 3000;
function removeFirst(){
first = $('ul#newsbox li:first').html();
$('ul#newsbox li:first')
.animate({opacity: 0.5}, speed)
.fadeOut('slow', function() {$(this).remove();});
addLast(first);
}
function addLast(first){
last = '
';
$('ul#newsbox').append(last)
$('ul#newsbox li:last')
.animate({opacity: 1}, speed)
.fadeIn('slow')
}
interval = setInterval(removeFirst, pause);
});
</script>