본문으로 바로가기

오늘은 간단한 드랍다운 메뉴를 사이드바에 설치하는 블로그 꾸미기 작업을 하겠습니다.


설치하는 방법을 잘 따라오시면 사이드바 뿐 아니라 상단 네비게이션 헤더 또는 확장 메뉴등

다양하게 사용 가능 할 수 있을 것입니다.

제블로그에 적용된 예시

인트로 - 사전 습득 지식

드랍박스 구조는 보기에는 단순해 보여도, 꽤 많은 사전 지식이 필요합니다.

꾸미기 중급자 클래스 정도 된다고 생각하네요.

그래도 천천히 보고 따라한다면 쉽게 적용 가능 할 것입니다.


왜 이번 편은 사전지식이 필요하면 드랍다운 메뉴는 다양한 박스 태그와 클래스로 타겟 설정이 되어있고

설치 위치에 따라 본인의 스킨에 원래 지정된 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

예의 결과 입니다. 

http://fontawesome.io/icons/

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) 참고 하시면 도움이 될 것입니다.

필요하신 분들은 잘설치해보시고 문의사항은 댓글 남겨주시면 도움을 드릴 수 있으면 답변을 달도록 하겠습니다.

끝.

신고

댓글을 달아 주세요

  1. BlogIcon SONYLOVE 2016.03.05 21:16 신고

    주석이 완전 깔끔한데요. 이런데서 성격나온다는.. ㅎㅎ
    근데 따라 해보고 싶긴 한데.. 더이상 무언가를 설치할 장소가 없어요. -.-;
    빈 공간이 생기면 달아봐야겠어요.
    저는 요즘 회전 시키는 거 여기저기 열심히 적용해 보고 있는데 정신 사나워서 뺼까 말까 고민입니다.;;;

  2. BlogIcon NARVEL 2016.03.12 16:30 신고

    궁금한게 있어 질문드립니다.
    드롭다운 메뉴를 여러개 만들려고 하니간 두번째 항목을 누르면 첫번째 항목이 뜨더라고요.. ㅠㅠ

    ㅡ 드롭다운 메뉴1
    └ 글
    └ 글
    ㅡ 드롭다운 메뉴2
    └글
    └글

    이렇게 큰 메뉴 자체를 늘리는 방법을 알 수 있을까요 ㅠㅠ?

    • BlogIcon COCOSOFT COCO Media 2016.03.12 18:35 신고

      음.. 아마 클래스명이 겹쳐서 발생하는 문제인것 같은데 활실치는 않구요
      ㅠㅠ

      두번째 메뉴의 클래스를 바꾸고 css적용을 한번 해보세요 예를들어서
      첫번째 메뉴의 클래스가
      <li class="animate">

      두번째는의 경우에는
      <li class="animate_box2">

      CSS는 이렇게 추가해주시면 되구요
      .animate, .animate_box2 {
      -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;
      -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
      }
      이렇게 하는게 정확한지는 잘모르겠지만 ㅠ 한번 시도해보시길 바랍니다!!

    • BlogIcon NARVEL 2016.03.13 15:51 신고

      시도 해봤는데 안되네요 ㅠ_ㅜ..
      이게 뭔가 잘 모르니간 따라만하는걸로 한계가 많이 있네요..
      그래도 답변 감사합니다. ㅠㅠ

    • BlogIcon COCOSOFT COCO Media 2016.03.13 19:10 신고

      저도 지금은 밖이라 나중에 집에가서 해보고 알려
      드릴게요!!ㅠ

티스토리 툴바