Using Foundation Topbar and Offcanvas Together

Developer
Wing-Hou Chan
Size
2,537 Kb
Views
10,120
  1. Using Foundation Topbar and Offcanvas Together Previews
  2. Using Foundation Topbar and Offcanvas Together HTML Codes
  3. Using Foundation Topbar and Offcanvas Together CSS Codes
  4. Using Foundation Topbar and Offcanvas Together JS Codes

How do I make an using foundation topbar and offcanvas together?

Using Foundation Topbar and Offcanvas Together. The solution for the issue posed here: http://foundation.zurb.com/forum/posts/3062-top-bar-and-off-canvas-for-medium. What is a using foundation topbar and offcanvas together? How do you make a using foundation topbar and offcanvas together? This script and codes were developed by Wing-Hou Chan on 06 December 2022, Tuesday.

Using Foundation Topbar and Offcanvas Together Previews
IQ Test

Using Foundation Topbar and Offcanvas Together - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Using Foundation Topbar and Offcanvas Together</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel='stylesheet prefetch' href='https://cdn.foundation5.zurb.com/foundation.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="off-canvas-wrap"> <div class="inner-wrap"> <nav class="top-bar hide-for-medium-down" data-topbar> <ul class="title-area"> <li class="name"><h1><a href="#">My Site</a></h1> </li> <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li> </ul> <section class="top-bar-section"> <ul class="left"> <li><a href="#">Left Nav Button</a></li> <li class="divider"><li> <li class="has-dropdown not-click"><a href="#">Mega Menu</a> <ul class="dropdown dropdown-wrapper"> <li> <div> <div class="small-6 columns"> <ul> <li><h3>Heading 1</h3></li> <li class="active"><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </div> <div class="small-6 columns"> <ul> <li><h3>Heading 2</h3></li> <li class="active"><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </div> </div> </li> </ul> </li> <li class="divider"><li> </ul> <ul class="right"> <li class="active"><a href="#">Right Button Active</a></li> <li class="has-dropdown"> <a href="#">Right Button with Dropdown</a> <ul class="dropdown"> <li><a href="#">First link in dropdown</a></li> </ul> </li> </ul> </section>
</nav> <nav class="tab-bar hide-for-large-up"> <section class="tab-bar-section"> <h1 class="title">Foundation</h1> </section> <section class="right-small"> <a class="right-off-canvas-toggle menu-icon" ><span></span></a> </section> </nav> <aside class="right-off-canvas-menu"> <ul class="off-canvas-list"> <li><label>Users</label></li> <li><a href="#">Hari Seldon</a></li> <li><a href="#">R. Giskard Reventlov</a></li> <li><a href="#">R. Daneel Olivaw</a></li> <li><a href="#">The Mule</a></li> <li><a href="#">Dors Venabili</a></li> <li><a href="#">Yugo Amaryl</a></li> <li><a href="#">The Mule</a></li> <li><a href="#">Emperor Cleon I</a></li> <li><a href="#">Gaal Dornick</a></li> <li><a href="#">Bel Riose</a></li> <li><a href="#">Salvor Hardin</a></li> <li><a href="#">Bel Riose</a></li> </ul> </aside> <section class="main-section"> </section> <a class="exit-off-canvas hide-for-large-up"></a> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdn.foundation5.zurb.com/foundation.js'></script> <script src="js/index.js"></script>
</body>
</html>

Using Foundation Topbar and Offcanvas Together - Script Codes CSS Codes

.off-canvas-wrap, .inner-wrap, .main-section
{ height: 100%;
}
h3
{ color: #fff !important;
}
@media only screen and (min-width: 641px)
{ .dropdown-wrapper { background-color: #666 !important; width: 540px !important; padding: 10px 0; }
}

Using Foundation Topbar and Offcanvas Together - Script Codes JS Codes

$(document).foundation();
Using Foundation Topbar and Offcanvas Together - Script Codes
Using Foundation Topbar and Offcanvas Together - Script Codes
Home Page Home
Developer Wing-Hou Chan
Username winghouchan
Uploaded December 06, 2022
Rating 3
Size 2,537 Kb
Views 10,120
Do you need developer help for Using Foundation Topbar and Offcanvas Together?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Wing-Hou Chan (winghouchan) Script Codes
Name
Using a Range Slider Inside a Reveal Modal
Clearing Form With Abide Validation
Full Screen Orbit With Background Image
Confirm Close Of Foundation Reveal Modal
Offcanvas with Icon Bar
Making Element Height Fill Remaining Document Space
Custom Close ZURB Foundation Reveal Modal With Image
Custom Close Foundation Reveal Modal
Foundation Dropdowns Demo
How to use Orbit with background images
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!