집 >웹 프론트엔드 >CSS 튜토리얼 >CSS로 보조 메뉴 효과를 얻는 방법은 무엇입니까? 가로, 세로 메뉴 구현(코드 예시)

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

青灯夜游원래의: 2018-09-12 16:07:5916781검색

이 장에서는 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로 보조 메뉴 효과를 얻는 방법은 무엇입니까? 가로, 세로 메뉴 구현(코드 예시)