Hallo,
um es gleich vorweg zu nehmen, ich kenne mich mit CSS überhaupt nicht aus.
Ich habe einen online shop in dem ich ein sidebanner aufklappen kann in dem ich mit der Maus darüber fahre.
Hier der Link zum Shop, das aufklappbare Banner befindet sich links.
Ich möchte nun das das Banner immer aufgeklappt ist, das müsste doch einstellbar sein.
Kann mir jemand erklären was ich in dem Code ändern muss?
Smarty
{block name=frontend_index_body_inline append}<style type="text/css">
.ribbon.container_20 {
width: auto;
position: fixed;
top: 30%;
padding: 10px;
overflow: visible;
z-index: 10px;
{if $ribbonposition == 'rechts'}
padding-left: 40px;
{else}
padding-right: 40px;
{/if}
box-shadow: 0px 0px 10px #666;
}
.ribbon .arrow {
position: absolute;
{if $ribbonposition == 'rechts'}
left: 8px;
{else}
right: 8px;
{/if}
top: 50%;
}
.ribbon .arrow img{
position: relative;
top: -7px;
}
</style>
<div class="ribbon container_20">
{if $ribbonlink}<a href="{$ribbonlink}">{/if}
{$ribbontext}
{if $ribbonlink}</a>{/if}
<div class="arrow"><img src="{if $ribbonposition == 'rechts'}{link file='frontend/_resources/images/icons/ico_listing-prev.png'}{else}{link file='frontend/_resources/images/icons/ico_listing-next.png'}{/if}" /></div>
</div>
<script type="text/javascript">
$(function() {
var floatpos = {if $ribbonposition == 'rechts'}'right'{else}'left'{/if};
var floatwidth = -1 * $('.ribbon').width() - 20;
$('.ribbon').css(floatpos, floatwidth);
$('.ribbon').hover(function() {
// IN
$(this).stop().animate({ {if $ribbonposition == 'rechts'}'right'{else}'left'{/if}:0 }, 200);
}, function() {
// OUT
$(this).stop().animate({ {if $ribbonposition == 'rechts'}'right'{else}'left'{/if}:floatwidth }, 400);
});
});
</script>
{/block}Vielen Dank.