We Keep Coding

how to create a full-width dropdown menu using jquery

I am trying to create my custom full width menu using a simple hover function but my problem is as soon the mouse move out of the menu the subdiv also hides.
Can you help me with my code?
Here's my nav
HTML
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown" id="open-block-menu">
ONLINE STORE
</li>
</ul>
<div class="top-block">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>HELLO WORLD</h1>
</div>
</div>
</div>
</div>
JS
$('#open-block-menu').hover(function() {
$('.top-block').slideDown();
}, function() {
$('.top-block').slideUp();
});

Instead of hover method, you could use mouseenter and mouseleave as below, so every-time when mouseenters it show below menus and on mouse pointer leave below menu hides again.
$('#open-block-menu').on("mouseenter",function() {
$('.top-block').slideDown();
});
$('.top-block').on("mouseleave",function() {
$(this).slideUp();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown" id="open-block-menu">
ONLINE STORE
</li>
</ul>
<div class="top-block">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>HELLO WORLD</h1>
</div>
</div>
</div>
</div>

Try to change ur markup like this:
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown" id="open-block-menu">
ONLINE STORE
<div class="top-block">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>HELLO WORLD</h1>
</div>
</div>
</div>
</div>
</li>
</ul>

jQuery.LocalScroll not working with cloned menu

I am using jQuery.LocalScroll plugin to allow my website visitors to navigate my site with a smooth scrolling effect. It's working great with original header menu. But I am trying to function with cloned header. Here is the code:
$('.sf-menu').localScroll({lazy: true});
if($('header.header-sticky').length == 0) {
$('[data-sticky-header="true"]').before($('[data-sticky-header="true"]').clone().addClass("header-sticky"));
}
An here is the HTML Markup
<header class="op_style" data-sticky-header="true">
<div class="clearfix header-desktop">
<div class="large-3 medium-3 columns">
<div class="site-logo">
<h1>Logo</h1>
</div>
</div>
<div class="large-9 medium-9 columns">
<nav class="main-nav">
<ul id="menu-for-one-page-portfolio" class="sf-menu right">
<li>Home</li>
<li>Services</li>
</ul>
</nav>
</div>
</div>
</header>

Try to use .clone(true) - it clones an element with all event handlers to it

Angular-Foundation directives do not work

I am trying to use Angular-Foundation-http://pineconellc.github.io/angular-foundation/ but it does not seem to be working. The sample itself is what I am testing (after I tried it on my own app, and it failed there also.)
Here is the plunker - http://plnkr.co/edit/?p=preview
The problem is when you click the hamburger menu icon it does not display the menu. I am not sure even how to debug the problem to figure out what is wrong. I do know if i remove the mm.foundation service it will begin to work, but then it is only foundation, no more angular directives.
Thanks!
More information found in plunker:
HTML:
<div ng-controller="OffCanvasDemoCtrl">
<div class="off-canvas-wrap">
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" ><span></span></a>
</section>
<section class="middle tab-bar-section">
<h1 class="title">OffCanvas</h1>
</section>
<section class="right-small">
<a class="right-off-canvas-toggle menu-icon" ><span></span></a>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li>Left Sidebar</li>
</ul>
</aside>
<aside class="right-off-canvas-menu">
<ul class="off-canvas-list">
<li>Right Sidebar</li>
</ul>
</aside>
<section class="main-section">
<div class="small-12 columns">
<h1>How to use</h1>
<p>Just use the standard layout for an offcanvas page as documented in the foundation docs</p>
<p>As long as you include mm.foundation.offcanvas it should simply work</p>
</div>
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
</div>
Javascript:
angular.module('plunker', ['mm.foundation']);
angular.module('foundationDemoApp').controller('OffCanvasDemoCtrl', function ($scope) {
});

Dynamic input box width in Foundation 5

I'm just getting started with Foundation and trying to create a title bar with a search box. I want the search box to fill all available space in the title bar. However, nothing I've tried has quite worked:
1) I tried setting a 50% width but at small screen sizes it pushed the other buttons off the top row
2) I tried to implement this solution but couldn't get it working (see commented css)
Dynamic width for input text box (HTML)
I've set up a jsfiddle here:
http://jsfiddle.net/B7nS8/1/
Thanks for your help!
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Site</title>
<meta name="description" content="Desc." />
<link rel="stylesheet" href="http://foundation.zurb.com/assets/css/templates/foundation.css" />
<script src="http://foundation.zurb.com/assets/js/modernizr.js"></script>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<style type="text/css">
.row { max-width: 1200px; }
/* .searchParent div { overflow: hidden; }
.searchText { width: 100%; }
.searchButton { float: right; }
*/
</style>
</head>
<body>
<!-- Navigation -->
<nav class="top-bar" data-topbar>
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1>
<a href="#">
My Site
</a>
</h1>
</li>
<li class="toggle-topbar menu-icon"><span>menu</span></li>
</ul>
<section class="top-bar-section">
<form>
<ul class="left">
<li class="has-form">
<div class="row collapse searchParent">
<div class="large-8 small-9 columns searchText">
<input type="text" placeholder="Find Stuff">
</div>
<div class="large-4 small-3 columns searchButton">
Search
</div>
</div>
</li>
</ul>
</form>
<ul class="right">
<li class="divider"></li>
<li>Login</li>
<li class="divider"></li>
<li>Register</li>
<li class="divider"></li>
</ul>
</section>
</nav>
<!-- End Top Bar -->
<div class="row">
<div class="large-12 columns">
<div class="row">
</div><!-- End Thumbnails -->
</div>
</div>
<!-- End Content -->
<!-- Footer -->
<footer class="row">
<div class="large-12 columns"><hr>
<div class="row">
<div class="large-6 columns">
<p>© Copyright no one at all. Go to town.</p>
</div>
<div class="large-6 small-12 columns">
<ul class="inline-list right">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- End Footer -->
<script>
document.write('<script src=js/vendor/' +
('__proto__' in {} ? 'zepto' : 'jquery') +
'.js><\/script>')
</script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
<!-- End Footer -->
<script src="http://foundation.zurb.com/assets/js/jquery.js"></script>
<script src="http://foundation.zurb.com/assets/js/templates/foundation.js"></script>
</body>
</html>

You should look at foundations docs for topbar.js and form inputs, they're easy to follow and have given examples which do almost exactly what you are trying to do.
You shouldn't really need to write any css, that's what foundations is for.
I'd suggest something like this:
<nav class="top-bar" data-topbar="">
<!-- Title -->
<ul class="title-area">
<!-- Mobile Menu Toggle -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<!-- Top Bar Section -->
<div class="row">
<div class="large-12 columns">
<div class="row collapse">
<div class="small-10 columns">
<input type="text" placeholder="Search">
</div>
<div class="small-2 columns"> Go </div>
</div>
</div>
</div>
</nav>
Make sure you also remember to include a reference to topbar.js after foundation.min.js
Edit: Added an alternate approach
<nav class="top-bar" data-topbar="">
<ul class="title-area" style="width: 100%">
<li class="name has-form">
<div class="large-12 medium-12 small-11 columns">
<input type="text" placeholder="Find Stuff">
</div>
</li>
<li class="toggle-topbar menu-icon"><span></span></li>
</ul>
</nav>

Menu with Collapse BootStrap

Hello I have a button in BootStrap. I use "collapse" in a menu and each of those buttons when I push this to collapse this appear with any problem.
But when I push another button with this active appear down on the other.
How change this action? When I push any button this hide this but with the same animation like collapse do it.
Here is the code, when you try it you'll understand me:
<ul class="nav nav-pills">
<li class="dropdown">1<strong class="caret"></strong></li>
<li class="dropdown">2<strong class="caret"></strong></li>
</ul>
<div class="clearfix"><p>content more</p></div>
<div id="content0a" class="collapse">
<div class="navbar">
<div class="thumbnail bs-example bullet0a">
<div class="media">
<div class="">
<ul><li> Content...1 </li></ul>
</div>
</div>
</div>
</div>
</div>
<div id="content1a" class="collapse">
<div class="navbar">
<div class="thumbnail bs-example bullet0a">
<div class="media">
<div class="">
<ul><li> Content...2 </li></ul>
</div>
</div>
</div>
</div>
</div>

Try this.
<script>
$(document).ready(function(){
$('.nav-pills a').click(function(){
$('.in').not($(this).data('target')).height(0);
$('.in').not($(this).data('target')).removeClass('in');
});
});
</script>
You can also try this. (which gives more of a collapse animation)
<script>
$(document).ready(function(){
$('.nav-pills a').click(function(){
$('.in').not($(this).data('target')).collapse('hide');
});
});
</script>
You can add it to the bottom of your page right before the </body> tag or add it to your existing javascript file.
Try that and let me know if it's close to what you want.