>웹 프론트엔드 >JS 튜토리얼 >js를 사용하여 반응형 사이드바 예제 작성

js를 사용하여 반응형 사이드바 예제 작성

PHPz
PHPz원래의
2017-04-03 15:53:391198검색

. js를 사용하여 반응형 사이드바 예제 작성

주요 디자인은 animate() 함수입니다.

animate() 메서드는 CSS 속성 집합의 사용자 정의 애니메이션을 수행합니다. 이 방법은 CSS 스타일을 통해 요소를 한 상태에서 다른 상태로 변경합니다. CSS 속성 값은 점진적으로 변경되어 애니메이션 효과를 만들 수 있습니다. 숫자 값만 애니메이션화할 수 있습니다(예: "여백:30px"). 문자열 값은 애니메이션화할 수 없습니다(예: "배경색상:빨간색"). 자세한 내용은 직접 검색해 보시기 바랍니다. 자세한 내용은 소개하지 않겠습니다. 또한 미디어 쿼리 방식을 사용하여 현재 기기의 화면 크기를 감지하여 사이드바의 크기 디자인을 조정합니다. 미디어 쿼리 방법 은 특히 반응형 페이지를 디자인해야 하는 경우 다양한 화면 크기에 대해 다양한 스타일을 설정하는 데 사용할 수 있습니다.


다음은 코드가 첨부된 구체적인 구현입니다.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1"/>
	<title>侧边栏</title>
	<link  href="css/sideBar.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<p class="container">
		<p class="header">
			<p class="nav-icon">
				<span></span>
				<span></span>
				<span></span>
			</p>
		</p>
		<p class="content">侧边栏内容</p>
		<p class="sideBar">
			<p class="sideBar-left">
				<p class="pider"></p>
				<p class="body-content">
					<p class="messageWarning item">
						<p><i class="message_icon"></i>消息提醒</p>
						<ul>
							<li class="news">
								<i class="circle"></i><a href="javascript:void()">消息1</a>
							</li>
							<li class="news">
								<i class="circle"></i><a href="javascript:void()">消息2</a>
							</li>
							<li class="news">
								<i class="circle"></i><a href="javascript:void()">消息3</a>
							</li>
							<li class="news">
								<i class="circle"></i><a href="javascript:void()">消息4</a>
							</li>
						</ul>
					</p>
					<p class="course item">
						<p><i class="icon"></i>课程</p>
						<ul>
							<li class="myInfo">
								<i class="circle"></i><a href="javascript:void()">我的课程</a>
							</li>
							<li class="Dynamic">
								<i class="circle"></i><a href="javascript:void()">课程动态</a>
							</li>
							<li class="question">
								<i class="circle"></i><a href="javascript:void()">问题空间</a>
							</li>
							<li class="homework">
								<i class="circle"></i><a href="javascript:void()">课程作业</a>
							</li>
						</ul>
					</p>
					<p class="myHome item">
						<a href="javascript:void()">
							<i class="home_icon"></i>我的主页
						</a>
					</p>
					<p class="exit item">
						<a href="javascript:void()">
							<i class="exit_icon"></i>退出
						</a>
					</p>
				</p>				
			</p>
			<p class="sideBar-right"></p>
		</p>		
	</p>
</body>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/sideBar.js"></script>
</html>
js 구현:

아아앙

css 디자인:

아아아아

위 내용은 js를 사용하여 반응형 사이드바 예제 작성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.