I have just (thanks to the help of stack overflow users) created a menu-bar with hyperlinks to sections. Everything works perfectly but there is one strange happening. Every time I click on a link in the menu, the browser will position the page such that the menu bar is just above the view (you have to scroll up to see it again) - in other words it positions me mid-page instead of at the top of the page. (I have a lot of content in the sections which is why I would like to fix it so we always start at the top).
Here is the Html, js and CSS code:
<ul class="tabs">
<li><a class="active" href="#content1"><div>Tab1</div></a></li>
<li><div>Tab2</div></li>
<li><div>Tab3</div></li>
</ul>
<section id="content1">
some content 1
</section>
<section id="content2" >
some content 2
</section>
<section id="content3" >
some content 3
</section>
js code:
$('.tabs').on('click', 'a', function(){
$('section').hide();
$($(this).attr('href')).show();
var $this = $(this),
$ul = $this.parents('ul');
$ul.find('a').removeClass('active');
$this.addClass('active');
});
CSS code:
section {
display: none;
}
section:first-of-type {
display:block;
}
ul.tabs {
list-style: none;
text-align: center;
}
ul.tabs li {
display: inline-block;
}
ul.tabs li a {
display: inline-block;
width: 100px;
margin-right: 25px;
margin-bottom: 25px;
padding: 5px 5px 5px 5px;
background-color: #ffffff;
border: 1px;
border-style: solid;
border-color: #000000;
text-align: center;
text-decoration: none;
color: #000000;
}
ul.tabs li a:hover {
color: #349cf0;
}
ul.tabs li a.active {
color: #349cf0;
}
You won't be able to see the problem with this code (unless you put in a hell-uv-alot of or content within the tags. However I hope you understand the problem - the code sends you to the top of the section-tag instead of the top of the whole html page. I'm thinking this could maybe be fixed in the js code or perhaps anybody know of a smart fix to the tags in the html?
Thanks in advance!
This is the default behavior of the hyperlink. You can take a look of LINK WITHIN A PAGE. So do not provide id as href.
$(document).ready(function(){
$('.tabs').on('click', 'a', function(){
$('section').hide();
$($(this).attr('data-url')).show();
var $this = $(this),
$ul = $this.parents('ul');
$ul.find('a').removeClass('active');
$this.addClass('active');
});
});
#header {
border-bottom: black 1px solid;
}
section {
display: none;
height: 500px;
border: black 2px solid;
}
section:first-of-type {
display:block;
}
ul.tabs {
list-style: none;
text-align: center;
}
ul.tabs li {
display: inline-block;
}
ul.tabs li a {
display: inline-block;
width: 100px;
margin-right: 25px;
margin-bottom: 25px;
padding: 5px 5px 5px 5px;
background-color: #ffffff;
border: 1px;
border-style: solid;
border-color: #000000;
text-align: center;
text-decoration: none;
color: #000000;
}
ul.tabs li a:hover {
color: #349cf0;
}
ul.tabs li a.active {
color: #349cf0;
}
.content {
margin-top:
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
<h1>Header Part</h1>
</div>
<div class="container">
<ul class="tabs">
<li>
<a class="active"
href="javascript:void(0);"
data-url="#content1">
<div>Tab1</div>
</a>
</li>
<li>
<a href="javascript:void(0);"
data-url="#content2">
<div>Tab2</div>
</a>
</li>
<li>
<a href="javascript:void(0);"
data-url="#content3">
<div>Tab3</div>
</a>
</li>
</ul>
<section id="content1" style="background-color:red;">
some content 1
</section>
<section id="content2" style="background-color:green;">
some content 2
</section>
<section id="content3" style="background-color:blue;">
some content 3
</section>
</div>
You can use jquerys element.top or element.position- #px.
https://api.jquery.com/position/
Related
I am attempting to add a delay to this Jquery dropdown. I have tried to use the setTimeout function but this doesn't appear to be working.
I don't know why this isn't working as the delay doesn't happen when I hover over the menu and the submenu drops down immediately. How can I get this to work?
Edit: I'll have to clarify specifically what i want to do. I have a Menu with some submenus. When I hover over the Menu Item, for example 'About', I want a brief delay of 3 seconds before the submenu slides out. Currently, It slides out immediately and this creates an unwanted effect when I quickly move from one Menu item to another. For example, if I move from About to Fees, it shows both submenus at the same time. Basically this is what is happening when I scroll over the menu Items very quickly
https://i.imgur.com/Nv554m9.png
I'm new to Jquery and Javascript and web programming in general, so although I've gone through several similar questions on StackOverFlow, they don't seem to solve my problem. Any assistance will be appreciated.
<script type="text/javascript">
$(document).ready(setTimeout(function() {
$( '.dropdown' ).hover(
function(){
$(this).children('.dropdown-content').slideDown(200);
},
function(){
$(this).children('.dropdown-content').slideUp(0);
}
);
}), 3000);
</script>
EDIT:
This is the HTML of the Menu
<ul id="menu">
<li> Home </li>
<li class="dropdown" >
About
<div class = "dropdown-content">
Background And History
Vision And Mission
Message From the Principal
Message from the Director
Governance
</div>
</li>
<li class="dropdown">
Fees
<div class="dropdown-content">
Primary Fees
Secondary Fees
Admission forms
Fee Policy
</div>
</li>
<li class="dropdown">
Academics
<div class="dropdown-content">
Primary Curriculum
Lower Secondary Curriculum
Upper Secondary Curriculum
Library and ICT Labs
Staff
</div>
</li>
<li class="dropdown">
School Life
<div class="dropdown-content">
Boarding School
<div class="subdropdown">
Extra Curricular Activities
<div class="subsubmenu">
Sports
Clubs
Entertainment
</div>
</div>
<div class="subdropdown">
Students
<div class="subsubmenu">
Governance
Code of Conduct
Alumni
</div>
</div>
Field Trips
</div>
</li>
<li>
Events
</li>
<li class="dropdown">
News
<div class="dropdown-content">
Notices for Parents
Jobs
</div>
</li>
<li class="dropdown">
Gallery
<div class="dropdown-content">
Sports
Entertainment
Facilities
</div>
</li>
<li class="dropdown">
Contact
<div class="dropdown-content">
FAQ
</div>
</li>
<!--<li>☰</li> -->
</ul>
And the CSS
/*NAVIGATION SECTION*/
nav {
margin: 0px;
}
/*Sets the nav bar in a horizontal manner. Hides the pointers for the list and ensures there's no scroll bar*/
nav ul {
display: flex;
flex-direction:row;
margin: 0;
padding: 0;
list-style-type: none;
overflow: hidden;
border-top: 1px solid #670000;
}
/*Styles each of the individual items in the nav bar list. Adds color and changes their font. Adds a border at the end*/
nav ul li {
flex-grow: 1;
font-family: Constantia,"Lucida Bright",Lucidabright,"Lucida Serif",Lucida,"DejaVu Serif","Bitstream Vera Serif","Liberation Serif",Georgia,serif;
font-size: 15px;
font-weight: bolder;
padding: 0;
}
/*Determines how the links inside the navbar will be displayed.Gives them a background color*/
nav ul li a {
display: block;
background: #800000;
height: 40px;
text-align:center;
padding: 7px 10px;
text-transform: uppercase;
-webkit-transition: 0.45s;
transition: 0.45s;
}
/*Shows how unvisited links will look*/
nav ul li a:link{
text-decoration: none;
color: whitesmoke;
}
/*Changes the color inside visited links*/
nav ul li a:visited {
color: whitesmoke;
margin-left: 60px;
height: 40px;
}
/*Determines what happens when you hover a link*/
nav ul li a:hover{
color: black;
background-color: white;
}
/*Shows what happens a link is active (page you are currently on)*/
nav ul li a.active {
background-color: indianred;
color: white;
}
/*Styles what happens when you hover an active link on an active page*/
nav ul li a.active:hover {
background-color: #990000;
color: white;
}
/*Dropdown stuff*/
.dropdown-content {
display: none;
position: absolute;
color: black;
min-width: 160px;
border-bottom: 0.5px solid deepskyblue;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.subsubmenu {
display: none;
position: absolute;
left: 223px;
top: 25%;
color:black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
ul li .dropdown-content a:link{
text-decoration: none;
color: whitesmoke;
}
ul li .subsubmenu a:link{
text-decoration: none;
color: black;
}
/*Changes the color inside visited links*/
ul li .dropdown-content a:visited {
color: whitesmoke;
margin-left: 60px;
height: 40px;
}
ul li .subsubmenu a:visited {
color: black;
margin-left: 60px;
height: 40px;
}
.dropdown-content a {
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 12px;
background-color: black;
}
.subsubmenu a{
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 12px;
background-color: #f9f9f9;
}
.dropdown-content a:hover {
background-color: #990000;
}
.subsubmenu a:hover {
background-color: #990000;
}
/*
.dropdown:hover .dropdown-content {
display: block;
color: whitesmoke;
} */
.subdropdown:hover .subsubmenu {
display: block;
color: whitesmoke;
}
$(document).ready(setTimeout(function(){}, 3000)) does not delay .slideDown() call at each event dispatched by .hover(); rather, delays call of function passed to setTimeout() at .ready() call for 3000.
You can use .delay(). Also call .clearQueue() chained to $(this).children('.dropdown-content') at function passed to second parameter of .hover() to clear the element queue of .slideDown() call at first parameter.
$(document).ready(function() {
$('.dropdown').hover(
function() {
$(this).children('.dropdown-content')
.delay(1000) // set duration of delay in milliseconds here
.slideDown(200);
},
function() {
$(this).children('.dropdown-content')
.clearQueue()
.slideUp(0);
})
});
/*NAVIGATION SECTION*/
nav {
margin: 0px;
}
/*Sets the nav bar in a horizontal manner. Hides the pointers for the list and ensures there's no scroll bar*/
nav ul {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
list-style-type: none;
overflow: hidden;
border-top: 1px solid #670000;
}
/*Styles each of the individual items in the nav bar list. Adds color and changes their font. Adds a border at the end*/
nav ul li {
flex-grow: 1;
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
font-size: 15px;
font-weight: bolder;
padding: 0;
}
/*Determines how the links inside the navbar will be displayed.Gives them a background color*/
nav ul li a {
display: block;
background: #800000;
height: 40px;
text-align: center;
padding: 7px 10px;
text-transform: uppercase;
-webkit-transition: 0.45s;
transition: 0.45s;
}
/*Shows how unvisited links will look*/
nav ul li a:link {
text-decoration: none;
color: whitesmoke;
}
/*Changes the color inside visited links*/
nav ul li a:visited {
color: whitesmoke;
margin-left: 60px;
height: 40px;
}
/*Determines what happens when you hover a link*/
nav ul li a:hover {
color: black;
background-color: white;
}
/*Shows what happens a link is active (page you are currently on)*/
nav ul li a.active {
background-color: indianred;
color: white;
}
/*Styles what happens when you hover an active link on an active page*/
nav ul li a.active:hover {
background-color: #990000;
color: white;
}
/*Dropdown stuff*/
.dropdown-content {
display: none;
position: absolute;
color: black;
min-width: 160px;
border-bottom: 0.5px solid deepskyblue;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.subsubmenu {
display: none;
position: absolute;
left: 223px;
top: 25%;
color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
ul li .dropdown-content a:link {
text-decoration: none;
color: whitesmoke;
}
ul li .subsubmenu a:link {
text-decoration: none;
color: black;
}
/*Changes the color inside visited links*/
ul li .dropdown-content a:visited {
color: whitesmoke;
margin-left: 60px;
height: 40px;
}
ul li .subsubmenu a:visited {
color: black;
margin-left: 60px;
height: 40px;
}
.dropdown-content a {
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 12px;
background-color: black;
}
.subsubmenu a {
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 12px;
background-color: #f9f9f9;
}
.dropdown-content a:hover {
background-color: #990000;
}
.subsubmenu a:hover {
background-color: #990000;
}
/*
.dropdown:hover .dropdown-content {
display: block;
color: whitesmoke;
} */
.subdropdown:hover .subsubmenu {
display: block;
color: whitesmoke;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
<li> Home </li>
<li class="dropdown">
About
<div class="dropdown-content">
Background And History
Vision And Mission
Message From the Principal
Message from the Director
Governance
</div>
</li>
<li class="dropdown">
Fees
<div class="dropdown-content">
Primary Fees
Secondary Fees
Admission forms
Fee Policy
</div>
</li>
<li class="dropdown">
Academics
<div class="dropdown-content">
Primary Curriculum
Lower Secondary Curriculum
Upper Secondary Curriculum
Library and ICT Labs
Staff
</div>
</li>
<li class="dropdown">
School Life
<div class="dropdown-content">
Boarding School
<div class="subdropdown">
Extra Curricular Activities
<div class="subsubmenu">
Sports
Clubs
Entertainment
</div>
</div>
<div class="subdropdown">
Students
<div class="subsubmenu">
Governance
Code of Conduct
Alumni
</div>
</div>
Field Trips
</div>
</li>
<li>
Events
</li>
<li class="dropdown">
News
<div class="dropdown-content">
Notices for Parents
Jobs
</div>
</li>
<li class="dropdown">
Gallery
<div class="dropdown-content">
Sports
Entertainment
Facilities
</div>
</li>
<li class="dropdown">
Contact
<div class="dropdown-content">
FAQ
</div>
</li>
<!--<li>☰</li> -->
</ul>
if you are trying delay after simple page load and without any other event call then pull out your slidedown statement from settimeout
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function(){
$('dropdown').children('.dropdown-content').slideDown(200);
}, 3000)
});
</script>
However if you want on hover then settimeout should be called on hover.
$(function(){
function hoverMe(){
$('dropdown').children('.dropdown-content').slideDown(200);
}
$(".dropdown").on('hover', function(){
setTimeout(hoverMe, 100);
})
})
Also jquery.ready function takes a function definition but you are calling setimeout there instead you should wrap your setimeout in a anonymous function
how do i put my content just beneath my navigation. Every time i put some text inside the it just goes behind the green background and gets covered up by the navigation. Please kindly help me how to put my text beneath the navigation
<html>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: #1E9600;
position: fixed;
top: 0;
width: 100%;
height:75px;
}
li {
float: left;
height:75px;
border-right: 5px solid red;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: yellow;
}
.active {
background-color: #4CAF50;
}
</style>e>
</style>
<head>
<title> E-Benta </title>
<ul>
<li> <img src="logo.png"> </img>
<li>Home </li>
<li>Products
<li>About us
<li>Contact us
</ul>
</head>
<spacer>testing </spacer>
</body>
</html>
If you add to your this code:
spacer {
display: block;
margin-top: 75px;
}
Everything will be ok. Just add margin-top bigger than height of fixed menu.
Check snippet here: http://codepen.io/Dzongkha/pen/PbbvLZ
You need to leave space at top (as much as header). You can use margin top for that.
inline code would be
<spacer style="margin-top:90px;float: left;">testing </spacer>
You can create class for that and assign to spacer as well.
<html>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: #1E9600;
position: fixed;
top: 0;
width: 100%;
height:75px;
}
li {
float: left;
height:75px;
border-right: 5px solid red;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: yellow;
}
.active {
background-color: #4CAF50;
}
</style>e>
</style>
<head>
<title> E-Benta </title>
<ul>
<li> <img src="logo.png"> </img>
<li>Home </li>
<li>Products
<li>About us
<li>Contact us
</ul>
</head>
<spacer style="margin-top:90px;float: left;">testing </spacer>
</body>
</html>
As i seen here your code html structure is not proper, It should be like
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- YOUR CSS <style> or <link> tag GOES HERE -->
</head>
<body>
<!-- YOUR CONTENT ELEMENT SHOULD BE HERE -->
</body>
</html>`
body{
margin-top:60px; /* IF Navigation is fixed top you have to put margin top to body as header hight */
}
ul {
list-style-type: none;
margin: 0;
padding: 0px;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
height: 60px;
}
li {
float: left;
border-right: 5px solid #ddd;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: #fff;
text-align: center;
padding: 22px 15px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #fff;
color:#333;
}
.active {
background-color: #4CAF50;
}
/*MAIN CONTENT CSS HERE*/
.main-content-here{
padding:15px;
}
<ul>
<li><img src="logo.png" /></li>
<li>Home </li>
<li>Products </li>
<li>About us </li>
<li>Contact us </li>
</ul>
<div class="main-content-here">
<spacer>testing</spacer>
</div>
AND last
Practice make perfect!!!! :)
From this demo
https:// codepen.io/ducktectiveQuack/pen/mPGMRZ
I can't figure out the code block so I made cheating (just delete the space between the '/' and the 'c' lol)
I am trying to make it so that once you click on the hamburger menu, the drop-down appears but nothing more. The menu shifts to the right and then it shift again after you hover over the social tab. I just want it to remain stationary the entire time, even after it drops-down.
I am still pretty new to HTML/CSS and especially JavaScript (my prof helped me with this) so my apologies if this seems like a really basic question.
I thought that simply putting 'position:fixed' or 'position:absolute' would do the trick but it does not haha.
Thank you in advance
the dropdown appears but nothing more. as you can see, right now the
menu shifts to the right. it then shifts again after you hover over
the social tab. I just wan it to remain stationary the entire time,
even after it drops down.
Try setting #menu position to absolute , .nav li:hover ul position to absolute, top to 200px, left to 0px. Note, html is missing closing </header> tag.
#menu {
position:absolute;
}
.nav li:hover ul {
position:absolute;
top:200px;
left:0px;
}
document.getElementsByTagName("h1")[0].style.fontSize = "80px";
body {
background-color: #a3d5d3;
}
#menu {
position:absolute;
}
.nav li:hover ul {
position:absolute;
top:200px;
left:0px;
}
<!doctype html>
<html lang="en">
<head>
<title>Banana | Home</title>
</head>
<style>
body {
padding: 0;
margin: 0;
background-image: url("img/vicmensa.jpg");
background-color: #515151;
}
header {
margin: 40px 0px 0px 60px;
position: fixed;
}
#container {
margin: 150px 0px 0px 400px;
text-align: left;
position: fixed;
color: white;
font-size: 24pt;
font-family: monospace;
}
.title-block {
margin: 20px 0px 0px 30px;
text-align: left;
color: #00b4ff;
font-family: monospace;
font-size: 24pt;
}
.text-block {
margin: 0px 0px 0px 30px;
width: 400px;
text-align: left;
color: white;
font-family: monospace;
font-size: 16pt;
}
.nav {
display: none;
text-align: left;
font-size: 14pt;
}
.nav a:hover {
color: white;
text-decoration: none;
}
.nav ul {
display: none;
background: none;
}
.nav li:hover ul {
display: block;
}
a {
text-decoration: none;
color: #00b4ff;
}
li {
list-style: none;
}
.burger-button {
background: none;
position: absolute;
border: 0;
color: white;
outline: none;
font-size: 20pt;
font-family: monospace;
}
.x-button {
background: none;
position: absolute;
border: 0;
color: white;
outline: none;
font-size: 20pt;
font-family: monospace;
}
</style>
<body>
<header>
<button class="burger-button" onclick="
if (document.getElementById('menu').style.display=='block')
{
document.getElementById('menu').style.display = 'none'
}
else
{
document.getElementById('menu').style.display = 'block'
/*make the hamburger icon an X and get it to stop moving positions*/
}
"><span style = "color: white;">☰</span>
</button>
<!-- nav -->
<ul class="nav" id="menu">
<li> Home
</li>
<li> About
</li>
<li> Contact
</li>
<li> Music
</li>
<li> Pictures
</li>
<li> Projects
</li>
<li> Resume
</li>
<li> Social +
<ul>
<li> Facebook
</li>
<li> Twitter
</li>
<li> Instagram
</li>
<li> LinkedIn
</li>
</ul>
</li>
</ul>
<!-- end nav -->
</header>
<div id="container">
<div class="title-block">
first middle last
<hr style="width: 100%; height: 2px; background-color: white; border-radius: 2px; margin: 0px 0px 5px 0px;">
</div>
<div class="text-block">
<span style="color: #00b4ff"><em> noun </em></span>
<br>city, state
<br>junior at university
<br>
</div>
</div>
</body>
</html>
codepen https://codepen.io/anon/pen/GZXvOR
I am Creating my personal website but I can not get the drop down to work on desktop then when it is on a mobile devise hide nav and click(using js) to show nav. But its not working only on the Index.html
<div class="content">
<div class="header">
<div class="logo">GM
</div>
<span class="menu-trigger">Menu</span>
<nav class="nav clearfix">
<ul class="clearfix">
<li><a class="active" href="index.html">Home</a>
</li>
<li>About
</li>
<li>Portfolio <i class="fa fa-angle-down fa-1"></i>
<ul class="sub-nav">
<li>Music
</li>
<li>Code
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</nav>
<!-- end of Nav -->
</div>
</div>
CSS:
/**Header**/
.nav {
height: 61px;
background: #381120;
}
.logo a{
float: left;
text-decoration: none;
color: #7e7e7e;
font-size: 43px;
padding-top: 11px;
padding-left: 30px;
}
.nav ul {
margin: 0;
padding: 0;
float: right;
}
.nav ul li {
list-style: none;
float: left;
display: block;
padding: 19px;
}
.nav ul li a {
color: #7e7e7e;
text-decoration: none;
font-size: 25px;
}
.nav ul ul.sub-nav {
display: none;
background: #381120;
width: auto;
position: absolute;
}
.nav ul li:hover > ul {
display: block;
}
.nav ul ul li {
float: none;
padding-left: 24px;
}
.nav ul li a.active {
color: #08a1c7;
}
.nav ul li a:hover {
color: #efefef;
}
and:
.menu-trigger{
padding-top: 16px;
padding-right: 30px;
font-size: 25px;
text-align: center;
display: none;
float: right;
color: #7e7e7e
}
.menu-trigger p{
color: #7e7e7e
}
/**480px**/
#media only screen and (max-width : 480px) {
.menu-trigger{
display: block;
}
.nav, .mobile-nav{
display: none;
}
.nav-expanded{
display: block;
}
.nav ul li{
float: none;
border-bottom: 1px solid #7e7e7e;
}
.nav ul li:last-child{
border-bottom: none;
}
}
Here is the JS sorry I forgot to put it on here:
jQuery(document).ready(function() {
jQuery(".menu-trigger").click(function() {
jQuery(".nav").slideToggle(400, function() {
jQuery(this).toggleClass("nav-expanded").css('display', '');
});
});
});
You really should be able to animate all of this with just CSS. You don't even need jQuery for this, other than for the click action maybe.
Also, and this may not be the case, but in past I have had to write my click handlers like this to bypass some odd bugs. SlideToggle in jQuery can cause some glitchy effects and its not really a great way to do animated menu's. Try to avoid slideToggle().
$("[your-selector]").on("click",function(){
/// do something...
});
I have created a jsfiddle with your code and its seems to work fine. Its rather unclear from what you ask, But what I guess is that your dropdown doesnt work on mobile screen. A problem could be importing jquery in your HTML file. That might solve your problem
jQuery(document).ready(function() {
jQuery(".menu-trigger").click(function() {
jQuery(".nav").slideToggle(400, function() {
jQuery(this).toggleClass("nav-expanded").css('display', '');
});
});
});
Nevermind I fix it I added a
<div class="content">///content goes here</div>
twice causing it to break Thank You for all your help still.
Newbie in JS / jQuery here.
First problem: When page is loading or it is refreshing whole sub-sub menus are blinked for like 0.5sec so they can "hide". I have put the script firstly on the end of "body" tag, but after this blink I've put it in "head" so is there any way to make it actually hide, like really hide, to not be shown when page is on load?
Second problem is when I'm clicking on either blue or green square menu is not sliding smoothly. It's like a bounce effect. Is it because of "hide"? And last problem is with slideDown function. Where shall I use slideUp to make it go back to the position where it hides?
jQuery(document).ready(function($)
{
$(".raid ul").hide();
$(".raid").hide();
$(".wod").one("click", function()
{
$(".wod ul li").slideDown(200);
});
$(".mop").one("click", function()
{
$(".mop ul li").slideDown(200);
});
$(".hfc").click(function()
{
$(".hfc").addClass('x');
$(".hfc ul").slideToggle(200);
});
$(".soo").click(function()
{
$(".soo ul").slideToggle(200);
});
});
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
#progress
{
padding: 0;
float: left;
width: 200px;
height: inherit;
background-color: rgba(0, 0, 0, 0.2);
text-align: center;
box-shadow: 2px 2px 2px 0px black;
background-repeat: no-repeat;
}
h1
{
margin-top: 8px;
border-bottom: 4px solid #00c99a;
padding-bottom: 4px;
}
.expansion
{
text-align-last: center;
width: inherit;
height: 108px;
}
.expansion:first-child
{
margin-top: -20px;
}
.mop, .wod
{
width: inherit;
height: inherit;
}
.wod > ul
{
margin-top: 90px;
}
.mop > ul
{
margin-top: 90px;
}
.wod
{
border-bottom: 5px solid black;
background-color: blue;
}
.mop
{
border-bottom: 5px solid black;
background-color: green;
}
.raid > ul
{
padding-bottom: 10px;
}
h3
{
font-size: 20px;
padding: 10px 0 10px 0;
}
.nhm
{
display: inline-block;
text-align: center;
padding: 4px 20px 1px 20px;
border: 2px solid white;
border-radius: 50px;
cursor: default;
color: white;
font-weight: 300;
}
.hfc-progress, .soo-progress,
{
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
cursor: default;
color: white;
}
.hfc, .soo
{
color: limegreen;
background-color: rgba(37, 65, 23, 0.5);
}
.hfc:hover, .soo:hover
{
cursor: pointer;
color: greenyellow;
}
.x
{
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div id="progress"><h1>Progress</h1>
<div id="expansion">
<ul>
<li class="expansion wod"><br />
<ul>
<li class="raid hfc"><h3>Hellfire Citadel ↓</h3>
<ul>
<li class="hfc-progress">Hellfire Assault
<ul>
<li class="nhm hfcn">N</li>
<li class="nhm hfch">H</li>
<li class="nhm hfcm">M</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="expansion mop"><br />
<ul>
<li class="raid soo"><h3>Siege of Orgrimmar↓</h3>
<ul>
<li class="soo-progress">Immerseus
<ul>
<li class="nhm soon">N</li>
<li class="nhm sooh">H</li>
<li class="nhm soom">M</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
If you really want the elements hidden, use CSS. The CSS can have properties like
.raid ul {
display: none;
}
.raid {
display: none;
}
instead of calling the hide() function in jQuery. This way, if you include the CSS in the head section and keep your JS in the bottom, the blink would not happen (because the browser would keep them hidden by default)