I am using Bookblock jQuery plugin as a transition effect between divs (consists of image and text) whenever the user clicks the link on the navigation bar.
Somehow, when the nav is at the top of the div, the links won't work.
<div class="container">
<ul class="bb-custom-grid" id="bb-custom-grid">
<li>
<ul id="services-submenu">
<li class="bb-current">Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
</ul>
<div class="bb-bookblock">
<div class="bb-item">
<div>
<!-- CONTENT HERE -->
</div>
</div>
<div class="bb-item">
<div>
<!-- CONTENT HERE -->
</div>
</div>
<div class="bb-item">
<div>
<!-- CONTENT HERE -->
</div>
</div>
<div class="bb-item">
<div>
<!-- CONTENT HERE -->
</div>
</div>
<div class="bb-item">
<div>
<!-- CONTENT HERE -->
</div>
</div>
</div>
</li>
</ul>
</div>
You need to add class for next, and previous in your
<li class="next"></li><li class="previous"></li>
to render from page 1 to page 5.
Example:
<ul class="services-submen" >
<li class="previous">
<a id="bb-nav-prev" data-toggle="popover" href="#"><i class="fa fa-chevron-left"></i> </a>
</li>
<li class="next">
<a id="bb-nav-next"data-toggle="popover" href="#"><i class="fa fa-chevron-right"></i></a>
</li>
</ul>
Related
I tried the other solutions on stackoverflow but they did not work.
The navbar or the banner code is so complex and I can not implement the other solutions.
I want to delete this navbar from all the files (mobile and desktop version) and addd it to a separate HTML file so I can reach from other websites files.
The idea I want to do is, I don't want to change the menu items from every file. Just want to do once.
<!-- Header desktop -->
<div class="container-menu-desktop">
</div>
<!-- Header Mobile -->
<div class="wrap-header-mobile">
<!-- Logo mobile -->
<div class="logo-mobile">
<img src="images/icons/logo-01.png" alt="IMG-LOGO">
</div>
<!-- Button show menu -->
<div class="btn-show-menu-mobile hamburger hamburger--squeeze m-r--8">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</div>
</div>
<!-- Menu Mobile -->
<div class="menu-mobile">
<ul class="main-menu-m">
<li>
XXX
</li>
<li>
XXX
</li>
<li>
XXX
</li>
<li>
XXX
<ul class="sub-menu-m">
<li>XXX</li>
<li>XXX</li>
<li>XXX</li>
</ul>
<span class="arrow-main-menu-m">
<i class="fa fa-angle-right" aria-hidden="true"></i>
</span>
</li>
<li>
XXX
<ul class="sub-menu-m">
<li>XXX</li>
<li>XXX</li>
</ul>
<span class="arrow-main-menu-m">
<i class="fa fa-angle-right" aria-hidden="true"></i>
</span>
</li>
<li>
XXX
</li>
<li>
XXX
</li>
</ul>
</div>
<!-- -->
<div class="wrap-logo container">
<!-- Logo desktop -->
<div class="logo">
<img src="images/icons/logo-01.png" alt="LOGO">
</div>
<!-- Banner -->
<div class="banner-header">
<img src="images/banner-01.jpg" alt="IMG">
</div>
</div>
<!-- Navbar STARTS HERE -->
<!-- -->
<div class="wrap-main-nav">
<div class="main-nav">
<!-- Menu desktop -->
<nav class="menu-desktop">
<a class="logo-stick" href="index.html">
<img src="images/icons/logo-01.png" alt="LOGO">
</a>
<ul class="main-menu">
<li class="main-menu-item">
XXX
</li>
<li class="mega-menu-item">
XXX
</li>
<li class="mega-menu-item">
XXX
</li>
<li class="main-menu-item">
XXX
<ul class="sub-menu">
<li>XXX</li>
<li>XXX</li>
<li>XXX</li>
</ul>
</li>
<li class="main-menu-item">
XXX
<ul class="sub-menu">
<li>XXX</li>
<li>XXX</li>
</ul>
</li>
<li class="mega-menu-item">
XXX
</li>
<li class="mega-menu-item">
XXX
</li>
</ul>
</nav>
</div>
</div>
</div>
You could achieve this using an .
Just host the navbar as a unique site and than reference it like this:
<iframe src="http://host:port/navbar"></iframe>
Place this file on a server
Fetch file contents through ajax
Replace this content with Javacript/Jquery.
I have explain my query with this code. here when i click on dropdown navbar page should redirect to the tabbar available on another page.
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li><a id="tab1" href="Page-3.html#tab1">Page 3-tab1</a></li>
**<!-- Onclick "page3-tab1" it should redirect to page3 should be displayed tab1 activated -->**
<li><a id="tab2" href="Page-3.html#tab2">Page 3-tab2</a></li>
**<!-- Onclick "page3-tab2" it should redirect to page3 should be displayed tab2 activated -->**
<li><a id="tab3" href="Page-3.html#tab3">Page 3-tab3</a></li>
**<!-- Onclick "page3-tab3" it should redirect to page3 should be displayed tab3 activated -->**
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
<!-- Page 3 Contains one tabbar having 3 tabs -->
</ul>
</div>
</nav>
Page-3.html contains a tabbar should be activated and redirect on screen on click menubar.
<ul class="nav nav-pills nav-fill" role="tablist">
<li class="nav-item active">
<a class="nav-link" data-toggle="tab" href="#tab1" role="tab">Tab1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab2" role="tab">Tab2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab3" role="tab">Tab3<br></a>
</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active">
<h3>Tab 1</h3>
<p>Some content.</p>
</div>
<div id="tab2" class="tab-pane fade">
<h3>Tab 2</h3>
<p>Some content.</p>
</div>
<div id="tab3" class="tab-pane fade">
<h3>Tab 3</h3>
<p>Some content.</p>
</div>
</div>
I am new in jquery and it can be done through javascript/jquery. But i dont know exactly how to do it. So,please can anyone help me??Thank you in advance
You can use jquery to make this work.
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li><a id="tab1" href="Page-3.html#menu1">Page 3-tab1</a></li>
<!-- Onclick "page3-tab1" it should redirect to page3 should be displayed tab1 activated -->
<li><a id="tab2" href="Page-3.html#menu2">Page 3-tab2</a></li>
<!-- Onclick "page3-tab2" it should redirect to page3 should be displayed tab2 activated -->
<li><a id="tab3" href="Page-3.html#menu3">Page 3-tab3</a></li>
<!-- Onclick "page3-tab3" it should redirect to page3 should be displayed tab3 activated -->
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
<!-- Page 3 Contains one tabbar having 3 tabs -->
</ul>
</div>
</nav>
And then in page-3
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 3-tab1</li>
<!-- Onclick "page3-tab1" it should redirect to page3 should be displayed tab1 activated -->
<li>Page 3-tab2</li>
<!-- Onclick "page3-tab2" it should redirect to page3 should be displayed tab2 activated -->
<li>Page 3-tab3</li>
<!-- Onclick "page3-tab3" it should redirect to page3 should be displayed tab3 activated -->
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
<!-- Page 3 Contains one tabbar having 3 tabs -->
</ul>
</div>
</nav>
<h1>page 3</h1>
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#menu1">Tab1</a></li>
<li><a data-toggle="tab" href="#menu2">Tab2</a></li>
<li><a data-toggle="tab" href="#menu3">Tab3</a></li>
</ul>
<div class="tab-content">
<div id="menu1" class="tab-pane fade in active">
<h3>Tab 1</h3>
<p>Some content in tab 1.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Tab 2</h3>
<p>Some content.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Tab 3</h3>
<p>Some content.</p>
</div>
</div>
<script>
$(document).ready(function() {
var hash = $.trim( window.location.hash );
console.log(hash);
var thisLink = $('a[href="'+hash+'"]');
console.log(thisLink.parent());
hash = hash.substring(1);
$(".active").removeClass("active");
$(thisLink.parent()).addClass("active");
$("#"+hash).addClass(" in active");
$('#gototab1').click(function() {
$('#myTab a[href="#menu1"]').tab('show');
});
$('#gototab2').click(function() {
$('#myTab a[href="#menu2"]').tab('show');
});
$('#gototab3').click(function() {
$('#myTab a[href="#menu3"]').tab('show');
});
}); //end of document ready
</script>
I am trying to create top bar using Foundation 6 similar to that of Airbnb but having trouble creating it, especially search box. (https://www.airbnb.co.uk)
Here's in codepen: http://codepen.io/anon/pen/WGarPp
Below is the html code I am working on:
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<!-- off-canvas title bar for 'small' screen -->
<div class="title-bar" data-responsive-toggle="widemenu" data-hide-for="medium">
<div class="title-bar-left">
<button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
<span class="title-bar-title">BRAND</span>
</div>
</div>
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
<ul class="vertical menu" data-drilldown>
<!-- start of the drilldown multi level menu -->
<li>
<a>Item 1</a>
<ul class="vertical menu">
<li>Item 1A</li>
<li>Item 1B</li>
<li>Item 1C</li>
<li>Item 1D</li>
<li>Item 1E</li>
</ul>
</li>
<li>
<a>Item 2</a>
<ul class="vertical menu">
<li>Item 2A</li>
<li>Item 2B</li>
<li>Item 2C</li>
<li>Item 2D</li>
<li>Item 2E</li>
</ul>
</li>
<li>
<a>Item 3</a>
<ul class="vertical menu">
<li>Item 3A</li>
<li>Item 3B</li>
<li>Item 3C</li>
<li>Item 3D</li>
<li>Item 3E</li>
</ul>
</li>
<li>Item 4</li>
</ul>
</div>
<!-- "wider" top-bar menu for 'medium' and up -->
<nav class="marketing-topbar show-for-medium">
<ul class="menu">
<li class="topbar-title">BRAND</li>
</ul>
<ul class="dropdown menu" data-click-open="false" role="menubar">
<li><input type="search" placeholder="Search"></li>
<li role="menuitem">
Sign Up
</li>
<li role="menuitem">
Login
</li>
</ul>
</nav>
</div>
Thanks!
I think this will get you where you are going. As usual, alter as needed and you will need to take care of the styling/css and magnifier icon link.
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
<ul class="vertical menu">
<li>Menu Foo</li>
<hr/>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
</ul>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<div class="content">
<div class="title-bar no-print" style="width:100%;">
<div class="title-bar-left hide-for-medium" style="width: 100%;">
<div class="title-bar-title text-center" style="width: 100%;">
<div class="row">
<div class="small-1 column position-left">
<button data-responsive-toggle="responsive-menu" class="menu-icon position-left" type="button" data-toggle="offCanvasLeft" style="padding:0;"></button>
</div>
<div class="small-10 column end">
<button data-open="exampleModal1" class="secondary hollow button small" style="width:80%;" >
Where to?
</button>
</div>
</div>
</div>
</div>
<div id="responsive-menu" >
<div class="top-bar-title">
<img src="http://placehold.it/80x38/f3a3fe/000000?text=Brand+Icon" alt="Brand Icon">
</div>
<div class="top-bar-left" style="width:50%;">
<ul class="horizontal menu">
<input type="text" class="" placeholder="Where to?" style="color:white;background: url('images/turn_page20.png') no-repeat left 10px center;padding-left:45px;border:0;" />
</ul>
</div>
<div class="top-bar-right">
<ul class="horizontal menu">
<li>Sign Up</li>
<li>Login</li>
</ul>
</div>
</div>
</div>
<div class="reveal large text-center" id="exampleModal1" data-reveal>
Search
<p><input type="text" placeholder="Where to?" /></p>
<p><input type="submit" value="Submit" /></p>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="column row">
Body content here.
</div>
</div><!-- end content -->
</div><!-- end of off-canvas content -->
</div><!-- end off-canvas-wrapper-inner -->
Using Foundation 6, I try to get a responsive topbar that involves an animation on toggle (small screens).
I have this:
<div class="top-bar">
<div class="top-bar-title">
<strong>MyTitle</strong>
<span data-responsive-toggle="responsive-menu" data-hide-for="medium" class="responsive-menu">
<span class="menu-icon" data-toggle></span>
</span>
</div>
<div id="responsive-menu" data-toggler data-animate="hinge-in-from-top spin-out"> <!-- no matter the type of animation is -->
<div class="top-bar-right">
<ul class="dropdown menu" data-dropdown-menu>
<li>
1
</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
</div>
But even after importing motion-ui library, no transition happens.
Just a rough display:none to display:block of the menu and vice-versa.
It works when I replace data-responsive-toggle by data-toggle but I would lose responsiveness.
Is it a bug regarding Foundation 6?
I had the same problem. Solved it by adding both data-toggle and data-responsive-toggle to the first div:
<div class="top-bar" data-toggle="navmenu" data-responsive-toggle="navmenu" data-hide-for="medium">
<button class="menu-icon" type="button" ></button>
<div class="title-bar-title">Menu</div>
</div>
<nav class="top-bar" id="navmenu" data-toggler data-animate="fade-in fade-out">
<div class="top-bar-left">
<ul class="menu">
<li>Left Item 1</li>
<li>Left Item 2</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li>Right Item 1</li>
<li>Right Item 2</li>
</ul>
</div>
</nav>
I have created a Jquery drop down which adds and removes class when selected.
JSFIDDLE
Inside the hidden menu is a nav bar with links. I am trying to create a function when you select one of the links the name of the link replaces the text on the menu button.
<div class="btn-container menu small-4 medium-2">
<a class="inline-block btn no-text-trans">sector</a>
<i class="fa fa-chevron-down"></i>
<article class="pane inactive">
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</nav>
</article> <!-- PANE ENDS HERE -->
</div> <!-- BTN CONTAINER ENDS HERE -->
For example if the button menu one is selected, the text 'menu 1' replaces the text 'sector'
Add a class to all hidden menu <a> say class="links" and write an event to capture click as below:
$(".links").on('click',function(){
$(this).closest('article').siblings('.no-text-trans').text($(this).text());
});
Updated html
<article class="pane inactive">
<nav>
<ul>
<li><a class="links" href="#">Menu 1</a></li>
<li><a class="links" href="#">Menu 1</a></li>
<li><a class="links" href="#">Menu 1</a></li>
<li><a class="links" href="#">Menu 1</a></li>
</ul>
</nav>
</article> <!-- PANE ENDS HERE -->
DEMO
UPDATE
Add an extra data-* attribute to your 'no-text-trans' anchor like one below:
<a class="inline-block btn no-text-trans" data-original="products">products</a>
to store its original text and then write a document click event to capture all other clicks and check whether the target was anchor or its children and if yes do the default action else replace the text, as below:
$(document).on('click',function(e){
//check if targeted element is link or its children
if($(e.target).hasClass('links') || $(e.target).hasClass('no-text-trans'))
return;
//if not replace each anchor with its original text taking from its `data-original` attribute
$('.no-text-trans').each(function(){
$(this).text($(this).data('original')).siblings('article').addClass('inactive');
});
});
Updated DEMO
You can try
$(document).click(function(e) {
var $target = $(e.target),
$ct = $target.closest('.btn-container'),
$pane = $ct.find('.pane.inactive');
$pane.add($('.pane:not(.inactive)')).toggleClass('inactive');
if ($target.closest('.pane a').length) {
$ct.find('.btn').text($target.text())
}
});
.inactive {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-container menu small-4 medium-2">
<a class="inline-block btn no-text-trans">sector</a>
<i class="fa fa-chevron-down"></i>
<article class="pane inactive">
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</nav>
</article> <!-- PANE ENDS HERE -->
</div> <!-- BTN CONTAINER ENDS HERE -->
<div class="btn-container menu small-4 medium-2">
<a class="inline-block btn no-text-trans">products</a>
<i class="fa fa-chevron-down"></i>
<article class="pane inactive">
<nav>
<ul>
<li><p>Menu 1</p></li>
<li><p>Menu 2</p></li>
<li><p>Menu 3</p></li>
<li><p>Menu 4</p></li>
</ul>
</nav>
</article> <!-- PANE ENDS HERE -->
</div> <!-- BTN CONTAINER ENDS HERE -->