We Keep Coding

Open/Close menu On click using only javascript no jquery

This is my html file
<form id="form1" runat="server">
<div class ="mvbar">
<ul>
<li>Home</li>
<li>About</li>
<li class="pjlist" onclick="load">Projects
<div class="sub1">
<ul>
<div class="arrow1"></div>
<li>Projects1</li>
<li>Projects2</li>
<li>Projects3</li>
</ul>
</div>
</li>
<li class="svlist" onclick="load">Services
<div class="sub2">
<ul>
<div class="arrow2"></div>
<li>Services1</li>
<li>Services2</li>
<li>Services3</li>
<li>Services4</li>
<li>Services5</li>
</ul></div>
</li>
<li>Contact Us</li>
</ul>
</div>
</form>
and this is my css class
.mvbar ul {
list-style:none;
margin:0;
padding:0;
}
.mvbar li {
float:left;
width:15%;
text-align:center;
background-color:grey;
border-right:1px solid white;
position:relative;
}
.mvbar li ul{
position:absolute;
top:30px;
}
.mvbar li ul li{
float:none;
width:210%;
text-align:left;
padding-left:4px;
}
.mvbar a {
font-family:'Meiryo UI',Verdana,sans-serif;
color:black;
text-decoration:none;
display:block;
}
.arrow1 {
width:0;
height:0;
border-left:12px solid transparent;
border-right:12px solid transparent;
border-bottom:12px solid grey;
position:relative;
right:-80%;
}
.arrow2 {
width:0;
height:0;
border-left:12px solid transparent;
border-right:12px solid transparent;
border-bottom:12px solid grey;
position:relative;
right:-80%;
}
.sub1 {
visibility:hidden;
}
.sub2 {
visibility:hidden;
}
I can do the same thing in css but requires many exceptions to be added so as to work in each and every browser but javascript is something that I haven't used before and I was suggested that it can be fairly easy to do with it.
So please can someone tell me how to open/close the sub-menu using only javascript.
Thanks in advance!!!

Try this it will work on 'hover' event not on 'click' but full css.
.mvbar ul {
list-style:none;
margin:0;
padding:0;
}
.mvbar li {
float:left;
width:15%;
text-align:center;
background-color:grey;
border-right:1px solid white;
position:relative;
}
.mvbar li ul{
position:absolute;
top: 100%;
width: 50%;
}
.mvbar li ul li{
float:none;
width:210%;
text-align:left;
padding-left:4px;
}
.mvbar a {
font-family:'Meiryo UI',Verdana,sans-serif;
color:black;
text-decoration:none;
display:block;
}
.arrow2,
.arrow1 {
width:0;
height:0;
border-left:12px solid transparent;
border-right:12px solid transparent;
border-bottom:12px solid grey;
position:relative;
right:-80%;
}
.sub1,
.sub2
{
visibility:hidden;
}
ul li:hover div
{
visibility: visible;
}
ul li:hover ul
{
visibility: visible;
}

Try this:
<style>
.mvbar ul {
list-style:none;
margin:0;
padding:0;
}
.mvbar li {
float:left;
width:15%;
text-align:center;
background-color:grey;
border-right:1px solid white;
position:relative;
}
.mvbar li ul{
position:absolute;
top: 100%;
width: 50%;
}
.mvbar li ul li{
float:none;
width:210%;
text-align:left;
padding-left:4px;
}
.mvbar a {
font-family:'Meiryo UI',Verdana,sans-serif;
color:black;
text-decoration:none;
display:block;
}
.arrow2,
.arrow1 {
width:0;
height:0;
border-left:12px solid transparent;
border-right:12px solid transparent;
border-bottom:12px solid grey;
position:relative;
right:-80%;
}
.sub1,
.sub2
{
visibility: hidden;
}
</style>
<form id="form1" runat="server">
<div class ="mvbar">
<ul>
<li>Home</li>
<li>About</li>
<li id="pjlist">Projects
<div class="sub1">
<ul>
<div class="arrow1"></div>
<li>Projects1</li>
<li>Projects2</li>
<li>Projects3</li>
</ul>
</div>
</li>
<li id="svlist" onclick="load">Services
<div class="sub2">
<ul>
<div class="arrow2"></div>
<li>Services1</li>
<li>Services2</li>
<li>Services3</li>
<li>Services4</li>
<li>Services5</li>
</ul></div>
</li>
<li>Contact Us</li>
</ul>
</div>
</form>
</body>
</html>
<script>
var myMenu = document.getElementById("pjlist");
var open = false;
myMenu.addEventListener("click", function()
{
if(open)
{
//then close
open = !open;
var mySubMenu = myMenu.getElementsByTagName('div');
mySubMenu[0].style.visibility = 'hidden';
}
else
{
//open
open = !open;
var mySubMenu = myMenu.getElementsByTagName('div');
mySubMenu[0].style.visibility = 'visible';
}
});
</script>
You can use
var myMenus = document.getElementsByClassName()
to add the event listner on all your menu children.
Good Luck

How to expand and collapse a responsive mobile menu

I have created a responsive menu, all that is left is to make it toggle. I am unsure as how to show the menu when the word menu is pressed. By default the menu is collapsed, then when the menu button is pressed it expands and when the button is pressed again it collapases.
Could someone please help me out as I am new and unsure about this. I have uploaded my project onto jsfiddle. link
http://jsfiddle.net/bLbdavqu/2/
HTML:
<div id="nav"><!--nav-->
<div id="pull">
Menu
</div>
<ul>
<li>Home</li>
<li class="active">About Gnosis
<ul>
<li>What is Gnosis</li>
<li>Origins of Gnosis</li>
<li>Foundations</li>
</ul>
</li>
<li>Articles</li>
<li>FAQ</li>
<li>Courses</li>
<li>Centres</li>
<li>International</li>
</ul>
</div><!--/nav-->
CSS:
body {
background:brown;
}
#pull {
display:none;
float:left;
height:auto;
width:100%;
}
#pull img {
float:right;
}
#nav{
float:left;
height:155px;
width:63%;
background:url(../images/top-banner.png) no-repeat;
background-position:bottom;
background-size:100%;
position:relative;
}
#nav ul {
height:auto;
width:100%;
list-style-type:none;
position:absolute;
bottom:0;
*zoom:1;
}
#nav ul li {
float:left;
padding-left:20px;
position:relative;
}
#nav ul li a {
font-family:Trajan-Pro;
font-size:0.9em;
color:#fff;
text-decoration:none;
}
#nav ul li a:hover {
color:#d2aa76;
border-bottom:2px solid #d2aa76;
padding-bottom:5px;
}
#nav ul li:hover > a {
color:#d2aa76;
border-bottom:2px solid #d2aa76;
padding-bottom:5px;
}
/*1st level sub-menu */
#nav ul ul {
display:none;
}
#nav ul li:hover > ul {
height:auto;
width:180px;
display:block;
}
#nav ul ul li:hover > a {
color:#d2aa76;
border-bottom:none;
}
#nav ul ul {
padding:0;
position:absolute;
top:100%;
padding-top:15px;
}
#nav ul ul li {
float:none;
position:relative;
padding:7px 0px;
border-top:1px solid #000;
background: #423d33;
background: linear-gradient(top, #423d33 0%, #4a4843 40%);
background: -moz-linear-gradient(top, #423d33 0%, #4a4843 40%);
background: -webkit-linear-gradient(top, #423d33 0%,#4a4843 40%);
-webkit-box-shadow:0px 5px 14px rgba(50, 50, 50, 0.75);
-moz-box-shadow:0px 5px 14px rgba(50, 50, 50, 0.75);
box-shadow:0px 5px 14px rgba(50, 50, 50, 0.75);
transition: all 300ms cubic-bezier(0.175,0.885,0.32,1.275) 0;
}
#nav ul ul li a {
font-size:0.8em;
padding-left:15px;
}
#nav ul ul li a:hover {
border-bottom:none;
}
#media screen and (max-width: 1900px) {
#logo {
height:95px;
width:100%;
background:none;
}
#logo h1 {
top:0;
margin:0;
padding-top:10px;
}
#header-container {
height:auto;
}
#pull {
display:block;
}
#nav {
height:100%;
width:100%;
background:none;
margin:0;
padding:0;
clear:both;
}
#nav ul {
height:100%;
position:static;
margin:0;
padding:0;
display:block;
}
#nav ul > li {
float: none;
}
#nav ul li {
padding-left:0px;
}
#nav ul li a {
display:block;
padding: 9px 9px;
position: relative;
z-index:100;
}
#nav ul ul {
position:relative;
top:0;
bottom:0;
margin:0;
padding:0;
}
#nav ul li:hover > ul {
height:auto;
width:100%;
}
#nav ul ul li {
border-top:none;
background: #615f5b;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
}
#nav ul ul li a {
display: block;
padding-left:30px;
position: relative;
z-index: 100;
}
#nav ul > li.hover > ul , .nav li li.hover ul {
position: static;
}
}

You can use javascript to change the attribute:
I made a jsfiddle: http://jsfiddle.net/bLbdavqu/3/
function show(){
var show = document.getElementById('the_menu');
show.setAttribute('style','display:inline');
}
You can wrap it inside a div to make it easier and then change the display from none to inline. Question: do you want to give users the change to hide the menu when they click again on menu?
Or, if you are ready to use jquery, just use toggle:
$(document).ready(function(){
$('button').click(function () {
$("#toggle").toggle();
});});
http://jsfiddle.net/bLbdavqu/5/

<div id="nav"><!--nav-->
<div id="pull">
Menu
</div><br/><br/>
<div id="the_menu">
<ul>
<li>Home</li>
<li class="active">About Gnosis
<ul>
<li>What is Gnosis</li>
<li>Origins of Gnosis</li>
<li>Foundations</li>
</ul>
</li>
<li>Articles</li>
<li>FAQ</li>
<li>Courses</li>
<li>Centres</li>
<li>International</li>
</ul>
</div><!--/nav-->
</div>
Script
<script>
function show(ValueToggle){
if(ValueToggle==1){
$('#the_menu').show();
$('#pulls').attr('onClick','show(0)');
} else {
$('#the_menu').hide();
$('#pulls').attr('onClick','show(1)');
}
}
</script>

You can use JQuery to toggle Menu http://jsfiddle.net/bLbdavqu/8/
Just Change the CSS of the ul.
Hide List- $( "#mylist" ).css("display","none");
Show List- $( "#mylist" ).css("display","block");

I think you want to show the menu items("Home","About Gnosis",etc) on click of link "menu" and
again hide these items on click of link "menu" . I made a jsfiddle for you http://jsfiddle.net/Tushar490/kL1dgvmr/6/
<div id="nav"><!--nav-->
<div id="pull">
Menu
</div>
<div id="bs-example-navbar-collapse-2">
<ul>
<li>Home</li>
<li class="active">About Gnosis
<ul>
<li>What is Gnosis</li>
<li>Origins of Gnosis</li>
<li>Foundations</li>
</ul>
</li>
<li>Articles</li>
<li>FAQ</li>
<li>Courses</li>
<li>Centres</li>
<li>International</li>
</ul>
</div>
</div><!--/nav-->
Script :-
$(document).ready(function () {
$("#pull").on('click',function () {
$("#bs-example-navbar-collapse-2").toggle();
});
});
In CSS you just need to remove "float:left;" from "#pull" .
Hope this would help to you !!

here is the solution please see the code at
$(document).ready(function(){
$('#test').hide();$('#pull').click(function () {$("#test").toggle();});});
http://jsfiddle.net/bLbdavqu/12/
the updation of your requirements.

centering links in a drop down javascript menu

I have a drop down menu that has sub menus, the entire menu spans the whole width of the browser, right now the links are all positioned to the left of the screen. What I would like is my links to be all in the center of the screen, with the orange background still spanning the entire width of the browser.
Here is the code:
inside the head goes the javascript and the css, and the rest in the body:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#menu li").hover(function(){
$(this).children(":hidden").slideDown();
},function(){
$(this).parent().find("ul").slideUp();
});
});
</script>
<style>
#menu{
height: 30px;
background-color:#F90;
}
#menu li li:hover{
background-color:yellow;
cursor:pointer;
}
#menu ul, #menu li{
list-style-type:none;
padding:0;
margin:0;
}
#menu li{
float:left;
width:120px;
list-style-type:none;
line-height:30px;
text-align:center;
}
#menu li ul{
position:absolute;
background-color:#f90;
display:none;
}
#menu li li{
float:none;
padding:2px;
}
#menu a{
color:#000;
text-decoration:none;
}
</style>
<div id="menu">
<ul>
<li>Home</li>
<li>Info
<ul>
<li>example</li>
<li>Submenu2</li>
<li>Submenu3</li>
</ul>
</li>
<li>Portfolio
<ul>
<li>Submenu1</li>
<li>Submenu2</li>
<li>Submenu3</li>
</ul>
</li>
</ul>
</div>

Add margin: auto and display: table:
css
#menu{
height: 30px;
background-color:#F90;
width:100%;
}
#menu li li:hover{
background-color:yellow;
cursor:pointer;
}
#menu ul, #menu li{
list-style-type:none;
padding:0;
margin:auto;/*Add this*/
display: table;/*Add this*/
}
#menu li{
float:left;
width:120px;
list-style-type:none;
line-height:30px;
text-align:center;
}
#menu li ul{
position:absolute;
background-color:#f90;
display:none;
}
#menu li li{
float:none;
padding:2px;
}
#menu a{
color:#000;
text-decoration:none;
}
fiddle

how to center dropdown menu when position is absolute for dropdown menu

my dropdown menu has position absolute and I want to center my dropdown menu to its respective li.I dont want to set margin statically because it will affect to other menu as well.
HTML
<div class="top_nav">
<!--naviagation top Begins-->
<ul>
<li id="active">
<img src="images/home.png" />home
<!-- <div class="DDmenu" id="hmedd" style="display:none">
<ul>
<li>Dummy1</li>
<li>Dummy2</li>
<li>Dummy3</li>
</ul>
</div>-->
<div class="clear"></div>
<div class="current_menu"></div>
</li>
<li id="abt" onmouseover="showmenu('abtdd');" onmouseout="hidemenu('abtdd');" >
about us
<div class="DDmenu" id="abtdd" style="display:none">
<ul>
<li>Dummy1</li>
<li>Dummy2</li>
<li>Dummy3</li>
</ul>
</div>
</li>
<li id="invent" onmouseover="showmenu('inventdd');" onmouseout="hidemenu('inventdd');">
inventions
<div class="DDmenu" id="inventdd" style="display:none">
<ul>
<li>Dummy Invent1</li>
<li>Dummy Invent2</li>
<li>Dummy Invent3</li>
</ul>
</div>
</li>
<li id="archi" onmouseover="showmenu('archidd');" onmouseout="hidemenu('archidd');">
architectural
<div class="DDmenu" id="archidd" style="display:none">
<ul>
<li>Dummy Architecture1</li>
<li>Dummy Architecture2</li>
<li>Dummy Architecture3</li>
</ul>
</div>
</li>
<li id="artli" onmouseover="showmenu('artlidd');" onmouseout="hidemenu('artlidd');">
art pieces
<div class="DDmenu" id="artlidd" style="display:none">
<ul>
<li>Dummy art1</li>
<li>Dummy art2</li>
<li>Dummy art3</li>
</ul>
</div>
</li>
<li id="caravanli" onmouseover="showmenu('caravanlidd');" onmouseout="hidemenu('caravanlidd');">
caravan
<div class="DDmenu" id="caravanlidd" style="display:none">
<ul>
<li>Dummy caravan1</li>
<li>Dummy caravan2</li>
<li>Dummy caravan3</li>
</ul>
</div>
</li>
<li id="tab">
tables
</li>
</ul>
<!--naviagation top Ends-->
</div>
CSS:
.top_nav
{
width:100%;
height:30px;
/*margin-left:130px;*/
}
.top_nav ul
{
padding:0;
margin:0 0 0 68px;
}
.top_nav ul li#active
{
float:left;
position:relative;
padding:5px 0 0 0;
background: #c2cca2;
margin:0 8px;
color:#000;
list-style:none;
}
.top_nav ul li
{
float:left;
position:relative;
padding:12px 0 7px 35px; /*added padding top+5 to add space between bg and text*/
margin:0 8px;
list-style:none;
}
.top_nav ul li a
{
text-decoration:none;
text-transform:capitalize;
color:#fff;
font-size:14px;
font-weight:bold;
padding-right:6px;
vertical-align:baseline;
}
.top_nav ul li:hover a{color:#000;}
.top_nav ul li ul li a{color:#FFF!important;}
.top_nav ul li ul li:hover a{color:#000!important;}
.top_nav ul li a#active
{
text-decoration:none;
text-transform:capitalize;
color:#000;
font-size:14px;
font-weight:bold;
padding-right:6px;
vertical-align:baseline;
}
/*.top_nav ul li:hover
{
/*background:#c2cca2;
background:url(../images/menu_bg.png) left top repeat-y;
}*/
.top_nav ul li#abt
{
background:#c2cca2;
}
.top_nav ul li#invent
{
background:#c2cca2;
height:19px;
}
.top_nav ul li#archi
{
background:#c2cca2;
height:19px;
}
.top_nav ul li#artli
{
background:url(../images/art.png) 5px 5px no-repeat;
height:19px;
}
.top_nav ul li#caravanli
{
background:#c2cca2;
height:19px;
}
.top_nav ul li#tab
{
background:#c2cca2;
height:19px;
}
.top_nav ul li#abt:hover
{
background:#c2cca2;
color:#000 !important;
height:19px;
}
.top_nav ul li#abt:hover>a:hover{color:inherit;}
.top_nav ul li:hover
{
color:#000;
}
.top_nav ul li#invent:hover
{
background:#c2cca2;
color:#000;
}
.top_nav ul li#archi:hover
{
background:#c2cca2;
color:#000;
}
.top_nav ul li#artli:hover
{
background:#c2cca2;
color:#000;
}
.top_nav ul li#caravanli:hover
{
background:#c2cca2;
color:#000;
}
.top_nav ul li#tab:hover
{
/*background:#c2cca2;*/
background:#c2cca2;
color:#000;
}
/*.top_nav ul li a:hover
{
background:#c2cca2;
padding:16px 6px 2px 0;
padding:16px 6px 0 0\0/;
}*/
.top_nav ul li img
{
/*float:left;
position:relative;*/
padding:0 4px 0 5px;
}
JS
function showmenu(idm)
{
document.getElementById(idm).style.display='';
}
function hidemenu(idmn)
{
document.getElementById(idmn).style.display='none';
}
any suggestion would be appreciated.

hi i have a suggestion for you why not you use a navigation code without javascript try this
let me know if you have any issue or you want to use only javascript navigation
go this below link
http://jsfiddle.net/sarfarazdesigner/pNAkf/
or u can copy this code
css code :
*{margin:0; padding:0}
body{font-family:Arial, Helvetica, sans-serif; font-size:14px; background:#f7f7f7;}
#wrapper{width:980px; margin:50px auto;}
#nav{list-style:none; background:#333; height:30px; line-height:30px;}
ul#nav > li{
float:left;
border-right:1px solid #ccc;
position:relative;
}
ul#nav li a{
padding:0 15px;
display:block;
text-decoration:none;
color:#fff;
}
#nav li a:hover{
background:#ccc;
}
ul.subnavi{
list-style:none;
position: absolute;
left: 0;
background: #fff;
display:none;
}
ul.subnavi li{
display:block;
width:120px;
float:none;
}
ul#nav li ul.subnavi li a{
color:#333;
}
ul#nav li ul.subnavi li a:hover {
background:#333;
color:#fff;
}
#nav li:hover ul{
display:block;
}
html code is:
<div id="wrapper">
<ul id="nav">
<li>Home</li>
<li>Services
<ul class="subnavi">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Products</li>
<li>FaQs</li>
<li>Contact
<ul class="subnavi">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Blog</li>
</ul>
</div>

your css for .top_nav ul affects all the ul in the topnav class
try adding this to your css
.DDmenu
{
background: none repeat scroll 0 0 #DDDDDD; // just to show your result
display: none;
margin-left: -24px;
position: absolute;
}

dropdown menu in IE7,8 needs fixin'

I've had lots of success in getting IE to play nice in the past, but I'm buffaloed here. The dropdown menu is visible and works, but it's having some margin/padding issues and no matter what kind of conditional statement or hack I try to employ, it won't straighten out.
Example page: www.erisdesigns.net
HTML (links removed so that I can post):
<div id="wrapper">
<div id="header">
<ul id="nav">
<dl class="dropdown">
<dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)"></dt>
<dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</dd>
</dl>
<dl class="dropdown">
<dt id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)"></dt>
<dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</dd>
</dl>
</ul>
</div>
CSS:
#nav {
top:80px;
width:65%;
margin-left:600px;
padding:0;
background:#999;
text-align:center;
list-style:none;
position:relative;
z-index:3;
}
.dropdown {float:left; text-align:center; font-size:14px; padding-right:5px; color:#FFF;}
.dropdown dt {width:175px; padding:8px; font-weight:bold; cursor:pointer; background:transparent;}
.dropdown dt:hover {background:transparent; color:#000;}
.dropdown dd {position:absolute; width:175px; display:none; background:transparent; z-index:200; opacity:0;}
.dropdown ul {width:175px; margin-top:23px; list-style:none;}
.dropdown li {display:inline-block; margin-left:-108px; float:left; padding-left:35px; text-align:left;}
.dropdown a, .dropdown a:active, .dropdown a:visited {display:inline-block; padding:5px 0px 10px 15px; color:#CCC; text-decoration:none; background:#999; width:175px; float:left;}
.dropdown a:hover {background:#999; color:#000;}
.dropdown a.menu {background:transparent; width:200px; float:left; text-align:left; color:#FFF;}
.dropdown a.menu:hover {color:#000}

Imo too much markup. Try replacing <ul id="nav"> with <div id="nav"> since you are not wrapping anything with <li></li> so IE might have some problem with that.