how to scroll my page with easing effect?
i want when i will click on menu then its id section call by scrolling with easing effect
<body data-spy="scroll" data-target="#myNavbar" data-offset="0">
<nav id="myNavbar" class="navbar navbar-default" role="navigation">
<div class="container">
<h1 class="navbar-brand align" href="#">ashish</h1>
<!-- Brand and toggle get grouped for better mobile display -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="#navbarCollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>What i do?</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</nav>
thanks in advance plz help me
Like this:
Portfolio
Section:
<div id="Portfolio">....</div>
JS:
function scrollTo(element, event) {
event.preventDefault();
event.stopPropagation();
$('html, body').animate({ 'scrollTop' : $('#' + element).offset().top + 'px' }, 1000);
}
You will need jQuery for this.
Cheers
Related
I'm trying to create an expandable menu in mobile view that pushes the body of the page down using JQuery so the menu sits on top of the body without overlapping. I'm pretty sure I'm using the right commands but can't seem to pinpoint which elements to target.
<script>
$(document).ready(function(){
$("button.navbar-toggle").click(function() {
$("#myNavbar" ).toggleClass("open");
});
});
</script>
CSS:
div.open{
margin-bottom:120px;
}
HTML:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#home">#</a>
</div>
<div class="collapse navbar-collapse open" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Option1</li>
<li>Option2</li>
<li>Option3</li>
<li>Option4</li>
</ul>
</div>
</div>
</nav>
Any advice would be really appreciated!
I think what your looking for is this
$(document).ready(function(){
$("button.navbar-toggle").click(function() {
$("#myNavbar" ).slideToggle();
$('.homepage-wrapper').toggleClass("open");
});
});
make sure you have included the required jquery and bootstrap files
css
.homepage-wrapper {
margin-top: 60px;
}
.homepage-wrapper.open{
margin-top:260px;
}
I have tried multiple solutions surrounding this issue which I have found on stack but I still can't seem to solve my particular issue. this is what I am working on http://dev.joneslewis.co.uk/. As you can see, in mobile view the hamburger menu doesn't collapse once opened whether I click on li element or the menu itself. As the site is based on anchors it's a real pain...
Here is the html I am currently working with and the Js...
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" rel="home" href="#">
<img class="img-responsive" style="max-width:35px; margin-top: -7px;"
src="#"/>
</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a data-toggle="collapse" data-target=".navbar-collapse" href="#about">About</a></li>
<li><a a data-toggle="collapse" data-target=".navbar-collapse" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
Javascript...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://joneslewis.co.uk/bootstrap/jquery.js"></script>
<script src="http://joneslewis.co.uk/bootstrap/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$(".navbar-nav li a").click(function(event) {
$(".navbar-collapse collapse").collapse('hide');
});
});
</script>
It appears the selector is incorrect. I tried this and I was able to select the component and hide the menu.
$(".navbar-collapse.collapse").collapse('hide')
I am simply trying to get the nav bar to toggle when I resize the screen. Right now it simply disapears. I am using bootstrap 3.3.1 and have maxcdn links from the documentation for both the javascript and css in my code. I've been over the documentation but I must be missing something. Below is my exact code. I have changed very little from the example given on the bootstrap website.
<nav class="navbar navbar-static" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse top">
<ul class="nav navbar-nav navbar-right">
<li ><a class="top-nav" href="./">About</a></li>
<li ><a class="top-nav" href="../navbar-static-top/">FAQ</a></li>
<li>
<div class="navbar-form">
<button class="btn btn-default navbar-join-waitlist" type="button" data-toggle="modal" data-target="#signinModal">
Get Early Access
</button>
</div>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
The navbar is there but all white so you can't see it.
Add the navbar-default class to the nav element in order to get bootstraps default style / theme:
<nav class="navbar navbar-default navbar-static" role="navigation">
I'm trying to put in a menu in a page running off of a Bootstrap template. When I load the page in a window below 960px the mobile version of the menu is already expanded (and covering a large part of my content). There is no 'in' class in the navbar on load, but if I click it, it remains there, and then I click the toggle button again, and it collapses. After the first click the 'in' class appears, but I can't figure out a way to collapse the menu by default on first load. Any ideas?
<body data-spy="scroll" data-target=".navbar">
<div id="wrap">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="menu">
<div class="container">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="./images/chalmers-avancez2.png" alt="" />
</div>
<div id="navbarCollapse" class="navbar navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Intro</li>
<li>Program</li>
<li>Speakers / Performers</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a id="SV" href="#SV">SV</a></li>
<li><a id="EN" href="#EN">EN</a></li>
</ul>
</div>
</div>
</nav>
You are missing collapse but you also are adding the navbar on it, which is incorrect:
INCORRECT:
<div id="navbarCollapse" class="navbar navbar-collapse">
CORRECT:
<div id="navbarCollapse" class="navbar-collapse collapse">
DEMO: http://jsbin.com/koqas/1/edit
I'm having some problem with a Bootstrap menu.
I want to collapse menu after clicking one of the section instead.
HTML:
<div class="container" id="home">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>PHILOSOFY</li>
<li>KNOWLEDGE</li>
<li>EXPERIENCE</li>
<li>INTERESTS</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
I've created this fiddle:
http://jsfiddle.net/kHhgw/
You can utilize the data-toggle="collapse" and data-target="#bs-example-navbar-collapse-1" attributes in your link elements in addition to the menu button.
So from your example:
<a data-toggle="collapse" data-target="bs-example-navbar-collapse-1" href="#philosofy">PHILOSOFY</a>
Updated fiddle: http://jsfiddle.net/kHhgw/1/