I have been working on a smooth scroll navigation bar for a website. I have managed to get the navigation bar to scroll to the different sections within the HTML document, and I been trying to get the navigation bar links to become active depending on the section of the webpage you are on.
After playing around with the code I cannot figure out how to do this. What do I need to do?
This is my code:
$('#navbar li').click(function() {
$(this).addClass('active').siblings('li').removeClass('active');
});
#import url(https://fonts.googleapis.com/css?family=Maven+Pro:400,900,700,500);
html{
font-family: 'Maven Pro', sans-serif;
}
body{
background:fixed
url(images/bright_squares.png) #cccccc;
position:relative;
padding:0;
margin:0;
}
#home {padding-top:50px;height:500px;color: #fff; background-image:url(images/random_grey_variations.png);}
#about {padding-top:50px;height:500px;color: #fff;}
#portfolio {padding-top:50px;height:500px;color: #fff;}
#contact {padding-top:50px;height:500px;color: #fff;}
background-dark{
background:fixed
url(images/random_grey_variations.png);
}
#navbar {
position:fixed;
top: 0px;
left: 0px;
right: 0px;
height: 60px;
margin: 0;
padding: 0;
list-style: none;
background: #222;
font-family: 'Maven Pro', sans-serif;
font-size: 18px;
font-weight: 300;
}
#navbar li {
position: relative;
float: left;
line-height: 60px;
background: inherit;
text-align: center;
transition: all .2s;
}
#navbar li a {
position: relative;
display: block;
padding: 0 20px;
line-height: inherit;
color: white;
text-decoration: none;
}
#navbar li:before {
content: '';
display: block;
position: absolute;
left: 50%;
margin-left: -30px;
width: 60px;
height: 60px;
background: #222;
border-radius: 50%;
transform: rotate(45deg);
transition: all 0, background .2s;
}
#navbar li:hover:before {
margin-top: 1px;
border-radius: 50% 50% 0 50%;
transition: all .1s, background .2s, margin-top .2s cubic-bezier(.5,30,.2,0);
}
#navbar li:hover,
#navbar li:hover:before {
background: #3a3a3a;
}
#navbar li.active,
#navbar li.active:before {
background: steelblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="navbar">
<li class="active">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div id="home">
<h1>Welcome</h1>
<p>Test</p>
</div>
<div id="portfolio">
<h1>portfolio</h1>
<p>Test</p>
</div>
<div id="contact">
<h1>contact</h1>
<p>Test</p>
</div>
<div id="about">
<h1>About Me</h1>
<p>Test</p>
</div>
I think this might answer your question. Just add this code inside the click function you already have.
$($(this).children().attr('href')).addClass('selected').siblings('div').removeClass('selected');
You will need to change the home link to #home instead of # though
If you want to forgo all of that, here's the even quicker version.
<script>
$('#navbar li').click(function() {
$(this).addClass('active').siblings('li').removeClass('active');
var x = $($(this).children().attr('href')).first().offset().top
$('body').animate({
scrollTop: x
}, 2000);
});
</script>
This will add the scrolling animation I think you're looking for.
Related
I have a simple react app which displays my navbar, but whenever i do its position fixed; it stays at top but the content does not hide behind.
My navbar:
class Nav extends Component {
render() {
return (
<div>
<header className="toolbar">
<nav className="toolbar__navigation">
<div className="toolbar__toggle-button">
<DrawerButton drawer={this.props.drawer} click={this.props.drawerClickHandler} />
</div>
<img className="Nav__Logo-A" src={Mylogo} alt=""/>
<div className="toolbar__logo">Akcosh</div>
<div className="spacer"></div>
<div className="toolbar_navigation-items">
<ul>
<li>Software</li>
<li>About</li>
<li>Profile</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
</div>
)
}
}
my css:
.toolbar{
width: 100%;
position: fixed;
background-color: #212121;
top: 0;
left: 0;
height: 45px;
}
.toolbar__logo{
margin-left: 1rem;
}
.toolbar__navigation {
display: flex;
align-items: center;
height: 100%;
padding: 0 1rem;
}
.toolbar__logo a{
color: #282828;;
text-decoration: none;
font-size: 1.5rem;
}
.spacer{
flex: 1;
}
.toolbar_navigation-items ul{
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.toolbar_navigation-items li{
padding: 0 0.5rem;
}
.toolbar_navigation-items a{
color: white;
text-decoration: none;
}
.toolbar_navigation-items a:hover,
.toolbar_navigation-items a:active{
color: aqua;
}
#media(max-width: 768px){
.toolbar_navigation-items{
display: none;
}
.toolbar{
height: 68px;
border-bottom: 1px solid #aca4a4;
background-color: #e5e3e30a;
}
.toolbar__logo a{
font-family: Roboto,Helvetica,sans-serif;
letter-spacing: 1.6px;
font-size: 20px;
margin-left: 5px;
font-weight: 400;
}
.Nav__Logo-A{
animation-name: out;
position: absolute;
height: 210%;
width:100%;
left: -36%;
margin-top: 9px;
transition: .4s all;
}
.Nav__Logo-A:hover{
cursor: default;
transform: rotate(360deg);
left: -36%;
margin-top: 10px;
}
}
}
I have tried everything but nothing is working; i want my navbar fixed on top and content behind it, if i have some other component below the Nav component, i want its content/text to go behind nav because it is fixed at top
try to modify the z-index so it can stay on top
.toolbar{
width: 100%;
position: fixed;
background-color: #212121;
top: 0;
left: 0;
height: 45px;
z-index:2; // or some bigger value
}
One thing you can try is setting the z indexes!
.toolbar{
width: 100%;
position: fixed;
background-color: #212121;
top: 0;
left: 0;
height: 45px;
z-index:99;
}
And then after that, if your content is still displaying in front of the navbar, go into that items CSS class and add
.exampleClass {
z-index:-1;
}
I have problem with resposive navigation that i worked on.The problem is that when i open and then closed the menu it's take me back to the beginning of the page.I want when open and then closed the menu scroll position to be the same as that before opening the menu.How to make that?
HTML
<header class="header">
<div class="logo">
<h2>LOGO</h2>
</div>
<nav>
<div id="mainbox" onclick="openFunction()"><i class="fas fa-bars"></i></div>
<div id="menu" class="sidemenu">
Home
About
Contact
Login
×
</div>
</nav>
</header>
CSS
#mainbox{
font-size: 24px;
cursor: pointer;
transition: all .6s;
display:none;
}
.sidemenu{
background-color: #222;
color:#999;
float:right;
}
.sidemenu a{
padding:20px 20px;
text-decoration: none;
font-size: 20px;
color: #999;
display: inline-block;
}
.sidemenu a:hover{
color: white;
}
.sidemenu .closebtn{
position: absolute;
top: -15px;
right: 15px;
font-size: 36px;
margin-left: 0px;
display:none;
}
.fas{
color:#999;
margin-top:20px;
margin-right:32px;
}
.fas:hover{
color:white;
}
#media screen and (max-width: 600px){
#mainbox{
display:block;
float:right;
}
.header{
position: fixed;
top: 0;
width: 100%;
}
.sidemenu .closebtn{display:block;}
.sidemenu{
display:block;
position: fixed;
top: 0px;
right: 0px;
height: 100%;
width: 0px;
background-color: #222;
z-index: 1;
padding-top: 100px;
overflow-x: hidden;
transition: all .5s;
text-align: center;
}
.sidemenu a{
display:block;
text-decoration: none;
font-size: 20px;
color: #999;
}
}
Javascript
function openFunction(){
document.getElementById("menu").style.width="100%";
document.getElementById("mainbox").style.marginLeft="300px";
}
function closeFunction(){
document.getElementById("menu").style.width="0px";
document.getElementById("mainbox").style.marginLeft="0px";
}
It's because of your href="#", just add e.preventDefault() to close function.
html
×
js
function closeFunction(e){
e = e || window.event;
e.preventDefault()
document.getElementById("menu").style.width="0px";
document.getElementById("mainbox").style.marginLeft="0px";
}
Hope it will work for you
I'm trying to create an underline animation when hovering on menu items (based on this CodePen). For some reason, all my menu items are underlined instead of just one when hovering. I only want the menu item that is hovered to be underlined, not everything.
Here is my code:
html {
background-color: #131313;
}
.pages {
position: absolute;
margin: 0;
padding: 0;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 17px;
list-style: none;
}
.pages li {
float: left;
display: inline-block;
padding: 15px;
}
.pages a {
color: white;
text-decoration: none;
}
.pages a:after {
content: '';
position: absolute;
width: 0;
height: 3px;
display: block;
margin-top: 5px;
right: 0;
background: #fff;
transition: width .4s ease;
}
.pages a:hover:after {
width: 100%;
left: 0;
background: #fff;
}
<ul class="pages">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Projects</li>
<li>Connect</li>
</ul>
Please help!
Remove position:absolute from .pages a:after. Elements with absolute positioning are not in the normal document flow. In your snippet your 100% width will not be 100% of a but 100% of nearest relativly/absolutly positioned parent(body by defaul; ul in your case).
As an alternative, you may set position:relative to li, so that :after element will be underlying li.
html {
background-color: #131313;
}
.pages {
position: absolute;
margin: 0;
padding: 0;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 17px;
list-style: none;
}
.pages li {
float: left;
display: inline-block;
padding: 15px;
position: relative
}
.pages a {
color: white;
text-decoration: none;
}
.pages a:after {
content: '';
position: absolute;
width: 0;
height: 3px;
display: block;
margin-top: 5px;
right: 0;
background: #fff;
transition: width .4s ease;
}
.pages a:hover:after {
width: 100%;
left: 0;
background: #fff;
}
<ul class="pages">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Projects</li>
<li>Connect</li>
</ul>
My explanation may be to complicated so you may look at snippet below. I tried to explain positioning.
.box {
width: 100px;
height: 100px;
}
#parent {
background: pink;
width: 200px;
height: 200px;
}
#child1 {
position: relative;
top: 10px;
left: 10px;
background: lightgreen;
}
#child2 {
position: absolute;
background: lightyellow;
}
<div id="parent" class='box'>
<!--parent-->
<!-- relative element stays relative to it's original position but can be shifted-->
<div id="child1" class='box'>position:relative with "top"and"left" of 10px</div>
<div id="child2" class='box'>position:absolute</div>
</div>
<!--
notice how yellow box is stays where it should be without "top"&"left" assigned, but it's owerlaping shifted green box
-->
I am trying to add a logo image to my navigation bar.I was successful in adding the image in my desktop version but it doesn't show up in my mobile version(>787 pixels). Here is the code that I am using.
/* Navigation Menu */
#header .navbar {
position: fixed;
top: 0px;
right: 0px;
left: 0px;
min-height: 0px;
font-family: Montserrat, Arial, serif;
color: #FFF;
background-color: #333;
padding: 15px 0px;
margin: 0px;
border: 0px;
z-index: 100;
border-radius: 0px;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
#header .navbar > .container .navbar-brand {
margin: 0px;
}
#header .navbar-brand img {
height: 45.5px;
}
#header .nav {
overflow: hidden;
float: right;
height: 40px;
/* Navigation Mobile */
#navigation_mobile {
display: none;
}
#navigation_mobile .nav-menu-links {
display: none;
background-color: #2a2a2a;
}
#navigation_mobile ul li {
list-style-type: none;
padding: 11px 0px;
}
#navigation_mobile ul li a {
display: block;
color: #a9a9a9;
}
#navigation_mobile ul li a:hover {
color: #FFF;
}
#navigation_mobile .nav-menu-button {
background-color: #202020;
padding: 15px 0px 14px;
}
#navigation_mobile .nav-menu-button button.nav-menu-toggle {
color: #a9a9a9 !important;
font-size: 20px;
line-height: 2;
padding: 0px;
background: none;
border: 0px;
border-radius: 0px;
-webkit-transition: color .2s ease;
transition: color .2s ease;
}
#navigation_mobile .nav-menu-button button.nav-menu-toggle:hover {
color: #FFF !important;
}
}
#media (max-width: 767px) {
#header .navbar {
display: none;
}
#navigation_mobile {
display: block;
}
}
<!-- #navigation -->
<nav id="navigation" class="navbar scrollspy">
<!-- .container -->
<div class="container">
<div class="navbar-brand">
<a href="index.html">
<img src="images/logo.png" alt="Logo" id="logo-image" />
</a>
</div>
<ul class="nav navbar-nav">
<li>About
</li>
<li>Features
</li>
<li class="menu-btn">Contact
</li>
</ul>
</div>
<!-- .container end -->
</nav>
<!-- #navigation end -->
This line is the culprit -
#media (max-width: 767px) {...
#header .navbar{ display:none;}
...}
You have the image in the .navbar and are hiding it in the smaller viewport.
<nav id="navigation" class="navbar scrollspy">
...
<img src="images/logo.png" alt="Logo" id="logo-image" />
...
You need to either move it out of that container or change your css selectors.
HTML: im not sure if the problem is here but the links to jquery work since when i remove the body animations from jquery the animation of the menu workss perfectly. But it doesnt go back or push the body since i removed that part from my js code... I cant seem to see what the problem is with the body and close tags and events in my jquery. Would you please check it out for me Id be eternally gratefulllll im exhausted searching for the bug.
// jQuery:seems to work when i remove the body animations or in other words leave the menu animations
var main = function(){
$('.icon-menu').click(function(){
$('.menu').animate({
left:'0px'
},350);
$('body').animate({
left:'290px'
},350);
$('.close').click(function(){
$('.menu').animate({
left:'-290px'
},350);
$('body').animate({
left:'0px'
},350);
});
};
$(document).ready(main);
.menu {
height:50%;
width:285px;
left:-290px;
position:fixed;
color:#000000;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
border-radius:10px;
top: 5%;
}
.menu ul {
border-top: 1px solid rgba(99,99,102,.5);
border-opacity-top:0.5;
list-style: none;
margin-left: 30px;
margin-right:30px;
padding: 0;
}
.menu li {
border-bottom: 1px solid #636366;
font-family: 'Open Sans', sans-serif;
line-height: 50px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
text-align: center;
opacity:0.5;
cursor: pointer;
}
.menu li:hover{
opacity:1.0;
background-color: rgba(255,255,255,0.4);
}
.close{
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
text-align: center;
}
.close:hover{
background-color: rgba(255,255,255,0.4);
}
.jumbotron{
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.icon-menu {
color: #000000;
cursor: pointer;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
margin-left:20px;
padding-bottom: 25px;
padding-left: 25px;
padding-top: 25px;
text-decoration: none;
text-transform: uppercase;
width:80px;
opacity:0.5;
transition: all 0.3s ease-in;
}
.icon-menu:hover{
transition: all 0.3s ease-in;
opacity:1;
}
.icon-menu i {
margin-right: 5px;
}
html,body{
left: 0px;
overflow: hidden;
position:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300'rel='stylesheet' type='text/css'>
<img style="position:absolute; left:430px" src="Pumpkin5.jpg">
<div class='hol'>
<link href="Pumpkin Box.css" rel="stylesheet"/>
<div class="menu">
<div class="close">
<img src="close.png"/>
</div>
<ul>
<li>About</li>
<li>Help</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<div class="jumbotron">
<div class="icon-menu">
<i class="fa fa-bars"></i>
Menu
</div>
</div>
</div>
Have you try to animate the margin-left of the body ?
$('body').animate({
marginLeft:'290px'
},350);