We Keep Coding

Javascript hamburger menu won't stay open

I'm trying to build a sidebar collapsible menu. The goal is to display #sidenav whenever the user clicks on the hamburger menu, and close the #sidenav if the user clicks outside of the menu while the menu is open.
Right now I'm running into an issue where the part of the script that closes the sidenav menu, window.onclick, is being fired whenever the user clicks on the hamburger icon which essentially closing the menu before it can ever open. What am I doing wrong? What is keeping the menu from functioning as I am intending?
var mininav = true;
var sidenav = document.getElementById("sidenav");
function toggleSidenav() {
if (mininav) {
sidenav.style.width = "300px";
this.mininav = false;
} else {
sidenav.style.width = "0px";
this.mininav = true;
}
}
window.onclick = function(event) {
if (mininav == false) {
if (event.target != sidenav) {sidenav.style.width = "0px";}
}
}
nav {
z-index: 10;
display: flex;
align-items: center;
position: fixed;
top: 0; left: 0;
width: 100vw; height: 65px;
font-size: x-large;
font-family: 'Noto Sans JP', sans-serif;
background-color: white;
border-bottom: 1px solid lightgray}
/* -------- [MAIN NAV] -------- */
.mainnav ul {
margin: 0;
margin-left: 250px;
padding: 0;
overflow: hidden;
list-style-type: none}
.mainnav li {float: left}
.mainnav li:hover {background-color: #F6F6F6; border-bottom: 1px solid purple}
.mainnav li a {
display: block;
text-decoration: none;
text-align: center;
color: #5F6368;
font-size: 20px;
padding: 21px 20px;}
/* -------- [SIDE NAV] -------- */
.sidenav .container {
z-index: 11;
position: absolute;
top: 0; left: 0;
width: 0px; height: 100vh;
transition: 0.5s;
background-color: white;
border-right: 1px solid lightgray;
box-shadow: 10px 0px 4px -10px rgba(0,0,0,0.51);}
.sidenav .top, .sidenav .classes {
width: 100%;
padding: 8px 0px;}
.sidenav .top {border-bottom: 1px solid lightgray}
.container ul {
margin: 0;
padding: 0;
overflow: hidden;
list-style-type: none}
.container li {width: 95%}
.container li a {
display: block;
text-decoration: none;
color: #5F6368;
font-size: 20px;
padding: 21px 20px;
margin-bottom: 10px;
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;}
.container li a:hover {background-color: #F2F2F2}
.container li a.active {background-color: #EEEEEE}
/* -------- [MISC SETTINGS] -------- */
.profilepic {margin-right: 15px}
.small-pic img{width: 20px;}
.medium-pic img{width: 40px;}
.hamburger {margin-left: 15px}
.hamburger .line {
width: 22px;
height: 2px;
background-color: darkgray;
margin: 6px 0;}
.is-left {float: left;}
.is-right {margin-left: auto; order: 2;}
.is-circle {clip-path: circle();}
<nav>
<div class='sidenav'>
<div class='hamburger is-left' onclick='toggleSidenav()'>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
</div>
<div id='sidenav' class='container'>
<div class='top'>
<ul>
<li><a href=''>Main Menu</a></li>
</ul>
</div>
<div class='classes'>
<ul>
<li><a class='active' href=''>Class One</a></li>
<li><a href=''>Class Two</a></li>
<li><a href=''>Class Three</a></li>
</ul>
</div>
</div>
</div>
<div class='mainnav'>
<ul>
<li><a href=''>Dash</a></li>
<li><a href=''>Grades</a></li>
<li><a href=''>Tasks</a></li>
<li><a href=''>Skills</a></li>
</ul>
</div>
<div class='profilepic medium-pic is-circle is-right'>
<img src='https://classcolonies.com/resources/pics/students/68.jpg'>
</div>
</nav>

This works for me:
var isToggled = false;
var sidenav = document.getElementById("sidenav");
function toggleSidenav() {
if (!isToggled) {
sidenav.style.width = "300px";
} else {
sidenav.style.width = "0px";
}
isToggled = !isToggled;
}
window.onclick = function(event) {
if (isToggled && !event.target.classList.contains('hamburger') && !event.target.classList.contains('line')) {
toggleSidenav();
}
}
nav {
z-index: 10;
display: flex;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 65px;
font-size: x-large;
font-family: 'Noto Sans JP', sans-serif;
background-color: white;
border-bottom: 1px solid lightgray
}
/* -------- [MAIN NAV] -------- */
.mainnav ul {
margin: 0;
margin-left: 250px;
padding: 0;
overflow: hidden;
list-style-type: none
}
.mainnav li {
float: left
}
.mainnav li:hover {
background-color: #F6F6F6;
border-bottom: 1px solid purple
}
.mainnav li a {
display: block;
text-decoration: none;
text-align: center;
color: #5F6368;
font-size: 20px;
padding: 21px 20px;
}
/* -------- [SIDE NAV] -------- */
.sidenav .container {
z-index: 11;
position: absolute;
top: 0;
left: 0;
width: 0px;
height: 100vh;
transition: 0.5s;
background-color: white;
border-right: 1px solid lightgray;
box-shadow: 10px 0px 4px -10px rgba(0, 0, 0, 0.51);
}
.sidenav .top,
.sidenav .classes {
width: 100%;
padding: 8px 0px;
}
.sidenav .top {
border-bottom: 1px solid lightgray
}
.container ul {
margin: 0;
padding: 0;
overflow: hidden;
list-style-type: none
}
.container li {
width: 95%
}
.container li a {
display: block;
text-decoration: none;
color: #5F6368;
font-size: 20px;
padding: 21px 20px;
margin-bottom: 10px;
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
}
.container li a:hover {
background-color: #F2F2F2
}
.container li a.active {
background-color: #EEEEEE
}
/* -------- [MISC SETTINGS] -------- */
.profilepic {
margin-right: 15px
}
.small-pic img {
width: 20px;
}
.medium-pic img {
width: 40px;
}
.hamburger {
margin-left: 15px
}
.hamburger .line {
width: 22px;
height: 2px;
background-color: darkgray;
margin: 6px 0;
}
.is-left {
float: left;
}
.is-right {
margin-left: auto;
order: 2;
}
.is-circle {
clip-path: circle();
}
<nav>
<div class='sidenav'>
<div class='hamburger is-left' onclick='toggleSidenav()'>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
</div>
<div id='sidenav' class='container'>
<div class='top'>
<ul>
<li><a href=''>Main Menu</a></li>
</ul>
</div>
<div class='classes'>
<ul>
<li><a class='active' href=''>Class One</a></li>
<li><a href=''>Class Two</a></li>
<li><a href=''>Class Three</a></li>
</ul>
</div>
</div>
</div>
<div class='mainnav'>
<ul>
<li><a href=''>Dash</a></li>
<li><a href=''>Grades</a></li>
<li><a href=''>Tasks</a></li>
<li><a href=''>Skills</a></li>
</ul>
</div>
<div class='profilepic medium-pic is-circle is-right'>
<img src='https://classcolonies.com/resources/pics/students/68.jpg'>
</div>
</nav>

Your code is correct but it was not working because of Event Bubbling.
When you click on child element, the event gets propagated.
You can learn more about it What is event bubbling and capturing?.
I added code event.stopPropagation();, now it is working.
var mininav = true;
var sidenav = document.getElementById("sidenav");
function toggleSidenav(event) {
if (mininav) {
sidenav.style.width = "300px";
this.mininav = false;
} else {
sidenav.style.width = "0px";
this.mininav = true;
}
event.stopPropagation();
}
window.onclick = function(event) {
if (mininav == false) {
if (event.target != sidenav) {sidenav.style.width = "0px";}
}
}
nav {
z-index: 10;
display: flex;
align-items: center;
position: fixed;
top: 0; left: 0;
width: 100vw; height: 65px;
font-size: x-large;
font-family: 'Noto Sans JP', sans-serif;
background-color: white;
border-bottom: 1px solid lightgray}
/* -------- [MAIN NAV] -------- */
.mainnav ul {
margin: 0;
margin-left: 250px;
padding: 0;
overflow: hidden;
list-style-type: none}
.mainnav li {float: left}
.mainnav li:hover {background-color: #F6F6F6; border-bottom: 1px solid purple}
.mainnav li a {
display: block;
text-decoration: none;
text-align: center;
color: #5F6368;
font-size: 20px;
padding: 21px 20px;}
/* -------- [SIDE NAV] -------- */
.sidenav .container {
z-index: 11;
position: absolute;
top: 0; left: 0;
width: 0px; height: 100vh;
transition: 0.5s;
background-color: white;
border-right: 1px solid lightgray;
box-shadow: 10px 0px 4px -10px rgba(0,0,0,0.51);}
.sidenav .top, .sidenav .classes {
width: 100%;
padding: 8px 0px;}
.sidenav .top {border-bottom: 1px solid lightgray}
.container ul {
margin: 0;
padding: 0;
overflow: hidden;
list-style-type: none}
.container li {width: 95%}
.container li a {
display: block;
text-decoration: none;
color: #5F6368;
font-size: 20px;
padding: 21px 20px;
margin-bottom: 10px;
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;}
.container li a:hover {background-color: #F2F2F2}
.container li a.active {background-color: #EEEEEE}
/* -------- [MISC SETTINGS] -------- */
.profilepic {margin-right: 15px}
.small-pic img{width: 20px;}
.medium-pic img{width: 40px;}
.hamburger {margin-left: 15px}
.hamburger .line {
width: 22px;
height: 2px;
background-color: darkgray;
margin: 6px 0;}
.is-left {float: left;}
.is-right {margin-left: auto; order: 2;}
.is-circle {clip-path: circle();}
<nav>
<div class='sidenav'>
<div class='hamburger is-left' onclick='toggleSidenav(event)'>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
</div>
<div id='sidenav' class='container'>
<div class='top'>
<ul>
<li><a href=''>Main Menu</a></li>
</ul>
</div>
<div class='classes'>
<ul>
<li><a class='active' href=''>Class One</a></li>
<li><a href=''>Class Two</a></li>
<li><a href=''>Class Three</a></li>
</ul>
</div>
</div>
</div>
<div class='mainnav'>
<ul>
<li><a href=''>Dash</a></li>
<li><a href=''>Grades</a></li>
<li><a href=''>Tasks</a></li>
<li><a href=''>Skills</a></li>
</ul>
</div>
<div class='profilepic medium-pic is-circle is-right'>
<img src='https://classcolonies.com/resources/pics/students/68.jpg'>
</div>
</nav>

Bootstrap - collapsed sidebar by default

I have a project based on bootstrap 3.3.7. What I'm trying to achieve is to have a toggle button connected to sidebar. So when a user clicks the button, a sidebar shows from the left. This is the code which I currently have:
HTML:
<div class="wrapper">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Test</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
</ul>
<ul class="list-unstyled CTAs">
<li>Back to the article</li>
</ul>
</nav>
<!-- Page Content Holder -->
<div id="content">
<button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="glyphicon glyphicon-align-left"></i>
</button>
<div class="container-fluid">
<h2>Collapsible Sidebar Using Bootstrap 3</h2></div></div>
JS:
$(document).ready(function() {
$("#sidebarCollapse").on("click", function() {
$("#sidebar").toggleClass("active");
$(this).toggleClass("active");
});
});
CSS:
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar a,
#sidebar a:hover,
#sidebar a:focus {
color: inherit;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active > a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
a[aria-expanded="false"]::before,
a[aria-expanded="true"]::before {
content: '\e259';
display: block;
position: absolute;
right: 20px;
font-family: 'Glyphicons Halflings';
font-size: 0.6em;
}
a[aria-expanded="true"]::before {
content: '\e260';
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
#content p a {
color:
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
}
The code works but I do have an issue - I want to have the sidebar hidden all the time. So only a click on the button shows it. I have went through a bootstrap docs yet there is no class/info how to enhance this code with such functionality.
thanks for any hints..

I think that you have switch the parameter of active class, if so you can also eliminate the last mediaquery . Try this
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar a,
#sidebar a:hover,
#sidebar a:focus {
color: inherit;
}
#sidebar {
margin-left:-250px;
}
#sidebar.active {
margin-left: 0;
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active > a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
a[aria-expanded="false"]::before,
a[aria-expanded="true"]::before {
content: '\e259';
display: block;
position: absolute;
right: 20px;
font-family: 'Glyphicons Halflings';
font-size: 0.6em;
}
a[aria-expanded="true"]::before {
content: '\e260';
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
#content p a {
color:
}

Multiple dropmenu buttons - Open only clicked button

I found good split dropmenu button script.
Created multiple buttons, and problem is if I click one button then all dropmenus of other buttons open...
So what I want to accomplish is only to open dropmenu that i've clicked not all menus (10post per page so i have 10buttons) that are on page.
Guess I need some id recognition code in my .js.
my script:
$(function() {
var splitBtn = $(".x-split-button");
$("button.x-button-drop").on("click", function() {
if (!splitBtn.hasClass("open"))
splitBtn.addClass("open");
});
$(".x-split-button").click(function(event) {
event.stopPropagation();
});
$("html").on("click", function() {
if (splitBtn.hasClass("open"))
splitBtn.removeClass("open");
});
});
.x-split-button {
position: relative;
display: inline-block;
text-align: left;
margin-top: 20px;
}
.x-button {
position: relative;
margin: 0;
height: 30px;
float: left;
outline: none;
font-weight: 600;
line-height: 27px;
background: #F2F2F2;
border: 1px solid #E0E0E0;
box-shadow: 1px 1px 2px #E0E0E0;
}
.x-button:hover {
cursor: pointer;
background: #E0E0E0;
}
.x-button:active {
background: #D3D3D3;
}
.x-button.x-button-drop {
border-left: 0;
height: 30px;
}
.open > .x-button-drop-menu {
display: block;
}
.x-button-drop-menu {
position: absolute;
top: 27px;
right: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
background-color: #F2F2F2;
color: #000000;
background-clip: padding-box;
border: 1px solid #E0E0E0;
box-shadow: 1px 1px 2px #E0E0E0;
}
.x-button-drop-menu li a {
display: block;
padding: 3px 20px;
clear: both;
font-family: arial;
color: #000000;
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center><font color="green">1st forum post....text goes here....</font><br/>
<span class="x-split-button">
<button class="x-button x-button-main">Admin Options</button>
<button class="x-button x-button-drop">▼</button>
<ul class="x-button-drop-menu">
<li>
Edit
</li>
<li>
Delete
</li>
<li>
Move
</li>
</ul>
</span>
<br/><br/><br/><br/><br/><font color="green">2nd forum post....text goes here....</font><br/>
<span class="x-split-button">
<button class="x-button x-button-main">Admin Options</button>
<button class="x-button x-button-drop">▼</button>
<ul class="x-button-drop-menu">
<li>
Edit
</li>
<li>
Delete
</li>
<li>
Move
</li>
</ul>
</span>
</center>

jQuery $(this) is concerned about the element concerned in this function (Onclick). We use closest() to reach The parent container (.x-split-button) which is the targeted element in this case.
We can also use $(this).parent(".x-split-button").addClass("open");
In other situations, you could use $(this).parents(); when the container is not a direct parent.
$(function() {
var splitBtn = $(".x-split-button");
$("button.x-button-drop").on("click", function() {
if (!($(this).closest(".x-split-button").hasClass("open"))){
splitBtn.removeClass("open");
$(this).closest(".x-split-button").addClass("open");
}else{
$(this).closest(".x-split-button").removeClass("open");
}});
$(".x-split-button").click(function(event) {
event.stopPropagation();
});
$("body").on("click", function() {
if (splitBtn.hasClass("open"))
splitBtn.removeClass("open");
});
});
.x-split-button {
position: relative;
display: inline-block;
text-align: left;
margin-top: 20px;
}
.x-button {
position: relative;
margin: 0;
height: 30px;
float: left;
outline: none;
font-weight: 600;
line-height: 27px;
background: #F2F2F2;
border: 1px solid #E0E0E0;
box-shadow: 1px 1px 2px #E0E0E0;
}
.x-button:hover {
cursor: pointer;
background: #E0E0E0;
}
.x-button:active {
background: #D3D3D3;
}
.x-button.x-button-drop {
border-left: 0;
height: 30px;
}
.open > .x-button-drop-menu {
display: block;
}
.x-button-drop-menu {
position: absolute;
top: 27px;
right: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
background-color: #F2F2F2;
color: #000000;
background-clip: padding-box;
border: 1px solid #E0E0E0;
box-shadow: 1px 1px 2px #E0E0E0;
}
.x-button-drop-menu li a {
display: block;
padding: 3px 20px;
clear: both;
font-family: arial;
color: #000000;
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center><font color="green">1st forum post....text goes here....</font><br/>
<span class="x-split-button">
<button class="x-button x-button-main">Admin Options</button>
<button class="x-button x-button-drop">▼</button>
<ul class="x-button-drop-menu">
<li>
Edit
</li>
<li>
Delete
</li>
<li>
Move
</li>
</ul>
</span>
<br/><br/><br/><br/><br/><font color="green">2nd forum post....text goes here....</font><br/>
<span class="x-split-button">
<button class="x-button x-button-main">Admin Options</button>
<button class="x-button x-button-drop">▼</button>
<ul class="x-button-drop-menu">
<li>
Edit
</li>
<li>
Delete
</li>
<li>
Move
</li>
</ul>
</span>
</center>

Change style of li element on click

I have created a local navigation menu for my web site. It contains 2 li elements as shown on the picture Once you click on the item a black border should be displayed around the href and the name Item should be changed to white with black background.
$(document).ready(function() {
$("li").addClass("liNavA");
$("a").addClass("active");
});
div.figure {
background-color: black;
border-radius: 50%;
width: auto;
}
li.liNav {
list-style-type: none;
display: inline-block;
margin-top: 18px;
margin-left: 4px;
text-align: left;
border: solid 12px black;
border-radius: 24px;
background-color: black
}
li.liNavA {
list-style-type: none;
display: inline-block;
margin-top: 18px;
margin-left: 4px;
text-align: left;
border: solid 12px white;
border-radius: 24px;
color: white;
background-color: white;
}
a.active {
color: white;
text-decoration: none;
}
a.pasive {
color: black;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="localnavDiv">
<ul class="localNav">
<li class="liNav" id="exploreTitle"><a class="active" id="titleLi" id="exploreTitle">Explore</a></li>
<li class="liNavA"><a class="pasive" href="#">Who already joined</a></li>
<li class="liNav" ><a class="active" href="#">Why develop for us </a></li>
</ul>
</div>

<style type="text/css">
div.figure {
background-color: black;
border-radius: 50%;
width: auto;
}
li.liNav {
list-style-type: none;
display: inline-block;
margin-top: 18px;
margin-left: 4px;
text-align: left;
border: solid 2px black;
padding: 5px;
border-radius: 24px;
background-color: #FFFFFF
}
li.liNavA {
list-style-type: none;
display: inline-block;
margin-top: 18px;
margin-left: 4px;
text-align: left;
border: solid 2px white;
padding: 5px;
border-radius: 24px;
color: white;
background-color: #000000;
}
li.liNavA a {
color: white;
}
a.active {
text-decoration: none;
}
a.pasive {
text-decoration: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="localnavDiv">
<ul class="localNav">
<li class="liNav" id="exploreTitle"><a class="active" href="#">Explore</a></li>
<li class="liNav" id="liRight"><a class="pasive" href="#">Who already joined</a></li>
<li class="liNav" id="liLeft"><a class="active" href="#">Why develop for Hue</a></li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function() {
/**
* add event listner for every list-item
*/
$("#exploreTitle").click(function(){
$("#exploreTitle").attr('class', 'liNavA');
$("#liRight").attr('class', 'liNav');
$("#liLeft").attr('class', 'liNav');
})
$("#liRight").click(function(){
$("#liRight").attr('class', 'liNavA');
$("#exploreTitle").attr('class', 'liNav');
$("#liLeft").attr('class', 'liNav');
})
$("#liLeft").click(function(){
$("#liLeft").attr('class', 'liNavA');
$("#liRight").attr('class', 'liNav');
$("#exploreTitle").attr('class', 'liNav');
})
});
</script>

keep submenu on top and keep contents of div from moving around and size

I am following up on this question and answer:
Sub-menu expanding parent div instead of displaying on top
If there is a div below the menu in the example above, how do you keep 1) that div contents from moving around, and 2) the size of the div from moving around, yet keep it responsive?
For example I forked the js fiddle from the link above and created the div id="mytest". I'd like the menu and the "mytest" div to be completely independent when you hover over the "About Me" link. Here is my fork: http://jsfiddle.net/nXqn8/
Here is the code:
<div id="menu">
<ul>
<li><a id="" class="" href="">Home</a></li>
<li><a id="" class="" href="">About Me</a>
<ul class="sub-menu">
<li>Biography</li>
<li>Photo Galery</li>
<li>Foot Print</li>
</ul>
</li>
<li><a id="" class="" href="">Expertise</a></li>
<li><a id="" class="" href="">Projects</a>
<ul class="sub-menu">
<li>Geo 228 Portal</li>
<li>NEP Application</li>
<li>Geo Address Book</li>
<li>Assets Management</li>
</ul>
</li>
<li><a id="" class="" href="">Contact</a></li>
</ul>
</div>
<div id="mytest"> xxxxxxxxxxxxxxxxxxxxxxxxxx Please stop me from moving around!!! xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx </div>
css:
#menu {
position: relative;
font-size: 0.8em;
margin: 0;
padding: 0;
background-color: #666666;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
overflow: visible;
z-index: 2;
height: 35px;
}
#menu ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
z-index: 3;
}
#menu li {
display: block;
width: 120px;
float: left;
border-right: 1px solid #999;
z-index: 4;
}
#menu a {
color: #ffffff;
font-weight: bold;
display: block;
text-align: center;
text-decoration: none;
text-transform: uppercase;
margin: 0;
padding: 10px 20px;
}
#menu a:hover {
color: #000000;
margin: 5px 10px;
padding: 5px 10px;
background-color: #C0C0C0;
border-radius: 10px;
}
#menu ul.sub-menu {
display: none;
position: relative;
}
#menu ul.sub-menu li {
width: 200px;
background-color: #C0C0C0;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: #666666;
}
#menu ul.sub-menu li a {
color: #000;
text-align: center;
margin: 5px 10px;
padding: 5px 10px;
}
#menu ul.sub-menu li a:hover {
color: snow;
background-color: #666666;
}
#menu li:hover ul.sub-menu {
display: block;
z-index: 90;
}
#mytest {
background-color: red;
}
Ultimately, I have after something like the main menus you see at the top of accenture dot com.
Thanks!

#menu li {
position:relative;
}
#menu ul.sub-menu {
display: none;
position: absolute;
left: 0;
top: 100%;
}
#mytest {
float:left;
background-color: red;
width:100%;
text-align: center;
}
DEMO

Define your #menu li position: relative and define your sub menu #menu ul.sub-menu position: absolute; left: 0; top: 100%;
as this css
#menu li {
position:relative;
}
#menu ul.sub-menu {
display: none;
position: absolute;
left: 0;
top: 100%;
}
Demo