js를 사용하여 반응형 사이드바 예제 작성
- PHPz원래의
- 2017-04-03 15:53:391180검색
. 
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!