이전 글에서도 언급했지만 트위터 부트스트랩으로 디자인을 하면 모두 같은 디자인이 나오기 때문에 되도록이면 다르게 나타나도록 디자인을 수정하는 것이 좋습니다. 메뉴가 선택됐을 때 inset으로 인해서 내부 그림자 효과가 나타나죠. 이것을 다르게 나타나도록 변경해보겠습니다.
이번 글에서 작업할 내용은 위와 같습니다. 선택되지 않은 메뉴는 우측 상단에 세모 도형이 나오고 선택된 메뉴는 세모 도형이 접히는 효과와 함께 그림자도 나타납니다. 또한 메뉴 사이에 부트스트랩의 vertical-divider가 나타나도록 했습니다. 이것은 익스프레스 엔진으로 하여금 반복되도록 출력할 수가 없어서 CSS를 이용해서 각 li 태그에 나타나도록 했습니다.
부트스트랩의 스타일시트를 제거하려면 해당 요소를 선택하고 요소검사를 해서 선택자와 속성을 복사해서 작업 중인 layout.css 파일에 붙여넣고 속성 값을 none으로 바꿔줍니다. 이렇게 하면 inset 효과가 제거됩니다. 웹브라우저를 새로고침하면 선택된 메뉴가 회색으로만 나타납니다.
.navbar .nav > li {
position: relative;
}
메뉴바의 li 태그에 대해서 여러가지 절대위치 요소를 삽입할 예정이므로 이 태그에 대해서 미리 상대위치를 설정해둡니다.
.navbar .nav > li:after {
content: "";
position: absolute;
top: 0;
right: 0;
margin: 0;
width: 0;
height: 40px;
border-left: 1px solid #ddd;
border-right: 1px solid #fff;
}
부트스트랩의 .vertical-divider 역할을 하는 위 스타일시트를 설정합니다. 폭은 0으로 하고 높이는 메뉴바의 높이인 40픽셀이며 테두리를 좌측과 우측만 설정합니다. 색상은 좌측이 회색, 우측이 흰색입니다. 그러면 다음과 같이 나타납니다.
이미지라서 잘 나타나지 않지만 회색과 흰색이 같이 붙어있으면 입체효과가 나타납니다.
.navbar .nav > li:before {
content: "";
position: absolute;
top: 0;
right: 0;
border-width: 10px 0px 0px 10px;
border-style: solid;
border-color: #ccc #fff;
}
그 다음으로 각 메뉴의 우측 상단에 세모 도형을 만듭니다. 삼각 도형은 border 속성으로 만드는데 위처럼 설정하면 아래처럼 나타납니다.
만들어지는 원리를 이해하기 위해 border-width를 모두 20px로 설정하면 다음과 같이 나타납니다.
border의 색상이 상, 하가 회색 좌, 우가 흰색이죠. 여기서 border의 우측과 하단의 폭을 0으로 하면 위 그림에서 녹색 부분만 나타나게 됩니다. 각 방향의 border의 값을 변경해서 어떻게 나타나는지 확인해보면 나중에 다른 형태로 적용하고자 할 때 응용하기 쉽습니다. 다시 원상태로 복구합니다.
.navbar .nav > li.active:before {
box-shadow: -1px 1px 1px rgba(66,66,66,0.35);
}
그 다음으로 메뉴가 선택된 부분만 삼각 도형에 대해서 그림자 효과를 적용합니다. 여기까지 하면 완성이지만 항상 폭이 좁은 경우에 반응형이 잘 적용이 되는지 점검해 봐야합니다. 폭이 좁은 화면에서 메뉴를 보면 아래처럼 메뉴의 우측에 세로선이 나타나고 하단의 메뉴는 배경이 그래디언트 효과로 인해 흰색 삼각형이 희미하게 나타납니다. 세로선과 삼각 도형은 메뉴가 좌우로 있을 때 유효한 것이지 상하로 있을 때는 효과가 없죠. 그래서 폭이 좁을 때는 제거해줍니다.
이것을 수정하려면 부트스트랩의 미디어쿼리를 이용해서 제거해줘야 합니다.
@media (max-width: 979px) {
.navbar .nav > li:after {
border-left: 0px solid #ddd;
border-right: 0px solid #fff;
}
.navbar .nav > li:before {
border-width: 0px;
}
}
메뉴가 세로 형태로 전환되는 것은 폭이 979픽셀 이하일 경우입니다. 그러니 위처럼 미디어쿼리를 설정하고 해당 요소에 대해서 폭을 0으로 설정하면 됩니다.
979픽셀 이하부터는 도형이나 세로선이 나타나지 않습니다.
데모 사이트 : http://kopress.co.kr