Disable first form and open another form to insert data.. all this i have to do in same page how to do that ?
<section class="content">
<div class="container-fluid">
<div class="block-header">
<h2>
<!-- JQUERY DATATABLES
<small>Taken from datatables.net</small> -->
</h2>
</div>
<!-- Basic Examples -->
<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="header">
<h2>
Add Amigo
</h2>
<ul class="header-dropdown m-r--5">
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</a>
<ul class="dropdown-menu pull-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</div>
<div class="body">
<!-- last row -->
<div class="row">
<div class="col-sm-12">
<div class="col-lg-4 col-md-4">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">person</i>
</span>
<div class="form-line">
<input type="text" class="form-control date" placeholder="City Id" id="city_id">
</div>
</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">person</i>
</span>
<div class="form-line">
<input type="text" class="form-control date" placeholder="Country Id" id="country_id">
</div>
</div>
</div>
</div>
</div>
<!-- end of last row -->
<div class="row">
<div class="col-sm-12">
<div class="col-lg-4 col-md-4">
<button type="submit" id="submit" class="btn btn-primary" value="submit" name="">Submit Details</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
here is the another section of same page
<section class="content">
<div class="container-fluid">
<div class="block-header">
<h2>
<!-- JQUERY DATATABLES
<small>Taken from datatables.net</small> -->
</h2>
</div>
<!-- Basic Examples -->
<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="header">
<h2>
Add Amigo
</h2>
<ul class="header-dropdown m-r--5">
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</a>
<ul class="dropdown-menu pull-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</div>
<div class="body">
<!-- last row -->
<div class="row">
<div class="col-sm-12">
<div class="col-lg-4 col-md-4">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">person</i>
</span>
<div class="form-line">
<input type="text" class="form-control date" placeholder="City Id" id="city_id">
</div>
</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">person</i>
</span>
<div class="form-line">
<input type="text" class="form-control date" placeholder="Country Id" id="country_id">
</div>
</div>
</div>
</div>
</div>
<!-- end of last row -->
<div class="row">
<div class="col-sm-12">
<div class="col-lg-4 col-md-4">
<button type="submit" id="submit" class="btn btn-primary" value="submit" name="">Submit Details</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
here is the code.....when i successfully insert data after clicking submit button in first form ..i want the first form to be disable and 2 form should be enabled for inserting data !
Here is a simple way to do so using jquery :
First set the second form to be display:none by default then detect the function submit of the first form then show the second and hide the first using jQuery Effects - Fading :
With jQuery you can fade elements in and out of visibility.
jQuery fadeIn()
jQuery fadeOut()
jQuery fadeToggle()
jQuery fadeTo()
$(function(){
$('#first button').on('click',function(){
/* your code */
$('#first').css('pointer-events','none');
$('#second').fadeIn();
});
$('#second button').on('click',function(){
/* your code */
$('#second').css('pointer-events','none');
$('#first').fadeIn();
})
})
section {
Width:100%;
height:200px;
}
#first {
background-color:blue;
}
#second{
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<section id="first">
<div>
<button>Submit</button>
</div>
</section>
<section id="second" style="display:none">
<div>
<button>Submit</button>
</div>
</section>
I am using a bootstrap slider.
On desktop, it has three slides with 4 tiles each
On Tabs, they have to be 4 slides with 3 tiles each
On Mobile, there needs to be 12 different slides
I am thinking of the most effective and optimized way of implementing this.
Option 1 - Create 3 different set of sliders. Make only one visible at a time
Option 2 - Detect the screen width with jquery and programmatically add extra tiles as slides, hide the extra ones. I guess this will be very complicated.
Please help if there is a better way to implement this.
Here it is:
.carousel-inner .item.active {
display: flex;
}
.carousel-inner .item {
background-color: #212121;
color: white;
padding: 0 15px;
}
#desktopCarousel .carousel-inner .item > .row {
min-height: 480px;
}
#tabletCarousel .carousel-inner .item > .row {
min-height: 360px;
}
.carousel-inner .item > .row {
flex-grow: 1;
min-height: 320px;
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.carousel-inner .item > .row [class^="col-"] {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
text-align: center;
}
.carousel-inner .item > .row .row {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.carousel-inner .item > .row .row [class^="col-"] {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="desktopCarousel" class="carousel slide hidden-xs hidden-sm" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#desktopCarousel" data-slide-to="0" class="active"></li>
<li data-target="#desktopCarousel" data-slide-to="1"></li>
<li data-target="#desktopCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-sm-6">
First item
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">
Second item
</div>
<div class="col-sm-6">
Third item
</div>
</div>
<div class="row">
<div class="col-sm-12">
Fourth item
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-6">
Fifth item
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">
Sixth item
</div>
<div class="col-sm-6">
Seventh item
</div>
</div>
<div class="row">
<div class="col-sm-12">
Eighth item
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-6">
Nineth item
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">
Tenth item
</div>
<div class="col-sm-6">
Eleventh item
</div>
</div>
<div class="row">
<div class="col-sm-12">
Twelfth item
</div>
</div>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#desktopCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#desktopCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div id="tabletCarousel" class="carousel slide hidden-xs hidden-md hidden-lg" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#tabletCarousel" data-slide-to="0" class="active"></li>
<li data-target="#tabletCarousel" data-slide-to="1"></li>
<li data-target="#tabletCarousel" data-slide-to="2"></li>
<li data-target="#tabletCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-sm-6">
First item
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
Second item
</div>
<div class="col-sm-12">
Third item
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-6">
Fourth item
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
Fifth item
</div>
<div class="col-sm-12">
Sixth item
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-6">
Seventh item
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
Eighth item
</div>
<div class="col-sm-21">
Nineth item
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-6">
Tenth item
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
Eleventh item
</div>
<div class="col-sm-12">
Twelvth item
</div>
</div>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#tabletCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#tabletCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div id="mobileCarousel" class="carousel slide hidden-sm hidden-md hidden-lg" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#mobileCarousel" data-slide-to="0" class="active"></li>
<li data-target="#mobileCarousel" data-slide-to="1"></li>
<li data-target="#mobileCarousel" data-slide-to="2"></li>
<li data-target="#mobileCarousel" data-slide-to="3"></li>
<li data-target="#mobileCarousel" data-slide-to="4"></li>
<li data-target="#mobileCarousel" data-slide-to="5"></li>
<li data-target="#mobileCarousel" data-slide-to="6"></li>
<li data-target="#mobileCarousel" data-slide-to="7"></li>
<li data-target="#mobileCarousel" data-slide-to="8"></li>
<li data-target="#mobileCarousel" data-slide-to="9"></li>
<li data-target="#mobileCarousel" data-slide-to="10"></li>
<li data-target="#mobileCarousel" data-slide-to="11"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-sm-12">
First item
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12">
Second item
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12">
Third item
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12">
Fourth item
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12">
Fifth item
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12">
Sixth item
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12">
Seventh item
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12">
Eighth item
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12">
Nineth item
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12">
Tenth item
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12">
Eleventh item
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12">
Twelveth item
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#mobileCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#mobileCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Note you don't actually need the CSS (it just creates the layout for desktop sliders, centers the contents in each item (with flexbox) + colors, but I assume you already got those covered). CSS is un-prefixed and, in case it helps, you'll find the SCSS in the fiddle.
Also, you might want to set different min-heights for items on mobile/tablet/desktop.
Other than that, it's pretty clean... bootstrap. No custom JS, no custom CSS. Just markup.
Edit: (as per comment) If you don't want all sliders running at all times and prefer to initialize each based on a resize listener, when changing the #media interval (I recommend enquire.js for this - 0.8k minified, runs on any browser/device), place each carousel's markup in a script, with different id's:
<script id="desktop-markup" type="text/template">
<div id="desktopCarousel" class="carousel slide" data-ride="carousel">
<!-- carousel markup here -->
</div>
</script>
<script id="tablet-markup" type="text/template">
<div id="tabletCarousel" class="carousel slide" data-ride="carousel">
<!-- carousel markup here -->
</div>
</script>
<script id="mobile-markup" type="text/template">
<div id="mobileCarousel" class="carousel slide" data-ride="carousel">
<!-- carousel markup here -->
</div>
</script>
On page load and on changing the media interval, get the contents of the template according to current #media interval (i.e. $('#mobile-markup').html()), place it inside the designated DOM container and run .carousel() on it:
$('.carousel-container').html(
$('#mobile-markup').html()
).find('.carousel').carousel(options);
// where options is optional. :)
// see http://getbootstrap.com/javascript/#carousel-options
For some reason, Smooth scroll is not working. I believe that there is something in my HTML causing the problem. Click on Food delivery or anything in that list to test it, in the code. I appreciate any extra eyes on this :)
$(document).ready(function() {
/* For the sticky navigation */
$('.js--section-features').waypoint(function(direction) {
if (direction == "down") {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
}, {
offset: '60px;'
});
/* Scroll on buttons*/
$('.js--scroll-to-plans').click(function() {
$('html, body').animate({
scrollTop: $('.js--section-plans').offset().top
}, 1000);
});
$('.js--scroll-to-start').click(function() {
$('html, body').animate({
scrollTop: $('.js--section-features').offset().top
}, 1000);
});
/* Navigation scroll*/
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 2000);
return false;
}
}
});
/* Animations on scroll */
$('.js--wp-1').waypoint(function(direction) {
$('.js--wp-1').addClass('animated fadeIn');
}, {
offset: '50%'
});
$('.js--wp-2').waypoint(function(direction) {
$('.js--wp-2').addClass('animated fadeInUp');
}, {
offset: '50%'
});
$('.js--wp-3').waypoint(function(direction) {
$('.js--wp-3').addClass('animated fadeIn');
}, {
offset: '50%'
});
$('.js--wp-4').waypoint(function(direction) {
$('.js--wp-4').addClass('animated pulse');
}, {
offset: '50%'
});
/* Map */
var map = new GMaps({
div: '.map',
lat: 38.7436266,
lng: -9.07,
zoom: 12
});
map.addMarker({
lat: 38.7436266,
lng: -9.1602037,
title: 'Lima',
infoWindow: {
content: '<p>Our Lisbon Headquarters</p>'
}
});
});
<!Doctype HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Healthy foods is the #1 meal prep company in 2017!">
<link rel="stylesheet" type="text/css" href="css/v/normalize.css">
<link rel="stylesheet" type="text/css" href="css/v/grid.css">
<link rel="stylesheet" type="text/css" href="css/v/ionicons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" type="text/css" href="css/r/style.css">
<link rel="stylesheet" type="text/css" href="css/r/queries.css">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel='stylesheet' type='text/css'>
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="/img/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/img/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/img/favicons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/img/favicons/manifest.json">
<link rel="mask-icon" href="/img/favicons/safari-pinned-tab.svg">
<link rel="shortcut icon" href="/img/favicons/favicon.ico">
<meta name="msapplication-config" content="/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<!-- Favicons -->
<!-- Goolge Analytics -->
<!-- Goolge Analytics -->
<title>Healthy Foods</title>
</head>
<body>
<header>
<nav>
<div class="row">
<img src="img/logo-white.png" alt="Omni Food Logo" class="logo">
<img src="img/logo.png" alt="Omni Food Logo" class="logo-black">
<ul class="main-nav">
<li>Food delivery
</li>
<li>How it works
</li>
<li>Our cities
</li>
<li>Sign up
</li>
<li>Conact Us
</li>
</ul>
</div>
</nav>
<div class="hero-text-box">
<h1>Goodbye junk food.<br>Hello super healthy meals.</h1>
<a class="btn btn-full js--scroll-to-plans" href="#plans">I'm hungry</a>
<a class="btn btn-ghost js--scroll-to-start" href="#features">Show me more</a>
</div>
</header>
<!-- Food Fast Section Title -->
<section class="js--section-features" id="features">
<div class="row">
<center>
<h2>Get food fast — not fast food.</h2>
</center>
<p class="long-copy">
Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise!
</div>
<!-- Get Food Fast Section Content -->
<br>
<div class="row js--wp-1">
<div class="col span-1-of-4 box">
<i class="ion-calendar icon-big"></i>
<h3>Up to 365 days/year</h3>
<p class="section-content">Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-clock icon-big"></i>
<h3>Ready in 20 minutes</h3>
<p class="section-content">You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-nutrition icon-big"></i>
<h3>100% organic</h3>
<p class="section-content">All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-android-cart icon-big"></i>
<h3>Order anything</h3>
<p class="section-content">We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!
</p>
</div>
</div>
</section>
<!-- Get Food Fast Section Content -->
<!-- Favorite Meals Section -->
<section class="section-meals">
<!-- Row 1 -->
<ul class="meals-showcase clearfix">
<li>
<figure class="meal-photo">
<img src="img/1.jpg" alt="Korean bibimbap with egg and vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/2.jpg" alt="Simple italian pizza with cherry tomatoes">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/3.jpg" alt="Chicken breast steak with vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/4.jpg" alt="Autumn pumpkin soup">
</figure>
</li>
</ul>
<!-- Row 2 -->
<ul class="meals-showcase clearfix">
<li>
<figure class="meal-photo">
<img src="img/5.jpg" alt="Paleo beef steak with vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/6.jpg" alt="Healthy baguette with egg and vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/7.jpg" alt="Burger with cheddar and bacon">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/8.jpg" alt="Granola with cherries and strawberries">
</figure>
</li>
</ul>
</section>
<!-- Favorite Meals Section End -->
<!-- How it works Section -->
<section class="section-steps" id="works">
<div class="row">
<h2>How it works - Simple as 1, 2, 3</h2>
</div>
<div class="row">
<div class="col span-1-of-2 steps-box">
<img src="img/app-iPhone.png" alt="Omifood app on iPhone" class="app-screen js--wp-2">
</div>
<div class="col span-1-of-2 steps-box">
<div class="work-step">
<div>1</div>
<p>Choose the subscription plan that best fits your needs and sign up today.</p>
</div>
<div class="work-step">
<div>2</div>
<p>Order your delicious meal using our mobile app or website. Or you can even call us!</p>
</div>
<div class="work-step">
<div>3</div>
<p>Enjoy your meal after less than 20 minutes. See you the next time!</p>
</div>
<a href="#" class="btn-app">
<img src="img/download-app-android.png" alt="Play Store Button">
</a>
<a href="#" class="btn-app">
<img src="img/download-app-android.png" alt="Play Store Button">
</a>
</div>
</div>
<!-- How it works Section End -->
<section class="section-cities js--wp-3" id="cities">
<div class="row">
<h2>We're currently in these cities</h2>
</div>
<!-- Lisbon -->
<div class="row">
<div class="col span-1-of-4 box">
<img src="img/lisbon-3.jpg" alt="Lisbon">
<h3>Lisbon</h3>
<div class="city-feature">
<i class="ion-person icon-small"></i>
1600+ happy eaters
</div>
<div class="city-feature">
<i class="ion-ios-star icon-small"></i>
60+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter icon-small"></i>
#omnifood_lx
</div>
</div>
<!-- San Francisco -->
<div class="col span-1-of-4 box">
<img src="img/san-francisco.jpg" alt="San Francisco">
<h3>San Francisco</h3>
<div class="city-feature">
<i class="ion-person icon-small"></i>
+3700 happy eaters
</div>
<div class="city-feature">
<i class="ion-ios-star icon-small"></i>
160+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter icon-small"></i>
#omnifood_sf
</div>
</div>
<!-- Berlin -->
<div class="col span-1-of-4 box">
<img src="img/berlin.jpg" alt="Berlin">
<h3>Berlin</h3>
<div class="city-feature">
<i class="ion-person icon-small"></i>
+2300 happy eaters
</div>
<div class="city-feature">
<i class="ion-ios-star icon-small"></i>
110+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter icon-small"></i>
#omnifood_berlin
</div>
</div>
<!-- London -->
<div class="col span-1-of-4 box">
<img src="img/london.jpg" alt="London">
<h3>Berlin</h3>
<div class="city-feature">
<i class="ion-person icon-small"></i>
+1200 happy eaters
</div>
<div class="city-feature">
<i class="ion-ios-star icon-small"></i>
50+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter icon-small"></i>
#omnifood_london
</div>
</div>
</div>
</section>
<!-- Cities Section End -->
<!-- Testimonials Section Start -->
<section class="section-testimonials">
<div class="row">
<h2>Our customers can't live without us</h2>
</div>
<div class="row">
<div class="col span-1-of-3">
<blockquote>
Omnifood is just awesome! I just launched a startup which leaves me with no time for cooking, so Omnifood is a life-saver. Now that I got used to it, I couldn't live without my daily meals!
<cite><img src="img/customer-1.jpg" alt="Customer 1">Alberto Duncan</cite>
</blockquote>
</div>
<div class="col span-1-of-3">
<blockquote>
Inexpensive, healthy and great-tasting meals, delivered right to my home. We have lots of food delivery here in Lisbon, but no one comes even close to Omifood. Me and my family are so in love!
<cite><img src="img/customer-2.jpg" alt="Customer 2">Joana Silva</cite>
</blockquote>
</div>
<div class="col span-1-of-3">
<blockquote>
I was looking for a quick and easy food delivery service in San Franciso. I tried a lot of them and ended up with Omnifood. Best food delivery service in the Bay Area. Keep up the great work!
<cite><img src="img/customer-3.jpg" alt="Customer 3">Milton Chapman</cite>
</blockquote>
</div>
</div>
</section>
<!-- Testimonials Section End -->
<!-- Signup Section Start -->
<section class="section-plans js--section-plans" id="plans">
<div class="row">
<h2>Start eating healthy today</h2>
</div>
<div class="row">
<div class="col span-1-of-3">
<div class="plan-box js--wp-4">
<div>
<h3>Premium</h3>
<p class="plan-price">$399 <span>/ month</span>
</p>
<p class="plan-price-meal">That's only 13.30$ per meal</p>
</div>
<div>
<ul>
<li><i class="ion-ios-checkmark-empty icon-small"></i>1 meal every day</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Order 24/7</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Access to newest creations</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Free delivery</li>
</ul>
</div>
<div>
Sign up now
</div>
</div>
</div>
<div class="col span-1-of-3">
<div class="plan-box js--wp-4">
<div>
<h3>Pro</h3>
<p class="plan-price">$149 <span>/ month</span>
</p>
<p class="plan-price-meal">That's only 14.90$ per meal</p>
</div>
<div>
<ul>
<li><i class="ion-ios-checkmark-empty icon-small"></i>1 meal 10 days/month</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Order 24/7</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Access to newest creations</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Free delivery</li>
</ul>
</div>
<div>
Sign up now
</div>
</div>
</div>
<div class="col span-1-of-3">
<div class="plan-box js--wp-4">
<div>
<h3>Starter</h3>
<p class="plan-price">19$ <span>/ meal</span>
</p>
<p class="plan-price-meal"> </p>
</div>
<div>
<ul>
<li><i class="ion-ios-checkmark-empty icon-small"></i>1 meal</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Order from 8 am to 12 pm</li>
<li><i class="ion-ios-close-empty icon-small"></i>
</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Free delivery</li>
</ul>
</div>
<div>
Sign up now
</div>
</div>
</div>
</div>
</section>
<!-- Signup Section End -->
<!-- Form Section Section -->
<div class="map-box">
<div class="map"></div>
<div class="form-box" id="contact">
<div class="row">
<h2>We're happy to hear from you</h2>
</div>
<div class="row">
<form method="post" action="#" class="contact-form">
<div class="row">
<div class="col span-1-of-3">
<label for="name">Name</label>
</div>
<div class="col span-2-of-3">
<input type="text" name="name" id="name" placeholder="Your name" required>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label for="email">Email</label>
</div>
<div class="col span-2-of-3">
<input type="email" name="email" id="email" placeholder="Your email" required>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label for="find-us">How did you find us?</label>
</div>
<div class="col span-2-of-3">
<select name="find-us" id="find-us">
<option value="friends" selected>Friends</option>
<option value="search">Search engine</option>
<option value="ad">Advertisement</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label>Newsletter?</label>
</div>
<div class="col span-2-of-3">
<input type="checkbox" name="news" id="news" checked>Yes, please
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label>Drop us a line</label>
</div>
<div class="col span-2-of-3">
<textarea name="message" placeholder="Your message"></textarea>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label> </label>
</div>
<div class="col span-2-of-3">
<input type="submit" value="Send it!">
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Form Section End -->
<!-- Footer Start -->
<footer>
<div class="row">
<div class="col span-1-of-2">
<ul class="footer-nav">
<li>About us
</li>
<li>Blog
</li>
<li>Press
</li>
<li>iOS App
</li>
<li>Android App
</li>
</ul>
</div>
<div class="col span-1-of-2">
<ul class="social-icons">
<li><i class="ion-social-facebook"></i>
</li>
<li><i class="ion-social-twitter"></i>
</li>
<li><i class="ion-social-googleplus"></i>
</li>
<li><i class="ion-social-instagram"></i>
</li>
</ul>
</div>
</div>
<div class="row">
<p>
Healthy Foods © 2016-2017
</p>
</div>
</footer>
<!-- Footer End -->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>-->
<script src="js/jquery-3.1.1.slim.min.js"></script>
<script src="http://maps.google.com/maps/api/js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/gmaps.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Please find below snippet just uncomment
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
this min js it'll required to other js work.
$(document).ready(function() {
debugger;
$('.js--section-features').waypoint(function(direction) {
if (direction == "down") {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
}, {
offset: '60px;'
});
/* Scroll on buttons*/
$('.js--scroll-to-plans').click(function() {
$('html, body').animate({
scrollTop: $('.js--section-plans').offset().top
}, 1000);
});
$('.js--scroll-to-start').click(function() {
$('html, body').animate({
scrollTop: $('.js--section-features').offset().top
}, 1000);
});
/* Navigation scroll*/
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 2000);
return false;
}
}
});
/* Animations on scroll */
$('.js--wp-1').waypoint(function(direction) {
$('.js--wp-1').addClass('animated fadeIn');
}, {
offset: '50%'
});
$('.js--wp-2').waypoint(function(direction) {
$('.js--wp-2').addClass('animated fadeInUp');
}, {
offset: '50%'
});
$('.js--wp-3').waypoint(function(direction) {
$('.js--wp-3').addClass('animated fadeIn');
}, {
offset: '50%'
});
$('.js--wp-4').waypoint(function(direction) {
$('.js--wp-4').addClass('animated pulse');
}, {
offset: '50%'
});
});
<script src="//code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<div class="row">
<img src="img/logo-white.png" alt="Omni Food Logo" class="logo">
<img src="img/logo.png" alt="Omni Food Logo" class="logo-black">
<ul class="main-nav">
<li>Food delivery
</li>
<li>How it works
</li>
<li>Our cities
</li>
<li>Sign up
</li>
<li>Conact Us
</li>
</ul>
</div>
</nav>
<div class="hero-text-box">
<h1>Goodbye junk food.<br>Hello super healthy meals.</h1>
<a class="btn btn-full js--scroll-to-plans" href="#plans">I'm hungry</a>
<a class="btn btn-ghost js--scroll-to-start" href="#features">Show me more</a>
</div>
</header>
<!-- Food Fast Section Title -->
<section class="js--section-features" id="features">
<div class="row">
<center>
<h2>Get food fast — not fast food.</h2>
</center>
<p class="long-copy">
Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise!
</div>
<!-- Get Food Fast Section Content -->
<br>
<div class="row js--wp-1">
<div class="col span-1-of-4 box">
<i class="ion-calendar icon-big"></i>
<h3>Up to 365 days/year</h3>
<p class="section-content">Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-clock icon-big"></i>
<h3>Ready in 20 minutes</h3>
<p class="section-content">You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-nutrition icon-big"></i>
<h3>100% organic</h3>
<p class="section-content">All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-android-cart icon-big"></i>
<h3>Order anything</h3>
<p class="section-content">We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!
</p>
</div>
</div>
</section>
<!-- Get Food Fast Section Content -->
<!-- Favorite Meals Section -->
<section class="section-meals">
<!-- Row 1 -->
<ul class="meals-showcase clearfix">
<li>
<figure class="meal-photo">
<img src="img/1.jpg" alt="Korean bibimbap with egg and vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/2.jpg" alt="Simple italian pizza with cherry tomatoes">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/3.jpg" alt="Chicken breast steak with vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/4.jpg" alt="Autumn pumpkin soup">
</figure>
</li>
</ul>
<!-- Row 2 -->
<ul class="meals-showcase clearfix">
<li>
<figure class="meal-photo">
<img src="img/5.jpg" alt="Paleo beef steak with vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/6.jpg" alt="Healthy baguette with egg and vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/7.jpg" alt="Burger with cheddar and bacon">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/8.jpg" alt="Granola with cherries and strawberries">
</figure>
</li>
</ul>
</section>
<!-- Favorite Meals Section End -->
<!-- How it works Section -->
<section class="section-steps" id="works">
<div class="row">
<h2>How it works - Simple as 1, 2, 3</h2>
</div>
<div class="row">
<div class="col span-1-of-2 steps-box">
<img src="img/app-iPhone.png" alt="Omifood app on iPhone" class="app-screen js--wp-2">
</div>
<div class="col span-1-of-2 steps-box">
<div class="work-step">
<div>1</div>
<p>Choose the subscription plan that best fits your needs and sign up today.</p>
</div>
<div class="work-step">
<div>2</div>
<p>Order your delicious meal using our mobile app or website. Or you can even call us!</p>
</div>
<div class="work-step">
<div>3</div>
<p>Enjoy your meal after less than 20 minutes. See you the next time!</p>
</div>
<a href="#" class="btn-app">
<img src="img/download-app-android.png" alt="Play Store Button">
</a>
<a href="#" class="btn-app">
<img src="img/download-app-android.png" alt="Play Store Button">
</a>
</div>
</div>
<!-- How it works Section End -->
<section class="section-cities js--wp-3" id="cities">
<div class="row">
<h2>We're currently in these cities</h2>
</div>
<!-- Lisbon -->
<div class="row">
<div class="col span-1-of-4 box">
<img src="img/lisbon-3.jpg" alt="Lisbon">
<h3>Lisbon</h3>
<div class="city-feature">
<i class="ion-person icon-small"></i>
1600+ happy eaters
</div>
<div class="city-feature">
<i class="ion-ios-star icon-small"></i>
60+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter icon-small"></i>
#omnifood_lx
</div>
</div>
<!-- San Francisco -->
<div class="col span-1-of-4 box">
<img src="img/san-francisco.jpg" alt="San Francisco">
<h3>San Francisco</h3>
<div class="city-feature">
<i class="ion-person icon-small"></i>
+3700 happy eaters
</div>
<div class="city-feature">
<i class="ion-ios-star icon-small"></i>
160+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter icon-small"></i>
#omnifood_sf
</div>
</div>
<!-- Berlin -->
<div class="col span-1-of-4 box">
<img src="img/berlin.jpg" alt="Berlin">
<h3>Berlin</h3>
<div class="city-feature">
<i class="ion-person icon-small"></i>
+2300 happy eaters
</div>
<div class="city-feature">
<i class="ion-ios-star icon-small"></i>
110+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter icon-small"></i>
#omnifood_berlin
</div>
</div>
<!-- London -->
<div class="col span-1-of-4 box">
<img src="img/london.jpg" alt="London">
<h3>Berlin</h3>
<div class="city-feature">
<i class="ion-person icon-small"></i>
+1200 happy eaters
</div>
<div class="city-feature">
<i class="ion-ios-star icon-small"></i>
50+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter icon-small"></i>
#omnifood_london
</div>
</div>
</div>
</section>
<!-- Cities Section End -->
<!-- Testimonials Section Start -->
<section class="section-testimonials">
<div class="row">
<h2>Our customers can't live without us</h2>
</div>
<div class="row">
<div class="col span-1-of-3">
<blockquote>
Omnifood is just awesome! I just launched a startup which leaves me with no time for cooking, so Omnifood is a life-saver. Now that I got used to it, I couldn't live without my daily meals!
<cite><img src="img/customer-1.jpg" alt="Customer 1">Alberto Duncan</cite>
</blockquote>
</div>
<div class="col span-1-of-3">
<blockquote>
Inexpensive, healthy and great-tasting meals, delivered right to my home. We have lots of food delivery here in Lisbon, but no one comes even close to Omifood. Me and my family are so in love!
<cite><img src="img/customer-2.jpg" alt="Customer 2">Joana Silva</cite>
</blockquote>
</div>
<div class="col span-1-of-3">
<blockquote>
I was looking for a quick and easy food delivery service in San Franciso. I tried a lot of them and ended up with Omnifood. Best food delivery service in the Bay Area. Keep up the great work!
<cite><img src="img/customer-3.jpg" alt="Customer 3">Milton Chapman</cite>
</blockquote>
</div>
</div>
</section>
<!-- Testimonials Section End -->
<!-- Signup Section Start -->
<section class="section-plans js--section-plans" id="plans">
<div class="row">
<h2>Start eating healthy today</h2>
</div>
<div class="row">
<div class="col span-1-of-3">
<div class="plan-box js--wp-4">
<div>
<h3>Premium</h3>
<p class="plan-price">$399 <span>/ month</span>
</p>
<p class="plan-price-meal">That's only 13.30$ per meal</p>
</div>
<div>
<ul>
<li><i class="ion-ios-checkmark-empty icon-small"></i>1 meal every day</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Order 24/7</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Access to newest creations</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Free delivery</li>
</ul>
</div>
<div>
Sign up now
</div>
</div>
</div>
<div class="col span-1-of-3">
<div class="plan-box js--wp-4">
<div>
<h3>Pro</h3>
<p class="plan-price">$149 <span>/ month</span>
</p>
<p class="plan-price-meal">That's only 14.90$ per meal</p>
</div>
<div>
<ul>
<li><i class="ion-ios-checkmark-empty icon-small"></i>1 meal 10 days/month</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Order 24/7</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Access to newest creations</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Free delivery</li>
</ul>
</div>
<div>
Sign up now
</div>
</div>
</div>
<div class="col span-1-of-3">
<div class="plan-box js--wp-4">
<div>
<h3>Starter</h3>
<p class="plan-price">19$ <span>/ meal</span>
</p>
<p class="plan-price-meal"> </p>
</div>
<div>
<ul>
<li><i class="ion-ios-checkmark-empty icon-small"></i>1 meal</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Order from 8 am to 12 pm</li>
<li><i class="ion-ios-close-empty icon-small"></i>
</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Free delivery</li>
</ul>
</div>
<div>
Sign up now
</div>
</div>
</div>
</div>
</section>
<!-- Signup Section End -->
<!-- Form Section Section -->
<div class="map-box">
<div class="map"></div>
<div class="form-box" id="contact">
<div class="row">
<h2>We're happy to hear from you</h2>
</div>
<div class="row">
<form method="post" action="#" class="contact-form">
<div class="row">
<div class="col span-1-of-3">
<label for="name">Name</label>
</div>
<div class="col span-2-of-3">
<input type="text" name="name" id="name" placeholder="Your name" required>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label for="email">Email</label>
</div>
<div class="col span-2-of-3">
<input type="email" name="email" id="email" placeholder="Your email" required>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label for="find-us">How did you find us?</label>
</div>
<div class="col span-2-of-3">
<select name="find-us" id="find-us">
<option value="friends" selected>Friends</option>
<option value="search">Search engine</option>
<option value="ad">Advertisement</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label>Newsletter?</label>
</div>
<div class="col span-2-of-3">
<input type="checkbox" name="news" id="news" checked>Yes, please
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label>Drop us a line</label>
</div>
<div class="col span-2-of-3">
<textarea name="message" placeholder="Your message"></textarea>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label> </label>
</div>
<div class="col span-2-of-3">
<input type="submit" value="Send it!">
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Form Section End -->
<!-- Footer Start -->
<footer>
<div class="row">
<div class="col span-1-of-2">
<ul class="footer-nav">
<li>About us
</li>
<li>Blog
</li>
<li>Press
</li>
<li>iOS App
</li>
<li>Android App
</li>
</ul>
</div>
<div class="col span-1-of-2">
<ul class="social-icons">
<li><i class="ion-social-facebook"></i>
</li>
<li><i class="ion-social-twitter"></i>
</li>
<li><i class="ion-social-googleplus"></i>
</li>
<li><i class="ion-social-instagram"></i>
</li>
</ul>
</div>
</div>
<div class="row">
<p>
Healthy Foods © 2016-2017
</p>
</div>
</footer>
I create menu in three level code in jsfiddle. but it doesn't work property. I want to design it like digikala.com. but I have problem.third level of menu does't show. please help me. sorry I am new in html
<div class="navbar navbar-default yamm">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar-collapse-grid"
class="navbar-toggle">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
</span>
</button>
buy100
</div>
<div id="navbar-collapse-grid" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown yamm-fw">
منو اصلی<b class="caret"></b>
<ul class="nav navbar-nav dropdown-menu">
<!-- Grid 12 Menu -->
<li class="dropdown yamm-fw">
منو 1<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-12">
.col-sm-12
</div>
</div>
<div class="row">
<div class="col-sm-6">
.col-sm-6
</div>
<div class="col-sm-6">
.col-sm-6
</div>
</div>
<div class="row">
<div class="col-sm-4">
.col-sm-4
</div>
<div class="col-sm-4">
.col-sm-4
</div>
<div class="col-sm-4">
.col-sm-4
</div>
</div>
<div class="row">
<div class="col-sm-3">
.col-sm-3
</div>
<div class="col-sm-3">
.col-sm-3
</div>
<div class="col-sm-3">
.col-sm-3
</div>
<div class="col-sm-3">
.col-sm-3
</div>
</div>
<div class="row">
<div class="col-sm-2">
.col-sm-2
</div>
<div class="col-sm-2">
.col-sm-2
</div>
<div class="col-sm-2">
.col-sm-2
</div>
<div class="col-sm-2">
.col-sm-2
</div>
<div class="col-sm-2">
.col-sm-2
</div>
<div class="col-sm-2">
.col-sm-2
</div>
</div>
<div class="row">
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
</div>
</li>
</ul>
</li>
<!--With Offsets
-->
<li class="dropdown yamm-fw">
منو2<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-4">
4
</div>
<div class="col-sm-4 col-sm-offset-4">
4 offset 4
</div>
</div>
<div class="row">
<div class="col-sm-3 col-sm-offset-3">
3 offset 3
</div>
<div class="col-sm-3 col-sm-offset-3">
3 offset 3
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
6 offset 6
</div>
</div>
</li>
</ul>
</li>
<!--Aside Menu
-->
<li class="dropdown yamm-fw">
منو3<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-3">
<br>
<h3>
3
</h3>
<br>
</div>
<div class="col-sm-9">
<br>
<h3>
9
</h3>
<br>
</div>
</div>
</li>
</ul>
</li>
<!--Nesting Menu
-->
<li class="dropdown yamm-fw">
منو4<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-12">
12
</div>
</div>
<div class="row">
<div class="col-sm-12">
12
<div class="row">
<div class="col-sm-4">
4
</div>
<div class="col-sm-4">
4
</div>
<div class="col-sm-4">
4
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown yamm-fw"> lk,,,,</li>
<li class="dropdown yamm-fw"> lk,,,,</li>
<li class="dropdown yamm-fw"> lk,,,,</li>
</ul>
</div>
</div>
finally I find my answer . you can see it here mega menu in three level. correct script is:
<script>
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {
event.preventDefault();
event.stopPropagation();
// If a menu is already open we close it
$('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
// opening the one you clicked on
$(this).parent().addClass('open');
var menu = $(this).parent().find("ul");
var menupos = menu.offset();
if ((menupos.left + menu.width()) + 30 > $(window).width()) {
var newpos = -menu.width();
} else {
var newpos = $(this).parent().width();
}
menu.css({ left: newpos });
});
</script>
I want to stick a div on top when scrolling the window.
Looks like Magellan of Foundation provides similar behavior. But I want to stick my custom elements(the div with attribute data-magellan-expedition="fixed") on top instead of Sub-Nav in Magellan's example.
<body>
<!-- Header and Nav -->
<nav id="nav" class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1>
<a href="#">
Foundation Magellan
</a>
</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Sitemap</span></li>
</ul>
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left">
<li class="divider"></li>
<li class="active" >Item1</li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li>Login</li>
</ul>
</section>
</nav>
<!-- End Header and Nav -->
<!-- Main Feed -->
<div data-magellan-expedition="fixed" >
<div id="calendar" class="row">
<dl id="calendar-per-day" class="sub-nav">
<script>
someCodeToCreateCalendar();
</script>
</dl>
<hr>
</div>
<div class="row">
<div class="large-12 columns">
<div id="baidumap"
style="height:300px; overflow: hidden; margin: 0;"></div>
</div>
</div>
</div>
<div class="row">
<div class="large-9 columns">
<p>
very long content can be scrolled............
</p>
</div>
<div class="large-3 columns">
<div class="row">
<div class="large-11 large-centered columns">
<h4>Right side content</h4>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer id="footer" class="row">
<div class="large-12 columns">
<hr />
<div class="row">
<div class="large-5 columns">
<p>© 2013 All Rights Reserved</p>
</div>
<div class="large-7 columns">
<ul class="inline-list right">
<li>About</li>
</ul>
</div>
</div>
</div>
</footer>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/js/foundation/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
There is full my code to try my thought. I want the calendar and map always stick on top when scrolling the window. But it does not work at all. Does anybody know how to do it?
Use CSS
.div-to-stick {
postion:fixed;
}
This will stick it to the top of the page on scroll.