This is the code:
html code from multilevel-off-canvas
http://zurb.com/building-blocks/multilevel-off-canvas
<!DOCTYPE HTML>
<html>
<head>
<title>top-bar-with-mega-manu-dropdown</title>
<link rel="stylesheet" type="text/css" href="../_css/header-and-subnav.css">
<!-- <link rel="stylesheet" type="text/css" href="../_scss/header-and-subnav.scss"> -->
<link rel="stylesheet" type="text/css" href="../../../framework/css/foundation.min.css">
<link rel="stylesheet" type="text/css" href="../../../framework/css/foundation.css">
<script src="../../../framework/js/vendor/foundation.js"></script>
<script src="../../../framework/js/vendor/foundation.min.js"></script>
<script src="../../../framework/js/vendor/jquery.js"></script>
<script src="../../../framework/js/vendor/what-input.js"></script>
</head>
<body>
<div class="off-canvas position-right" id="offCanvasRight" data-off-canvas>
<ul class="vertical menu" data-accordion-menu>
<li><a href="#">SERVICES</a>
<ul class="menu vertical nested">
<li><a href="#">Brand</a></li>
<li><a href="#">Web Apps</a></li>
<li><a href="#">Mobile Apps</a></li>
</ul>
</li>
<li><a href="#">PRODUCTS</a>
<ul class="menu vertical nested">
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a></li>
</ul>
</li>
<li><a href="#">STOCKISTS</a>
<ul class="menu vertical nested">
<li><a href="#">London</a></li>
<li><a href="#">New York</a></li>
<li><a href="#">Paris</a></li>
</ul>
</li>
</ul>
<ul class="vertical menu">
<li class="off-canvas-menu-item"><a href="#">Tour</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">Register</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Support</a></li>
</ul>
<ul class="vertical menu">
<li><a href="#">Journal</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Terms & Conditions</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Students</a></li>
</ul>
<ul class="menu simple social-links">
<li><a href="#" target="_blank"><i class="fa fa-twitter-square" aria-hidden="true"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-facebook-square" aria-hidden="true"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-github-square" aria-hidden="true"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google-plus-square" aria-hidden="true"></i></a></li>
</ul>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<div class="nav-bar">
<div class="nav-bar-left">
<a class="nav-bar-logo"><img class="logo" src="http://placehold.it/150x30"></a>
</div>
<div class="nav-bar-right">
<ul class="menu">
<li class="hide-for-small-only"><a href="#">TOUR</a></li>
<li class="hide-for-small-only"><a href="#">LOGIN</a></li>
<li>
<li>
<button class="offcanvas-trigger" type="button" data-open="offCanvasRight">
<span class="offcanvas-trigger-text hide-for-small-only">Menu</span>
<div class="hamburger">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</button>
</li>
</ul>
</div>
</div>
<body>
<div class="body-info">
<h4> Multilevel Off-Canvas </h4>
<a class="button disabled" href="#">Watch Video (coming soon)</a>
</div>
</div>
</body>
</div>
</body>
<html>
.nav-bar {
display: flex;
justify-content: space-between;
align-items: center;
background: #2c3840;
height: 75px;
font-family: "Titillium Web", sans-serif;
margin-bottom: 75px; }
.nav-bar .nav-bar-logo {
padding: 1.8rem; }
.nav-bar li {
background: #2c3840; }
.nav-bar a {
color: #fff;
transition: color 0.2s ease-in; }
.nav-bar a:hover {
color: #a8b8c3; }
@media screen and (max-width: 39.9375em) {
.nav-bar {
height: 53.57143px; } }
.nav-bar .offcanvas-trigger {
display: flex;
align-items: center;
justify-content: center;
padding: 1.6rem;
color: #fff;
font-family: "Titillium Web", sans-serif;
text-transform: uppercase;
background-color: #566d7c;
transition: background-color 0.2s ease-in;
cursor: pointer; }
.nav-bar .offcanvas-trigger .offcanvas-trigger-text {
margin-right: 0.25rem;
margin-top: 0.25rem; }
.nav-bar .offcanvas-trigger:hover {
background-color: #6b879a; }
@media screen and (max-width: 39.9375em) {
.nav-bar .offcanvas-trigger {
padding: 0.9rem; } }
.off-canvas {
background: #222b31;
padding: 20px;
color: #fff;
font-family: "Titillium Web", sans-serif; }
.off-canvas > .menu {
margin-bottom: 1rem; }
.off-canvas .menu a {
color: rgba(255, 255, 255, 0.6);
padding-top: 7px;
padding-bottom: 7px;
transition: color .2s ease-in; }
.off-canvas .menu a:hover {
color: #fff; }
.off-canvas .fa {
color: #fff; }
.off-canvas .is-accordion-submenu-parent > a::after {
border-color: rgba(255, 255, 255, 0.6) transparent transparent; }
.off-canvas .social-links {
margin-left: 20px; }
.off-canvas .social-links li {
margin-right: 5px; }
.off-canvas .social-links a:hover .fa {
color: #bfbfbf;
transition: color .2s ease-in; }
.off-canvas .social-links .fa {
font-size: 2.2rem; }
.body-info {
text-align: center;
font-family: "Titillium Web", sans-serif;
color: #2c3840; }
.body-info .button {
margin: 1rem 0;
padding: 0.85em 2em; }
.is-open + .off-canvas-content .hamburger .line:nth-child(1),
.is-open + .off-canvas-content .hamburger .line:nth-child(3) {
width: 12px; }
.is-open + .off-canvas-content .hamburger .line:nth-child(1) {
transform: translateX(-5px) rotate(-45deg); }
.is-open + .off-canvas-content .hamburger .line:nth-child(3) {
transform: translateX(-5px) rotate(45deg); }
.hamburger .line {
width: 20px;
height: 2px;
background-color: #fff;
display: block;
margin: 3px auto;
transition: all 0.3s ease-in-out; }
.hamburger .line:last-child {
margin-bottom: 0; }
How do I on the basis of the code in the foundation building blocks make a design in RFF.
I think this code is bad. Can someone help me where the problem is
Kind regards
Stephane.
Stephane Fonteyne
Ba. Elektronica - ICT
Application Software PowerBasic Developer
e-mail : stephane.fonteyne@telenet.be
gmail : stephane760126@gmail.com
linkin : in : <http://www.linkedin.com/pub/stephane-fonteyn/53/402/204>
twitter : @Stefke36