[웹디자인기능사] ⚡리스트태그를 사용한 서브메뉴 구조

1. 메인메뉴 (1 depth 메뉴)
2. Submenu 서브메뉴 구조
3. CSS
CSS 코드 해설

⚡리스트 태그 사용해서 서브메뉴 만들기 연습⚡

메뉴에 마우스 올렸을 때 다음과 같이 서브메뉴가 나타나도록 하기 위해 어떻게 코드 작성하는지 알아 보자.

- 색깔 입혀주는 css 코드는 별도로 하단에 올려 두었으니 <head>태그 안에 <style>태그 열어서 적용시켜주거나 스타일 시트를 하나 추가해서 연결해주면 된다. 외부 CSS 파일을 HTML 파일에 링크하려면 HTML 파일의 <head> 태그 내에 <link> 태그를 사용하여 CSS 파일을 불러와주면 된다.

 <link rel="stylesheet" href="styles.css">

1. 메인메뉴 (1 depth 메뉴)

우선 1 depth 메뉴를 작성해야 한다. 메뉴 구조에 마우스를 올리기 전에 보이는 주메뉴를 1 depth 메뉴라고 한다. 해당 메뉴에서 한 칸씩 하위 메뉴로 내려 가면 2 depth, 3 depth 식으로 명명한다.

 <body>
    <nav class="dropdownmenu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Me</a></li>
            <li><a href="#">Articles on HTML5 & CSS3</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </nav>
</body>

2. Submenu 서브메뉴 구조

마우스를 올리기 전에 보여질 메뉴를 먼저 생성한 후에 About us의 서브메뉴를 생성한다. 이 때 About us <li> 태그가 닫히기 전에 새로운 리스트를 생성해야 하는 것이 중요하다. 이 서브메뉴가 depth2 메뉴이다.

 <body>
    <nav class="dropdownmenu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Me</a></li>
            <li>
                <a href="#">Articles on HTML5 & CSS3</a>
                <ul id="submenu">
                    <li><a href="#">Difference between SVG vs. Canvas</a></li>
                    <li><a href="#">New features in HTML5</a></li>
                    <li><a href="#">Creating links to sections within a webpage</a></li>
                </ul>
            </li>
            <li><a href="#">News</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </nav>
</body>

3. CSS

 <style>
.dropdownmenu ul, .dropdownmenu li {
    margin: 0;
    padding: 0;
}
.dropdownmenu ul {
    background: gray;
    list-style: none;
    width: 100%;
}
.dropdownmenu li {
    float: left;
    position: relative;
    width:auto;
}
.dropdownmenu a {
    background: #30A6E6;
    color: #FFFFFF;
    display: block;
    font: bold 12px/20px sans-serif;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}
.dropdownmenu li:hover a {
    background: #000000;
}
#submenu {
    left: 0;
    opacity: 0;
    position: absolute;
    top: 35px;
    visibility: hidden;
    z-index: 1;
}
li:hover ul#submenu {
    opacity: 1;
    top: 40px;	/* adjust this as per top nav padding top & bottom comes */
    visibility: visible;
}
#submenu li {
    float: none;
    width: 100%;
}
#submenu a:hover {
    background: #DF4B05;
}
#submenu a {
    background-color:#000000;
}
</style>

CSS 코드 해설

위 CSS 코드의 의미를 살펴보자. 위 코드에서 가장 핵심 2가지는

- submenu가 안보이다가 메뉴바에 마우스를 올렸을때 submenu가 나오게 하는 드롭다운 구현

- 마우스를 올렸을 때 서브메뉴가 부드럽게 나타나도록 함

3-1. 드롭다운 구현

 <style>
#submenu {
    left: 0;
    opacity: 0;
    position: absolute;
    top: 35px;
    visibility: hidden;
    z-index: 1;
}
li:hover ul#submenu {
    opacity: 1;
    top: 40px;	/* adjust this as per top nav padding top & bottom comes */
    visibility: visible;
}
</style>

#submenu의 초기 상태:

 <style>
#submenu {
    left: 0;
    opacity: 0;
    position: absolute;
    top: 35px;
    visibility: hidden;
    z-index: 1;
}
</style>

left: 0: 서브메뉴의 왼쪽 위치를 부모 요소의 왼쪽에 맞춤
opacity: 0: 서브메뉴를 보이지 않게 설정
position: absolute: 서브메뉴를 부모 요소 기준으로 절대 위치
top: 35px: 서브메뉴의 위쪽 위치를 부모 요소의 아래로 35픽셀 떨어지게 설정
visibility: hidden: 서브메뉴를 숨김
z-index: 1: 서브메뉴가 다른 요소들 위에 표시되도록 설정

부모 li 요소에 마우스를 올렸을 때 #submenu를 표시하는 부분:

 <style>
li:hover ul#submenu {
    opacity: 1;
    top: 40px;  /* adjust this as per top nav padding top & bottom comes */
    visibility: visible;
}
</style>

opacity: 1: 서브메뉴를 보이게 설정
top: 40px: 서브메뉴의 위쪽 위치를 부모 요소의 아래로 40픽셀 떨어지게 설정합니다.
visibility: visible: 서브메뉴를 보이게 설정

이 CSS 코드는 서브메뉴가 마우스를 올렸을 때 (li:hover) 나타나도록 함. 즉, 부모 li 요소에 마우스를 올리면 자식 #submenu가 보이도록 설정된 것

3-2. 서브메뉴 부드럽게 나타나게 하기

서브메뉴가 부드럽게 나타나게 해주는 부분은 #submenu와 li:hover ul#submenu에 적용된 transition 속성. 이 속성은 서브메뉴의 opacity와 top 속성 변경 시 애니메이션 효과를 적용하여 부드럽게 나타나도록 한다.

<style>
.dropdownmenu a {
    background: #30A6E6;
    color: #FFFFFF;
    display: block;
    font: bold 12px/20px sans-serif;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}
.dropdownmenu li:hover a {
    background: #000000;
}
#submenu {
    left: 0;
    opacity: 0;
    position: absolute;
    top: 35px;
    visibility: hidden;
    z-index: 1;
}
</style>

위 코드에서 -transition: all .25s ease; 부분이 부드러운 전환 효과를 주는 코드이다.

일단 앞에 -webkit-이 붙은 코드를 기준으로 살펴 보자. .25는 0.25초를 뜻한다. 단위는 초단위로 써 주어야 한다.

-webkit-transition: all .25s ease; 모든 속성의 변화에 대해 0.25초 동안 부드럽게 전환되도록 설정. 웹킷 브라우저용
-moz-transition: all .25s ease; 모질라 브라우저용
-ms-transition: all .25s ease; 인터넷 익스플로러 브라우저용
-o-transition: all .25s ease; 오페라 브라우저용
transition: all .25s ease; 표준 속성

'프로그래밍언어 > html&css' 카테고리의 다른 글

[html&css] ⚡ CSS의 선택자 총정리, 선택자 우선순위 ! (0)	2024.05.23
[html&css] ⚡ CSS 크기의 단위 px, em, rem 차이 (0)	2024.05.23
리스트 태그의 종류 ul, ol, dt 및 사용법 (+주의점, 틀린 사용법 예시) (0)	2024.05.22
[html&css] 웹디자인 기능사 채점기준 (0)	2024.04.30
[html&css] html 특수문자 표현, 엔터티 코드 (Entity Code) (0)	2024.04.29

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

[웹디자인기능사] ⚡리스트태그를 사용한 서브메뉴 구조

1. 메인메뉴 (1 depth 메뉴)

2. Submenu 서브메뉴 구조

3. CSS

CSS 코드 해설

3-1. 드롭다운 구현

#submenu의 초기 상태:

부모 li 요소에 마우스를 올렸을 때 #submenu를 표시하는 부분:

3-2. 서브메뉴 부드럽게 나타나게 하기

'프로그래밍언어 > html&css' 카테고리의 다른 글

1. 메인메뉴 (1 depth 메뉴)

2. Submenu 서브메뉴 구조

3. CSS

CSS 코드 해설

3-1. 드롭다운 구현

#submenu의 초기 상태:

부모 li 요소에 마우스를 올렸을 때 #submenu를 표시하는 부분:

3-2. 서브메뉴 부드럽게 나타나게 하기

'프로그래밍언어 > html&css' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

	<body>
	<nav class="dropdownmenu">
	<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">About Me</a></li>
	<li><a href="#">Articles on HTML5 & CSS3</a></li>
	<li><a href="#">News</a></li>
	<li><a href="#">Contact Us</a></li>
	</ul>
	</nav>
	</body>

	<style>
	.dropdownmenu ul, .dropdownmenu li {
	margin: 0;
	padding: 0;
	}
	.dropdownmenu ul {
	background: gray;
	list-style: none;
	width: 100%;
	}
	.dropdownmenu li {
	float: left;
	position: relative;
	width:auto;
	}
	.dropdownmenu a {
	background: #30A6E6;
	color: #FFFFFF;
	display: block;
	font: bold 12px/20px sans-serif;
	padding: 10px 25px;
	text-align: center;
	text-decoration: none;
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
	}
	.dropdownmenu li:hover a {
	background: #000000;
	}
	#submenu {
	left: 0;
	opacity: 0;
	position: absolute;
	top: 35px;
	visibility: hidden;
	z-index: 1;
	}
	li:hover ul#submenu {
	opacity: 1;
	top: 40px; /* adjust this as per top nav padding top & bottom comes */
	visibility: visible;
	}
	#submenu li {
	float: none;
	width: 100%;
	}
	#submenu a:hover {
	background: #DF4B05;
	}
	#submenu a {
	background-color:#000000;
	}
	</style>