Disclaimer: please don't use this for production as this is for educational and development purpose only
Introduction
Foundation zurb is a cool scss framework for building your site. But it lack the ability to create a minimized toolbar like bootstrap, today i'm gonna show you how to create top bar like bootstrap navigation bar.
Prequisites
install nodejs for this i recommend using node v11.15.0
for most of this tutorial i will use linux command line. You can use wsl in windows for the equivalent of linux command line or git scm.
Step 1 - Bootstraping the angular app to use foundation zurb
follow this step below to create a bootstraping angularjs app that has scss foundation framework
npm install -g foundation-cli
foundation new --framework sites --template basic
npm install angular --save
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
add this line after app.css in src/layouts/default.html
To run the server
foundation watch
the browser will opened at http://localhost:8000
Step 2 - Let's add the Top Bar
go to src/pages/index.html ,remove all the html and change it will below
<div class="title-bar" data-responsive-toggle="responsive-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle="responsive-menu"></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="responsive-menu">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
<li class="has-submenu">
<a href="#0">One</a>
<ul class="submenu menu vertical" data-submenu>
<li><a href="#0">One</a></li>
<li><a href="#0">Two</a></li>
<li><a href="#0">Three</a></li>
</ul>
</li>
<li><a href="#0">Two</a></li>
<li><a href="#0">Three</a></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><input type="search" placeholder="Search"></li>
<li><button type="button" class="button">Search</button></li>
</ul>
</div>
</div>
if success you can will get something like this
when minimized into mobile you will get something like this
we want the top bar to be something like bootstrap navigation like this one
let's change the code in src/pages/index.html
<div ng-app="a" ng-controller="b">
<nav class="top-bar top-bar-red">
<div class="top-bar-title">
<h1>
<a href="/">
<img width="100" height="100" src="{{root}}assets/img/a.jpg" alt="Logo">
</a>
</h1>
</div>
<div class="hide-for-large sidebar-right-menu" ng-click="toggleMenu()"><i class="fas \{{menuChange}}"></i></div>
<div class="top-bar-right">
<ul class="menu show-for-large">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/" class="btn-nav-icon">
<i class="fas fa-shopping-cart"></i>
</a>
</li>
</ul>
</div>
</nav>
<div class="dropdown-menu-bar hide-for-large">
<ul class="vertical menu">
<li>
<a href="/about.html">Home</a>
</li>
<li>
<a href="/" class="btn-nav-icon">
<i class="fas fa-shopping-cart"></i>
</a>
</li>
</ul>
</div>
</div>
now let's add some css open file src/assets/scss/app.scss and add this line on the bottom of the file
.top-bar-red{
background: #e43338 !important;
}
@media only screen and (max-width: 414px) {
.dropdown-menu-bar{
background: #e43338 !important;
display: none;
}
.dropdown-menu-bar > ul > li > a{
color: white;
}
.card-maker {
position: relative !important;
padding-top:0px;
}
.card-editor {
margin-left: 14px !important;
padding-bottom: 0;
width: 27.25em !important;
font-size: 0.84em;
}
.card-container{
width: 19.5em !important;
}
h2, .hero h1 {
font-size: 14px;
}
.button.btn-reset {
margin-right: 14px !important;
}
.sidebar-right {
margin-top:0px !important;
}
.sidebar-right-menu{
float:right;
color:white;
margin-right:20px;
font-size:20px;
}
}
@media only screen and (max-width: 600px) {
.dropdown-menu-bar{
background: #e43338 !important;
display: none;
}
.dropdown-menu-bar > ul > li > a{
color: white;
}
.card-maker {
position: relative !important;
height: 18em;
padding-top:0px;
}
}
@media only screen and (max-width: 768px) {
.dropdown-menu-bar{
background: #e43338 !important;
display: none;
}
.dropdown-menu-bar > ul > li > a{
color: white;
}
.card-maker {
position: relative !important;
padding-top:0px;
}
.sidebar-right-menu{
float:right;
color:white;
margin-right:20px;
font-size:20px;
}
}
@media only screen and (max-width: 1024px) {
.hide-for-ipadpro{
display:none !important;
float:left !important;
}
.show-for-ipadpro{
display:block !important;
float:left !important;
}
}
now add the js part open file src/assets/js/app.js
import angular from 'angular'
var app = angular.module('a', []);
app.controller('b', function($scope) {
$scope.menuChange='fa-bars';
$scope.toggleMenu=function(){
if($scope.menuChange==='fa-bars'){
$scope.menuChange='fa-times';
document.querySelector('.dropdown-menu-bar').style.display='block';
}else{
$scope.menuChange='fa-bars';
document.querySelector('.dropdown-menu-bar').style.display='none';
}
};
});
now save the file and you will get something like this
this is different design than bootstrap one but i think will get you an idea later how to create bootstrap navigation bar using top bar foundation zurb
gakpenting
/
zurb-foundation-topbar
create a bootstrap like zurb foundation topbar
ZURB Template
i create an article explaining about this here https://dev.to/spiritbro1/how-to-make-bootstrap-like-top-bar-for-foundation-zurb-4g34
Please open all issues with this template on the main Foundation for Sites repo.
This is the official ZURB Template for use with Foundation for Sites. We use this template at ZURB to deliver static code to our clients. It has a Gulp-powered build system with these features:
- Handlebars HTML templates with Panini
- Sass compilation and prefixing
- JavaScript module bundling with webpack
- Built-in BrowserSync server
- For production builds
- CSS compression
- JavaScript module bundling with webpack
- Image compression
Installation
To use this template, your computer needs:
This template can be installed with the Foundation CLI, or downloaded and set up manually.
Using the CLI
Install the Foundation CLI with this command:
npm install foundation-cli --global
Use this command to set up a blank Foundation for Sites project…
Additional Resources
https://glennstovall.com/yeoman-angularront-end-setup/ [yeoman angular foundation generator]
https://stackoverflow.com/questions/19752937/compassserver-not-found-when-running-grunt-server [install compass ruby]
https://unsplash.com/photos/CoNsEK5iHug [logo image]
https://getbootstrap.com/docs/4.5/examples/carousel/ [burger bar]
Top comments (0)