You can I created an component with...

User 131545 Photo


Registered User
687 posts

Hi all,

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.

Toekomstgerichte door ICT gebeten IT'er
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
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

How did you add that code to RFF? I experimented with it, and it works fine. The 'off canvas' effect kicks in only on small screens.

Hoe heb je die code toe te voegen aan RFF? Ik experimenteerde met het, en het werkt prima. De 'off doek' effect kicks in slechts op kleine schermen.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 131545 Photo


Registered User
687 posts

Dag Inger,

Misschien is het wel een uitdaging om de alle 122 building blocks om te zetten naar een RFF project die je later kunt hergebruiken als component in het ontwerpen van nieuwe webistes en zo nieuwe theme's te ontwikkelen.
Is een idee wat ik geef.

Ik zou zoveel mogelijk bestaande componenten kunnen hergebruiken , zowel zelf gemaakte als bestaande componenten die je ook kan gebruiken als een library. Nu is er niet echt de mogelijkheid om zelfgemaakte componenten te laden in een nieuwe website en zo kunt gebruiken en zo veel tijd bespaart.

Ik ben ervan overtuigd dat de makers van Coffeecup software gaan inzien dat componenten enorm belangrijk zijn in nieuwe en bestaande websites, wat dat bespaart erg veel tijd in ontwerpen van websites.

Translate into English

Perhaps it is a challenge to all 122 building blocks to convert to a RFF project which you can later reuse as a component in the design of new websites and to develop new theme.
Is a idea what I give.

I would can reuse existing components as much as possible, both home-made and existing components that you can use as a library. Now there is not really the possibility of home-made components to load into a new website and so can use and saves so much time.

I am convinced that the makers of Coffeecup software understand that components are extremely important in new and existing websites, what that will save a lot of time in designing websites.

Kind regards
Stephane
Toekomstgerichte door ICT gebeten IT'er
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
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

You can take a 'short cut' to this menu if you first open the html code (the one from the Foundation web page, not yours with all the ../../../ stuff) in the <body> part of a code editor (e.g. HTML Editor) and add all the menu items you need. That means, you need to edit the menu in a code editor first.
Then open RFF or RSD with an empty Foundation template, add a html element.
Copy the menu (all that is in the body) from the code editor and paste it in the code window of that html element .
Then under Settings in RFF/RSD write '<style></style>', and then paste the whole lot of css in between the style opening end end tags. That should do the trick.

As I said, this is only a short cut. You will need to make any changes to the menu in a code editor and then copy/paste it into the html window again.

When I have some free time (after your taxi project?), I'll see if I can make it work as a 'real' component.

U kunt een 'short cut' om het menu te nemen als je eerst de html-code (die van de Foundation webpagina van jou met alle ../../../ spul, niet) te openen in de <body> deel van een code-editor (bijvoorbeeld HTML-editor) en voeg alle menu-items die u nodig hebt. Dat betekent, moet u het menu in een code-editor eerste bewerken.
Open vervolgens RFF of RSD met een lege template Foundation, voeg een HTML-element.
Kopieer het menu (alles wat in het body) van de code-editor en plak deze in de code venster van die html element.
Vervolgens onder Instellingen in RFF / RSD write '<style> </ style>', en plak de gehele partij van css tussen de stijl opening eind eind tags. Dat moet het lukken.

Zoals ik al zei, dit is slechts een kortere weg. U moet eventuele wijzigingen in het menu te maken in een code-editor en kopieer / plak het in de HTML-venster weer.

Toen ik wat vrije tijd (na uw taxi project?), Zal ik zien of ik kan laten werken als een 'echte' component.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.