[FastBoot 스킨 데스크탑] 좌측 삼각형 메뉴 버튼 없애고 해당 요소 불러오지 않기

반응형

[FastBoot 스킨 데스크탑] 좌측 삼각형 메뉴 버튼 없애고 해당 요소 불러오지 않기

 

 

FastBoot 스킨

 

 

FastBoot 스킨 블로그를 실행하면 좌측에 고정돤 삼각형 메뉴버튼()이 나옵니다. 일전에 본 버튼을 작게 변경(변경된 작은 버튼: )하는 글을 올린적이 있습니다.
참조 링크:  FastBoot 스킨 좌측 삼각형 메뉴 아이콘 조절-크기,

 

모바일에서는 상단바에 여러 내용을 실을 수 없고 사이드바는 본문 하단에 위치하고 있어 메뉴 버튼이 필요하다고 봅니다. 하지만 데스크탑에서는 상단 메뉴바 및 사이드바에 메뉴에 해당되는 사항이 있으므로 메뉴 버튼의 존재 의미가 크지 않다고 봅니다.
그런 이유로 모바일에서는 메뉴 버튼의 기능을 살려두고 데스크탑에서는 메뉴 버튼과 그 기능을 없애고자 합니다.

 

 

메뉴 버튼 기능 처리 요소

  • 스킨 HTML의 lnav 클래스 요소 : 스킨상에는 빈 요소임
<!--F OffCanvas -->
	<div id="lnav"></div>
  • fastboot_offvanvas 스크립트 : 블로그 실행시 lnav 클래스 요소에 메뉴 내용 요소 생성

 

FastBoot lnav

 

 

데스크탑에서 FastBoot 스킨이 실행돼면

  • fastboot_offcanvas 스크립트가 실행됩니다.
  • 본문 좌측에 삼각형 메뉴 버튼이 고정된 위치에 표시됩니다.(lntoggle 클래스)
  • lnav 클레스 요소(스킨상 빈 요소)에 메뉴 내용 요소를 생성해 좌측(left: -220px)에 숨겨놓습니다.
  • 메뉴 버튼을 누르면 좌측 숨겨진 요소가 좌측에(left: -220px가 left: 0로 바뀜) 표시됩니다.
  • 본 스크립트에서는 ie(인터넷 익스플로러)에서는 ie8 보다 클 때 실행하도록 주석처리가 돼있습니다.

fastboot_offcanvas 스크립트를 데스크탑에서 실행되지 않도록 HTML 수정

  • 블로그 관리모드>꾸미기>스킨편집>html 편집의 거의 끝 부분에 fastboot_offcanvas.min.js 스크립트가 표시돼있습니다.
<!--F FastBoot_Plugins -->
    <script>if(rssLogFlag==1)document.write('<script src="./images/fastboot_index.js"><\/script>');</script>
    <script src="./images/fastboot.min.js"></script>
    <!--[if (gt IE 8)|!(IE)]><!--><script src="./images/fastboot_offcanvas.min.js"></script><!--<![endif]-->
    <div id="toTop" onclick="window.scrollTo(0, 0);"><i class="fa fa-angle-double-up fa-2x"></i></div>
</body></html>
  • FastBoot 스킨에서는 브라우저 사이즈가 768px 보다 작을 때부터 모바일 형태로 화면에 나옵니다. 블로그 관리모드>꾸미기>스킨편집>html 편집에서 거의 끝 부분에 표시된 fastboot_offcanvas.min.js 스크립트를 768px 보다 작을 때부터 실행하도록 수정합니다. 위 내용 중 노란 부분을 삭제 또는 주석처리 후 그 부분에 
<script>
if(window.getWindowCleintWidth()<768)document.write('<script src="./images/fastboot_offcanvas.min.js"><\/script>');
</script>
  • 위의 내용을 추가합니다. 아래와 같은 모양이 되겠지요. 조건부 ie 주석 안의 <script>----</script>부분을 <!--<script>----</script>-->로 주석 처리헸습니다. 조건부 주석의 내용을 이렇게 주석 처리하는 것이 맞는지 확실히 잘 모르겠습니다. 수정 후 이싱은 보이지 않는데요. 삭제하고 수정 내용을 집어 넣는게 확실하겠네요.
<!--F FastBoot_Plugins -->
    <script>if(rssLogFlag==1)document.write('<script src="./images/fastboot_index.js"><\/script>');</script>
    <script src="./images/fastboot.min.js"></script>
    <!--[if (gt IE 8)|!(IE)]><!--><!--<script src="./images/fastboot_offcanvas.min.js"></script>--><!--<![endif]-->
<script>
if(window.getWindowCleintWidth()<768)document.write('<script src="./images/fastboot_offcanvas.min.js"><\/script>');
</script>
    <div id="toTop" onclick="window.scrollTo(0, 0);"><i class="fa fa-angle-double-up fa-2x"></i></div>
</body></html>

 

 

수정 후

 

* 데스크탑
  • 버튼 생성 안됨

 

FastBoot Home

 

  • lnav 요소에 메뉴 내용 요소가 불려오지 않고 빈 상태임

 

FastBoot lnav

 

 

* 모바일 실행
  • 상단 메뉴 버튼 작동됨, 하단 오버레이 광고도 캡쳐 됐네요.

 

FastBoot Mobile

 

 

 

ps. 좀더 심플하고 최근에 나온 스킨으로 갈아 타고 싶은 생각도 있으나 본 스킨에 익숙해져 있고 타 스킨도 적응하는데 시간과 노력을 요하므로 본스킨을 수정하여 게속 사용하고자 합니다.

 

 

 


반응형
저작자표시
Trackback: Comment: 0

티스토리툴바