I am trying to create a new site template based on Zurb's Foundation 5 that has two menus - a top menu and a left menu. That is working for medium and large sizes, but for 'small' I'm trying to hide the top menu with a top-right "hamburger", and then the left menu to work in a similar manner but from the top-left. This is what it looks like at the moment:
The top right works fine, except only the 'hamburger' menu-icon is clickable. The "MENU" text next to it, is not.
The top left has a couple of problems. Only the text that I add appears and is clickable ("TOG" here). The menu-icon does not appear. I guess I could replace "TOG" with "PAGES" as a workaround.
Second, when I click on it to open the menu, it pushes the top bar down one row to cover the title and leaving a white space at the top. Ie.:
Here's my code (very much work in progress - logos will be replaced with images, etc):
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<div class="fixed">
<nav class="top-bar " data-topbar role="navigation">
<section class="left-small hide-for-medium-up">
<a class="left-off-canvas-toggle menu-icon" href="#"><span>TOG</span></a>
</section>
<section class="middle tab-bar-section hide-for-medium-up">
<h1>LOGO</h1>
</section>
<ul class="title-area">
<li class="name">
<h1 class="hide-for-small">Logo</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li>Search</li>
<li>Facebook</li>
<li>Twitter</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Articles</li>
<li>Constituents</li>
<li>Engineers</li>
<li>Shipping</li>
<li>Locomotives</li>
<li>Rolling Stock</li>
<li>References</li>
<li>Forums</li>
</ul>
</section>
</nav>
</div>
<!-- Off Canvas Menu -->
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>LNER</label></li>
<li>Gresley</li>
<li>Thompson</li>
<li>Peppercorn</li>
</ul>
</aside>
<section class="main-section">
<div class="row">
<div class="large-2 medium-3 columns">
<div class="hide-for-small">
<div class="sidebar">
<nav>
<ul class="side-nav">
<li><label>LNER</label></li>
<li><a class="active" href="gresley.shtml">Gresley</a></li>
<li>Thompson</li>
<li>Peppercorn</li>
<li class="divider"></li>
</ul>
</nav>
</div>
</div>
</div>
<!-- Main body content starts here -->
<div class="large-10 medium-9 columns">
<h1>Sir Nigel Gresley</h1>
Does anyone have any thoughts as to what is causing my problems?
As far as i do understand you're trying to use Foundation's Off-canvas (menus) in a manner it is not intended.
It seems you are looking for a mobile menu which can be toggled.
Off-canvas (menus) are a layout structure. When the menu shows up the complete layout moves to the left / right. For that reason you content should be wrapped in the Off-canvas (menus) structure:
From http://foundation.zurb.com/docs/components/offcanvas.html:
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<a class="left-off-canvas-toggle" href="#" >Menu</a>
<!-- Off Canvas Menu -->
<aside class="left-off-canvas-menu">
<!-- whatever you want goes here -->
<ul>
<li>Item 1</li>
...
</ul>
</aside>
<!-- main content goes here -->
<!-- close the off-canvas menu -->
<a class="exit-off-canvas"></a>
</div>
</div>
See the <!-- main content goes here --> in the above. You can try to rebuild your example as follows:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation</title>
<link rel="stylesheet" href="css/app.css" />
<script src="bower_components/modernizr/modernizr.js"></script>
</head>
<body>
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<div class="fixed">
<nav class="top-bar " data-topbar role="navigation">
<section class="left-small hide-for-medium-up">
<a class="left-off-canvas-toggle menu-icon" href="#"><span>TOG</span></a>
</section>
<section class="middle tab-bar-section hide-for-medium-up">
<h1>LOGO</h1>
</section>
<ul class="title-area">
<li class="name">
<h1 class="hide-for-small">Logo</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li>Search</li>
<li>Facebook</li>
<li>Twitter</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Articles</li>
<li>Constituents</li>
<li>Engineers</li>
<li>Shipping</li>
<li>Locomotives</li>
<li>Rolling Stock</li>
<li>References</li>
<li>Forums</li>
</ul>
</section>
</nav>
</div>
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<a class="left-off-canvas-toggle hide-for-medium-up" href="#" >Menu</a>
<!-- Off Canvas Menu -->
<aside class="left-off-canvas-menu hide-for-medium-up">
<!-- whatever you want goes here -->
<ul class="off-canvas-list">
<li><label>LNER</label></li>
<li>Gresley</li>
<li>Thompson</li>
<li>Peppercorn</li>
</ul>
</aside>
<!-- main content goes here -->
<section class="main-section">
<div class="row">
<div class="large-2 medium-3 columns">
<div class="hide-for-small">
<div class="sidebar">
<nav>
<ul class="side-nav">
<li><label>LNER</label></li>
<li><a class="active" href="gresley.shtml">Gresley</a></li>
<li>Thompson</li>
<li>Peppercorn</li>
<li class="divider"></li>
</ul>
</nav>
</div>
</div>
</div>
<!-- Main body content starts here -->
<div class="large-10 medium-9 columns">
<h1>Sir Nigel Gresley</h1>
</div>
<!-- close the off-canvas menu -->
<a class="exit-off-canvas"></a>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Possible also how to make bootstrap off canvas nav overlap content instead of move it will help you further.
Related
I use foundation 6 to build my website. Only a problem occurs when I shrink the size of my window.
Picture of my website
Does somebody know how to fix this?
An answer is appreciated.
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1><a href="#"><b>Pimg</b>
</a>
</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li> <div class="entypo-home entipo"></div></li>
<li> <div class="entypo-picture entipo"></div></li>
<li> <div class="entypo-upload entipo"></div></li>
<li> <div class="entypo-user entipo"></div></li>
</ul>
<ul class="left">
<li>Log out</li>
<li class="has-form">
<div class="row collapse">
<div class="medium-8 columns">
<input type="text" placeholder="Search...">
</div>
<div class="medium-4 columns">
Search
</div>
</div>
</li>
</ul>
</section>
</nav>
I am using nav-pills from bootstrap 3 to display my image banner on the corresponding tab. I want to have an unordered list on the "#contact-us" (Corporate, americas/caribbean, africa/middle east, europe, asia/australia) on top of the banner image and have both the text and image to be responsive. I can get the list on top of the image, but once I shrink the browser the list would run out of the banner image.
What do I need to do in my css so that my text would stay within the banner even when i am shrinking the image?
Below is my html.
Thanks in advance!
<div class="banner-tabs">
<div class="container">
<ul class="nav nav-pills tab-titles" id="pills-first">
<li>About Us</li>
<li>Careers</li>
<li class="active">Contact Us</li>
</ul> <!-- nav nav-pills -->
</div> <!-- container -->
<!-- Content -->
<div class="tab-content">
<div class="tab-pane" id="about-us">
<img src="../images/delete-1.png" class="tab-banner" />
</div> <!-- about us -->
<div class="tab-pane" id="careers">
<img src="../images/delete-2.png" class="tab-banner" />
</div> <!-- careers -->
<div class="tab-pane active" id="contact-us">
<img src="../images/delete-1.png" class="tab-banner">
<div class="continents">
<p>Click to view:</p>
<ul>
<li id="corporate"><a>Corporate</a></li>
<li id="americas-caribbean"><a>Americas/Caribbean</a></li>
<li id="africa-middle-east"><a>Africa/Middle East</a></li>
<li id="europe"><a>Europe</a></li>
<li id="asia-australia"><a>Asia/Australia</a></li>
</ul>
</div> <!-- continents -->
</div>
</div> <!-- row -->
</div> <!-- corporate-content -->
perhaps you can provide something like a codepen example ?
Use this as a base : http://codepen.io/alogonzac/pen/vOKELp
<div class="banner-tabs">...</div>
For some reason when ever i open my web page on a table the logo increase size and covers the links in my main menu bar.
here is my source code and css..
<div class="container">
<div class="logo"><a class="brand" href="index.html"><img src="../Website/SCM Logo.png" alt="optional logo"> </div>
<div id="mainmenu" class="menu_container">
<label class="mobile_collapser">MENU</label>
<!-- Mobile menu title -->
<ul>
<li class="active"></li>
<!-- Must create links here -->
<li>Mechanical</li>
<li>Electrical</li>
<li>Communication</li>
<li>Contact</li>
</ul>
</div>
<div class="triangle-up-left"></div>
<div class="triangle-up-right"></div>
</div>
</header>
You can try specifying a percentage size for you logo ex(style="max-height:50%; max-width:50%"). This will allow it to scale to different devices, and hopefully it will stop covering your main menu
Your a tag is not complete. Check following:
<div class="logo">
<a class="brand" href="index.html">
<img src="../Website/SCM Logo.png" alt="optional logo" />
</a>
</div>
I have 2 html files x and y.html. And I try 2 different ways to solve this problem:How I include html files wihout iframe and javascript?
it is menu file y. html
<!--sidebar start-->
<aside>
<div id="sidebar" class="nav-collapse">
<!-- sidebar menu start-->
<div class="leftside-navigation">
<ul class="sidebar-menu" id="nav-accordion">
<li>
<a class="active" href="index.html">
<i class="fa fa-dashboard"></i>
<span>Home</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class="fa fa-tasks"></i>
<span>Lists</span>
</a>
<ul class="sub">
<li>Shopping List</li>
<li>To-Do List</li>
</ul>
</li>
<li class="sub-menu">
<a href="profile.html">
<i class="fa fa-glass"></i>
<span>Profil</span>
</a>
</li>
<!-- sidebar menu end-->
</div>
</aside>
<!--sidebar end-->
an it is main index page x.html
<!--sidebar start-->
<aside>
<div id="sidebar" class="nav-collapse">
<!-- sidebar menu start-->
<!-- MENU SHOULD BE HERE-->
<!-- sidebar menu end-->
</div>
</aside>
You can't do that with html.
But you can use PHP
<?php include("menu.html"); ?>
So in your case:
<!--sidebar start-->
<aside>
<div id="sidebar" class="nav-collapse">
<!-- sidebar menu start-->
<?php include("menu.html"); ?>
<!-- sidebar menu end-->
</div>
</aside>
Make sure your server supports PHP.
I was reading the tutorial described here http://foundation.zurb.com/docs/components/topbar.html for creating a horizontal form in the top nav bar.
I downloaded the foundation zip and added in the index.html the following:
<nav class="top-bar">
<ul class="title-area">
<li class="name">
<h1>Top Bar Title </h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="has-form">
<div class="row collapse">
<div class="small-8 columns">
<input type="text">
</div>
<div class="small-4 columns">
Search
</div>
</div>
</li>
</ul>
</section></nav>
What I am getting is this:
while I am expection this:
Any idea why the input text and the search button are not aligned?