특정 사이즈에서의 레이아웃 변경
본문
그누보드로 페이지를 만들면서 궁금한 것이 있어서 질문 올립니다.
http://www.kakaocorp.com/main 카카오 페이지 처럼 브라우저가 특정 사이즈가 되면 왼쪽메뉴의 레이아웃이 바뀝니다. 미디어 쿼리가 아닌 제이쿼리로 만들어진거 같아서 제이쿼리를 확인해 보니 좀 복잡하게 돼있어서 비슷한 기능으로 간단하게 만들수 있는 제이쿼리 플러그인이 있는지 궁금해서 질문 올립니다.
카카오페이지에서 사용한 제이쿼리는
<script type="text/javascript" src="/js/windowResize.js"></script>
<script type="text/javascript" src="/js/constant.js"></script>
<script type="text/javascript" src="/js/common.js"></script>
이 파일들로 보여집니다.
답변 1
아래와 같이 해주세요.
<html>
<head>
<title>Sample</title>
</head>
<body>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://pingendo.github.io/pingendo-bootstrap/themes/default/bootstrap.css" rel="stylesheet" type="text/css">
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-ex-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#">Home</a>
</div>
<div class="collapse navbar-collapse" id="navbar-ex-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">Menu1</a>
</li>
<li>
<a href="#">Menu2</a>
</li>
<li>
<a href="#">Menu3</a>
</li>
<li>
<a href="#">Menu4</a>
</li>
<li>
<a href="#">Menu5</a>
</li>
</ul>
</div>
</div>
</div>
<div id="fullcarousel-example" data-interval="false" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="active item">
Main
</div>
</div>
</div>
</body>
</html>