Значит так:
id=logo - заменить на class=logo, и код этого блока заменить на этот:
<div class="logo">
<div id="btn-swap" class="image avatar">
<img src="filin_files/avatar.png" alt="">
</div>
</div>
в файле style.css заменить #logo на .logo, и добавить для изображения стиль курсора:
.logo .image
{
position: absolute;
left: 0;
top: 0;
cursor: pointer
}
Найти на странице блок скрипта:
<script>
jQuery(function($){
$(document).on('click','.btn_close', function(){
$(this).closest("#header").animate({ width: "90" },300);
$('.link_group').fadeOut();
$(this).removeClass('btn_close').addClass('btn_open');
return false;
});
$(document).on('click','.btn_open', function(){
$(this).closest("#header").animate({ width: "20%" },300);
$('.link_group').fadeIn();
$(this).removeClass('btn_open').addClass('btn_close');
return false;
});
});
</script>
и удалить его. А блоки скриптов:
<script>
$(function() {
var $but = $(".link_group_block a"),
$blocks = $(".popup");
$but.each(function(i, elem) {
var $el = $(elem), rel = '.'+$el.attr('rel');
$el.click(function() {
$but.not($el).removeClass("active");
$el.toggleClass("active");
$blocks.each(function(j, el) {
$(el)["fade" + ($(el).is(rel) ? "Toggle" : "Out")]();
});
})
});
$('html, .close').click(function (event) {
if ($(event.target).closest('.link_group, .popup' ).size() && !$(event.target).is('.close')) return;
$but.filter('.active').click()
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.scrollbar-dynamic').scrollbar();
});
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.scrollbar-popup').scrollbar();
});
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.scrollbar-popup-mini').scrollbar();
});
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.scrollbar-popup-minimum').scrollbar();
});
</script>
заменить на это:
<script>
var pW, //ширина панели меню
pH, //ширина свернутой панели
pD; //режим панели меню
$(function() {
var $but = $(".link_group_block a"),
$blocks = $(".popup");
$but.each(function(i, elem) {
var $el = $(elem), rel = '.'+$el.attr('rel');
$el.click(function() {
$but.not($el).removeClass("active");
$el.toggleClass("active");
$blocks.each(function(j, el) {
$(el)["fade" + ($(el).is(rel) ? "Toggle" : "Out")]();
});
})
});
$('html, .close').click(function (event) {
if ($(event.target).closest('.link_group, .popup' ).size() && !$(event.target).is('.close')) return;
$but.filter('.active').click()
});
$('div.scrollbar-dynamic,div.scrollbar-popup,div.scrollbar-popup-mini,div.scrollbar-popup-minimum').scrollbar();
//управление панелью меню
var pO = $('#btn-swap').click(function() {
pD ^= 1; //изменить направление
if(!pW) { //получить параметры
pW = pO.width(); //получит ширину панели
pH = pW - 100; //величина на которую сворачивается панель
$('#swap').css({width : pW}) //задать ширину родительскому блоку элементов меню
}
pO.stop()
.animate({width : pW - pH * pD}, 400) //сворачиваем/разворачиваем панель
.find('#swap')
.stop()
.animate({marginLeft : -pW * pD}, 200) //смещение элементов панели, скорость анимации в два раза выше, чем у панели
}).closest("#header"); //получаем панель меню
});
</script>
Я не проверял все под различными разрешениями, поэтому ширина панели меню рассчитывается при пером его изменении, а не берется фиксированной. Если же она у вас постоянна при любых разрешениях, то можно это удалить, и прописать непосредственную величину в переменной.
Ширина же для блока swap указывается в пикселях для того, чтобы при смещении его за пределы экрана, не оставалось "хвостов" от пунктов меню.
Величина ширины свернутого меню равная 100, это ширина изображения + отступы слева/справа блока logo. Проверял на двух разрешениях, отступ остается постоянным. Если же он будет изменяться, то ширину свернутой панели нужно будет рассчитывать.