Показать сообщение отдельно
  #37 (permalink)  
Старый 02.04.2015, 21:16
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Значит так:

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. Проверял на двух разрешениях, отступ остается постоянным. Если же он будет изменяться, то ширину свернутой панели нужно будет рассчитывать.

Последний раз редактировалось laimas, 02.04.2015 в 21:40.
Ответить с цитированием