I am pretty new to JavaScript and decided to code a menu that opens/expands when you click a button and closes when you click the button again.
I got everything to work but I cannot seem to find why the menu isn't closing.
Here is my code:
Any help or guidance is much appreciated!
I have included my HTML, CSS and JS files.
let toggleNavStatus = false;
let toggleNav = function (){
let getSideBar = document.querySelector(".nav-sidebar");
let getSideBarUl = document.querySelector(".nav-sidebar ul");
let getSideBarUTitle = document.querySelector(".nav-sidebar span");
let getSideBarLinks = document.querySelectorAll(".nav-sidebar a");
if(toggleNavStatus === false){
getSideBarUl.style.visibility = "visible";
getSideBar.style.width = "295px";
getSideBarTitle.style.opacity = "0.5";
let arrayLenght = getSideBarLinks.length;
for(let i = 0; i < arrayLenght; i++){
getSideBarLinks[i].style.opacity = "1";
}
toggleNavStatus = true;
} else if(toggleNavStatus === true){
getSideBarUl.style.visibility = "hidden";
getSideBar.style.width = "50px";
getSideBarTitle.style.opacity = "0";
let arrayLenght = getSideBarLinks.length;
for(let i = 0; i < arrayLenght; i++){
getSideBarLinks[i].style.opacity = "0";
}
toggleNavStatus = false;
}
}
body {
background-color: #F1F1F1;
}
.nav-main{
width: 100%;
height: 60px;
background-color: #FFF;
display: flex;
flex-wrap: wrap;
z-index: 1000;
position: fixed;
top: 0;
}
.btn-toggle-nav{
width: 60px;
height: 100%;
background-color: #f98f39;
background-size: 50%;
background-position: center;
cursor: pointer;
position: fixed;
left: 0;
}
.btn-toggle-nav:hover{
opacity: 0.5;
}
.nav-main ul{
display: flex;
flex-wrap: wrap;
padding-left: 60px;
}
.nav-main ul li{
list-style: none;
line-height: 30px;
}
.nav-main ul li a{
display: block;
height: 100%;
padding: 0 10px;
text-transform: uppercase;
text-decoration: none;
color: #111;
font-family: Arial;
font-size: 16px;
}
.nav-sidebar{
position: fixed;
left: 0;
bottom: 0;
width: 50px;
padding: 0 5px;
height: calc(100vh - 60px);
background-color: #1B1B1B;
z-index: 1000;
}
.nav-sidebar ul{
padding-top: 15px;
overflow: hidden;
visibility: hidden;
}
.nav-sidebar ul li{
line-height: 60px;
list-style: none;
}
.nav-sidebar ul li span, ul li a{
display: block;
height: 60px;
padding: 0 10px;
text-decoration: none;
text-transform: uppercase;
color: #FFF;
font-family: arial;
font-size: 16px;
white-space: nowrap;
opacity: 0.5;
}
.nav-sidebar ul li a:hover{
background-color: #222;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ZiGi's Toggle Menu</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="resetstyle.css">
</head>
<body>
<nav class="nav-main">
<div class="btn-toggle-nav" onclick="toggleNav()"></div>
<ul>
<li> Home </li>
<li> Portfolio </li>
<li> About Us </li>
<li> Gallery </li>
<li> Contact </li>
</ul>
</nav>
<aside class="nav-sidebar">
<ul>
<li> <span>Projects</span></li>
<li> Making a Website </li>
<li> SEAO Optimizing Video </li>
<li> Walking Through The Park </li>
<li> Just Another Day </li>
</ul>
</aside>
</body>
<script src="main.js"> </script>
</html>
This is more of an HTML/CSS issue than it is JavaScript. CSS comes with a :hover selector that activates any styling presets made on that element. You can group this up with your classes to all work in sync with each other at the same time.
Give this a try!
https://www.w3schools.com/cssref/sel_hover.asp
I found my error.
In my JS file, on line 12 there is a typo when assigning the variable.
let getSideBarUTitle = document.querySelector(".nav-sidebar span");
should be
let getSideBarTitle = document.querySelector(".nav-sidebar span");
I have solved that for you but it is just a basic show hide with JavaScript.You can extend it anytime to get a proper transition.
Note: JavaScript script is at the bottom of HTML not is the JS section.
Solution:
body {
background-color: #F1F1F1;
}
.nav-main{
width: 100%;
height: 60px;
background-color: #FFF;
display: flex;
flex-wrap: wrap;
z-index: 1000;
position: fixed;
top: 0;
}
.btn-toggle-nav{
width: 60px;
height: 60px;
background-color: #f98f39;
background-size: 50%;
background-position: center;
cursor: pointer;
position: fixed;
left: 0;
}
.btn-toggle-nav:hover{
opacity: 0.5;
}
.nav-main ul{
display: flex;
flex-wrap: wrap;
padding-left: 60px;
}
.nav-main ul li{
list-style: none;
line-height: 30px;
}
.nav-main ul li a{
display: block;
height: 100%;
padding: 0 10px;
text-transform: uppercase;
text-decoration: none;
color: #111;
font-family: Arial;
font-size: 16px;
}
.nav-sidebar{
position: fixed;
left: 0;
bottom: 0;
padding: 0 5px;
height: calc(100vh - 60px);
background-color: #1B1B1B;
z-index: 1000;
}
.nav-sidebar ul{
padding-top: 15px;
}
.nav-sidebar ul li{
line-height: 60px;
list-style: none;
}
.nav-sidebar ul li span, ul li a{
display: block;
height: 60px;
padding: 0 10px;
text-decoration: none;
text-transform: uppercase;
color: #FFF;
font-family: arial;
font-size: 16px;
white-space: nowrap;
opacity: 0.5;
}
.nav-sidebar ul li a:hover{
background-color: #222;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ZiGi's Toggle Menu</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="resetstyle.css">
</head>
<body>
<nav class="nav-main">
<button class="btn-toggle-nav" onclick="toggleNav()">nav</button>
<ul>
<li> Home </li>
<li> Portfolio </li>
<li> About Us </li>
<li> Gallery </li>
<li> Contact </li>
</ul>
</nav>
<aside class="nav-sidebar" id="nav-sidebar"
style="display:none">
<ul>
<li> <span>Projects</span></li>
<li> Making a Website </li>
<li> SEAO Optimizing Video </li>
<li> Walking Through The Park </li>
<li> Just Another Day </li>
</ul>
</aside>
</body>
<script>
function toggleNav(){
console.log("Hello");
var x = document.getElementById("nav-sidebar");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</html>
Related
This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 9 months ago.
I am having trouble as to how to make the contents of the dropdown menu hide when clicking off of the dropdown menu on the page. I have provided the code below and need some assistance. Please help in explaining the correct javascript code.
<!-- html code -->
<!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">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="styles.css">
<script src="https://kit.fontawesome.com/36947df53d.js" crossorigin="anonymous"></script>
<script src="script.js"></script>
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>
<div class = "header">
<div class = "logo">Logo</div>
<div class = "dropdown">
<div class ="button">
<i class="fa-solid fa-bars" id ="button"></i>
</div>
<div class = "dropdown-content" id = "myDropdown">
<nav>
<ul class ="dropdownMenu">
<li>Home</li>
<li>About</li>
<li>Store</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
This is the CSS Code for the webpage.
/* css code */
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#100&family=Open+Sans:wght#300;400&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
height: 80px;
background-color: lightblue;
box-shadow: 0px 3px #888888;
display: flex;
justify-content: space-between;
line-height: 55px;
z-index: 99;
}
ul {
list-style-type: none;
}
ul li {
display: inline-block;
padding: 10px 10px;
}
ul li a {
text-decoration: none;
color: black;
font-family: 'Montserrat', sans-serif;
}
.logo {
padding: 10px 10px;
font-family: 'Montserrat', sans-serif;
font-size: 3em;
}
#button {
display: none;
}
#media only screen and (max-width: 550px) {
body {
padding: 0;
margin: 0;
background-color: lightblue;
}
.header {
display: flex;
flex-direction: column;
/*z-index: 99;*/
}
ul li {
display: flex;
flex-direction: column;
width: 100%;
padding: 0;
}
ul li a {
display: flex;
justify-content: center;
align-items: center;
padding: 0;
margin: 0;
height: 5em;
width: 100%;
text-align: center;
border-bottom: 1px solid black;
color: black;
font-size: 20px;
font-weight: 800;
justify-content: center;
}
a:hover {
background-color: lightblue;
}
#button {
display: inline;
top: 0;
right: 0;
padding: 30px;
/*z-index: 98;*/
position: absolute;
color: black;
}
.dropdown-content {
display: none;
background-color: white;
/*z-index: 97;*/
}
.show {display:block;}
}
This is the javascript code for the webpage.
// JS Code
// Not sure how to close dropdown menu when page is clicked off of dropdown menu on page
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
You can add a click handler on the whole page and toggle the dropdown with it. Though would need some checks and bubbling prevention on the dropdown itself, but this way it should work:
document.documentElement.addEventListener(
'click',
() => document.getElementById("myDropdown").classList.toggle("hide"),
false
);
Here is the work where you can see my HTML, CSS and JavaScript codes all together.
I don't understand why side navigation wont close. I thought since the if statement opens it perfectly making an opposite version of the if statement with else if would close it too.
Any help or suggestions would be appreciated. I know there is more than one way to do these type of toggling functions on your website with javascript so whole different approach is totally ok too as long as I learn something new.
let toggleNavStatus = false;
let toggleNav = function () {
let getSidebar = document.querySelector(".nav-sidebar");
let getSidebarUl = document.querySelector(".nav-sidebar ul");
let getSidebarTitle = document.querySelector(".nav-sidebar span");
let getSidebarLinks = document.querySelectorAll(".nav-sidebar a");
/*false sidebar kapalıykenki durumu */
if (toggleNavStatus === false) {
getSidebarUl.style.visibility = "visible";
getSidebar.style.width = "272px";
getSidebarTitle.style.opacity = "0.5";
let arrayLenght = getSidebarLinks.length;
for (let i = 0; i < arrayLength; i++) {
getSidebarLinks[i].style.opacity = "1";
}
toggleNavStatus = true;
} else if (toggleNavStatus === true) {
getSidebar.style.width = "50px";
getSidebarTitle.style.opacity = "0";
let arrayLenght = getSidebarLinks.length;
for (let i = 0; i < arrayLength; i++) {
getSidebarLinks[i].style.opacity = "0";
}
getSidebarUl.style.visibility = "hidden";
toggleNavStatus = false;
}
}
body {
background-color: #f1f1f1;
margin:0;
}
.nav-main {
width: 100%;
height: 60px;
background-color: #FFF;
display: flex;
flex-wrap: flex;
z-index: 1000;
position: fixed;
top: 0;
}
.btn-toggle-nav {
width: 60px;
height: 100%;
background-color: #f98f39;
background-image: url("https://i.hizliresim.com/3h7trd3.png");
background-repeat: no-repeat;
background-size: 40%;
background-position: center;
cursor: pointer;
}
.btn-toggle-nav:hover {
opacity: 0.75;
transition-property: opacity;
transition-duration: 1s;
}
.nav-main ul {
display: flex;
flex-wrap: wrap;
padding-left: 15px;
}
.nav-main ul li {
list-style: none;
line-height: 30px;
}
.nav-main ul li a {
display: block;
height: 100%;
padding: 0px 10px;
text-transform: uppercase;
text-decoration: none;
color: #111;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
.nav-sidebar {
position: fixed;
left: 0px;
bottom: 0px;
width: 50px;
height: calc(100vh - 60px);
padding: 0 5px;
background-color: #1b1b1b;
z-index: 1000;
transition: all 0.3s ease-in-out;
}
.nav-sidebar ul {
padding: 15px;
overflow: hidden;
visibility: hidden;
}
.nav-sidebar ul li {
line-height: 60px;
list-style: none;
}
.nav-sidebar ul li span,
.nav-sidebar ul li a {
display: block;
height: 60px;
padding: 0 10px;
text-decoration: none;
text-transform: uppercase;
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
white-space: nowrap;
opacity: "0";
transition: all 0.3s ease-in-out;
}
.nav-sidebar ul li a:hover {
background-color: #222;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=devide-width, initail-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/resetstyle.css">
<link rel="stylesheet" href="css/stil.css">
</head>
<body>
<nav class="nav-main">
<div class="btn-toggle-nav" onclick="toggleNav()"></div>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About Us</li>
<li>Galery</li>
<li>Contacy</li>
</ul>
</nav>
<aside class="nav-sidebar">
<ul>
<li><span>Projects </span></li>
<li>Why is this</li>
<li>bar not closing back</li>
<li>when I click on</li>
<li>the button again</li>
</ul>
</aside>
</body>
<script src="main.js"></script>
</html>
I want to make an adaptive menu. The problem now is that in the desktop version, when you click on a menu item and its sub-items, it closes, and should only work while I am hovering over it. And in the mobile version with an adaptive less than 520px, it also closes when you click on a sub-menu item, and this is bad.
I need hover to work only in desktop version. Also I need a menu to not get closed after the click on the sub-items.
That also goes for mobile version.
$('.drop__down-menu').on('click', function(){
$(this).children('.drop__down-list').slideToggle();
});
.header__menu-inner {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
min-height: 80px;
}
.menu__header {
max-width: 750px;
}
.menu__header li {
display: inline-block;
}
.menu__header li + li {
margin-left: 30px;
}
.menu__header a {
font-size: 15px;
line-height: 42px;
text-transform: uppercase;
font-weight: 500;
color: #333;
}
.menu__header a:hover {
color: blue;
}
.drop__down-menu {
position: relative;
padding-bottom: 20px;
margin-top: 20px;
}
.drop__down-list {
display: none;
position: absolute;
top: 61px;
left: 0;
width: 270px;
background-color: #fff;
padding: 20px;
border-top: 1px solid blue;
color: #fff;
font-size: 15px;
box-shadow: 0px 5px 40px 0px rgba(82, 85, 90, 0.2);
border-top: 1px solid blue;
z-index: 2;
}
.drop__down-list li {
width: 100%;
}
.drop__down-list li + li {
margin-left: 0;
}
.drop__down-list li a {
display: block;
line-height: 44px;
padding: 0 10px;
text-transform: capitalize;
}
.drop__down-list li a:hover {
color: #fff;
background-color: blue;
}
.drop__down-menu:hover .drop__down-list {
display: block;
}
#media (max-width: 520px) {
.header__user-nav + .header__user-nav {
margin-left: 5px;
}
.menu__header {
margin-left: auto;
}
.menu__header a {
line-height: 30px;
}
.menu__header-btn {
width: 30px;
}
.menu__header-btn span {
height: 4px;
}
.menu__header-btn span + span {
margin-top: 3px;
}
.menu__header-list {
left: 0;
top: 56px;
}
.menu__header-list li {
display: block;
border-bottom: 1px solid #0c0c0c;
}
.menu__header-list li a {
display: block;
}
.menu__header li + li {
margin-left: 0;
}
.drop__down-list {
width: 100%;
}
.header__menu-inner {
min-height: 55px;
}
.drop__down-list {
padding: 0 12px;
top: 40px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="wrap">
<div class="content">
<header class="header">
<div class="header__menu-inner">
<nav class="menu__header">
<div class="menu__header-btn">
<span></span>
<span></span>
<span></span>
</div>
<ul class="menu__header-list">
<li class="drop__down-menu">
Home
<ul class="drop__down-list">
<li>Home One Multi User</li>
<li>Home Two Single User</li>
<li>Home Three Product</li>
</ul>
</li>
<li class="drop__down-menu">
All products
<ul class="drop__down-list">
<li>Recent Items</li>
<li>Popular Items</li>
<li>Featured Items</li>
</ul>
</li>
<li class="drop__down-menu">
Wordpress
<ul class="drop__down-list">
<li>Popular Items</li>
<li>Admin Templates</li>
<li>Blog / Magazine / News</li>
</ul>
</li>
<li>Festures</li>
<li class="drop__down-menu link__mega-menu">
<a class="drop__down-link" href="#">Pages</a>
</li>
</ul>
</nav>
</div>
</header>
</div>
</div>
<!--Plugin JavaScript file-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>
I hope this answer helps you!
#media (min-width: 520px){
.drop__down-menu:hover .drop__down-list {
display: block;
}
I think you should adapt CSS style for mobile first.
then add #media (min-width: x) for large devices not inversely
Basically, My subtopics element is hiding, i want subtopics element show once we clicked at Topics element and hide subtopics element again once we clicked at Topics. Just like hide and show elements
I'm trying to use classList with addEventListener when i run code it shows up there is an error which didn't works for me.
I also found out that most of people are using jquery because it's very easy, but for me i want to practice in javascript first.
I'm still looking forward to the situation that works for me. If anyone know how to code with this function please give me some solution thank you very much.
Here is my code please take a look.
var togglemenu = (function () {
var togSubtopics = document.getElementById("subtopics");
togSubtopics.addEventListener("click", function () {
togSubtopics.classList.toggle("show");
});
return {
togglemenu: togglemenu()
};
})();
body {
margin: 0;
}
li, a{
text-decoration: none;
list-style-type: none;
text-decoration-line: none;
color: black;
}
/*main-menu*/
#mainmenu {
position: relative;
}
#mainmenu ul {
margin: 0;
padding: 0;
}
#mainmenu li {
display: inline-block;
}
#mainmenu a {
display: block;
width: 100px;
padding: 10px;
border: 1px solid;
text-align: center;
}
/*subtopics*/
#subtopics {
position: absolute;
display: none;
margin-top: 10px;
width: 100%;
left: 0;
}
.show {
display: block;
}
#subtopics ul {
margin: 0;
padding: 0;
}
#subtopics li {
display: block;
}
#subTopics a {
text-align: left;
}
/*columns*/
#column1, #column2, #column3 {
position: relative;
float: left;
left: 125px;
margin: 0px 5px 0px 0px;
}
/*hover underline*/
#mainmenu li:hover {
text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="index2.css" />
</head>
<body>
<div id="mainmenu">
<ul>
<li>Logo</li>
<li>Home</li>
<li>Topics
<div id="subtopics">
<div id="column1" class="columns">
<ul>
<li>example1</li>
<li>example2</li>
<li>example3</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<script src="index2.js"></script>
</body>
</html>
One possible way to do that:
just onclick - toggle that element's class (add or remove class show)
And in CSS add rules that give display: block to .submenu that is under .show
UPD Before show subitems of any item - make sure that you have hidden other opened submenus
(function () {
var menuElems = document.querySelectorAll("#mainmenu ul > li")
menuElems.forEach(function(elem){
elem.addEventListener("click", function(){
//hide all open submenus
menuElems.forEach(function(e){
e.classList.remove("show");
})
//show the one that is clicked right now
elem.classList.add("show");
}, false)
});
})();
body {
margin: 0;
}
li, a{
text-decoration: none;
list-style-type: none;
text-decoration-line: none;
color: black;
}
/*main-menu*/
#mainmenu {
position: relative;
}
#mainmenu ul {
margin: 0;
padding: 0;
}
#mainmenu li {
display: inline-block;
}
#mainmenu a {
display: block;
width: 100px;
padding: 10px;
border: 1px solid;
text-align: center;
}
/*subtopics*/
.subtopics {
position: absolute;
display: none;
margin-top: 10px;
width: 100%;
left: 0;
}
.show .subtopics{
display: block;
}
.subtopics ul {
margin: 0;
padding: 0;
}
.subtopics li {
display: block;
}
.subTopics a {
text-align: left;
}
/*columns*/
#column1, #column2, #column3 {
position: relative;
float: left;
left: 125px;
margin: 0px 5px 0px 0px;
}
/*hover underline*/
#mainmenu li:hover {
text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="index2.css" />
</head>
<body>
<div id="mainmenu">
<ul>
<li>Logo</li>
<li>Home
<div class="subtopics">
<div id="column1" class="columns">
<ul>
<li>Home_example1</li>
<li>Home_example2</li>
<li>Home_example3</li>
</ul>
</div>
</div>
</li>
<li>Topics
<div class="subtopics">
<div id="column1" class="columns">
<ul>
<li>Topic_example1</li>
<li>Topic_example2</li>
<li>Topic_example3</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<script src="index2.js"></script>
</body>
</html>
UPD
Code that removes show class from menuElems onclick to subtopic
var subtopicElems = document.querySelectorAll(".subtopics ul > li a")
subtopicElems.forEach(function(item){
item.addEventListener("click", function(event){
menuElems.forEach(function(menuElem){
menuElem.classList.remove("show")
})
event.stopPropagation(); //gotta stop bubbling
}, false)
})
about Bubbling and Capturing
I have some text and a YouTube video on my website (aka: http://redstonegaming.com), and it won't let me start the video. Any help would be greatly appreciated. Also, when I set the content div to z-index: 99, it works but my dropdown menu goes under the content. Vice versa.
var rick = false;
var audio = new Audio('rick_roll.mp3');
var kkeys = [],
konami = "38,38,40,40,37,39,37,39,66,65,13";
$(document).keydown(function(e) {
kkeys.push(e.keyCode);
if (kkeys.toString().indexOf(konami) >= 0) {
kkeys = []; // <-- Change here
if (rick == false) {
rick = true;
audio.play();
} else if (rick == true) {
rick = false;
audio.pause(); // <-- another issue
}
}
});
/*Some Fonts Here:*/
#font-face { font-family: Rusty; src: url('BrushScriptStd.otf');}
* {
font-family: Rusty;
font-weight: Lighter;
}
.background
{
background-image: url(0.jpg);
background-attachment: fixed;
background-size: 100% auto;
background-color: f7f7f7;
background-repeat: no-repeat;
background-position:absolute;
}
.menubar {
height: 2.8vw;
opacity: 0.85;
background-color: #CCCCCC;
}
.clearfix:after {
display: block;
clear: both;
}
.menu-wrap {
width: 50%;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
background: #3e3436;
}
.menu {
width: 100%;
margin: 0px auto;
text-align: center;
}
.menu li {
margin: 0px;
list-style: none;
font-family: 'Ek Mukta';
}
.menu a {
transition: all linear 0.15s;
color: #919191;
}
.menu li:hover > a,
.menu .current-item > a {
text-decoration: none;
color: rgba(189, 34, 34, 1);
}
.menu .arrow {
font-size: 0.95vw;
line-height: 0%;
}
.menu > ul > li {
float: middle;
display: inline-block;
position: relative;
font-size: 1.2vw;
}
.menu > ul > li > a {
padding: 0.7vw 5vh;
display: inline-block;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
}
.menu > ul > li:hover > a,
.menu > ul > .current-item > a {
background: #2e2728;
}
.menu li:hover .sub-menu {
display: block;
z-index: 99;
}
.sub-menu {
width: 100%;
padding: 0px 0px;
position: absolute;
top: 100%;
left: 0px;
display: none;
transition: opacity linear 5.8s;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
background: #2e2728;
}
.sub-menu li {
display: block;
font-size: 1.2vw;
}
.sub-menu li a {
padding: 10px 10px;
display: block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
background: #3e3436;
}
.Rusty
{
font-family: "Rusty";
color: rgba(189, 34, 34, 1);
}
.content
{
opacity: .85;
position: relative;
margin: auto;
width: 80%;
z-index: -1;
background-color: #CCCCCC;
padding: 10px;
height: 100%;
}
.menu > ul > .login
{
position: absolute;
top: 0;
right: 0;
}
.video-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
width: 100%;
}
.video-container iframe, .video-container object, .video-container embed {
position:absolute;
top:15;
left:15%;
right:15%;
width: 25vw;
height:25vh;
}
.title
{
text-align: center;
font-size: 7vh;
text-decoration: underline;
-moz-text-decoration-color: inherit;
text-decoration-color: inherit;
}
.feed-column
{
width: 50%;
}
.text-center
{
text-align: center;
}
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/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.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://s.ytimg.com/yts/cssbin/www-subscribe-widget-webp-vflj9zwo0.css"
name="www-subscribe-widget" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="script.js"></script>
<link rel="shortcut icon" href="favicon.ico" />
<title>RG - Home</title>
</head>
<body class="background">
<div class="menubar">
<nav class="menu">
<ul class="clearfix">
<li>
<a href="aboutme.html">About Me
<span class="arrow">▼</span></a>
<ul class="sub-menu">
<li>
Gaming
</li>
<li>
Programming
</li>
<li>
YouTube
</li>
<li>
Other
</li>
</ul>
</li>
<li>
Schedule
</li>
<li class="current-item">
<a href="#">
<p class="rusty">RedstoneGaming</p>
</a>
</li>
<li>
Equipment
</li>
<li>
Contact Me
</li>
<li class="login">
Login/Sign Up
</li>
</ul>
</nav>
</div>
<div class="content">
<h1 class="rusty title">ThatRedstoneGuy's Feed</h1>
<div class="feed-column">
<h1 style="font-size: 3vh;" class="rusty text-center">Colortone | Am I colorblind?! | W/Voiceless</h1>
<div class="video-container">
<iframe src="https://www.youtube.com/embed/-egJP-2ShRk?controls=2%20align="></iframe>
</div>
</div>
<div class="feed-column">
</div>
</div>
</body>
</html>
Your <body class="background"> is covering the .content div because you have z-index: -1; on the content class in your css file. You should be safe to just remove it, if not then change it to 1 and add z-index: 2; to your .menubar class.
You can see this in either Firefox or Chrome by using developer tools Inspect Element to see the layout of the page as it is rendered in the browser.
Firefox Inspect Element
Chrome Inspect Element
EDIT:
After playing around for a while I found a solution. The z-index has some relation that I don't completely understand with whether the position is static or relative/absolute. So after experimentation I was able to get the menu to work properly by adding position: relative; to the .menubar class.
Your class specified here:
<div class="content">
is giving you this problem, maybe will conflict with an other same class name defined else where.
If I change this class name then your video works (just for testing purpose I have renamed to contents:
<div class="contents">
Check the diddle here:
https://jsfiddle.net/te8sxvgq/