2013년 8월 12일 월요일

동적뷰의 텝 페이지를 드롭다운 메뉴로 변경시키기

그림1
그림2
동적뷰에서 탭 페이지는 <그림1>에서 처럼 헤더 아래 검은 바에 가로로 표시됩니다.
아래의 코드는 탭 페이지를 <그림2>와 같이 드롭다운 메뉴로 바꿔줍니다.

 #header.header .header-drawer #pages.tabs ul li{  
 margin: 100000px;  
 }  

코드 삽입 위치는 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 이며, 코드의 출처는 해외 블로거 southernspeakers 입니다.

참고로, 드롭다운 메뉴 최상단에는 <그림2>에서 보시는 바와 같이 'Pages'라고 표시됩니다. 이 문구를 원하는 문구로 바꿀 수 있지 않을까 싶어서 테스트용 블로그에서 여러 방식으로 시도해보았습나다만, 방법을 찾을 수 없었습니다.


! 내용수정

'Pages' 바꾸는 방법에 대해 +Hui-Su Jeong 님께서 댓글로 링크를 남겨 주셨네요. 아래에 해당 코드를 추가하였습니다.

 #pages span:first-child{  
 font-size: 0px !important;  
 }  
 #pages .menu-heading:before, .ss{  
 content: "목록";  
 font-size: 15px !important;  
 }  

코드 삽입 위치는 마찬가지로 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 입니다. 삽입하실 때 '목록' 대신 원하는 글자를 입력하시면 됩니다.


댓글 1개:

  1. 음... 잘 안돼서 질문 합니다.
    어제부터 구글 블로그 꾸미기를 진행 하였는데
    동적뷰의 드롭 메뉴 만들기가 잘 안돼더군요

    분명
    CSS창에

    #header.header .header-drawer #pages.tabs ul li{
    margin: 100000px;
    }
    이렇게 쳐보기도 해보고 Pages 부분을
    바꿔서
    Sidebar
    이라고도 쳐 봣는데
    드롭메뉴는 생기지 않았습니다.
    블로그 제목 오버시 밑줄 제거는 됐는데 말이죠....
    드롭 메뉴는 생기지 않네요
    그리고 드롭메뉴 생성시에 사이드바(Sidebar)
    제거좀 하려고
    특정뷰를 제거 하는 방법도
    해봤으나 역시 실패로......
    음 제가 이런 블로그는 처음이라
    난해하네요
    해결방법좀
    알려주시면 감사하겟습니다.

    이건 혼잣말이지만
    (게임 홈페이지?라고 해야하나?
    그런 류의 홈페이지를 좋아하는지라...)

    답글삭제