Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="off-canvas-wrap" data-offcanvas>
- <div class="inner-wrap">
- <nav class="tab-bar">
- <section class="left-small">
- <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
- </section>
- </nav>
- <aside class="left-off-canvas-menu">
- <ul class="off-canvas-list">
- <li><label>Foundation</label></li>
- <li><a href="#">Option 1</a></li>
- <li><a href="#" class="off-canvas-submenu-call">Option 2 <span class="right"> + </span></a></li>
- <ul class="off-canvas-submenu">
- <li><a href="#">Sub menu 1</a></li>
- <li><a href="#">Sub menu 2</a></li>
- <li><a href="#">Sub menu 3</a></li>
- </ul>
- <li><a href="#">Option 3</a></li>
- <li><a href="#" class="off-canvas-submenu-call">Option 4 <span class="right"> + </span></a></li>
- <ul class="off-canvas-submenu">
- <li><a href="#">Sub menu 1</a></li>
- <li><a href="#">Sub menu 2</a></li>
- <li><a href="#">Sub menu 3</a></li>
- </ul>
- <li><a href="#">Option 5</a></li>
- <li><a href="#">Option 6</a></li>
- </ul>
- </aside>
- <section class="main-section">
- Content
- </section>
- <a class="exit-off-canvas"></a>
- </div>
- </div>
- $(document).foundation();
- $(".off-canvas-submenu").hide();
- $(".off-canvas-submenu-call").click(function() {
- var icon = $(this).parent().next(".off-canvas-submenu").is(':visible') ? '+' : '-';
- $(this).parent().next(".off-canvas-submenu").slideToggle('fast');
- $(this).find("span").text(icon);
- });
- <aside class="left-off-canvas-menu">
- <ul class="off-canvas-list">
- <li><label>Foundation</label></li>
- <li><a href="#">Option 1</a></li>
- <li><a href="#" class="off-canvas-submenu-call">Option 2 <span class="right"> + </span></a></li>
- <ul class="off-canvas-submenu">
- <li><a href="#">Sub menu 1</a></li>
- <li><a href="#">Sub menu 2</a></li>
- <li><a href="#">Sub menu 3</a></li>
- </ul>
- <li><a href="#">Option 3</a></li>
- <li><a href="#" class="off-canvas-submenu-call">Option 4 <span class="right"> + </span></a></li>
- <ul class="off-canvas-submenu">
- <li><a href="#">Sub menu 1</a></li>
- <li><a href="#">Sub menu 2</a></li>
- <li><a href="#">Sub menu 3</a></li>
- </ul>
- <li><a href="#">Option 5</a></li>
- <li><a href="#">Option 6</a></li>
- </ul>
- </aside>
- <aside class="left-off-canvas-menu">
- <ul class="off-canvas-list">
- <li><label>Foundation</label></li>
- <li><a href="#">Option 1</a></li>
- <li>
- <a href="#" class="off-canvas-submenu-call">Option 2 <span class="right"> + </span></a>
- <ul class="off-canvas-submenu">
- <li><a href="#">Sub menu 1</a></li>
- <li><a href="#">Sub menu 2</a></li>
- <li><a href="#">Sub menu 3</a></li>
- </ul>
- </li>
- </ul>
- </aside>
- $(document).foundation();
- $(".off-canvas-submenu").hide();
- $(".off-canvas-submenu-call").click(function() {
- var icon = $(this).parent().find(".off-canvas-submenu").is(':visible') ? '+' : '-';
- $(this).parent().find(".off-canvas-submenu").slideToggle('fast');
- $(this).find("span").text(icon);
- });
- <aside class="left-off-canvas-menu">
- <ul class="off-canvas-list">
- <li><label>Foundation</label></li>
- <li><a href="#">Option 1</a></li>
- <li>
- <a href="#" class="off-canvas-submenu-call">Option 2 <span class="right"> + </span></a>
- <ul class="off-canvas-submenu">
- <li><a href="#">Sub menu 1</a></li>
- <li><a href="#">Sub menu 2</a></li>
- <li><a href="#">Sub menu 3</a></li>
- </ul>
- </li>
- <li>
- <a href="#" class="off-canvas-submenu-call">Option 3 <span class="right"> + </span></a>
- <ul class="off-canvas-submenu">
- <li><a href="#">Sub menu 1</a></li>
- <li><a href="#">Sub menu 2</a></li>
- <li><a href="#">Sub menu 3</a></li>
- </ul>
- </li>
- </ul>
- </aside>
Add Comment
Please, Sign In to add comment