CSS 가로 스크롤 메뉴 만들기 - 가로 슬라이딩 메뉴 줄 바꿈 금지와 스크롤바 숨기기
페이지 정보
조회 2,194회 작성일 22-05-29 18:03
본문
가로 스크롤 메뉴 만들기
가로 슬라이딩 메뉴 줄 바꿈 금지와 스크롤바 숨기기
반응형 모바일에서 가로 메뉴를 만들 때, 복잡한 스크립트와 CSS를 사용하기도 한다.
하지만, 간단히 가로 스크롤 슬라이딩 메뉴를 만드는 방법도 활용해 볼만 하다.
가로 스크롤 메뉴 만들기 - 가로 슬라이딩 메뉴 줄 바꿈 금지와 스크롤바 숨기기
가로 스크롤 메뉴 예제 코드
반응형 모바일에서 가로로 미는 슬라이딩 메뉴를 만들기 위한 기본 구조를 먼저 설명한다.
먼저 HTML에서 준비할 코드 소스 예제다.
[code]
<nav class="nav클래스이름">
<u class="u클래스이름">
<li>내용</li> <li>내용</li> <li>내용</li>
</u>
</nav>
[/code]
다음으로 필요한 것은 모양을 만들어줄 CSS style 코드 소스 예제다.
[code]
.nav클래스이름 { white-space:nowrap; overflow-x:scroll; }
.u클래스이름 li { float:left; list-style-type:none; }
[/code]
물로, 첫 번째와 두 번째에서 사용한 각각의 이름은 같아야 한다.
<li>내용</li> 부분에 링크를 걸면 간단하게 메뉴로 사용할 수 있을 것이다.
<li>내용</li>의 모양이 마음에 들지 않으면 CSS style 코드에서 ".u클래스이름 li" 부분에 디자인 속성을 추가하면 된다.
가로 슬라이딩 메뉴 소스 설명
먼저 ".nav클래스이름"에 있는 속성을 설명한다.
- white-space:nowrap : 내용이 한 줄로 나오도록 함. 줄 바꿈 금지.
- overflow-x:scroll : 가로가 길면 가로 스크롤이 보이도록 함.
overflow-x의 속성은 visible(박스 밖으로 나간 것도 다 보여 줌), hidden(스크롤 보이지 않음), scroll(스크롤이 보임), auto(내용이 넘칠 때만 스크롤이 보임) 등이 있다.
물론 세로 스크롤인 overflow-y도 비슷하게 사용할 수 있다.
다음으로 ".u클래스이름 li"을 설명한다. 이것은 .u클래스이름 아래에 들어 있는 li 객체에게 명령을 내린다는 뜻이다.
그리고 .u클래스이름 li 안에 들어 있는 속성을 설명하면 이렇다.
- float:left : 모든 요소가 왼쪽으로 붙게 함. 즉, 줄 바꿈 하지 않음.
- list-style-type:none; : li의 기본 속성인 검은 점이 나타나지 않게 금지함.
결국, 메뉴 항목들이 옆으로 나열되게 해서 한 줄 메뉴로 나타나게 하고, 내용이 많으면 옆으로 밀 수 있도록 허용한다는 것이 기본 구조다.
스크롤바 숨기는 방법
그런데 메뉴이기 때문에 스크롤이 생기는 것이 눈에 거슬린다면 아래처럼 하면 된다.
내용을 담고 있는 .nav클래스이름에 스크롤이 생기므로, 여기에 스크롤 숨기기 코드를 넣어 주는 것이다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)
아래 내용을 .nav클래스이름 { white-space:nowrap; overflow-x:scroll; }의 바로 아래 줄에 추가한다.
[code]
.nav클래스이름 {
-ms-overflow-style:none; /* 익스플로러와 엣지 브라우저용 */
scrollbar-width:none; /* 파이어폭스 브라우저용 */
}
nav클래스이름::-webkit-scrollbar {
display:none; /* 크롬, 오페라, 사파리 브라우저용 */
}
[/code]
각 브라우저마다 차이가 있기 때문에 각각 키트를 적어줘야 한다.