please help me with the implementation of the drop-down menu from the list. Now, for practice, I make a site using the Bootstrap 4 library, and I encountered such a problem when clicking on any of the buttons, the list only appears from the first button, but it is necessary that when you click on any of the buttons a nested list will drop out. Thanks!
let getList = document.querySelectorAll('.sideBtn');
for(let a of getList) {
console.log(a);
a.addEventListener('click' , showList);
}
function showList () {
let getHide = document.querySelector('.hide');
console.log(getHide);
for (let i = 0; i < 1; i++) {
if(getHide.style.display == 'block') {
getHide.style.display = 'none';
} else {
getHide.style.display = 'block';
}
}
}
/*for(let b of getHide) {
console.log(b);
if(b.style.display == 'none') {
b.style.display = 'block';
} else {
b.style.display = 'none';
}
}*/
* {
margin: 0;
padding: 0;
text-decoration: none;
}
.sidebar {
position: fixed;
width: 250px;
height: 100%;
background: #042331;
transition: all .5s ease;
}
.sidebar ul {
list-style-type: none;
}
.sidebar ul li a {
display: block;
height: 100%;
width: 100%;
line-height: 60px;
font-size: 20px;
color: white;
padding-left: 40px;
box-sizing: border-box;
border-bottom: 1px solid black;
border-top: 1px solid rgba(255,255,255,.1);
transition: .4s;
text-decoration: none;
}
ul li:hover a {
padding-left: 50px;
}
.sidebar ul a i {
margin-right: 16px;
}
.hide {
display: none;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Hello, world!</title>
</head>
<body>
<section class="sidebar">
<ul>
<li class="sideBtn">
<a href="#">
<i class="fas fa-tv"></i>
Сериалы
</a>
<ul class="hide">
<li><i class="fas fa-star"></i>Лучшие</li>
<li><a class="userChoice" href=""><i class="fas fa-user-check"></i>Выбор пользователей</a></li>
</ul>
</li>
<li class="sideBtn">
<a href="#">
<i class="fas fa-film"></i>
Фильмы
</a>
<ul class="hide">
<li><i class="fas fa-star"></i>Лучшие</li>
<li><a class="userChoice" href=""><i class="fas fa-user-check"></i>Выбор пользователей</a></li>
</ul>
</li>
</ul>
</section>
<script src="scritp.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 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.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
So I'm working on my site, and I want to incorporate the cool line particle from the particles.js library. I have the particles working and such it all works fine. When I try to put my text onto it, it forces it below all the particles. I don't know why this is happening. I've tried putting it above, below and inside of the tags, but it all ways ends up above or below the particles, or no where at all.
Here is my code:
/* =============================================================================
HTML5 CSS Reset Minified - Eric Meyer
========================================================================== */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
li{list-style:none}
/* =============================================================================
My CSS
========================================================================== */
/* ---- base ---- */
html,body{
background:#111;
}
html{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body{
font:normal 75% Arial, Helvetica, sans-serif;
}
canvas{
display:block;
vertical-align:bottom;
}
/* ---- stats.js ---- */
.count-particles{
background: #000022;
position: absolute;
top: 48px;
left: 0;
width: 80px;
color: #13E8E9;
font-size: .8em;
text-align: left;
text-indent: 4px;
line-height: 14px;
padding-bottom: 2px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
}
.js-count-particles{
font-size: 1.1em;
}
#stats,
.count-particles{
-webkit-user-select: none;
margin-top: 5px;
margin-left: 5px;
}
#stats{
border-radius: 3px 3px 0 0;
overflow: hidden;
}
.count-particles{
border-radius: 0 0 3px 3px;
}
/* ---- particles.js container ---- */
#particles-js{
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-color: darkcyan;
}
#particles canvas{
position: absolute;
width: 100%;
height: 100%;
z-index: 999;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- DO NOT TOUCH -->
<meta charset="utf-8">
<title>C#Web - Professional Web Development</title>
<meta name="description" content="C#Web is a web development & graphic design shop run by Gosintary and Lorsharish. They charge low prices and provide very high quality work!">
<meta name="author" content="Ethan Pszanowski" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" media="screen" href="css/style.css">
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- Plugin CSS -->
<link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<link href="css/freelancer.min.css" rel="stylesheet">
<!-- END OF DO NOT TOUCH -->
<!-- START OF CSS -->
<style>
.header{
height: 650px;
width: 100%;
font-family: 'Montserrat', sans-serif;
color: white;
margin-top: 104px;
}
.header p{
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg bg-secondary fixed-top text-uppercase" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">C# WEB</a>
<button class="navbar-toggler navbar-toggler-right text-uppercase bg-primary text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item mx-0 mx-lg-1">
<a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#about">About</a>
</li>
<li class="nav-item mx-0 mx-lg-1">
<a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#ethan">Portfolio</a>
</li>
<li class="nav-item mx-0 mx-lg-1">
<a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Header -->
<div class="layer">
<div id="particles-js"></div>
</div>
<div class="header">
<h1>123</h1>
</div>
<!-- DO NOT TOUCH -->
<!-- scripts -->
<script src="particles.js"></script>
<script src="js/app.js"></script>
<!-- END OF DO NOT TOUCH -->
</body>
</html>
So what am I doing wrong?
I know this is long overdue, but I was having the same issue and added
"position: relative;"
to the containing my content (e.g. the element I wanted to display over the particles background ).
This worked for me! Hope someone else might find this solution useful.
Okey so when i tried to make dropdown responsive navigatorbar but it just dosen't work so if someone could help me with this that would be nice :)
More about my issue.
So menu should open when i press this button
picture of navbar
normally when i change
header nav ul height to 0 it closes it but when i change it to auto; it opens menu but it wont close it so i tried to make script that reads when you click that picture it will turn it to auto; but i dosen't seem to work.
so my problem is that i can't open it or close it.
fa-bars is picture from awesomefont just to make that clear.
Here some code.
$(document).ready(function() {
$(".fa-bars").on("click", function() {
$("header nav ul").toggleClass("open");
});
});
/* MOBILES */
#media screen and (max-width: 480px){
#logo {
width: 80px;
margin-left: 30px;
margin-top: 15px;
}
header nav {
margin: 0;
float: none;
}
.fa-bars {
font-size: 24px;
display: inline-block;
width: 100%;
cursor: pointer;
text-align: right;
float: right;
margin: 13px 35px 0 0;
}
.fa-bars:hover {
opacity: 0.5;
}
header nav ul {
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
}
header nav ul.open {
height: auto;
}
header nav ul li {
width: 100%;
padding: 5px 0;
margin: 0;
font-size: 17px;
border-top: 1px solid #dddddd;
}
header nav ul li:hover {
background-color: #eeeeee;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script defer src="js/fontawesome.js"></script>
<title>SeQaFin</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header>
<div id="logo">
<a href="#">
<img src="img/logo.png" alt="Logo">
</a>
</div>
<!-- NavBar -->
<nav id="main-nav">
<i class="fas fa-bars"></i>
<ul>
<li>Etusivu</li></li>
<li>Tieto</li>
<li>Liity</li>
</ul>
</nav>
</header>
<!-- Etusivu -->
<section id="Kotisivu">
<h3 id="seqatext">DOwn</h3>
<a href="#Tietoa">
<img src="img/down.png" alt="Down">
</a>
</section>
<!-- Tietoa -->
<section id="Tietoa">
<h3>Tietoa</h3>
<hr>
<img src="img/avatar.png" alt="Avatar">
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<br><br><br><br><br>
</section>
<!-- Liity -->
<section id="Liity">
<h3>Liity</h3>
<hr>
<h4>Ohjeet</h4>
<p>Ohjeet Tähän!</p>
<form>
<input class="input_text" type="email" tabindex="1" placeholder="Sähköposti"><br>
<input class="input_text" type="text" tabindex="2" placeholder="Otsikko"><br>
<textarea class="input_text" tabindex="3" placeholder="Viesti"></textarea><br>
<input class="button" type="submit">
</form>
</section>
<footer>
<p>
</p>
</footer>
<script src="js/jquery.js"></script>
<script src="js/mobile.js"></script>
</body>
</html>
You have not loaded your script file.
Try it with the correction I made here.
$(document).ready(function() {
$('.fa-bars').on('click', function() {
$('header nav ul').toggleClass('open');
});
});
#media screen and (max-width: 480px) {
#logo {
width: 80px;
margin-left: 30px;
margin-top: 15px;
}
}
header nav {
margin: 0;
float: none;
}
.fa-bars {
font-size: 24px;
display: inline-block;
width: 100%;
cursor: pointer;
text-align: right;
float: right;
margin: 13px 35px 0 0;
}
.fa-bars:hover {
opacity: 0.5;
}
header nav ul {
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
}
header nav ul.open {
height: auto;
}
header nav ul li {
width: 100%;
padding: 5px 0;
margin: 0;
font-size: 17px;
border-top: 1px solid #dddddd;
}
header nav ul li:hover {
background-color: #eeeeee;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script defer src="js/fontawesome.js"></script>
<title>SeQaFin</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header>
<div id="logo">
<a href="#">
<img src="img/logo.png" alt="Logo">
</a>
</div>
<!-- NavBar -->
<nav id="main-nav">
<i class="fas fa-bars"></i>
<ul>
<li>Etusivu</li></li>
<li>Tieto</li>
<li>Liity</li>
</ul>
</nav>
</header>
<!-- Etusivu -->
<section id="Kotisivu">
<h3 id="seqatext">DOwn</h3>
<a href="#Tietoa">
<img src="img/down.png" alt="Down">
</a>
</section>
<!-- Tietoa -->
<section id="Tietoa">
<h3>Tietoa</h3>
<hr>
<img src="img/avatar.png" alt="Avatar">
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<br><br><br><br><br>
</section>
<!-- Liity -->
<section id="Liity">
<h3>Liity</h3>
<hr>
<h4>Ohjeet</h4>
<p>Ohjeet Tähän!</p>
<form>
<input class="input_text" type="email" tabindex="1" placeholder="Sähköposti"><br>
<input class="input_text" type="text" tabindex="2" placeholder="Otsikko"><br>
<textarea class="input_text" tabindex="3" placeholder="Viesti"></textarea><br>
<input class="button" type="submit">
</form>
</section>
<footer>
<p>
</p>
</footer>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
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>
How do i make my nav bar transparent when I scroll down and come back when I scroll up or when I hover my mouse over it? I tride to do this with jquery but i didn't really work.
Here's My HTML and CSS:
<DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="LunchWebsiteCSS.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).scroll(
{
previousTop: 0
},
function () {
var currentTop = $(window).scrollTop();
if (currentTop < this.previousTop) {
//$(".sidebar em").text("Up"); /* optional for demo */
$(".nav").css({ opacity: 0.5 });
} else {
//$(".sidebar em").text("Down");
$(".nav").css({ opacity: 0 });
}
this.previousTop = currentTop;
});
});
</script>
<script src="js/jjquery.js"></script>
</head>
<body>
<div class="nav">
<ul>
<div class="btn-group">
<li>Browse
</li>
<li>Sign Up
</li>
<li>BHS Lunch</li>
<li>Log In
</li>
<li>Help
</li>
</div>
</ul>
</div>
</body>
.nav {
height: 35px;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
width: 100%;
/*border: 1px solid black;*/
/*background-color: #AA3C39;*/
background-color: #AA3C39;
/*opacity: 0.7;*/
position: fixed;
}
This is how you can do it.
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop()>100)
$(".nav").css({"background-color" : "rgba(0,0,0,.5)"});
else
$(".nav").css({"background-color" : "rgba(0,0,0,1)"});
});
});
Use CSS to see it back on hover
.nav:hover
{
background-color:rgba(0,0,0,1);
}