데스크탑 상단바 개선

본 글은 FastBoot v1.6과 관련이 있습니다.

FastBoot v1.6.1 상단바 개선

  뭐하라님(http://nubiz.tistory.com/)의 의견으로 개선된 기능입니다. 현재 잠수패치.. 라고 하죠. 1.6.1에 수정해두었습니다. 새로 받으시면 업데이트 된 것으로 받으실 수도 있지만, 새로 받지 않으셔도 이 글을 보시면 적용가능하십니다.

  일단 동영상과 스크린샷을 준비했습니다.

평상시

고정(애니메이션과 함께)

 아예 데스크탑에서는 데스크탑 상단바가 고정되도록 개선하였습니다. 이 편이 더 깔끔한거 같기도 하고, 디자인이 좀 더 현실성있네요. 아래는 수정 방법입니다.

CSS 수정

  아래 부분을 찾아주세요. (style.css)

	
#desktopNav {
  height:130px;
  background-color:white;
}
#desktopNav.fixed {
  margin-bottom:47px;
}
#desktopNav p {
  margin:0;
}
#desktopNav .navMiddle {
  padding-top:40px;
}
#desktopNav .navMiddle form {
  margin-top:10px;
  width:60px;
}
#desktopNav .graylink a{
  font-size:9px;
  padding-left:10px;
  color:#aaa;
}
#desktopNav h3 {
  line-height:1;
}
#desktopNav p.rightMenus {
  margin-right:20px;
  margin-top:15px;
}
#desktopNav p.rightMenus a {
  font-size:17px;
  padding-left:15px;
}
#desktopNav .graylink a:hover{
  color:#000;
}
#desktopNav .text-muted {
  font-size:12px;
} 
	

  아래 부분으로 덮어씌워주세요.

	

#desktopNav {
  height:130px;
  background-color:white;
}
#desktopNav p {
  margin:0;
}
#desktopNav .navMiddle {
  padding-top:40px;
}
#desktopNav .navMiddle form {
  margin-top:10px;
  width:60px;
}
#desktopNav .graylink a{
  font-size:9px;
  padding-left:10px;
  color:#aaa;
}
#desktopNav h3 {
  line-height:1;
}
#desktopNav p.rightMenus {
  margin-right:20px;
  margin-top:15px;
}
#desktopNav p.rightMenus a {
  font-size:17px;
  padding-left:15px;
}
#desktopNav .graylink a:hover{
  color:#000;
}
#desktopNav .text-muted {
  font-size:12px;
}
body.navFixed {
  padding-top:177px;
}
@media screen and (max-width: 767px) {
  body.navFixed {
    padding-top:50px;
  }
}
#desktopNav.fixed {
  position: fixed;
  top: -40px;
  height: 90px;
  z-index: 100;
  width: 100%;
}
#desktopNav.fixed h3, #desktopNav.fixed a {
  -webkit-transition-duration: .3s;
  -moz-transition-duration: .3s;
  -o-transition-duration: .3s;
  transition-duration: .3s;
}
#desktopNav.fixed h3 {
  float: left;
  margin-top: 10px;
}
#desktopNav.fixed p.text-muted {display:none;}
#desktopNav.fixed p.rightMenus a {
  font-size: 15px;
  padding-left: 8px;
} 
	

스크립트 업로드

  파일을 다운로드 받아서, 스킨 업로드에 가셔서 덮어씌워주세요.

fastboot.min.js

  위처럼 들어가셔서 업로드 해주시면 됩니다.

스크립트 캐싱방지(skin.html 수정)

  사실 위까지만 해주셔도 됩니다만, 기존에 남아 있던 스크립트가 브라우저에 캐싱되어 있어서 바로 적용되는 것으로 보이시지 않을 겁니다. 그래서 skin.html 부분에서 다음 부분을 찾아주세요. (최하단에 있습니다)

	

<script src="./images/fastboot.min.js"></script> 
	

  아래처럼 뒤에 ?와 임의의 숫자를 붙여주시면 브라우저가 새로운 스크립트로 인식해 다시 로딩합니다.

	
<script src="./images/fastboot.min.js?0507"></script> 
	

  스크립트를 수정해야해서 조금 과정이 복잡해졌지만, 여기까지 하시면 이제 수정 완료입니다.

  좋은의견 내주시고 코드까지 제공해주신 뭐하라님(http://nubiz.tistory.com/)님께 다시한번 감사의 말씀 드립니다 :)