slide_push_menus.html 2.82 KB

<!DOCTYPE html>
<html lang="ko" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>slide_push_menus</title>
    <link rel="stylesheet" href="css/slide_push_menus.css">
    <script type="text/javascript" src="js/slide_push_menus.js"></script>
  </head>
  <body>
        <!-- body has the class "cbp-spmenu-push" -->
    <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
    	<h3>Menu</h3>
    	<a href="#">Celery seakale</a>
    	<a href="#">Dulse daikon</a>
    	<a href="#">Zucchini garlic</a>
    	<a href="#">Catsear azuki bean</a>
    	<a href="#">Dandelion bunya</a>
    	<a href="#">Rutabaga</a>
    </nav>
    <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2">
    	<h3>Menu</h3>
    	<a href="#">Celery seakale</a>
    	<a href="#">Dulse daikon</a>
    	<a href="#">Zucchini garlic</a>
    	<a href="#">Catsear azuki bean</a>
    	<a href="#">Dandelion bunya</a>
    	<a href="#">Rutabaga</a>
    </nav>
    <nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-top" id="cbp-spmenu-s3">
    	<h3>Menu</h3>
    	<a href="#">Celery seakale</a>
    	<a href="#">Dulse daikon</a>
    	<a href="#">Zucchini garlic</a>
    	<a href="#">Catsear azuki bean</a>
    	<a href="#">Dandelion bunya</a>
    	<a href="#">Rutabaga</a>
    	<a href="#">Celery seakale</a>
    	<a href="#">Dulse daikon</a>
    	<a href="#">Zucchini garlic</a>
    	<a href="#">Catsear azuki bean</a>
    	<a href="#">Dandelion bunya</a>
    	<a href="#">Rutabaga</a>
    </nav>
    <nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom" id="cbp-spmenu-s4">
    	<h3>Menu</h3>
    	<a href="#">Celery seakale</a>
    	<a href="#">Dulse daikon</a>
    	<a href="#">Zucchini garlic</a>
    	<a href="#">Catsear azuki bean</a>
    	<a href="#">Dandelion bunya</a>
    	<a href="#">Rutabaga</a>
    	<a href="#">Celery seakale</a>
    	<a href="#">Dulse daikon</a>
    	<a href="#">Zucchini garlic</a>
    	<a href="#">Catsear azuki bean</a>
    	<a href="#">Dandelion bunya</a>
    	<a href="#">Rutabaga</a>
    </nav>
    <div class="container">
    	<div class="main">
    		<section>
    			<h2>Slide Menus</h2>
    			<!-- Class "cbp-spmenu-open" gets applied to menu -->
    			<button id="showLeft">Show/Hide Left Slide Menu</button>
    			<button id="showRight">Show/Hide Right Slide Menu</button>
    			<button id="showTop">Show/Hide Top Slide Menu</button>
    			<button id="showBottom">Show/Hide Bottom Slide Menu</button>
    		</section>
    		<section class="buttonset">
    			<h2>Push Menus</h2>
    			<!-- Class "cbp-spmenu-open" gets applied to menu and "cbp-spmenu-push-toleft" or "cbp-spmenu-push-toright" to the body -->
    			<button id="showLeftPush">Show/Hide Left Push Menu</button>
    			<button id="showRightPush">Show/Hide Right Push Menu</button>
    		</section>
    	</div>
    </div>
  </body>
</html>