조회 수 9282 댓글 7
Extra Form

일단 저는 레이아웃에 두개의 js파일을 로드 시켯습니다.

 

scrpit.js와

(function($) {

  $.fn.menumaker = function(options) {
      
      var cssmenu = $(this), settings = $.extend({
        title: "Menu",
        format: "dropdown",
        sticky: false
      }, options);

      return this.each(function() {
        cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
        $(this).find("#menu-button").on('click', function(){
          $(this).toggleClass('menu-opened');
          var mainmenu = $(this).next('ul');
          if (mainmenu.hasClass('open')) { 
            mainmenu.hide().removeClass('open');
          }
          else {
            mainmenu.show().addClass('open');
            if (settings.format === "dropdown") {
              mainmenu.find('ul').show();
            }
          }
        });

        cssmenu.find('li ul').parent().addClass('has-sub');

        multiTg = function() {
          cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
          cssmenu.find('.submenu-button').on('click', function() {
            $(this).toggleClass('submenu-opened');
            if ($(this).siblings('ul').hasClass('open')) {
              $(this).siblings('ul').removeClass('open').hide();
            }
            else {
              $(this).siblings('ul').addClass('open').show();
            }
          });
        };

        if (settings.format === 'multitoggle') multiTg();
        else cssmenu.addClass('dropdown');

        if (settings.sticky === true) cssmenu.css('position', 'fixed');

        resizeFix = function() {
          if ($( window ).width() > 768) {
            cssmenu.find('ul').show();
          }

          if ($(window).width() <= 768) {
            cssmenu.find('ul').hide().removeClass('open');
          }
        };
        resizeFix();
        return $(window).on('resize', resizeFix);

      });
  };
})(jQuery);

(function($){
$(document).ready(function(){

$(document).ready(function() {
  $("#cssmenu").menumaker({
    title: "Menu",
    format: "multitoggle"
  });

  $("#cssmenu").prepend("<div id='menu-line'></div>");

var foundActive = false, activeElement, linePosition = 0, menuLine = $("#cssmenu #menu-line"), lineWidth, defaultPosition, defaultWidth;

$("#cssmenu > ul > li").each(function() {
  if ($(this).hasClass('active')) {
    activeElement = $(this);
    foundActive = true;
  }
});

if (foundActive === false) {
  activeElement = $("#cssmenu > ul > li").first();
}

defaultWidth = lineWidth = activeElement.width();

defaultPosition = linePosition = activeElement.position().left;

menuLine.css("width", lineWidth);
menuLine.css("left", linePosition);

$("#cssmenu > ul > li").hover(function() {
  activeElement = $(this);
  lineWidth = activeElement.width();
  linePosition = activeElement.position().left;
  menuLine.css("width", lineWidth);
  menuLine.css("left", linePosition);
}, 
function() {
  menuLine.css("left", defaultPosition);
  menuLine.css("width", defaultWidth);
});

});


});
})(jQuery);

 

fixed.js

$( document ).ready( function() {
  var jbOffset = $( '.left_widget_content_fixed' ).offset();
  $( window ).scroll( function() {
    if ( $( document ).scrollTop() > jbOffset.top ) {
      $( '.left_widget_content_fixed' ).addClass( 'jbFixed' );
    }
    else {
      $( '.left_widget_content_fixed' ).removeClass( 'jbFixed' );
    }
  });
} );

 

위에거는 메뉴 구현을 위해서 쓴거고 아랫것근 위젯을 fixed시키기 위해 쓴것입니다.

 

근데 크롬 개발자 도구에보면

캡처.PNG

 

이런식으로 나오네요... 뭐가문제까요??

Atachment
첨부 1
  • ?
    misol 2016.01.15 11:46:55
    jQuery 를 $ 로 쓰시면 XE 또는 현재 라이믹스에서는 오류가 납니다. jQuery 라고 써주세요
  • ?
    Jack 2016.01.15 11:47:51
    그럼 현재 $ -> jQuery 로 싹 다바꾸면 해결이되는걸까요?
  • ?
    misol 2016.01.15 12:59:10
    넵. 아래 기진곰님 해결책도 되어요
  • profile
    기진곰 2016.01.15 11:50:26

    위의 파일은 jQuery를 $로 받아오고 있으니 괜찮을 것 같고요...
    아래 파일은 맨 위에 한 줄 넣어주시고
    (function($) {
    맨 밑에도 한 줄 넣어주세요.
    })(jQuery);
    이렇게 하면 $를 사용할 수 있습니다.

    1
  • ?
    Jack 2016.01.15 11:55:22
    감사합니다 덕분에 해결했어요 ^^
  • profile
    inJin 2016.01.15 11:50:29
    fixed.js 부분도 아래와 같이 감싸주시면 될 것 같네요!

    (function($){

    내용

    })(jQuery);
  • ?
    Jack 2016.01.15 11:55:26
    감사합니다 덕분에 해결했어요 ^^

서버에 요청 중입니다. 잠시만 기다려 주십시오...