简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > CSS 튜토리얼 > 본문

CSS로 보조 메뉴 효과를 얻는 방법은 무엇입니까? 가로, 세로 메뉴 구현(코드 예시)

青灯夜游
풀어 주다： 2018-09-12 16:07:59
원래의
16727명이 탐색했습니다.

이 장에서는 CSS를 사용하여 보조 메뉴 효과를 얻는 방법을 소개합니다. 가로 및 세로 메뉴 구현(코드 예제) html+css 코드를 통해 두 가지 다른 보조 메뉴 효과를 만드는 것은 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. CSS는 수평 보조 메뉴 스타일을 구현합니다.

CSS는 수평 보조 메뉴 코드를 구현합니다: 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>二级菜单--水平</title>
		<style>
			*{margin: 0;padding: 0;}
	        .demo{background: red;width: 100%;height: 35px;}
	        nav{height: 35px;width: 1000px;margin: 0 auto;}
	        nav ul li{list-style-type:none;float: left}
	        nav ul li a{ text-decoration: none;display: block;width: 130px;line-height: 35px;text-align: center;color:white;font-fimily:微软雅黑;}
	        nav ul li ul li{float: none}
	        nav ul li ul li a{color:black}
	        nav ul li ul{display: none;}
	        nav ul li:hover ul{display: block;}
		</style>
	</head>
	<body>
		<div class="demo">
			<nav>
			    <ul>
			        <li><a href="#">菜单1</a>
			        <ul>
			            <li><a href="#">菜单1</a></li>
			            <li><a href="#">菜单1</a></li>
			            <li><a href="#">菜单1</a></li>
			            <li><a href="#">菜单1</a></li>
			        </ul>
			        </li>
			        <li><a href="#">菜单2</a>
			            <ul>
			                <li><a href="#">菜单2</a></li>
			                <li><a href="#">菜单2</a></li>
			                <li><a href="#">菜单2</a></li>
			            </ul>
			        </li>
			        <li><a href="#">菜单3</a>
			            <ul>
			                <li><a href="#">菜单3</a></li>
			                <li><a href="#">菜单3</a></li>
			                <li><a href="#">菜单3</a></li>
			                <li><a href="#">菜单3</a></li>
			            </ul>
			        </li>
			        <li><a href="#">菜单4</a>
			            <ul>
			                <li><a href="#">菜单4</a></li>
			                <li><a href="#">菜单4</a></li>
			                <li><a href="#">菜单4</a></li>
			            </ul>
			        </li>
			        <li><a href="#">菜单5</a>
			            <ul>
			                <li><a href="#">菜单5</a></li>
			                <li><a href="#">菜单5</a></li>
			                <li><a href="#">菜单5</a></li>
			                <li><a href="#">菜单5</a></li>
			                <li><a href="#">菜单5</a></li>
			            </ul>
			        </li>
			        <li><a href="#">菜单6</a>
			            <ul>
			                <li><a href="#">菜单6</a></li>
			                <li><a href="#">菜单6</a></li>
			                <li><a href="#">菜单6</a></li>
			                <li><a href="#">菜单6</a></li>
			            </ul>
			        </li>
			    </ul>
			</nav>
		</div>
	</body>
</html>
로그인 후 복사

렌더링:

마우스가 위로 이동하지 않습니다:

CSS로 보조 메뉴 효과를 얻는 방법은 무엇입니까? 가로, 세로 메뉴 구현(코드 예시)

마우스 메뉴로 이동 1 :

CSS로 보조 메뉴 효과를 얻는 방법은 무엇입니까? 가로, 세로 메뉴 구현(코드 예시)

위의 예에서 볼 수 있듯이 CSS의 표시 속성을 사용하여 보조 드롭다운 메뉴 표시 여부를 제어합니다. 1차 메뉴의 li 태그로 마우스를 이동하면 2차 메뉴의 ul 태그가 표시된다.

핵심 코드:

list-style-type:none - 점을 삭제합니다.

float: 첫 번째 레벨 메뉴가 수평으로 표시되도록 하려면 왼쪽으로 왼쪽으로 부동합니다.

:hover - 마우스 포인터가 떠 있는 요소를 선택하는 데 사용됩니다.

display:none-보조 메뉴를 숨깁니다.

display:block - 링크를 블록 요소로 표시하면 텍스트뿐 아니라 전체 링크 영역을 클릭할 수 있으며 너비도 지정할 수 있습니다.

먼저 2단계 메뉴를 숨깁니다. 1단계 메뉴의 li 태그로 마우스를 이동하면 2단계 메뉴의 ul 태그가 표시됩니다.

2. 세로 보조 메뉴 스타일을 구현하는 CSS

세로 보조 메뉴 코드를 구현하는 CSS: 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>二级菜单--垂直</title>
		<style type="text/css">
			body { font-family: Verdana; font-size: 12px; line-height: 1.5; }
			img { border-style: none; }
			a { color: #000; text-decoration: none; }
			a:hover { color: #F00; }
			#menu { width: 200px; border: 1px solid #CCC; border-bottom:none;margin:50px auto;text-align: center;}
			#menu ul { list-style: none; margin: 0px; padding: 0px; }
			#menu ul li { background: #289CFF;color: #fff; padding: 0px 10px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; position:relative; }
			#menu ul li ul { display:none; position: absolute; left: 200px; top: 0px; width:100px; border:1px solid #ccc; border-bottom:none; }
			#menu ul li ul li{background-color: #21B4BB}
			#menu ul li:hover{background-color: #21B4BB}
			#menu ul li:hover ul { display:block;}
		</style>
	</head>
	<body>
		<div id="menu">
			<ul>
				<li>
					<a href="">菜单1</a>
					<ul>
						<li>
							<a href="#">菜单1</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#">菜单2</a>
					<ul>
						<li>
							<a href="#">菜单2</a>
						</li>
						<li>
							<a href="#">菜单2</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#">菜单3</a>
					<ul>
						<li>
							<a href="#">菜单3</a>
						</li>
						<li>
							<a href="#">菜单3</a>
						</li>
						<li>
							<a href="#">菜单3</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>
로그인 후 복사

렌더링:

마우스가 위로 움직이지 않습니다:

CSS로 보조 메뉴 효과를 얻는 방법은 무엇입니까? 가로, 세로 메뉴 구현(코드 예시)

마우스가 메뉴로 이동합니다. 2 위:

CSS로 보조 메뉴 효과를 얻는 방법은 무엇입니까? 가로, 세로 메뉴 구현(코드 예시)

위 예에서 볼 수 있듯이 CSS의 표시 속성은 보조 드롭다운 메뉴 표시 여부를 제어하는 ​​데에도 사용됩니다. 1단계 메뉴의 li 태그로 마우스를 이동하면 2단계 메뉴의 ul 태그가 표시됩니다.

핵심 코드:

list-style-type:none - 점을 삭제합니다.

:hover - 마우스 포인터가 떠 있는 요소를 선택하는 데 사용됩니다.

display:none-보조 메뉴를 숨깁니다.

display:block - 링크를 블록 요소로 표시하면 텍스트뿐 아니라 전체 링크 영역을 클릭할 수 있으며 너비도 지정할 수 있습니다.

위치 :상대/절대--기본 메뉴 옆에 보조 메뉴를 표시하도록 위치를 지정합니다.

먼저 2단계 메뉴를 숨깁니다. 1단계 메뉴의 li 태그로 마우스를 이동하면 2단계 메뉴의 ul 태그가 표시됩니다.

위 내용은 CSS로 보조 메뉴 효과를 얻는 방법은 무엇입니까? 가로, 세로 메뉴 구현(코드 예시)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
수직 탐색 수평 탐색
원천：php.cn
이전 기사：HTML 목록 스타일을 제거할 수 있나요? 리 앞의 작은 검은 점을 제거하는 방법 다음 기사：CSS나 html5를 사용하여 삼각형을 그리는 방법은 무엇입니까? 삼각형을 만드는 두 가지 다른 방법(코드 예제)
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
CSS에서 부동 요소를 수평이 아닌 수직으로 쌓는 방법은 무엇입니까? 한쪽에는 기본 콘텐츠가 있고 다른 한쪽에는 추가 콘텐츠가 있는 두 개의 열로 구성된 웹페이지를 만들려고 합니다. 하지만 float 속성을 사용하여 추가 열을 왼쪽...
에서 2024-04-06 20:45:26
0
2
386
모바일 보기에서 사용자가 링크를 클릭할 때 이 탐색 표시줄을 어떻게 닫을 수 있나요? 사용자가 웹 사이트를 탐색하기 위해 링크를 클릭하면 탐색 표시줄이 닫히지 않습니까? 내비게이션 바를 닫기 위해 각 링크에 클릭 이벤트 리스너를 추가해 보았지만 작...
에서 2024-04-06 19:23:03
0
1
411
Android의 React-Native에서 상태 업데이트가 작동하지 않습니다. 스와이프할 수 있는 가로 갤러리에 이미지 쌍이 있는 코드가 있습니다. 이제 두 이미지의 위쪽 부분을 클릭하면 이미지가 꺼지므로 isImage2Active를 상태로...
에서 2024-04-06 16:54:10
0
1
410
숨겨진 측면 패널 표시: 선택됨 애니메이션 햄버거 메뉴를 통해 보기로 전환할 수 있는 탐색 메뉴를 측면 패널에 갖고 싶습니다. JS 없이 CSS만 사용하여 만들고 싶습니다. :checked 의사...
에서 2024-04-06 15:49:33
0
1
319
탐색 모음의 CSS 하단 테두리 탐색 모음이 있고 목록의 항목을 마우스로 가리키면 하단에 빨간색 선을 추가했지만 제목(예: "서비스") 아래로 빨간색 선을 이동하고 싶습니다. ...
에서 2024-04-06 15:04:41
0
2
347
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！