Hello fellow developers.. I have a problem with the foundation dropdown menu, and after quite a while of tackling the problem I search for your help, foundation gurus.
I am using foundation 6.2.4-full. I've created a dropdown menu but I noticed an issue, the problem lies when using the menu with mobile devices (try on iphone 4). It's submenu items aren't clickable. For example, click on the Map option, and then try to click on Pokemons sub-option. The code is embedded below.
I can't find the problem, I am quite new to foundation, perhaps I'm missing an important option?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="device-width=width, initial-scale=1">
<link rel="stylesheet" href="/css/foundation/foundation.min.css">
<script src="/js/jquery_2.2.4.min.js"></script>
<script src="/js/foundation/what-input.js"></script>
<script src="/js/foundation/foundation.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
$(document).foundation();
});
</script>
<nav class="top-bar">
<ul class="dropdown vertical medium-horizontal menu" data-dropdown-menu>
<li>Home</li>
<li class="has-submenu">
Map
<ul class="menu submenu vertical nested" data-submenu>
<li>Pokemons</li>
<li>Poke Gyms</li>
<li>Poke Stops</li>
</ul>
</li>
<li>news</li>
<li class="has-submenu">
<a>Guides</a>
<ul class="menu submenu vertical nested" data-submenu>
<li>
Game guides
</li>
<li>
Site guides
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
This seems to work, give it a go on mobile, I think Foundation will detect mobile and turn the hover into a click, all events are in their documentation here: https://foundation.zurb.com/sites/docs/dropdown-menu.html.
Here's my example that works:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="device-width=width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet"/>
</head>
<body>
<nav class="top-bar">
<ul class="dropdown vertical medium-horizontal menu" data-dropdown-menu>
<li>Home</li>
<li class="has-submenu">
Map
<ul class="menu submenu vertical nested" data-submenu>
<li>Pokemons</li>
<li>Poke Gyms</li>
<li>Poke Stops</li>
</ul>
</li>
<li>news</li>
<li class="has-submenu">
<a>Guides</a>
<ul class="menu submenu vertical nested" data-submenu>
<li>
Game guides
</li>
<li>
Site guides
</li>
</ul>
</li>
</ul>
</nav>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></script>
<script>
$(document).ready(function() {
$(document).foundation();
});
</script>
</body>
</html>
Related
links on the page
Hi!
The above picture is the links on the page I want to build (T&C is the active link and has its own content below it), wherein whenever someone clicks on another link, for instance, FAQ, the text should move from right to left smoothly and occupy t&C current position and display its own content.
I was trying this via bootstrap tabs but no luck, is there any different approach to it?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tabs With Dropdown Menu</h3>
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Submenu 1-1</li>
<li>Submenu 1-2</li>
<li>Submenu 1-3</li>
</ul>
</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
</body>
</html>
(I can't comment yet, so I put it in an answer)
Please add the HTML and CSS (and maybe JS) source code to get help.
I want to have a dropdown menu on my site. I got it working fine when storing the files on my server. However, I'd like to load them from a CDN. What happens when I try this though is that the CSS aspects work fine, but the JavaScript aspects don't, which means that the following HTML:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/foundation/6.2.3/foundation.min.css">
</head>
<body>
<div class="top-bar">
<div class="top-bar-right">
<ul class="dropdown menu" data-dropdown-menu>
<li>
Dropdown menu
<ul class="menu vertical">
<li>
First dropdown link
</li>
<li>
Second dropdown link
</li>
</ul>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/foundation/6.2.3/foundation.min.js"></script>
<script type="text/javascript">
$(document).foundation();
</script>
</body>
</html>
just produces this:
Any ideas what's wrong with this code?
A quick check at https://github.com/zurb/foundation-sites/blob/v6.3/bower.json shows that Foundation 6 supports jquery version ~ 2.2.0 so changing your JQuery version should solve your issue
$(document).foundation();
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.js"></script>
<div class="top-bar">
<div class="top-bar-right">
<ul class="dropdown menu" data-dropdown-menu>
<li>
Dropdown menu
<ul class="menu vertical">
<li>
First dropdown link
</li>
<li>
Second dropdown link
</li>
</ul>
</li>
</ul>
</div>
</div>
I know that this can be done if the navigation bar used basic html. How can the navbar be stretched to the full width using uikit ?
My navbar code :
<nav class="uk-navbar">
Web
<ul class="uk-navbar-nav">
<li>Home</li>
<li>Contact Us</li>
</ul>
</nav>
I've just reproduced your example and it's working fine: http://codepen.io/untmat/pen/JKgZLw
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.26.4/css/uikit.min.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.26.4/css/uikit.min.css"></script>
<nav class="uk-navbar">
Web
<ul class="uk-navbar-nav">
<li>Home</li>
<li>Contact Us</li>
</ul>
</nav>
Maybe you haven't added uikit.css, jquery.js and uikit.js properly?
I am working on JQuery. Bootstrap and HTML5 in an asp.net application. I am trying to implement a simple menu in the master page. My code is like below:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu
1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Submenu 1-1</li>
<li>Submenu 1-2</li>
<li>Submenu 1-3</li>
</ul>
</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
<div class="container body-content">
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</body>
</html>
It is working fine when I am calling the "jquery.min.js" and "bootstrap.min.js" file directly from internet server as you can see in the code. But when I include the files from local machine like:
<link href="Styles/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.9.0.js" type="text/javasript"></script>
<script src="Scripts/bootstrap.min.js" type="text/javascript"></script>
sub menu is not showing.
I am not sure what is actually going on.
Any help will be thankfully accepted.
I think your problem is related to the version of jquery, so copy this
https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
and put it in URL then right click save as ... you should save it as javascript file, and then add it to your project in the correct place
Following on from this question, I am still struggling with the Twitter Bootstrap. I've managed to get my navigation bar to appear and I'm trying to add a drop down menu to it. No matter what I try, I can't actually get the drop down part of the menu to work! Here is a screenshot of my menu.
As you can see, I have "Account Settings" which should be a drop down menu but when I click on it, no drop down options appear. Below is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/bootstrap.js")" type="text/javascript"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
<link href="#Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<a class="brand" href="#">Present Ideas</a>
<li class="active">Home</li>
<li>Blog</li>
<li>About</li>
<li>Help</li>
<li class="dropdown" id="accountmenu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Account Settings<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Login</li>
<li>Register</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
#RenderBody()
</div>
</body>
</html>
As you can see, I'm referencing the dropdown Javascript file from Twitter. I have also tried referencing this locally which made no difference. I've also included the Javascript that I believe should hook-up the drop down menu and call into Twitter's Javascript file.
I'm at a loss as to why this isn't working
I can't see where you are including jQuery in your code. You have to include it before all your other scripts for the dropdown to work.
Here is the jQuery script from the google CDN:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
Mind it is also redundant to use this code in your example:
<script type="text/javascript" language="javascript" >
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
Because it isn't doing anything.