구글 블로그에서 드롭다운 메뉴를 구현하고 디자인 변경하기
이전 포스트에서 html/javascript가젯을 추가하여 기본 메뉴를 구현하였다.
https://learnandcreate.tistory.com/105?category=855877
해당 포스트는 여기에 추가로 마우스 롤오버시 메뉴가 펼쳐지는 드롭다운을 구현하고 디자인을 변경하는 방법이다.
1)좌측의 테마 항목을 선택하고 맞춤설정을 클릭한다.
2)테마 디자이너에서 고급의 css 추가를 클릭하면 css를 추가할수있는 코드 입력란을 확인할수있다.
3)여기에 아래 첨부한 샘플 코드를 복사하여 붙여넣기한다. 이 코드는 메뉴에 드롭다운을 추가하고 메뉴의 레이아웃 및 디자인을 변경한다.
#test_html {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
border:none;
}
#test_html li {
font-size: 12px/18px;
font-family: sans-serif; /* Font for the menu */
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff; /* background colour of the main menu */
float:none;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
#test_html li a {
padding:0;
font-family: sans-serif; /* Font for the menu links */
border:0;
}
#test_html li:hover {
background: #555; /* background colour when you roll over a menu title */
color: #fff; /* font colour when you roll over a menu title */
}
#test_html li:hover a {
background: transparent;
color: #fff; /* font colour when you roll over a menu title link */
}
#test_html li ul {
z-index:1000;
border:none;
padding: 0;
position: absolute;
top: 45px;
left: 30px;
float:none;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
#test_html li ul li {
background: #555; /* background colour of the sub menu items */
display: block;
color: #fff; /* font colour of the sub menu items */
text-shadow: 0 -1px 0 #000;
}
#test_html li ul li a{
color:#fff /* link colour of the sub menu items */
}
#test_html li ul li:hover {
background: #666; /* background colour when you roll over sub menu items */
}
#test_html li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
4)코드에 문제가없다면 하단에서 디자인의 변경이 즉각적으로 반영된다. 위 코드에서 font, padding, color, background, 기타 속성의 값들을 변경하면서 메뉴에 어떤 변화가 있는지 살펴보면 각 속성들이 무엇을 의미하는지 이해할수있을것이다.
작업을 완료하면 우측상단의 '블로그에적용'을 클릭한다.
5)아래는 위 작업의 결과물로 마우스 롤오버시 드롭다운 서브 메뉴를 보여주는 메뉴 그룹을 보여주고있다.
6)css를 추가한후에 블로그의 html에 어떤 내용이 추가되었는지 확인해보기위해 테마의 html편집을 클릭한다.
7)에디터에서 ]]></b:skin> 를 검색한다(ctrl+f)
8)css추가에서 작성한 코드가 해당 검색어 위에 추가되있는것을 확인할수있다.
테마디자이너에서 코드를 추가하는 대신에 html편집의 해당 검색어( ]]></b:skin>) 위에 샘플 코드를 직접 삽입함으로써 동일하게 구현가능하다.
