I'm trying to achieve the following EFFECT on page load. The Image starts at 0% opacity and off the page, and then it slides into position while achieving 100% opacity. I've managed to get the opacity to work but not the slide
My code is as follows:
HTML
<head>
title>Nic Brown</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,700' rel='stylesheet' type='text/css'>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<script type="text/javascript">
$(document).ready(function() {
window.onload = function() {
$('#logo').hide().fadeIn(2000);
};
</script>
<script type="text/javascript" src="js/plugins/slideup.js"></script>
</head>
<body>
<div class="navbar navbar-mine navbar-static-top">
<div class="container">
<div class="name">
<a href="#" class="navbar-brand" style="font-family:'norm'; font-size:1.7em; margin-top:3px">NICHOLAS
<em>BROWN</em>
</a>
</div>
<button class="btn btn-default btn-lg navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>
About
</li>
<li>
Portfolio
</li>
<li>
Social
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</div>
<div class="frontbg">
<img onload="this.style.opacity='1';" src="img/bg/2.png" id="logo" />
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
CSS
.frontbg {
width: 80%;
height: auto;
left: 10%;
top: 15%;
position: fixed;
}
.frontbg img {
width: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
opacity:0;
-moz-transition:opacity 2s;
-webkit-transition:opacity 2s;
-o-transition:opacity 2s;
transition:opacity 2s;
}
The Other CSS is just Bootstrap Stuff.
Here is the attempted jQuery Slide Up
$(document).ready(function() {
$('.frontbg').delay(3000).animate({bottom:"15%"},600);
});
Your help would be much appreciated. The website can be viewed online HERE
You can actually create that effects without using javascript. using css3's
#keyframes
heres my fiddle http://jsfiddle.net/KaDy8/20/
I guess this will work:
$(document).ready(function(){
$("#myId").css({top:1000,position:'absolute'});
$("#myId").animate({top:100}, 800);
});
do it using css. no needs of Jquery
#-moz-keyframes slidein {
from {margin-bottom:0%;}
to {margin-top:35%;}
}
#-webkit-keyframes slidein {
from {margin-bottom:0%;}
to {margin-top:15%;}
}
for example
A very similar answer here
JQuery Animate() slide div up from bottom of page
$('#content').animate({'margin-top': '50px'}, 1000);
Related
I was adding some animations with CSS to the site I was working on. But the overflow: hidden attribute doesn't seem to work the way I expected it should. Here's my code.
.jumbotron {
height: 100%;
height: 100vh;
align-items: center;
display: flex;
position: relative;
}
.sty {
display: inline-block;
position: relative;
}
.sty1 {
position: relative;
animation: firanim 1.5s ease-in-out;
overflow: hidden;
}
.sty2 {
position: relative;
animation: secanim 1s ease-in-out;
overflow: hidden;
}
#keyframes firanim {
from {top:-50px;}
to {top:0px;}
}
#keyframes secanim {
from {left:-55vw;}
to {left:0px;}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css" type="text/css">
<!-- EndCSS -->
<title>lorem ipsum</title>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark text-white sticky-top">
<a class="navbar-brand" href="#">Under Development</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse justify-content-end" id="collapsibleNavId">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Follow</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron justify-content-center">
<div class="text-monospace sty">
<h1 class="display-3">welcome<span class="text-danger">!</span></h1>
<div class="sty1">
<span class="lead">lorem ipsum lorem <span class="text-warning">LOREM IPSUM.</span></span>
</div>
<div class="sty2">
<span class="lead">lorem ipsum lorem ipsum lorem.</span>
</div>
</div>
</div>
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- EndJS -->
</body>
</html>
So is there any additional class missing in my code or anything wrong I am using? Because I was expecting the span element with .lead class to just show in his own space not like some text flying over to the place from somewhere. I am hoping you'll get what i wanted to say.
You are animating the whole box (.sty1 and .sty2), the text (.lead) its not outside the (.sty1 and .sty2) thats why its not getting hidden by overflow: hidden
you need to keep the (.sty1 and .sty2) in thier place and animate .lead
try this
.jumbotron {
height: 100%;
height: 100vh;
align-items: center;
display: flex;
position: relative;
}
.sty {
display: inline-block;
position: relative;
}
.sty1 {
overflow: hidden;
}
.sty2 {
overflow: hidden;
}
.sty1 .lead {
position: relative;
animation: firanim 1.5s ease-in-out;
}
.sty2 .lead {
position: relative;
animation: secanim 1s ease-in-out;
}
#keyframes firanim {
from {
top: -50px;
}
to {
top: 0px;
}
}
#keyframes secanim {
from {
left: -55vw;
}
to {
left: 0px;
}
}
your animation it's set on the .leads container(.sty1 and .sty2), so that's the one that it's moving , your lead are moving along with it, to fix it you can wrap those in a div with a class that will have its overflow to hidden, like this
I added a animation-container and set overflow:hidden, see the updated html
.jumbotron {
height: 100%;
height: 100vh;
align-items: center;
display: flex;
position: relative;
}
.sty {
display: inline-block;
position: relative;
}
.sty1 {
position: relative;
animation: firanim 1.5s ease-in-out;
overflow: hidden;
}
.sty2 {
position: relative;
animation: secanim 1s ease-in-out;
overflow: hidden;
}
.animation-container {
overflow: hidden;
}
#keyframes firanim {
from {
top: -50px;
}
to {
top: 0px;
}
}
#keyframes secanim {
from {
left: -55vw;
}
to {
left: 0px;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css" type="text/css">
<!-- EndCSS -->
<title>Anurag Srivastava - Portfolio</title>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark text-white sticky-top">
<a class="navbar-brand" href="#">Under Development</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse justify-content-end" id="collapsibleNavId">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Follow</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron justify-content-center">
<div class="text-monospace sty">
<h1 class="display-3">welcome<span class="text-danger">!</span></h1>
<div class="animation-container">
<div class="sty1">
<span class="lead">lorem ipsum lorem <span class="text-warning">LOREM IPSUM.</span></span>
</div>
</div>
<div class="sty2">
<span class="lead">lorem ipsum lorem ipsum lorem.</span>
</div>
</div>
</div>
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- EndJS -->
</body>
</html>
Try the following HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css" type="text/css">
<!-- EndCSS -->
<title>Anurag Srivastava - Portfolio</title>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark text-white sticky-top">
<a class="navbar-brand" href="#">Under Development</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse justify-content-end" id="collapsibleNavId">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Follow</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron justify-content-center">
<div class="text-monospace sty">
<h1 class="display-3">welcome<span class="text-danger">!</span></h1>
<div class="sty1">
<span class="lead_1">lorem ipsum lorem <span class="text-warning">LOREM IPSUM.</span></span>
</div>
<div class="sty2">
<span class="lead_2">lorem ipsum lorem ipsum lorem.</span>
</div>
</div>
</div>
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- EndJS -->
</body>
</html>
And the following CSS
.jumbotron {
height: 100%;
height: 100vh;
align-items: center;
display: flex;
position: relative;
}
.sty {
display: inline-block;
position: relative;
}
.sty1 {
overflow: hidden;
}
.lead_1{
animation: firanim 1.5s ease-in-out;
position: relative;
}
.lead_2{
position: relative;
animation: secanim 1s ease-in-out;
}
.sty2 {
overflow: hidden;
}
#keyframes firanim {
from {top:-50px;}
to {top:0px;}
}
#keyframes secanim {
from {left:-55vw;}
to {left:0px;}
}
Hope it helps! :)
My navbar currently appears like this when I inspect and put it to a mobile device such as iPhone X:
However, I want it to appear like this when in mobile:
... and for the bar to open up as it does when the button is clicked.
To get it looking like I want, I use display:none in CSS however this then means when you click the button to display it nothing appears. My HTML and CSS is as follows:
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
//Toggles the nav bar
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
//animates the links
navLinks.forEach((link, index) => {
if (link.getElementsByClassName.animation) {
link.style.animation = ``;
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index /7 + 0.5}s`;
}
});
//burger animation
burger.classList.toggle('toggle');
});
}
navSlide();
#media screen and (max-width:640px){
body{
overflow-x: hidden;
}
.nav-links{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #5d4954;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
display: none;
}
.nav-links li{
opacity: 0;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%);
transition: transform 0.5s ease-in;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="author" content="Lewis Haddon">
<title>Business website</title>
<link rel="stylesheet" href="./css/test2.css" type="text/css">
</head>
<body>
<nav>
<div class="logo">
<h4>The Nav</h4>
</div>
<ul class="nav-links">
<li>Home</li>
<li>S3</li>
<li>RS6</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="app.js"></script>
</body>
</html>
Use visibility: hidden; as CSS.
You can use the #media query to detect whether the client is in used in a mobile environment.
#media screen and (max-width: 500px) {
#navID { visibility: hidden; }
}
Add this code in your css, you can change the pixel from 320 to 350 or 300 for mobile view
#media(max-width: 320px) {
nav{
display: none;
}
}
Use this for toggler on the right:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<link rel="stylesheet" href="style.css">
<title>Title</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
Try to insert your html and jQuery and not css in the above code.
This would be much easier :-)
You could add overflow: hidden
and width: 100% on your nav.
Also you can set position: absolute and right: -50% (as your links’ container width is set to 50%). This should work without hidden overflow
I'm trying to add a sidebar navigation panel to my webpage. Doing it using js html and css.When i load the page for the first time it shows the sidebar even before clicking on the icon to open it. How can i prevent opening of the sidebar automatically when the page loads for the first time? thanks in advance!!! codes are as follows...
$(document).ready(function(){
$(".fa-times").click(function(){
$(".sidebar_menu").addClass("hide_menu");
$(".toggle_menu").addClass("opacity_one");
});
$(".toggle_menu").click(function(){
$(".sidebar_menu").removeClass("hide_menu");
$(".toggle_menu").removeClass("opacity_one");
});
});
/*side navigation bar*/
.toggle_menu{
cursor:pointer;
z-index: 1000000;
opacity: 0;
}
.sidebar_menu{
position: fixed;
width: 20em;
margin-left: 0px;
overflow: hidden;
height: 100vh;
max-height: 100vh;
background-color: rgba(17,17,17,0.9);
opacity: 0.9;
transition: all 0.3s ease-in-out;
left:0px;
}
.fa-times{
right: 1em;
top : 1em;
opacity: 0.7;
cursor: pointer;
position: absolute;
color: #8bea8b;
transition: all 0.3s ease-in-out;
}
.fa-times:hover{
opacity: 1;
}
.hide_menu{
margin-left: -20em;
}
.opacity_one{
opacity: 1;
transition: all 0.3s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">
<head>
<title>Forestpin</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">
<link rel="stylesheet" type="text/css" href="fullpage/jquery.fullPage.css" />
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". -->
<script src="fullpage/vendors/jquery.easings.min.js"></script>
<!-- This following line is only necessary in the case of using the option `scrollOverflow:true` -->
<script type="text/javascript" src="fullpage/vendors/scrolloverflow.min.js"></script>
<script type="text/javascript" src="fullpage/jquery.fullPage.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="sidemenu.js"></script>
</head>
<body>
<!--top navigation bar-->
<nav class="navbar navbar-default header navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="images/logofpin.png" id="logofpin">
</a>
<img alt="Logo" src="images/logo2.png" class="navbar-brand toggle_menu" id="logo2">
<div class="sidebar_menu">
<i class="fa fa-times"></i>
</div>
</div>
</div>
</nav>
Just add the class opacity_one to your Logo div, and hide_menu to the sidebar div. Check the updated snippet below!
$(document).ready(function(){
$(".fa-times").click(function(){
$(".sidebar_menu").addClass("hide_menu");
$(".toggle_menu").addClass("opacity_one");
});
$(".toggle_menu").click(function(){
$(".sidebar_menu").removeClass("hide_menu");
$(".toggle_menu").removeClass("opacity_one");
});
});
/*side navigation bar*/
.toggle_menu{
cursor:pointer;
z-index: 1000000;
opacity: 0;
}
.sidebar_menu{
position: fixed;
width: 20em;
margin-left: 0px;
overflow: hidden;
height: 100vh;
max-height: 100vh;
background-color: rgba(17,17,17,0.9);
opacity: 0.9;
transition: all 0.3s ease-in-out;
left:0px;
}
.fa-times{
right: 1em;
top : 1em;
opacity: 0.7;
cursor: pointer;
position: absolute;
color: #8bea8b;
transition: all 0.3s ease-in-out;
}
.fa-times:hover{
opacity: 1;
}
.hide_menu{
margin-left: -20em;
}
.opacity_one{
opacity: 1;
transition: all 0.3s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">
<head>
<title>Forestpin</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">
<link rel="stylesheet" type="text/css" href="fullpage/jquery.fullPage.css" />
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". -->
<script src="fullpage/vendors/jquery.easings.min.js"></script>
<!-- This following line is only necessary in the case of using the option `scrollOverflow:true` -->
<script type="text/javascript" src="fullpage/vendors/scrolloverflow.min.js"></script>
<script type="text/javascript" src="fullpage/jquery.fullPage.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="sidemenu.js"></script>
</head>
<body>
<!--top navigation bar-->
<nav class="navbar navbar-default header navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="images/logofpin.png" id="logofpin">
</a>
<img alt="Logo" src="images/logo2.png" class="navbar-brand toggle_menu opacity_one" id="logo2">
<div class="sidebar_menu hide_menu">
<i class="fa fa-times"></i>
</div>
</div>
</div>
</nav>
I have got a code for navbar which is working perfectly... Also i have got the code for a collapsable side bar which is also working perfectly. But now i dont understand how to add these two together so that i get a page with navbar and sidebar together.
This is my code for navbar - (complete with html):
<html>
<head>
<title>Navbar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Navbar-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Navbar khatam-->
<!-- Font styles -->
<style type="text/css">
#import "http://designmodo.github.io/Flat-UI/dist/css/flat-ui.min.css";
#import "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css";
#import "https://daneden.github.io/animate.css/animate.min.css";
</style>
</head>
<body style="background-color:#E6E6FA">
<!--Navigation bar-->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-inner">
<!--Container class div-->
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="logo.jpg" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav navbar-left">
<li> </li> <!-- TO leave some space after logo-->
<li class="active">Home </li>
<li class = "dropdown">
Functionalities <span class = "caret"></span>
<ul class = "dropdown-menu">
<li>Insurances</li>
<li class="nav-divider"></li><li>Loans</li>
<li class="nav-divider"></li><li>Card Privilages</li>
</ul>
</li>
<li>Join Us</li>
<li>About Us</li>
</ul>
<!-- Right hand side navbar -->
<ul class ="nav navbar-nav navbar-right">
<li>Customer</li>||
<li>Employee</li>
</ul>
</div>
</div>
</div>
</nav>
<!--Navbar End-->
</body>
</html>
Those links in the head tag - i got it by simply googling.
Also, my sidebar code is here -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Both</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 40px;
height: 40px;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
</style>
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
(function() {
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
})();
</script>
</body>
</html>
But not now. how do I combine these? I want a page which will have both the top navbar and the sidebar. I have all combinations of pasting the codes but with no luck. What i have latest now - after combining these two is this -
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 40px;
height: 40px;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
#import "http://designmodo.github.io/Flat-UI/dist/css/flat-ui.min.css";
#import "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css";
#import "https://daneden.github.io/animate.css/animate.min.css";
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Both</title>
<link rel="stylesheet" href="styles.css">
<!--Navbar-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Navbar khatam-->
</head>
<body>
<!--Navigation bar-->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-inner">
<!--Container class div-->
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="logo.jpg" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav navbar-left">
<li> </li> <!-- TO leave some space after logo-->
<li class="active">Home </li>
<li class = "dropdown">
Functionalities <span class = "caret"></span>
<ul class = "dropdown-menu">
<li>Insurances</li>
<li class="nav-divider"></li><li>Loans</li>
<li class="nav-divider"></li><li>Card Privilages</li>
</ul>
</li>
<li>Join Us</li>
<li>About Us</li>
</ul>
<!-- Right hand side navbar -->
<ul class ="nav navbar-nav navbar-right">
<li>Customer</li>||
<li>Employee</li>
</ul>
</div>
</div>
</div>
</nav>
<!--Navbar End-->
<!-- Sidebar nav -->
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<!-- Sidebar Ends -->
<div class="content">
<h1>This is content</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
(function() {
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
})();
</script>
</body>
</html>
By combining it like this, The side bar is working correctly but the top navbar is just a big white block. Nothing in there.
Divide both the sections differently. Put both in one row and give col-2 to the sidebar side and col-10 to the nav-bar side. This way you'll be having a side and nav-bar both side by side, you can also use the nav-bar side for creating a normal webpage. All the best!
First of all, your missing an opening style tag just after your <title>both</title>. (You have a closing /style tag just before your nav). This will apply inline styles for the time being. You should see what you want to achieve now.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Both</title>
<style>
/* styles */
</style>
</head>
But ultimately, you need to copy these styles into a CSS file and then link the CSS file in your HTML like this: <link rel="stylesheet" href="css/styles.css">. That is presuming, your stylesheet is called "styles.css" and is inside a 'CSS' folder.
Have a look at the HTML link tag for linking your external CSS file.
On my Ruby on Rails application, I've finally gotten around to figuring out a sidebar. Now, I'm just having issues with the background hover color. I'm not quite sure how to change this. Here's the CSS for the sidebar thus far:
body,html,.row-offcanvas {
height:100%;
}
body {
padding-top: 50px;
}
#sidebar {
width: inherit;
min-width: 220px;
max-width: 220px;
background-color:#fff;
float: left;
height:100%;
position:relative;
overflow-y:auto;
overflow-x:hidden;
}
#main {
height:100%;
overflow:auto;
}
/*
* off Canvas sidebar
* --------------------------------------------------
*/
#media screen and (max-width: 768px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
width:calc(100% + 220px);
}
.row-offcanvas-left
{
left: -220px;
}
.row-offcanvas-left.active {
left: 0;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
}
}
Here's the _sidebar.html.erb partial that gets rendered into each page on my rails app:
<div id="sidebar" class="sidebar-offcanvas">
<div class="col-md-12">
<h3></h3>
<ul class="nav nav-pills nav-stacked">
<li class="active">Section</li>
<li><%= link_to 'Customers', Customers_path %></li>
<li><%= link_to 'Projects', projects_path %></li>
</ul>
</div>
</div>
For some reason though, unlike the demo that I obtained this code from, the background color when I hover each link in the sidebar is grey and the text turns white, making it extremely hard to read.
Not only that, but I've also tried to paste this JavaScript code into a separate file.js, and calling it after each page:
$(document).ready(function() {
$('[data-toggle=offcanvas]').click(function() {
$('.row-offcanvas').toggleClass('active');
});
});
The classes doesn't get toggled as it looks like it should. So I'm having two issues:
I can't seem to get the hover/text color change when I highlight a link
I can't toggle the "class="active"" when I click on one of the links.
Both examples came from: http://www.bootply.com/mL7j0aOINa
Edit
As requested, here's the output of the page:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link data-turbolinks-track="true" href="/assets/bootstrap_custom.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/customers.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/projects.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<meta content="authenticity_token" name="csrf-param" />
<meta content="6nUnsGwrHCTVOf/90d6aHJrG+m7lnv7g2MpOix06j2M=" name="csrf-token" />
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.navbar -->
<div class="row-offcanvas row-offcanvas-left">
<div id="sidebar" class="sidebar-offcanvas">
<div class="col-md-12">
<h3></h3>
<ul class="nav nav-pills nav-stacked">
<li>Customers</li>
<li>Projects</li>
</ul>
</div>
</div>
<div id="main">
<div class="col-md-12">
<h1 align="center" class="page-header"></h1>
#deleted this part for example #
</table>
</div>
</div>
</div><!--/row-offcanvas -->
<script type='text/javascript'>
$(document).ready(function() {
$('[data-toggle=offcanvas]').click(function() {
$('.row-offcanvas').toggleClass('active');
});
});
</script>
</body>
</html>
Here's the answer to the linked code:
$(document).ready(function() {
$('#sidebar .nav-pills a').click(function() {
$('#sidebar .nav-pills li.active').removeClass('active');
$(this).parent().addClass('active');
});
});
For starters, there is no [data-toggle] attribute being defined, so your click handler was never called. Secondly, the way you wrote your class toggle, every single button would toggle (You'd always have either one active and the rest not, or all of them except that button active and that one not).
We need to see the HTML output from the erb.
Additionally, I don't see any code that this jquery selector would apply to:
$('[data-toggle=offcanvas]')
Bootstrap is generally designed to be overridden with whatever settings you want.
#sidebar > div > ul > li:hover {
color: black;
background-color: gray;
}
should help you out - replace black and gray with whatever colors you want.
TRY
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus {
color: red!important;
background-color: yellow!important;
}
Please add above css and let me know is it hover problem solved or not??
javascript
$('#sidebar .nav-pills a').click(function() {
$('#sidebar .nav-pills li.active').removeClass('active');
$(this).parent().addClass('active');
});