I'm currently facing an issue with a script that I can't seem to solve on my own. Essentially, I am attempting to make a div appear after clicking on the "Products" button. Here is what I have so far:
<div id="header">
<div id="headcont">
<div id="main-menu">
<a href="#" id="button-products">Products</a>
</div>
<div id="products-menu">
<a href="#">Jackleg units</a>
<a href="#">Antivandal units</a>
<a href="#">Storage containers</a>
</div>
</div>
</div>
and for the CSS:
body{
background-color:#666;
}
#header{
position:absolute;
top:0px;
background-color: rgba(0, 0, 0, .9);
width:100%;
height:70px;
border-bottom:1px #999 solid;
padding:15px 0;
z-index:200;
}
#headcont{
overflow:hidden;
width: 480px;
margin: 0 auto;
}
#main-menu{
margin-top:55px;
float:right;
}
#main-menu a{
display:block;
width: auto;
font-size:1.7em;
float:left;
margin: 0 10px;
color:#eee;
}
#products-menu{
overflow:hidden;
background-color: rgba(255, 255, 255, .8);
width:980px;
display: none;
}
#products-menu a{
display:block;
width: auto;
background-color:rgba(0, 0, 0, .6);
padding: 5px;
margin: 2px 5px 2px 0;
text-decoration:none;
font-size:1.7em;
float:left;
color:#eee;
}
the major thing - jquery:
$(function() { $('#button-products').on('click', function() { $('#products-menu').css("display:","block"); }); });
To get a better idea of the issue at hand, you can view the example on JSFIDDLE: JSFIDDLE. Thank you in advance for your help.