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

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


     16.08.2012    Стили (CSS)    6589

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

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


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

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

Комментарии пользователей (2)

hardyPanda
5

28 | 28

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
4

340 | 158

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>


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



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

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