오늘은 간단한 드랍다운 메뉴를 사이드바에 설치하는 블로그 꾸미기 작업을 하겠습니다.
설치하는 방법을 잘 따라오시면 사이드바 뿐 아니라 상단 네비게이션 헤더 또는 확장 메뉴등
다양하게 사용 가능 할 수 있을 것입니다.
제블로그에 적용된 예시
인트로 - 사전 습득 지식
드랍박스 구조는 보기에는 단순해 보여도, 꽤 많은 사전 지식이 필요합니다.
꾸미기 중급자 클래스 정도 된다고 생각하네요.
그래도 천천히 보고 따라한다면 쉽게 적용 가능 할 것입니다.
왜 이번 편은 사전지식이 필요하면 드랍다운 메뉴는 다양한 박스 태그와 클래스로 타겟 설정이 되어있고
설치 위치에 따라 본인의 스킨에 원래 지정된 CSS 속성과 겹쳐서 모양이 틀어질 수도 있습니다.
그렇기에 본인이 직접 본인의 스킨에 맞춰서 높이나 폭을 설정을 해주어야합니다.
이해하게 쉽게 간단히 설명을 하자면, 기본적인 웹표준에 따른 웹페이지의 구성은
HTML에서 태그를 사용해 영역 또는 버튼 박스 등을 구조를 만들고, id 나 class 셀렉터로 타겟을 지정하고
CSS에서 그 타겟에 속성을 부여해 모양이나 기능을 할 수 있게 해주는 것 입니다.
(CSS 속성 부여 할 때 꼭 셀렉터 요소가 필요 한 것은 아닙니다.)
이것만 알고 시작을 해도 속성을 바꾸고 부여하는데 매우 큰 도움이 됩니다. 이제 시작해보겠습니다.
본격적으로 시작 해보자!!!!!!!!!!!!
우선 이 드랍박스는 아이콘 폰트가 사용 되어져 있습니다.
본인의 스킨에 따로 사용할 아이콘폰트가 있으면 이작업은 넘어가도 됩니다.
만약 있더라도 따라하셔도 상관은 없습니다. 굉장히 추천하는 아이콘폰트 라이브러리입니다.
fontawesome.io/icons 의 아이콘폰트를 로드할 것이며 605개의 아이콘폰트를 사용가능합니다.
아이폰 폰트를 크기를 쉽게 변경할 수 있을 뿐만아니라 애니메이션효과와 회전, 꾸미기등을 지원합니다.
아이콘 폰트 블로그에 설치하기!!!!!-[HTML부분 수정]
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
</head>
</haed>찾아서 그 위에 해당 코드를 붙여넣기 해줍니다. 그럼 설치가 완료 되었습니다.
기본 사용법
<i class="fa fa-폰트명"></i>
<!-- 이렇게 사용을 합니다. 예를 들어 보겠습니다 -->
<i class="fa fa-windows"></i> <span style="color: rgb(255, 0, 0);">fa-windows</span>
fa-windows
예의 결과 입니다.
605개의 폰트명과 더다양한 사용법은 해당 사이트에서 확인이 가능합니다.
첫 번째 드랍다운 메뉴 배치하기 - HTML 부분 수정
본인이 원하는 위치에 드랍박스 메뉴를 배치시켜줍니다.
만약 사이드바에 배치를 하고 싶다면 <s_sidebar_element>...</s_sidebar_element> 사이에 배치 시켜주면 되겠죠?
CCZ-CROSS 스킨의 기준으로 설명을 해보겠습니다.
사이드바에는 module클래스로 <div>태그가 미리 속성이 설정되어있기 때문에
다른 스킨인 사용자분들은 넣지 않거나 <dropdown>...</dropdown>만 넣으면 됩니다.
만약 CCZ-CROSS 스킨이면 이런식으로 넣어주면 되겠죠?
드랍다운 메뉴 배치하기 사이드부분일경우-[HTML부분 수정]
<s_sidebar_element>
<!-- 드랍 다운 메뉴 -->
<div class="module fouc hidden-xs hidden-sm"><!--이부분은 CCZ-CROSS스킨에 설정되어있는부분-->
<dropdown>
<input id="toggle1" type="checkbox" checked>
<label for="toggle1" class="animate">드랍다운 메뉴<i class="fa fa-list float-right"></i></label>
<ul class="animate2">
<li class="animate">소스 보기<i class="fa fa-code float-right"></i></li>
<li class="animate">화면 최대화<i class="fa fa-arrows-alt float-right"></i></li>
<li class="animate">환경 설정<i class="fa fa-cog float-right"></i></li>
</ul>
</dropdown>
</div>
</s_sidebar_element>
type="checkbox" 옆 cheked 를 삭제하면 기본 첫 상태가 닫혀진 상태로 보여지게 됩니다.
cheked를 함께 적으면 펼쳐진 상태가 먼저 보여지게 됩니다.
제일 처음 말했던 것 처럼 이것은 그냥 단순히 구조일 뿐입니다.
만약 메뉴가 더 필요하다면 <li>태그를 사용해 더 적어주면 됩니다.
이제 CSS에 속성을 주도록 하겠습니다.
[CSS 부분 수정]
수정이 필요한 부분을 위주로만 설명을 하겠습니다. 따라보면서 CSS 마지막에 붙여넣기를 해주세요.
label, ul, li 부분
dropdown label, dropdown ul li{
display: block;
width: 270px;
background: #ECF0F1;
padding: 15px 20px!important;
}
가장 공통 되는 뼈대의 속성을 주는 것입니다.
width 부분으로 메뉴의 가로폭을 background 는 기본배경 padding : 상하px 좌우px 조절이 가능합니다.
label부분
dropdown label:hover, dropdown ul li:hover {
background: #1ABC9C;
color: white;
cursor: pointer;
}
dropdown label {
color: #1ABC9C;
border-left: 4px solid #1ABC9C;
border-radius: 0 5px 0 0;
position: relative;
z-index: 2;
}
dropdown input {
display: none;
}
dropdown input:checked + label {
background: #1ABC9C;
color: white;
}
dropdown input:checked ~ ul {
visibility: visible;
opacity: 1;
top: 0;
}
드랍 다운 버튼부분입니다. 바꾸려면 background색 정도만 수정을 해주세요.
input ~ ul 부분
dropdown input ~ ul {
visibility: hidden;
opacity: 0;
top: -20px;
padding-start: 0;
-webkit-padding-start: 0;
-moz-padding-start: 0;
-ms-padding-start: 0;
margin-top: 42px;
padding-top: 0;
position: absolute;
z-index:3;
}
나타나는 드랍다운 메뉴의 포지션을 설정해주어야합니다. 기본 설정은 relative 입니다.
포지션을 absolute 로 바꾸면 다른 사이드바 모듈과 겹쳐지게 됩니다.
absolute 사용시 padding-top 값을 본인의 스킨에 맞게 조절 해주세요.
 position: relative 일때 |  position: absolute 일때 |
첫 번째 메뉴 부분
dropdown ul li:nth-child(1) {
border-left: 4px solid #E74C3C;
}
dropdown ul li:nth-child(1) .fa {
color: #E74C3C;
}
dropdown ul li:nth-child(1):hover {
background: #E74C3C;
color: white;
}
dropdown ul li:nth-child(1):hover .fa {
color: white;
}
background색 정도만 수정을 해주세요.
두 번째 메뉴 부분
dropdown ul li:nth-child(2) {
border-left: 4px solid #0072B5;
}
dropdown ul li:nth-child(2) .fa {
color: #0072B5;
}
dropdown ul li:nth-child(2):hover {
background: #0072B5;
color: white;
}
dropdown ul li:nth-child(2):hover .fa {
color: white;
}
세 번째 메뉴 부분
dropdown ul li:nth-child(3) {
border-left: 4px solid #2C3E50;
}
dropdown ul li:nth-child(3) .fa {
color: #2C3E50;
}
dropdown ul li:nth-child(3):hover {
background: #2C3E50;
color: white;
}
dropdown ul li:nth-child(3):hover .fa {
color: white;
}
만약 하위 메뉴<li>가 4개라면 dropdown ul li:nth-child(4) 새롭게 추가해주면 되겠죠?
아이콘폰트 우측정렬, 마지막 메뉴 모양 및 애니메이션 효과
.float-right {
float: right;
}
dropdown li:last-child{
border-radius:0 0 5px
}
.animate {
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
/* Chrome and Safari */
-moz-backface-visibility: hidden;
/* Firefox */
-ms-backface-visibility: hidden;
/* Internet Explorer */
}
제대로 붙여넣기한 CSS 모습
최대한 ㅠ 쉽게 설명하려고 했는데 잘 전달이 되었는지 모르겠습니다. ㅠ_ㅠ
우선 본인이 padding 과 margin 에 대해서 잘배우면 쉽게 조절해서 부착 할 수 있을 것이라고 생각합니다.
http://webdir.tistory.com/346 - CSS 여백속성(Margin, Padding Property) 참고 하시면 도움이 될 것입니다.
필요하신 분들은 잘설치해보시고 문의사항은 댓글 남겨주시면 도움을 드릴 수 있으면 답변을 달도록 하겠습니다.
끝.
