I have a menu designed to hold some links for a forum. I would like it to open on click and close on click. Here is my code.
/*Custom BBPress admin links menu*/
function wpmudev_bbp_admin_links_in_menu($retval, $r, $args) {
if ( is_user_logged_in() ) {
$menulinks = '<ul id="bbp_custom_links_menu-' . $r["id"] . '" class="bbp_custom_links_menu">';
$menulinks .= '<li class="parent">Options';
$menulinks .= '<ul class="bbp_custom_links_submenu">';
foreach($r['links'] as $key => $val) {
$menulinks .= "<li>{$val}</li>";
}
$menulinks .= '</ul></li></ul>';
echo $r['before'] . $menulinks . $r['after'];
}
}
add_filter('bbp_get_topic_admin_links', 'wpmudev_bbp_admin_links_in_menu', 10, 3);
add_filter('bbp_get_reply_admin_links', 'wpmudev_bbp_admin_links_in_menu', 10, 3);
add_action( 'wp_footer', 'overflow_overriding' );
function overflow_overriding() {
if ( !is_user_logged_in() ) {
}else{
?>
<script type="text/javascript">
jQuery( document ).ready(function() {
jQuery('.bbp-admin-links:even').css({"position": "absolute", "right": "380px"});
jQuery('.bbp-admin-links:even').click(function(e) {
e.preventDefault();
$('ul:first',$(this)).toggleClass('hidden active');
});
});
</script>
<?php
}
}
I have tried using this link as a guide.
https://stackoverflow.com/a/2937603/6147300
I have got all the Jquery correct, but I do not know how to use the CSS to target what I need to target. Also I am unclear on where to put the CSS, does it need to be in the Jquery code or in my CSS editor.
Any suggestions?
this is what you want:
Copy, and save in HTML file to start test it.
<style>
#lang-selector {
font-size: 12px;
height: 21px;
margin: 7px auto 17px auto;
width: 250px;
font-family: Verdana;
}
#lang-selector span {
color: #999;
float: left;
margin: 4px 0 0 87px;
padding-right: 4px;
text-align: right;
}
#lang-selector ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#lang-selector ul li a {
padding: 3px 10px 1px 10px;
}
#lang-selector ul, #lang-selector a {
width: 186px;
}
#lang-selector ul ul {
display: none;
position: absolute;
}
#lang-selector ul ul li{
border-top: 1px solid #666;
float: left;
position: relative;
}
#lang-selector a {
background: url("http://www.gamefriction.com/Coded/images/language_bg.png") no-repeat;
color: #666;
display: block;
font-size: 12px;
height: 17px;
padding: 4px 10px 0 10px;
text-align: left;
text-decoration: none;
width: 166px;
}
#lang-selector ul ul li a {
background: #333;
color: #999;
}
#lang-selector ul ul li a:hover{
background: #c4262c;
color: #fff;
}
</style>
<div id="lang-selector">
<ul>
<li>
Choose a Language
<ul>
<li>English</li>
<li>Deutsch</li>
<li>Italiano</li>
</ul>
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
/* Language Selector */
$(function() {
$("#lang-selector li:first").click(function(){
$('ul:first',this).toggle();
})
});
$(document).ready(function(){
/* Navigation */
$('.subnav-game').hide();
$('.subnav-game:eq(0)').show();
$('.preorder-type').hide();
$('.preorder-type:eq(3)').show();
});
</script>
A good method is to add a class with jQuery and then target the styles of that class with CSS. See the example below.
HTML
<ul id="menu">
<li>Home</li>
<li>Portfolio</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<button id="toggle">Toggle Menu</button>
CSS
#menu {
display: block;
list-style-type: none;
position: absolute;
top: 0;
right: -120px;
width: 100px;
background: #000;
color: #fff;
padding: 10px;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.active {
right: 0px !important;
}
JS
$("#toggle").on('click', function() {
$('#menu').toggleClass("active");
});
https://jsfiddle.net/7f1kxo9f/
Related
I have a horizontal responsive menu that works great, here is link to the page with it
I tried to make a new one with dropdown menus but can't get it to work. Instead of having a dropdown appear on hover, it shows the menus automatically in the line below. Here is link to codepen showing the errors http://codepen.io/mlegg10/pen/akLaVA
$(document).ready(function() {
$('nav').prepend('<div id="responsive-nav" style="display:none">Menu</div>');
$('#responsive-nav').on('click', function() {
$('nav ul').slideToggle()
});
$(window).resize(function() {
if ($(window).innerWidth() < 768) {
$('nav ul li').css('display', 'block');
$('nav ul').hide()
$('#responsive-nav').show()
} else {
$('nav ul li').css('display', 'inline-block');
$('nav ul').show()
$('#responsive-nav').hide()
}
});
$(window).resize();
});
$(document).on('scroll', function() {
if ($(document).scrollTop() > 100) {
$('#nav').addClass('fixed')
} else {
$('#nav').removeClass('fixed')
}
});
body {
margin: 0;
font-family: Georgia;
}
#menu-bar {
width: 100%;
height: auto;
margin: 50px auto 0;
background-color: #ff4500;
text-align: center;
}
#header h1 {
padding: 15px 0;
margin: 0;
}
#nav {
background-color: #036;
text-align: center;
}
#nav ul {
list-style: none;
padding: 0;
margin: 0
}
#nav ul li {
display: inline-block;
padding: 5px 0;
margin: 0;
}
#nav.fixed {
width: 100%;
position: fixed;
top: 0;
left: 0;
}
nav ul li a {
padding: 0 5px;
text-decoration: none;
color: #fff;
}
nav ul li:hover {
background-color: #ff0000;
}
#responsive-nav {
cursor: pointer;
color: #fff;
font-family: Georgia;
font-weight: bold;
padding: 5px 0;
}
#content {
width: 90%;
margin: 0 auto 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #ddd;
padding: 5px;
}
#drop-nav li ul li {
border-top: 0px;
#drop-nav li ul li {
border-top: 0px;
}
ul li a {
display: block;
background: #036;
padding: 5px 10px 5px 10px;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
ul li a:hover {
background: #f00;
}
**this part is in the head tags:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://responsive-nav.com/demo/responsive-nav.js"></script>**
<header id="menu-bar">
<nav id="nav">
<ul>
<li>Home
</li>
<li>Accomodations
</li>
<li>Amenities
</li>
<li>Rates
</li>
<li>Links
<ul>
<li>Dropwdown 1
</li>
<li>Dropdown 2
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</nav>
</header>
Your javascript code has lots of unclosed line endings - you are missing the semicolons quiet often.
Additionally, jQuery will apply nav ul to all elements it finds. Meaning if there is a second occurrence, which is the case in your case, it will be applied to that too.
Instead: you should give your level 0 menu a clean, identifiable class, which you can preciesly target:
<!-- Your new HTML Markup -->
<nav class="mother-of-all-dropdown-lists">
and then in your jQuery:
$('.mother-of-all-dropdown-lists').slideToggle();
Sorry, that I keep writing, there are jQuery selectors wrong as well:
The id / hashtag is missing, so..:
$('nav ul li').css('display','inline-block');
$('nav ul').show()
should be:
$('#nav ul li').css('display','inline-block');
$('#nav ul').show();
I have an animate sidebar which appears when user clicks on a hamburger button.
Here is the structure :
$('#nav-toggle').click(function() {
if($('#nav-toggle').hasClass('active')){
$('.menu').animate({
right: "0px"
}, 200);
}else{
$('.menu').animate({
right: "-285px"
}, 200);
}
});
.menu{
right:-285px;
height:100%;
position: fixed;
width: 285px;
z-index: 1;
background-color: #111111;
}
.menu ul {
border-top: 1px solid #636366;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #636366;
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu li a{
color:white;
}
<div class="menu">
<!-- Menu -->
<ul>
<li>About</li>
<li>Blog</li>
<li>Help</li>
<li>Contact</li>
</ul>
</div>
Actually we can open menu by clicking on #nav-toggle element and close it by clicking on this element too. I'd like to allow user to close this menu by clicking anywhere in the page.
How can I do do that? I tried with e.preventDefault(); in my if statement but it doesn't work.
Thanks!
I suggest to use toggleClass method and animate it by adding transition: .2s to your .menu,
working example:
$('#nav-toggle').click(function(e) {
e.stopPropagation();
$(".menu").toggleClass('bar')
});
$('body').click(function(e) {
if ($('.menu').hasClass('bar')) {
$(".menu").toggleClass('bar')
}
})
.menu {
right: -285px;
height: 100%;
position: fixed;
width: 285px;
z-index: 1;
background-color: #111111;
transition: .2s
}
.menu ul {
border-top: 1px solid #636366;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #636366;
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu li a {
color: white;
}
.bar {
right: 0px;
}
body,
html {
height: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="nav-toggle">Click me</button>
<div class="menu">
<!-- Menu -->
<ul>
<li>About</li>
<li>Blog</li>
<li>Help</li>
<li>Contact</li>
</ul>
</div>
Try this, it will always hide of user clicks on body
$(document).on('click',function(){
if($("#nav-toggle").hasClass("active")){
$('.menu').animate({ right: "-100%" }, 200);
}
});
You can add a parent section to your page and attach a click event same as you have done with #nav-toggle, something like this
$('.parent-section').click(function() {
if($('#nav-toggle').hasClass('active')){
$('.menu').animate({
right: "0px"
}, 200);
} else {
$('.menu').animate({
right: "-285px"
}, 200);
}
});
Or you can add this to body tag directly, If you are going to use this i suggest go with section not body, hope this will help you :)
i've slightly edited your code :
here it is :
$('#nav-toggle').click(function(e) {
e.stopPropagation();
$('.menu').animate({right: "0px"}, 200);});
$(document).click(function(e){$('.menu').animate({right: "-285px"}, 200);});
https://jsfiddle.net/ndxqdqwc/
Complementing the Gintoki's answer
$('#nav-toggle').on('click', function(e) {
e.stopPropagation();
$(".menu").toggleClass('bar');
$('body').one('click', function(e) {
if ($('.menu').hasClass('bar')) {
$(".menu").toggleClass('bar')
}
});
});
This will just remove the listener from body, so well, it's not executing every time.
I'm actually not sure what is better for performance, but I don't like the fact that every click on the website is going through that "if(hasClass)"
$('#nav-toggle').click(function(e) {
e.stopPropagation();
$(".menu").toggleClass('bar')
});
$('body').click(function(e) {
if ($('.menu').hasClass('bar')) {
$(".menu").toggleClass('bar')
}
})
.menu {
right: -285px;
height: 100%;
position: fixed;
width: 285px;
z-index: 1;
background-color: #111111;
transition: .2s
}
.menu ul {
border-top: 1px solid #636366;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #636366;
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu li a {
color: white;
}
.bar {
right: 0px;
}
body,
html {
height: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="nav-toggle">Click me</button>
<div class="menu">
<!-- Menu -->
<ul>
<li>About</li>
<li>Blog</li>
<li>Help</li>
<li>Contact</li>
</ul>
</div>
How to use animation while appending new element using jQuery? I went through couple of answers here but the same method does not work for me. I used show('show') and fadeIn('slow') but it does not seem that animates the new element.
$(document).ready(function() {
$('#add-item').click(add);
function add() {
var newItem = $('#new-item-text');
var span = $('<span>', {
class: 'remove',
click: remove
});
var li = $('<li>', {
class: 'todo-item',
text: newItem.val(),
append: span,
click: completed
});
if (newItem.val()) {
$('ul.todo-list').append(li, $('li.todo-new')).fadeIn('slow');
newItem.val('');
}
}
});
.todo-list {
list-style: none;
padding: 0px;
}
.todo-item {
border: 2px solid #444;
margin-top: -2px;
padding: 10px;
cursor: pointer;
display: block;
background-color: #ffffff;
}
.todo-new {
display: block;
margin-top: 10px;
}
.todo-new input[type='text'] {
width: 260px;
height: 22px;
border: 2px solid #444;
}
.todo-new a {
font-size: 1.5em;
color: black;
text-decoration: none;
background-color: #ffffff;
border: 2px solid #444;
display: block;
width: 24px;
float: right;
text-align: center;
}
.todo-new a:hover {
background-color: #0EB0dd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul class='todo-list'>
<li class='todo-item'>4L 2% Milk
<span class='remove'></span>
</li>
<li class='todo-item'>Butter, Unsalted
<span class='remove'></span>
</li>
<li class='todo-new'>
<input id='new-item-text' type='text' />
<a id='add-item' href='#'>+</a>
</li>
</ul>
To animate, you should start by hiding the elements, for instance by setting:
display: none;
Then fadeIn() will animate and set display: block;
I have used JavaScript to create 3 clickable drop-down menu button in a webpage. when I click one button, script is works well. I can see the following menu is displayed. When I another button, the following menu is displayed. however, the previous menu is still there.
Here is my script. Hope someone can help me. Thank you!
<script type="text/javascript" >
$(document).ready(function() {
$(".account").click(function() {
var X = $(this).attr('id');
if (X == 1) {
$(".submenu").hide();
$(this).attr('id', '0');
} else {
$(".submenu").show();
$(this).attr('id', '1');
}
});
//Mouse click on sub menu
$(".submenu").mouseup(function() {
return false
});
//Mouse click on my account link
$(".account").mouseup(function() {
return false
});
//Document Click
$(document).mouseup(function() {
$(".submenu").hide();
$(".account").attr('id', '');
});
});
</script>
// CSS
.dropdown
{
color:#000;
margin: 0px 22px 0 0;
width: 300px;
height: 30px;
text-align:center;
}
.submenu
{
background:#FFF ;
position: absolute;
top: 118px;
left: 515px;
z-index: 100;
width: 250px;
display: none;
border-radius: 6px;
border: outset 2px #0066FF;
box-shadow: 0 0px 0px rgba(0, 0, 0, 0.05);
}
.dropdown li a
{
color:#555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration:none;
margin-top:-5px;
}
.dropdown li a:hover
{
background:#155FB0;
color: #FFFFFF;
text-decoration: none;
}
a.account
{
font-size: 18px;
line-height: 10px;
color: #000;
border: ridge 2px #0066FF;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 0px;
height: 20px;
width: 300px;
margin: 0px 0 0 0px;
text-align:center;
text-decoration: none;
background: url(images-new/arrow.png) 275px 9px no-repeat;
cursor:pointer;
}
.root
{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top:1px solid #dedede;
}
// html
<div class="dropdown">
<a class="account" >My Account</a>
<div class="submenu">
<ul class="root">
<li ><a href="#Dashboard" >Dashboard</a></li>
<li ><a href="#Profile" >Profile</a></li>
<li >Settings</li>
<li >Send Feedback</li>
</ul>
</div>
</div>
My personal recommendation is to do this with with a combination of JS & CSS.
You should use an active class to hide and show your elements:
//JS
$('.menu a').on('click', function({
$('.menu a').removeClass('active');
$(this).addClass('active');
});
// CSS
.active .submenu {
display: block;
}
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);
}
});
});