Why do the menu-icon below looks different from the foundation doc site?
This is the correct icon from the doc:
My code:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation Starter Template</title>
<link rel="stylesheet" href="node_modules/foundation-sites/dist/css/foundation.css" />
<link rel="stylesheet" href="node_modules/foundation-icon-fonts/foundation-icons.css" />
</head>
<body>
<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="example-menu">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
<li>
One
<ul class="menu vertical">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>Two</li>
<li>Three</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>
<h1>Hello, world!</h1>
<i class="fi-social-twitter"></i>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/foundation-sites/dist/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Any ideas? Is it a bug?
Related
First my original code;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="menu1.css">
</head>
<div id=menu>
<ul> <!-- below is the classic vertical menu -->
<li><a class="home" href="home.asp">Home</a></li>
<li><a class="news" href="news.asp">News</a></li>
<li><a class="shop" href="shop.asp">Shop</a></li>
<li><a class="journey" href="about.asp">Our journey</a></li>
<li><a class="contact" href="contact">Contact</a></li>
<!-- search element-->
<!-- <input type="text" placeholder="Typuhhhh"> -->
</ul>
</div>
</html>
But I want it external so I can change it once for every page so I did the following;
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="menu1.css">
</head>
<div id="menu">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>$("#menu").html('<object data="menubaperium.html">');</script>
</div>
</html>
and to be complete the "menubaperium.html
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="menu1.css">
</head>
<div id=menu>
<ul> <!-- below is the classic vertical menu -->
<li><a class="home" href="home.asp">Home</a></li>
<li><a class="news" href="news.asp">News</a></li>
<li><a class="shop" href="shop.asp">Shop</a></li>
<li><a class="journey" href="about.asp">Our journey</a></li>
<li><a class="contact" href="contact">Contact</a></li>
<!-- search element-->
<!-- <input type="text" placeholder="Typuhhhh"> -->
</ul>
</div>
But when I use the script version my menu in not horizontally lined out I searched the internet but I can not find a solution. I hope someone can help me..
Ok after days of searching the internet and trying I found a working solution.
First I changed this part;
<div id=menu>
<ul> <!-- below is the classic vertical menu -->
<li><a class="home" href="home.asp">Home</a></li>
<li><a class="news" href="news.asp">News</a></li>
<li><a class="shop" href="shop.asp">Shop</a></li>
<li><a class="journey" href="about.asp">Our journey</a
</li>
<li><a class="contact" href="contact">Contact</a></li>
<!-- search element-->
<!-- <input type="text" placeholder="Typuhhhh"> -->
</ul>
</div>
For this part;
<body>
<nav id="navMenu"></nav>
<script src="menu.js"></script>
</body>
and to be complete the menu.js;
document.getElementById("navMenu").innerHTML =
'<ul>'+
'<li>Home</li>'+
'<li>News</li>'+
'<li>Shop</li>'+
'<li>Our journey</li>'+
'<li>Contact</li>'+
'</ul>';
Hopefully this will help someone with the same problem.
Here is my HTML code -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>{+title /}</title>
<link rel="stylesheet" href="/css/app.css">
<link rel="stylesheet" href="/css/foundation.css">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<div class="row">
<div class="large-12 columns">
<nav class="top-bar" data-topbar role="navigation">
<section class="top-bar-section">
<ul class="left">
<li>Home<li>
<li>About<li>
<li>Cart<li>
</ul>
</section>
<nav>
</div>
</div>
{+body /}
<script data-main="/js/app" src="/components/requirejs/require.js"></script>
</body>
</html>
And My Out put is following - it seems that no CSS is affecting. Please note one thing that my foundation CSS is included and I have tested that.
I think you are missing Foundation init call. Add this before the end of the BODY tag:
$(document).foundation();
Here is a syntax for v6.3:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation Starter Template</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css">
</head>
<body>
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
<li>
One
<ul class="menu vertical">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>Two</li>
<li>Three</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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
I tried this but the hamburger is not showing only "Menu". I'm using foundation 6 and tested on Opera, Firefox,Chrome, and Edge.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation</title>
<link rel="stylesheet" href="stylesheets/app.css" />
<script src="bower_components/modernizr/modernizr.js"></script>
</head>
<body>
<body>
<div class="contain-to-grid sticky">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name"><h1><span>My Website</span></h1></li>
<li class="toggle-topbar menu-icon">Menu</li>
</ul>
</nav>
</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>
here is showing..
please confirm if call to scripts/css is right.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation</title>
<link rel="stylesheet" href="stylesheets/app.css" />
</head>
<body>
<div class="contain-to-grid sticky">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>
<span>My Website</span></h1>
</li>
<li class="toggle-topbar menu-icon">
</li>
</ul>
</nav>
</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>
http://codepen.io/fabiovaz/pen/vLmEVw
Have you included the foundation icons in the app.scss file?
If not add this line:
#include foundation-menu-icon;
Trying to figure out whats causing this space at the top before the nav bar. www.omegadesignla.com There is a random nbsp; nbsp; space charater being generated into the html when you insepect the element, and I can't figure out whats causing it. Here is the beginning html:
<!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>Omega Design | LA</title>
<meta name="description" content="Web development and printing services serving the greater los angeles area">
<meta name="keywords" content="web development, printing, graphics design, los angeles, santa clarita">
<link rel="stylesheet" href="stylesheets/app.css" />
<link rel="stylesheet" href="stylesheets/foundation-icons.css" />
<link rel="stylesheet" href="css/normalize.css" />
</head>
<body>
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<span><img class="logo" src="img/logofinal.png"><span>
</li>
<li class="toggle-topbar menu-icon">
Menu
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li>About us</li>
<li>Contact us</li>
<li class="has-dropdown">
Services
<ul class="dropdown">
<li>Print Media</li>
<li>Web Development</li>
<!-- <li>Promotional Items</li> -->
<!-- <li class="active">Active link in dropdown</li> -->
</ul>
</li>
</ul>
</section>
</nav>
<div class="container">
<header>
<div class="row">
<div class="large-3 medium-3 small-6 small-centered columns"> <!-- large centered -->
<a id="topbutton" href="#" class="button large radius button">Take the tour!</a>
</div>
</header>
I need to make menu in bootstrap with nav-pills. I have 5 sections in menu and each section have text (Like first is "aaaa", second is "bbbb", etc). If I click on first section it shows text "aaaa" and click on second section it shows text "bbbb", but if I click on third/fourth/ fifth section nothing happens.
Any ideas how to resolve this? Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>APK Market</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div class="header">
<div class="logo"></div>
<div class="navbar">
<ul class="nav nav-pills">
<li class="active"><a data-toggle="tab" href="#games">Games</a></li>
<li><a data-toggle="tab" href="#apps">Apps</a></li>
<li><a data-toogle="tab" href="#live_wallpapers">Live Wallpapers</a></li>
<li><a data-toogle="tab" href="#themes">Themes</a></li>
<li><a data-toogle="tab" href="#archive">Archive</a></li>
</ul>
</div>
</div>
<div class="tab-content">
<div id="games" class="tab-pane active">aaaaaaaaaaaa</div>
<div id="apps" class="tab-pane">bbbbbbbbbbbbb</div>
<div id="live_wallpapers" class="tab-pane">ccccccccccc</div>
<div id="themes" class="tab-pane">ddddddddddd</div>
<div id="archive" class="tab-pane">eeeeeeeeee</div>
</div>
</div>
<div class="content"></div>
<div class="sidebar"></div>
<div class="footer"></div>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>
You spelled "toggle" wrong.
<li><a data-toogle="tab" href="#live_wallpapers">Live Wallpapers</a></li>
<li><a data-toogle="tab" href="#themes">Themes</a></li>
<li><a data-toogle="tab" href="#archive">Archive</a></li>
change data-toogle to data-toggle..