I am trying to show line as an indicator for active section in fullpage.js based page.
This page has several section & subsection and active section should show as a horizontal red line upto active nav.
for example if i am on section one then line should be of teh width of first section and if i am on section section the line width should be upto end of section section and so.
Link for codepen
<div id="fullpage">
<div class="section" data-anchor="one">Section One</div>
<div class="section" data-anchor="two">Section Two</div>
<div class="section">Section Two sub page one</div>
<div class="section">Section Two sub page two</div>
<div class="section" data-anchor="three">Section Three</div>
<div class="section" data-anchor="four">Section Four</div>
</div>
<div class="nav-wrapper">
<hr>
<ul id="myMenu">
<li data-menuanchor="firstPage" class="active">First section</li>
<li data-menuanchor="secondPage">Second section</li>
<li data-menuanchor="thirdPage">Third section</li>
<li data-menuanchor="fourthPage">Fourth section</li>
</ul>
</div>
.section {
text-align:center;
font-size: 3em;
}
.content{
margin:50px
}
#myMenu{position:absolute; background-color:#eee; top:0; width:100%; margin:0px !important; padding:0px !important;}
.active{font-size:15px; background-color:purple; }
.nav-wrapper{position:absolute; height:20px; bottom:0;width:100%; z-index:999999999; background:blue;}
.nav-wrapper > ul li {list-style:none; display:inline-block; padding:0px !important; margin:0px ; margin-left:-4px; text-align:center;}
.nav-wrapper ul li{width:calc(100% / 4);}
hr {
background: #f00 none repeat scroll 0 0;
height: 5px;
position: relative;
width: 100%;
z-index: 999999999;
margin:-5px
}
how can i do this using jquery
Since some of your pages are subpages that don't exists in your menu you will have to extract the pages and save them in a different variable:
var visibleMenuSections = $('#myMenu a').map(function() {
return $(this).attr('href').substr(1);
}).get()
Now this variable contains an Array of the links:
["one", "two", "three", "four"]
Once you have this array you can use the callback afterLoad of the fullpage to set the with of the hr after each page change:
afterLoad: function(anchorLink, index) {
p = visibleMenuSections.indexOf(anchorLink);
if (p > -1) {
$('.nav-wrapper hr').width((p+1) * (100/visibleMenuSections.length) + '%');
}
}
Here is a working jsfiddle:
http://codepen.io/anon/pen/PGOYmA
Note - you had a problem in your html - the values of the data-menuanchor in the menu should be the exact values of the data-anchor of the section.
Here is an updated version of the jsfiddle (with a bit of css changes):
http://codepen.io/anon/pen/WGXZaG
Related
I would like to build a slidepanel with js. For that I would like a div that resizes when slider opens.
Trying to do as following:
html
<div class="wrapper">
<div class="left">original content</div>
<div class="right">sliding from right side</div>
</div>
css
.wrapper {width:100%;height:100%;position:relative;}
.left {width:auto;height:100%;display:inline-block;}
.right {width:50%;height:100%;}
This is the basic setup. I would like to have left take the full width. But when I click a button I want right to Slide in to 50%. Before adding js, I am trying to position the two divs, but it does not work. I tried with table cell, flex, ... I m just not able to get it right. Someone a good tip?
$("#expand").on("click", function(){
$(".wrapper").toggleClass("expand");
});
.panel {
height:100vh;
transition: width .5s;
}
.left {
float:left;
width:100%;
Background:red;
Text-align:right;
}
.right {
float:right;
width:0%;
background:#ddd;
overflow:hidden;
}
.pos {right:5px;}
.wrapper.expand .left {width:50%;}
.wrapper.expand .right {width:50%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="panel left">
original content
<button class="pos" id="expand">Click</button>
</div>
<div class="panel right">sliding from right side</div>
</div>
I am trying to create a mobile navigation (toggle type) on a breaking point 768px.
My mark up is:
<div class="tm_menu_mobile">
<div class="menu_icon">
<div class="three_line"></div>
<div class="three_line"></div>
<div class="three_line"></div>
</div>
<div style="clear:both;"></div>
<div id="nav">
<div class="navigasi_menu">
<div class="navigasi_list">
<div class="nav-menu">
<ul>
<li class="page_item page-item-7">Home</li>
<li class="page_item page-item-2">Sample Page</li>
<li class="page_item page-item-9">test page 1</li>
</ul>
</div>
</div>
</div>
</div>
</div>
this mobile navigation should be hidden screens wide above 768px. So I put following java script code in to the header:
/* Mobile navigation*/
jQuery(document).ready(function() {
$('#nav').hide();
$('.menu_icon').click(function() {
$('#nav').slideToggle('fast');
return false;
});
});
and I put following CSS code into my style sheet:
/* Primary mobile menu */
.tm_menu_mobile {
display: block;
margin: 15px auto !important;
width: 98.5% !important;
background:#0071B7;
padding:6px;
height:auto;
overflow:hidden;
}
/* avoiding horizontal scroll bar across the site */
.navigasi_menu {
width: 100%
}
.navigasi_menu li {
float: none;
text-align: center;
border-bottom: 1px solid #fff;
}
/* Making navigation li one below another */
.navigasi_menu li:hover {
width: 100%
}
.tm_menu_mobile .menu_icon {
width:50px;
height:50px;
border-radius: 10px;
border:2px solid #000;
float:right;
margin-right:10px;
}
.menu_icon .three_line {
float:none;
width:36px;
height:5px;
background:#fff;
margin:9px auto;
}
.tm_menu_mobile #nav {
display: inline-block;
}
but toggle not working.
Also when I hovering the navigation in 768px screen it's not stable... it's 3rd li comes above the 1st..
but the same js fiddle work here the sample js toggle I tested
and the site I am trying is bit different. SITE
How can I get it work?
the issue is related to wordpress??
Try this :
<script type="text/javascript">
/* Mobile navigation toggle*/
jQuery(document).ready(function() {
jQuery('.tm_menu_mobile #nav').hide();
jQuery('.menu_icon').click(function() {
jQuery('.tm_menu_mobile #nav').slideToggle('fast');
return false;
});
});
</script>
Im trying to do a simple layout with css and html, the layout consist of a menu on the left and some boxes on the right side, the idea is that the left side will alway be a menu. How can I fix that the content never get under the menu ? or how can I exapand the menu
FIDDLE Demo http://jsfiddle.net/56JdE/
CSS
#wrapper
{
margin:0 auto;
width:960px;
height:auto;
}
#leftNav
{
height:500px;
width:200px;
background:#F00;
float:left;
margin-right:10px;
}
#div1
{
height:200px;
width:250px;
float:left;
background:#000;
margin-right:10px;
}
#div2
{
height:300px;
width:400px;
background:#00C;
float:left;
margin-right:10px;
}
#div3
{
height:200px;
width:250px;
float:left;
background:#00C;
margin-right:10px;
}
#div4
{
height:200px;
width:400px;
float:left;
background:#000;
margin-right:10px;
}
HTML
<div id="wrapper">
<div id="leftNav">
<h2>Menu</h2>
</div>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<div id="div4">
</div>
<div id="div4">
</div>
</div>
From the look of your FIDDLE, I believe the question is why is my div under the menu?
This is because you have two div4's.
I amended your FIDDLE Demo which fixed the issue.
<div id="div4">
</div>
<div id="div4"> -Remove this!
</div> -And this!
Having two div4's caused the total width to exceed your wrapper width making the float:leftproperty move the div to under your menu.
You can just wrap the div's in another div, and make the margin 210px to left so that is never goes underneath the menu.
#contentRight{
margin-left:210px;
}
<div id="wrapper">
<div id="leftNav">
<h2>Menu</h2>
</div>
<div id="contentRight">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div class="div4"></div>
<div class="div4"></div>
</div>
See a working example here: http://jsfiddle.net/mtruty/HQ6WJ/3/
Also, ID's should correspond to a single element within the DOM. You should change that second div4 to div5, or make those div's classes. (e.g. class="div4"). I bet you were just adding that extra div4 to show how the box overflowed, but none the less, it is good to always make sure your markup is valid.
Just add a wrapper around content, and set the apropriate width's so they match the parent wrapper.
<div id="leftNav">
<h2>Menu</h2>
</div>
<div id="content_wrapper">
...
</div>
See fiddle:
http://jsfiddle.net/56JdE/2/
There's two simple ways you could do this. Either add some padding to the wrapper, maybe 20% to the left or whatever the width of the menu would be, and then absolutely position that menu to the left.
OR
You could create a parent container for your content, within the wrapper, and float both the menu ( first ) and the new container to fill up the wrapper accordingly. If you go the float method you'd have to add a clear somewhere after the content to keep the wrapper from collapsing, or float it as well.
.wrapper {
margin:0 auto;
}
.menu {
height:500px;
width:20%;
float: left;
background: red;
}
.content {
width: 80%;
float: left;
}
Full example # http://jsfiddle.net/M58C6/2/
I want to have the class="children" centered in the middle of the page container preferably using css only but if it is not possible you can provide the best js answer. Currently it is just a normal drop down but I want to use it as a mega menu. If I have to add another div structure that's fine.
<div class="main-navigation-wrapper">
<div class="nav pull-left">
<div class="menu-main-menu-container">
<ul id="menu" class="menu no-dropdown">
<li class="menu-item">
Blog
<div class="children">
--- Children items are here
</div>
</li>
</ul>
</div>
</div>
</div>
I have seen some other examples but have attempted a few and none of them center it. I want to find a dynamic approach to where no matter the location of the link in the menu it always centers the menu in the container.
EDIT: Fiddle found here http://jsfiddle.net/YzJ4h/
The simplest would be to add this CSS to horizontaly center your mega menu items :
CSS :
#menu li, .second-menu li {
display:inline-block;
position:relative;
}
#menu > li.mega_width {
display:inline-block;
position:static;
}
#menu > li.mega_width > .children {
position:absolute;
left:0;
right:0;
top:auto;
margin:auto;
}
DEMO
Do a small change in your code:
<div class="main-navigation-wrapper">
<div class="nav pull-left">
<div class="menu-main-menu-container">
<ul id="menu" class="menu no-dropdown" style="margin: auto;">
<li class="menu-item">
Blog
<div class="children">
--- Children items are here
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="main-navigation-wrapper">
<div class="nav pull-left">
<div class="menu-main-menu-container">
<ul id="menu" class="menu no-dropdown" style="margin: auto;">
<li class="menu-item four">
Blog
<div class="children">
--- Children items are here
</div>
</li>
</ul>
</div>
</div>
Here is a rough example of what you're looking for:
http://jsfiddle.net/m8Vj4/
A couple main tips:
position:absolute; / position:relative;
position:absolute will position something relative to its nearest parent that has position:relative. In your case you are positioning the .children elements relative to their parent li, whereas you want them to be positioned relative to .main-navigation-wrapper
Centering an element with display:inline-block;
You can center elements with display:block by adding margin:0 auto, however this won't work for elements with display:inline-block. Instead, you can set text-align:center on their parent, and text-align:left on themselves so they don't inherit centered text.
Hope that helps... reworking your existing HTML/CSS would have taken too much time.
I took some liberty and added some CSS in your existing code. Those are -
.main-navigation-wrapper{width: 1140px; margin: 0 auto; background: #E5F0FF;}
#menu{text-align:center; padding:0px; position:relative;}
#menu li.mega-three.fullwidth{position:static;}
#menu .mega-three div.children{left:0px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box;}
Here is a fiddle.
Hope it will work for you. :-)
You can made certain modifications in your code. Like to avoid scrollbar in children div you have to use width:auto , and some position settings. Please do check with the code below. It may help you.
.menu-main-menu-container ul#menu .children {
left: 0;
position: absolute;
width: auto;
}
.menu-main-menu-container ul#menu .children:hover {
visibility: visible;
}
.menu.no-dropdown {
position: relative;
position:static;
}
Modify class
#menu li, .second-menu li{
position:static;
}
For the inner sub menus inside the children div,
.menu-main-menu-container ul#menu .children .children {
position: relative;
}
You can please check it on fiddle
http://jsfiddle.net/YzJ4h/4/
Give it Width something like 50% to you outer div and set margin:0 auto;
style="margin:0 auto;"
I'm attempting to make a nav bar that appears at the bottom of the viewable page when the site is first loaded, then as the user scrolls down, the nav bar scrolls up, and eventually becomes fixed to the top. I'm using Bootstrap, just like this site, but I can't figure out how this site did it. Any help?
Here's the site with the nav bar I'm trying to emulate: http://www.blastprocessor.co.uk/
Here's my navigation html and css code:
HTML:
<div class="navbar navbar-fixed-top" id="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<ul class="nav nav-pills">
<li class="active">Home</li>
<li>Services</li>
<li>Contact</li>
</ul><!-- /.nav -->
</div><!--/.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
And here's my CSS:
.navbar-fixed-top,.navbar-fixed-bottom{position:fixed; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
.navbar .nav > li a{
color:white; background:rgba(0,0,0,0.2); text-shadow:none; font-size:1.7em; font-family: marvel, serif; padding:.5em 1.3em; margin:1em 2em;
}
.navbar .nav > .active a:hover, .navbar .nav > li a:hover, .navbar .nav > .active a {
color:white; ; background:#F90; text-shadow:none; font-size:1.7em; font-family: marvel, serif; padding:.5em 1.3em; margin:1em 2em;
}
.navbar .nav > li {padding:2em;}
.navbar.navbar-fixed-top .navbar-inner{background: rgba(255, 255, 255, 0);}
.navbar .nav, .navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
padding:0 2em;
}
.navbar-inner {text-align:center;}
.navbar .navbar-inner, .navbar .navbar-inner {border: none; box-shadow: none; filter: none;}
I was searching for this very same thing. I had read that this was available in Bootstrap 3.0, but I was having no luck in actually implementing it. This is what I came up with and it works great. Very simple jQuery and Javascript.
Here is the JSFiddle to play around with... http://jsfiddle.net/CriddleCraddle/Wj9dD/
The solution is very similar to other solutions on the web and StackOverflow. If you do not find this one useful, search for what you need. Goodluck!
Here is the HTML...
<div id="banner">
<h2>put what you want here</h2>
<p>just adjust javascript size to match this window</p>
</div>
<nav id='nav_bar'>
<ul class='nav_links'>
<li>Sign In</li>
<li>Blog</li>
<li>About</li>
</ul>
</nav>
<div id='body_div'>
<p style='margin: 0; padding-top: 50px;'>and more stuff to continue scrolling here</p>
</div>
Here is the CSS...
html, body {
height: 4000px;
}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}
#body_div {
top: 0;
position: relative;
height: 200px;
background-color: green;
}
#banner {
width: 100%;
height: 273px;
background-color: gray;
overflow: hidden;
}
#nav_bar {
border: 0;
background-color: #202020;
border-radius: 0px;
margin-bottom: 0;
height: 30px;
}
//the below css are for the links, not needed for sticky nav
.nav_links {
margin: 0;
}
.nav_links li {
display: inline-block;
margin-top: 4px;
}
.nav_links li a {
padding: 0 15.5px;
color: #3498db;
text-decoration: none;
}
Now, just add the javacript to add and remove the fix class based on the scroll position.
$(document).ready(function() {
//change the integers below to match the height of your upper div, which I called
//banner. Just add a 1 to the last number. console.log($(window).scrollTop())
//to figure out what the scroll position is when exactly you want to fix the nav
//bar or div or whatever. I stuck in the console.log for you. Just remove when
//you know the position.
$(window).scroll(function () {
console.log($(window).scrollTop());
if ($(window).scrollTop() > 550) {
$('#nav_bar').addClass('navbar-fixed-top');
}
if ($(window).scrollTop() < 551) {
$('#nav_bar').removeClass('navbar-fixed-top');
}
});
});
Note (2015): Both question and the answer below apply to the old, deprecated version 2.x of Twitter Bootstrap.
This feature of making and element "sticky" is built into the Twitter's Bootstrap and it is called Affix. All you have to do is to add:
<div data-spy="affix" data-offset-top="121">
... your navbar ...
</div>
around your tag and do not forget to load the Bootstrap's JS files as described in the manual. Data attribute offset-top tells how many pixels the page is scrolled (from the top) to fix you menu component. Usually it is just the space to the top of the page.
Note: You will have to take care of the missing space when the menu will be fixed. Fixing means cutting it off out of your page layer and pasting in different layer that does not scroll. I am doing the following:
<div style="height: 77px;">
<div data-spy="affix" data-offset-top="121">
<div style="position: relative; height: 0; width: 100%;">
<div style="position: absolute; top: 0; left: 0;">
... my menu ...
</div>
</div>
</div>
</div>
where 77px is the height of my affixed component.
//in html
<nav class="navbar navbar-default" id="mainnav">
<nav>
// add in jquery
$(document).ready(function() {
var navpos = $('#mainnav').offset();
console.log(navpos.top);
$(window).bind('scroll', function() {
if ($(window).scrollTop() > navpos.top) {
$('#mainnav').addClass('navbar-fixed-top');
}
else {
$('#mainnav').removeClass('navbar-fixed-top');
}
});
});
Here is the jsfiddle to play around : -http://jsfiddle.net/shubhampatwa/46ovg69z/
EDIT:
if you want to apply this code only for mobile devices the you can use:
var newWindowWidth = $(window).width();
if (newWindowWidth < 481) {
//Place code inside it...
}
Bootstrap 4 - Update 2020
The Affix plugin no longer exists in Bootstrap 4, but now most browsers support position:sticky which can be used to create a sticky after scoll Navbar. Bootstrap 4 includes the sticky-top class for this...
https://codeply.com/go/oY2CyNiA7A
Bootstrap 3 - Original Answer
Here's a Bootstrap 3 example that doesn't require extra jQuery.. it uses the Affix plugin included in Bootstrap 3, but the navbar markup has changed since BS2...
<!-- Content Above Nav -->
<header class="masthead">
</header>
<!-- Begin Navbar -->
<div id="nav">
<div class="navbar navbar-default navbar-static">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-bar"></span>
<span class="glyphicon glyphicon-bar"></span>
<span class="glyphicon glyphicon-bar"></span>
</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="divider"></li>
<li>Link</li>
<li>Link</li>
</ul>
<ul class="nav pull-right navbar-nav">
<li>
..
</li>
<li>
..
</li>
</ul>
</div>
</div>
</div><!-- /.navbar -->
</div>
Working demo/template: http://bootply.com/69848
This worked great for me. Don't forget to put a filler div in there where the navigation bar used to be, or else the content will jump every time it's fixed/unfixed.
function setSkrollr(){
var objDistance = $navbar.offset().top;
$(window).scroll(function() {
var myDistance = $(window).scrollTop();
if (myDistance > objDistance){
$navbar.addClass('navbar-fixed-top');
}
if (objDistance > myDistance){
$navbar.removeClass('navbar-fixed-top');
}
});
}
Use Bootstrap Affix:
/* Note: Try to remove the following lines to see the effect of CSS positioning */
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 70px;
}
<!DOCTYPE html>
<html>
<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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
<h1>Bootstrap Affix Example</h1>
<h3>Fixed (sticky) navbar on scroll</h3>
<p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
<p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<ul class="nav navbar-nav">
<li class="active">Basic Topnav</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</nav>
<div class="container-fluid" style="height:1000px">
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
</div>
</body>
</html>
You could use position: sticky
#navbar {
position: sticky;
top: 0px;
}
The #navbar should be a direct child of the body though.
For Bootstrap 4, a new class was released for this. According to the utilties docs:
Apply the class sticky-top.
<div class="sticky-top">...</div>
For further navbar position options, visit here.
Also, keep in mind that position: sticky; is not supported in every browser so this may not be the best solution for you if you need to support older browsers.
In answer to Shubham Patwa: This way, the page is "jumpy" soon as the class "navbar-fixed-top" applies. That's because the #mainnav is throwen in and out of the document's DOM flow. This can result in an ugly UX if the page has a "critical height", jumping between fixed and un-fixed #mainnav position.
I altered the code this way, which seems to work fine (not pixel-perfect, but fine):
$(document).ready(function() {
var navpos = $('#mainnav').offset();
var navheight = $('#mainnav').outerHeight();
$(window).bind('scroll', function() {
if ($(window).scrollTop() > navpos.top) {
$('#mainnav').addClass('navbar-fixed-top');
$('body').css('marginTop',navheight);
}
else {
$('#mainnav').removeClass('navbar-fixed-top');
$('body').css('marginTop','0');
}
});
I have found this simple javascript snippet very useful.
$(document).ready(function()
{
var navbar = $('#navbar');
navbar.after('<div id="more-div" style="height: ' + navbar.outerHeight(true) + 'px" class="hidden"></div>');
var afternavbar = $('#more-div');
var abovenavbar = $('#above-navbar');
$(window).on('scroll', function()
{
if ($(window).scrollTop() > abovenavbar.height())
{
navbar.addClass('navbar-fixed-top');
afternavbar.removeClass('hidden');
}
else
{
navbar.removeClass('navbar-fixed-top');
afternavbar.addClass('hidden');
}
});
});