Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Стили (CSS) » Как сделать красивый speedbar

Как сделать красивый speedbar


     16.08.2012    speedbar, speedbar.tpl    Все вопросы » Стили (CSS)    9474

вопрос
Как сделать примерно такой Speedbar?
Стандартный выглядит очень плохо.
Скриншот.
Как сделать красивый speedbar

Ответил: ПафНутиЙ


Главное избавиться от надоедливых двойных стрелок:
#dle-speedbar{text-indent: -9999px; overflow: hidden;}
#dle-speedbar a {text-indent: 0;}

остальное по вкусу.

2 комментария

hardyPanda
Юзер

hardyPanda - 16 августа 2012 19:47 -

стили собственно через css, засовываем спидбар в div с айдишником
#id a{
background: url(streloka.gif) no-repeat 100% 0;
}
и потом у последнего убираем фон
$('#id a:last').css({'background' : 'none !important'});

значек ">>" можно убрать через jquery чтобы в движке не копаться , если можно еще проще то поправьте

pavel31
Юзер

pavel31 - 17 августа 2012 16:46 -

Если нужно что бы спидбар был как на загрузке (судя по скрину) то там сделано так:

HTML

<div style="float:left;">
    <div id="secondary_nav" style="position:absolute;top:0px;left:0px;">
        <div id="breadcrumb">
            {speedbar}
        </div>
    </div>
</div>


JS

<script type="text/javascript">
    $(function(){
        var sbar = $("#breadcrumb").html();
        for (i=1;i<10;i++) {
            var sbar = sbar.replace("»","");
        }
        $("#breadcrumb").html(sbar);
    });
</script>


CSS

<style type="text/css">
span#dle-speedbar div span a {color: #757575;text-shadow: 0 1px 0 white;}
#secondary_nav div {float: left;font-weight: bold;line-height: 37px;}
#secondary_nav #section_links div {padding: 0 5px;}
#secondary_nav span {color: #757575;outline: medium none;text-decoration: none;text-shadow: 0 1px 0 white;}
#secondary_nav div.breadcrumb span {background: url("../images/secondary_nav_link.gif") no-repeat scroll 0 0 transparent;color: #757575;display: block;margin-left: -9px;padding-left: 9px;text-decoration: none;text-shadow: 0 1px 0 white;}
#secondary_nav div.breadcrumb.first span {background: none repeat scroll 0 0 transparent;margin-left: 0;padding-left: 0;}
#secondary_nav div.breadcrumb a {display: block;padding-left: 5px;padding-right: 14px;}
#secondary_nav div.breadcrumb span a {background: url("../images/secondary_nav_link.gif") no-repeat scroll 100% 0 transparent;display: block;padding-left: 5px;padding-right: 14px;}
#secondary_nav div.breadcrumb.first span a {padding-left: 10px;}
#secondary_nav div.breadcrumb span:hover {background-position: 0 -43px;color: #858585;text-shadow: 0 1px 0 white;}
#secondary_nav div.breadcrumb span:hover a {background-position: 100% -43px;}
#breadcrumb {display: block !important;}
#dle-speedbar {display:block; float:left; height:36px; padding-right:14px; line-height:36px; color:#666; text-shadow:0px 1px 0px #fff;}
#dle-speedbar a {display:block; float:left; height:36px; line-height:36px; color:#666; padding:0px 14px 0px 10px; text-shadow:0px 1px 0px #fff; background:url('../images/secondary_nav_link.gif') no-repeat top right}
#dle-speedbar a:hover {color:#000; background-position: 100% -43px;}
#dle-speedbar a:last-child {margin-right:10px;}
</style>


Рисунок для спидбара
рисунок для спидбара



Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх