[Blogspot] 상단 메뉴

blogspot 의 상단 메뉴를 조금 바꿔봤습니다.
HTML/CSS 를 조금 아시는 분들은 간단하게 응용해서 적용 하실 수 있으실 것 같네요.

우선 태그부터 보겠습니다.

<div class="G1sBlogMenu">
  <ul>
    <li>
      <a href="/">Home</a>
    </li>
    <li>
      <a href="/search/label/tip?max-results=1">Tip</a>
      <ul>
        <li><a href="/search/label/blogspot?max-results=1">Blogspot</a></li>
        <li><a href="/search/label/google%20%2b?max-results=1">Google+</a></li>
        <li><a href="/search/label/plan?max-results=1">Plan</a></li>
      </ul>
    </li>
    <li>
      <a href="/search/label/study?max-results=1">Study</a>
      <ul>
        <li><a href="/search/label/open%20api?max-results=1">Open API</a></li>
        <li><a href="/search/label/project%20euler?max-results=1">Project Euler</a></li>
        <li><a href="/search/label/algospot?max-results=1">Algospot</a></li>
      </ul>
    </li>
    <li>
      <a href="/search/label/%EC%9D%BC%EC%83%81?max-results=1">일상</a>
      <ul>
        <li><a href="/search/label/%EC%97%AC%ED%96%89?max-results=1">여행</a></li>
        <li><a href="/search/label/%EC%9E%A1%EB%8B%B4?max-results=1">잡담</a></li>
      </ul>
    </li>
    <li>
      <a href="/p/gallery.html">Gallery</a>
    </li>
    <li>
      <a href="/p/blog-map.html">Blog Map</a>
    </li>
  </ul>
</div>

기본 div ul li 태그 안에 a 태그로 메뉴들이 있구요.
다시 ul li 태그 안에 서브메뉴들이 들어있는 형태입니다.

메뉴와 서브메뉴는 각자 개인에 맞게 적용해 주시고요.
a 태그안의 href 는 각 label의 링크 또는 페이지의 링크를 적용하면 됩니다.

상단에 있는 가젯 영역은 기본적으로 css가 적용되어 태그들이 가로로 정렬이 되는데요.
여기에 간단한 CSS로 필요없는 서브메뉴를 가려보겠습니다.

우선 JQuery를 적용하기 위해 다음 script 태그를 적용해 주시고요.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

다음 Style 과 Script 를 적용합니다.

<style>
.G1sBlogMenu {height:40px; text-align:center;}
.G1sBlogMenu ul li ul { width:1000px; margin-left:0px; }   
.hidemenu ul { display:none; }
.showmenu { width:120px; }  
</style>
<script>
$(".G1sBlogMenu").ready(function() {
 $('.G1sBlogMenu ul li').addClass('g1sMainmenu')
 $('.g1sMainmenu ul li').addClass('g1sSubmenu')
 $('.g1sSubmenu').removeClass('g1sMainmenu')
 $('.g1sMainmenu').addClass('hidemenu')
 $('.g1sMainmenu').hover(function(){
  $('.g1sMainmenu').addClass('hidemenu')
  $('.g1sMainmenu').removeClass('showmenu')
  $(this).addClass('showmenu');
  $(this).removeClass('hidemenu');
  }, function(){ });
 $('.G1sBlogMenu').hover(function(){
  }, function(){
  $('.g1sMainmenu').addClass('hidemenu');
  $('.g1sMainmenu').removeClass('viewmenu');
 });
});
</script>

위 Stryle 는 제 템플릿 디자인을 기준으로 적용한 거라 세밀한 디자인은
각 개인 블로그에 맞게 수정해야 할 수 있습니다.