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/
Related
I made this "Get Started" button. I want to put it below the title "All memories in one film". I tried aligning it, but it won't work.
* {
margin: 0;
padding: 0;
}
body{
height: 100vh;
width: 50vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(58, 58, 58, 0.75)), url(4kcamera.jpg);
background-size: cover;
background-position: center;
}
nav{
width: 100%;
height: 80px;
position: fixed;
}
.logo{
float: left;
padding: 0 30px;
margin-left: 55px;
margin-right: 30px;
width: 50px;
margin-top: 20px;
}
ul li{
list-style: none;
display: inline-block;
line-height: 90px;
padding: 0 31px;
}
ul{
margin-left: 840px;
}
ul li a{
text-decoration: none;
font-size: 20px;
font-family: 'Roboto Condensed', sans-serif;
color: rgb(250, 250, 250);
}
ul li a:hover {
color: rgb(102, 151, 241);
transition-duration: 0.5s;
}
#text{
transform: uppercase;
color: white;
font-family: 'Poppins', sans-serif;
text-align: center;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 60px;
}
#button1{
background-color: rgb(30, 109, 255);
border: none;
border-radius: 15px 50px;
color: white;
padding: 35px;
margin: 22px;
text-align: center;
font-size: 13px;
font-family: 'Poppins', Helvetica;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PRODUX NA</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel = "stylesheet" type = "text/css" href = "reset.css"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght#300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght#600&family=Roboto+Condensed:wght#300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#1,300&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<a href="index.html">
<img class="logo" src="1 NA.png" width="50" height="50">
</a>
<ul>
<li>
Home
</li>
<li>
About Me
</li>
<li>
Contacts
</li>
<li>
Portfolio
</li>
</ul>
</nav>
<div id="text">
</div>
<script type = "text/javascript">
var i = 0,text;
text = "All your favorite memories in one film."
function typing(){
if(i < text.length){
document.getElementById("text").innerHTML += text.charAt(i);
i++
setTimeout(typing, 50);
}
}
typing();
</script>
<div class="container">
<button id="button1">Get Started</button>
</div>
</body>
</html>
The button is below the javascript function. The id is "button1" and the container's id is just "container". As you can see in the CSS file, I used the text-align command.
In addition, I also tried justifying the content to the center and aligning all the items to the center below the title (uses Javascript function). Help would be appreciated.
I am doing my best to keep the changes true to your project without restructuring your html. Depending on how you are using this, there are better ways to structure your html.
The first thing I did was create a container for the text and button to be nested inside. Then I moved both your text div, and your container div with the button inside this other container. Then, I moved many of your absolute positioning to the #textAndButtonContainer from your #text styling. Then, I used display: flex to allow flexbox styling / centering as I find it is the easiest way to center things.
Hopefully this helps!
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
width: 50vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(58, 58, 58, 0.75)), url(4kcamera.jpg);
background-size: cover;
background-position: center;
}
nav {
width: 100%;
height: 80px;
position: fixed;
}
.logo{
float: left;
padding: 0 30px;
margin-left: 55px;
margin-right: 30px;
width: 50px;
margin-top: 20px;
}
ul li{
list-style: none;
display: inline-block;
line-height: 90px;
padding: 0 31px;
}
ul{
margin-left: 840px;
}
ul li a{
text-decoration: none;
font-size: 20px;
font-family: 'Roboto Condensed', sans-serif;
color: rgb(250, 250, 250);
}
ul li a:hover {
color: rgb(102, 151, 241);
transition-duration: 0.5s;
}
#text{
transform: uppercase;
color: white;
font-family: 'Poppins', sans-serif;
text-align: center;
margin: 0;
font-size: 60px;
}
#textAndButtonContainer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
justify-content: center;
border: 1px solid red;
}
.container {
display: flex;
justify-content: center;
}
#button1{
background-color: rgb(30, 109, 255);
border: none;
border-radius: 15px 50px;
color: white;
padding: 35px;
margin: 22px;
text-align: center;
font-size: 13px;
font-family: 'Poppins', Helvetica;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PRODUX NA</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel = "stylesheet" type = "text/css" href = "reset.css"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght#300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght#600&family=Roboto+Condensed:wght#300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#1,300&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<a href="index.html">
<img class="logo" src="1 NA.png" width="50" height="50">
</a>
<ul>
<li>
Home
</li>
<li>
About Me
</li>
<li>
Contacts
</li>
<li>
Portfolio
</li>
</ul>
</nav>
<div id="textAndButtonContainer">
<div id="text">
</div>
<div class="container">
<button id="button1">Get Started</button>
</div>
</div>
<script type = "text/javascript">
var i = 0,text;
text = "All your favorite memories in one film."
function typing(){
if(i < text.length){
document.getElementById("text").innerHTML += text.charAt(i);
i++
setTimeout(typing, 50);
}
}
typing();
</script>
</body>
</html>
The main issue is the text which has the position absolute. To position the button below the text, the container which is holding the button must also be positioned absolute. This will in turn align the button as well.
Add this to the style:
.container {
position: absolute;
bottom: -25px;/*give enough space to the text above*/
left: 50%;/*to horizontally center it*/
transform: translateX(-50%);/*to horizontally center it*/
}
This positions the button at the bottom of the text.
Try changing the button's parent div to have a class of text-center, and add a .text-center to your CSS.
So you would have HTML:
<div class="text-center">
<button id="button1">Get Started</button>
</div>
And for your CSS:
.text-center {
text-align: center;
}
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>
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
Ok so thanks to people here I have nearly completed my dropdown to the standard of a 3 year old. I know that there is probably a way to shorten and streamline my code so any pointers would be great. Here is all my code and a jsfiddle will be at the bottom:
oh and before I forget is there a way that I can smooth out the animations? like a wait() kind of deal that will make the slide down wait until the slide up is complete?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/calendar.js"></script>
<script type="text/javascript" src="js/formhandler.js"></script>
<script type="text/javascript" src="js/popup.js"></script>
<link href="CSS/style.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="CSS/fonts.css" rel="stylesheet" type="text/css" media="screen"/>
<script type="text/javascript">
$(document).ready(function () {
$('a#1').on('click', function (event) {
event.preventDefault();
if ($('#mid-nav > ul').find('ul').is(":visible")) {
$('#mid-nav > ul').find('ul').slideUp(300);
}
if ($('#mid-nav > ul').find('ul#1').is(":visible")) {
$('#mid-nav > ul').find('ul').slideUp(300);
} else {
$('#mid-nav > ul').find('ul#1').slideToggle(300);
}
});
$('a#2').on('click', function (event) {
event.preventDefault();
if ($('#mid-nav > ul').find('ul').is(":visible")) {
$('#mid-nav > ul').find('ul').slideUp(300);
}
if ($('#mid-nav > ul').find('ul#2').is(":visible")) {
$('#mid-nav > ul').find('ul').slideUp(300);
} else {
$('#mid-nav > ul').find('ul#2').slideToggle(300);
}
});
$('a#3').on('click', function (event) {
event.preventDefault();
if ($('#mid-nav > ul').find('ul').is(":visible")) {
$('#mid-nav > ul').find('ul').slideUp(300);
}
if ($('#mid-nav > ul').find('ul#3').is(":visible")) {
$('#mid-nav > ul').find('ul').slideUp(300);
} else {
$('#mid-nav > ul').find('ul#3').slideToggle(300);
}
});
$('a#4').on('click', function (event) {
event.preventDefault();
if ($('#mid-nav > ul').find('ul').is(":visible")) {
$('#mid-nav > ul').find('ul').slideUp(300);
}
if ($('#mid-nav > ul').find('ul#4').is(":visible")) {
$('#mid-nav > ul').find('ul').slideUp(300);
} else {
$('#mid-nav > ul').find('ul#4').slideToggle(300);
}
});
});
<body>
<div id="wrapper">
<div id="topbanner"></div>
<div id="header">
<div id="navigation">
<div id="topnav">
<div id="left-side">
<div id="left-menu">
<ul>
<li>Link l1</li>
<li>Link l2</li>
</ul>
</div>
</div>
<div id="logo"><img src="images/general/nav_logo.png" /> </div>
<div id="right-side">
<div id="right-menu">
<ul>
<li>Link r1</li>
<li>Link r2</li>
</ul>
</div>
</div>
</div>
<div id="mid-nav">
<ul id="midnav">
<li><a href="#" >HOME</a></li>
<li><a id="1" href="#" >ABOUT</a>
<ul id="1">
<li>test1.2</li>
<li>test1.3</li>
<li>test1.1</li>
</ul>
</li>
<li><a id="2"href="#">Work</a>
<ul id="2">
<li>test1x.2</li>
<li>test1x.3</li>
<li>test1x.1</li>
</ul>
</li>
<li><a id ="3" href="#">Clients</a>
<ul id="3">
<li>test2.2</li>
<li>test2.3</li>
<li>test1.2</li>
</ul>
</li>
<li><a id="4"href="#">Contact</a>
<ul id="4">
<li>test3.2</li>
<li>test3.3</li>
<li>test3.1</li>
</ul>
</li>
</ul>
</div>
</div>
<!--START 100% HERE!-->
</div>
</div>
<div id="footer">
<div class="social-images"><img src="images/socialmedia/facebook.gif" height="40" width="40"/></div>
<div class="social-images"><img src="images/socialmedia/google.gif" height="40" width="40"/></div>
<div class="social-images"><img src="images/socialmedia/twitter.gif" height="40" width="40"/></div>
</div>
</body>
</html>
CSS:
html, body {
height: 100%;
margin: 0 auto;
}
/* NAVIGATION */
#wrapper {
text-align: left;
margin: 0px auto;
padding: 0px;
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px; /* the bottom margin is the negative value of the footer's height */
}
#topbanner{
width:100%;
height:54px;
background-color:#f1f2f2;
position:absolute;
z-index:-1000;
}
#topnav {
margin: 0px auto;
width: 1050px;
height: 50px;
padding-top: 4px;
background-color: #f1f2f2;
}
#left-side {
float: left;
width: 439px;
}
#right-side {
float: right;
width: 439px;
}
#logo {
padding-top: 7px;
float: left;
width: 15%;
}
#left-menu {
}
#left-menu ul {
float: right;
margin: 0px 0px 0px 0px;
padding: 0px 10px 0px 0px;
}
#left-menu li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#left-menu a {
display: inline-block;
padding: 10px;
line-height: 30px;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
font-family: 'AftasansRegular';
font-size: 22px;
font-weight: normal;
color: #000;
border: none;
}
#right-menu {
}
#right-menu ul {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 10px;
}
#right-menu li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#right-menu a {
display: inline-block;
padding: 10px;
line-height: 30px;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
font-family: 'AftasansRegular';
font-size: 22px;
font-weight: normal;
color: #000;
border: none;
}
ul#midnav {
border-width: 1px 0;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
border-bottom: solid thin #c8c8c8;
}
ul#midnav li {
display: inline;
}
ul#midnav li a {
display: inline-block;
padding: 10px;
line-height: 30px;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
font-family: 'AftasansRegular';
font-size: 18px;
font-weight: normal;
color: #000;
border: none;
}
ul#midnav li ul{
line-height: 30px;
padding: 0;
position: absolute;
left: 0; top:100px;
display: none;/* --Hide by default--*/
width:100%;
height:40px;
background: #fff;
border-bottom: solid thin #c8c8c8;
}
/* NAVIGATION END */
/* FOOTER BEGIN */
#footerwrapper, #push {
height: 100px; /* .push must be the same height as .footer */
background-color: #f1f2f2;
}
#footer {
border-top: solid thin #c8c8c8;
width: 100%;
height: 100px;
margin: 0 auto;
background-color: #f1f2f2;
}
#social-wrapper {
width: 130px;
height: 100px;
float: right;
position: relative;
top: 40px;
}
.social-images {
border-style: solid;
border-width: 1px;
border-color: #f1f2f2;
width: 40px;
height: 40px;
float: left;
}
/*FOOTER END *?
http://jsfiddle.net/XN4vf/
Sorry if this is coded like a moron (I'm still using my training wheels).
Thanks
C
For one, you should use CSS classes instead of ids for the a tags that trigger the slideToggle on their respective submenus. Also, ids in a valid HTML page are expected to be unique and you use the same id "1", "2", etc. for different elements. More importantly, though, by using classes you don't need to bind the onclick event for all the anchor tags separately, which saves a lot of code ;-)
Here is the updated Fiddle: http://jsfiddle.net/XN4vf/3/
The relevant code is this:
$("a.slide").on('click', function(e){
e.preventDefault();
$(this).parent().siblings().find("ul:visible").slideUp();
$(this).next("ul").slideToggle(300);
});
Once you give the a tags a class called "slide" or similar, you can rewrite your event callback to first hide / slideUp all the submenus belonging to the siblings of the currently clicked a tag. After that, you trigger the slideToggle() to show or hide the current submenu. That way, if you first click on ABOUT and then without clicking on ABOUT again (and triggering the toggle) you click on WORK for instance, then the submenu changes correctly.
You can try this:
$(document).ready(function () {
$('#midnav li a').on('click', function(event){
event.preventDefault();
$('#midnav li ul').slideUp(300);
var ul = $(this).parent().find('ul');
if(ul.is(':visible')){
ul.slideUp(300);
}else{
ul.slideDown(300);
}
});
});