We Keep Coding

Javascript menu on click

I have a div with an image and a hidden navbar inside it. When i click on the div i want it to show the hidden menu but for some reason it doesnt work. Ideally, i would like the navbar to slide out from the right but at the moment just want it to appear wehn I click the button.
The menu is hidden using display: none; and i tried to get it to reapper using the javascript .style but for some reason it will not work.
My Code
var menu = document.querySelectorAll(".navigation-mobile");
function onMenuClick() {
menu.style.display = "inline";
}
.navigation-mobile {
display: none;
list-style-type: none;
width: 300px;
overflow: hidden;
float: right;
position: relative;
z-index: 1;
background-color: #2a3b4d;
height: 100%;
top: -20px;
padding-left: 0;
}
.navigation-mobile a:hover {
text-decoration: none;
}
.nav-elements-mobile {
font-family: 'Lato', sans-serif;
font-size: 16px;
padding: 10px;
padding-left: 0;
padding-bottom: 20px;
padding-top: 20px;
border-bottom: 1px solid white;
padding-left: 10px;
}
a .nav-elements-mobile {
display: block;
color: #ffffff;
width: 300px;
}
a .nav-elements-mobile:hover {
background-color: #243342;
}
.mobile-nav-button {
display: none;
position: relative;
top: 15px;
right: 25px;
width: 35px;
height: 35px;
float: right;
}
#menu-icon {
width: 30px;
height: 30px;
}
.mobile-nav-button:hover {
cursor: pointer;
}
#media screen and (max-width: 1040px) {
.navigation {
display: none;
}
.mobile-nav-button {
display: inline;
}
}
<div class="mobile-nav-button" onclick="onMenuClick();">
<img id="menu-icon" src="Images/Home Page/MenuButton.png" />
<ul class="navigation-mobile">
<a href="">
<li class="nav-elements-mobile">Home</li>
</a>
<a href="">
<li class="nav-elements-mobile">Find a Team</li>
</a>
<a href="">
<li class="nav-elements-mobile">Contact Us</li>
</a>
<a href="">
<li class="nav-elements-mobile">Gallery</li>
</a>
<a href="">
<li class="nav-elements-mobile">Forms</li>
</a>
</ul>
</div>

document.querySelectorAll returns you node list of all the matching elements. And there is no any property of style on the node list. What you need is document.querySelector which will return you just the first matching node and you can apply style properties to hide, show or whatever.
Or you can use document.querySelectorAll(selector)[0] to get the first selector if you want
ps. If you want to add the sliding effect. It would be easy with jquery. Just replace the menue.style.display=block with $(".navigation-mobile").slideDown() and that should give you sliding affect
var menu = document.querySelector(".navigation-mobile");
function onMenuClick() {
menu.style.display = "block";
}
.navigation-mobile {
display: none;
list-style-type: none;
width: 300px;
overflow: hidden;
float: right;
position: relative;
z-index: 1;
background-color: #2a3b4d;
height: 300px;
top: -20px;
padding-left: 0;
}
.navigation-mobile a:hover {
text-decoration: none;
}
.nav-elements-mobile {
font-family: 'Lato', sans-serif;
font-size: 16px;
padding: 10px;
padding-left: 0;
padding-bottom: 20px;
padding-top: 20px;
border-bottom: 1px solid white;
padding-left: 10px;
}
a .nav-elements-mobile {
display: block;
color: #ffffff;
width: 300px;
}
a .nav-elements-mobile:hover {
background-color: #243342;
}
.mobile-nav-button {
display: none;
position: relative;
top: 15px;
right: 25px;
width: 35px;
height: 35px;
float: right;
}
#menu-icon {
width: 30px;
height: 30px;
}
.mobile-nav-button:hover {
cursor: pointer;
}
#media screen and (max-width: 1040px) {
.navigation {
display: none;
}
.mobile-nav-button {
display: inline;
}
}
<div class="mobile-nav-button" onclick="onMenuClick();">
<img id="menu-icon" src="Images/Home Page/MenuButton.png" />
<ul class="navigation-mobile">
<a href="">
<li class="nav-elements-mobile">Home</li>
</a>
<a href="">
<li class="nav-elements-mobile">Find a Team</li>
</a>
<a href="">
<li class="nav-elements-mobile">Contact Us</li>
</a>
<a href="">
<li class="nav-elements-mobile">Gallery</li>
</a>
<a href="">
<li class="nav-elements-mobile">Forms</li>
</a>
</ul>
</div>

How to apply css rules for hidden submenu?

How to apply the css rules for hidden submenu? I've tried to add some JS, but there is a problem as it doesn't work.
Below there are the samle of the code I work about. Idea is that on the click to anchor text 'A' it should be shown a submenu. Thanks in advance for any advices.
var sub=document.querySelector("#subBox"),
subToggle=document.querySelector("#submenu");
if (subToggle){
subToggle.addEventListener("click",
function(e){
if(sub.className=="open"){
sub.className="";
}else{
sub.className="open";
}
e.preventDefault();
}, false );
}
body {
background: #fff;
font-family: 'Verdana', sans;
color: #fff;
text-align: center;
}
#media only screen and (max-width:768px){
body{font-size:16px;}
}
#media only screen and (min-width:769px){
body{font-size:32px;}
}
ul li{list-style-type: none;}
li{display:inline;}
a, li a{
text-decoration: none;
outline: none;
color:#fff;
}
#menu{
width:100vw;
height:100vh;
display:block;
position:absolute;
top:0;
left:0;
background:#eacebe;
overflow:hidden;
}
#subBox{
max-width:0;
max-height:0;
overflow:hidden;
}
#subBox .open{
width:200px;
height:200px;
display:block;
position:relative;
background:gray;
color:#fff;
}
.skip{
clip: rect(0 0 0 0);
margin: -1px;
overflow:hidden;
display: none;
position: absolute;
top: -1px;
left: -1px;
z-index: -1;
}
<body>
<h1 class='skip'>Exploration of css rules of the hidden submenu</h1>
<div id='nav'>
<nav nav ul>
<h2 class='skip'>Menu with one submenu</h2>
<div id='menu'>
<ul>
<li id='submenu'>
<a href='/a'>A <!--A-->
<div id="subBox">
<ul>
<li><a href='/aOne'>1</a><li> <!--A/1-->
<li><a href='/aTwo'>2</a></li> <!--A/2-->
<li><a href='/aThree'>3</a></li> <!--A/3-->
</ul>
</div>
</a>
</li>
<li><a href='/b'>B</a><li> <!--B-->
<li><a href='/c'>C</a></li> <!--C-->
</ul>
</div>
</nav>
</div>
</body>

You were close. You're applying the .open class to #subBox, so change your selector to #subBox.open.
var sub=document.querySelector("#subBox"),
subToggle=document.querySelector("#submenu");
if (subToggle){
subToggle.addEventListener("click",
function(e){
if(sub.className=="open"){
sub.className="";
}else{
sub.className="open";
}
e.preventDefault();
}, false );
}
body {
background: #fff;
font-family: 'Verdana', sans;
color: #fff;
text-align: center;
}
#media only screen and (max-width:768px) {
body {
font-size: 16px;
}
}
#media only screen and (min-width:769px) {
body {
font-size: 32px;
}
}
ul li {
list-style-type: none;
}
li {
display: inline;
}
a,
li a {
text-decoration: none;
outline: none;
color: #fff;
}
#menu {
width: 100vw;
height: 100vh;
display: block;
position: absolute;
top: 0;
left: 0;
background: #eacebe;
overflow: hidden;
}
#subBox {
max-width: 0;
max-height: 0;
overflow: hidden;
}
#subBox.open {
width: 200px;
height: 200px;
display: block;
position: relative;
background: gray;
color: #fff;
overflow: visible;
max-height: 100%;
min-height: 100%;
}
.skip {
clip: rect(0 0 0 0);
margin: -1px;
overflow: hidden;
display: none;
position: absolute;
top: -1px;
left: -1px;
z-index: -1;
}
<body>
<h1 class='skip'>Exploration of css rules of the hidden submenu</h1>
<div id='nav'>
<nav nav ul>
<h2 class='skip'>Menu with one submenu</h2>
<div id='menu'>
<ul>
<li id='submenu'>
<a href='/a'>A <!--A-->
<div id="subBox">
<ul>
<li><a href='/aOne'>1</a>
<li>
<!--A/1-->
<li><a href='/aTwo'>2</a></li>
<!--A/2-->
<li><a href='/aThree'>3</a></li>
<!--A/3-->
</ul>
</div>
</a>
</li>
<li><a href='/b'>B</a>
<li>
<!--B-->
<li><a href='/c'>C</a></li>
<!--C-->
</ul>
</div>
</nav>
</div>
</body>

How to avoid small separation lines above and below unordered list items?

I am using twitter bootstrap in order to have a select-option like list.
How can I avoid the small separation lines above (as depicted) and below the list of list items? See screeshot:
In the following is the code visible. It will be the easiest to have a look at the jsfiddle:
https://jsfiddle.net/qqnkc9u3/3/
html:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
D2ropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a class="my2" href="#"><!--data-value="action"--> Action</a></li>
<li><a class="my2" href="#" data-value="another action">Another action</a></li>
<li><a class="my2" href="#" data-value="something else here">Something else here</a></li>
<li><a class="my2" href="#" data-value="separated link">Separated link</a></li>
</ul>
js:
$(".dropdown-menu li a").click(function(){
$(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span ></span>');
$(this).parents(".dropdown").find('.btn').val($(this).data('value'));
});
css:
#charset "UTF-8";
#import url('https://fonts.googleapis.com/css?family=PT+Sans');
#dropdownMenu1 {
/*text-indent: -150px;*/
-webkit-appearance: none;
-moz-appearance: none;
font-family: 'PT Sans', sans-serif;
/*font-style: italic;*/
color: red;
font-size: 18px;
text-align: left;
width: 242px;
height: 42px;
border: 4px;
/*background-color: #e7eaf3;*/
background: url("http://www.adelepham.com/deepthoughts/gray-pattern.jpg") no-repeat 0 0;
/*color: #5B629B;*/
/*padding: 4px;*/
}
.my2 {
text-indent: -7px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
font-style: italic;
font-family: 'PT Sans', sans-serif;
color: red;
font-size: 18px;
-webkit-appearance: none;
-moz-appearance: none;
width: 242px;
height: 42px;
/*border: 4px;*/
/*color: #5B629B;*/
background: url("http://www.adelepham.com/deepthoughts/gray-pattern.jpg") no-repeat 0 0;
}

Just get rid of the padding (updated JSFiddle):
.dropdown-menu {
padding: 0;
}
You can also do this:
.dropdown-menu {
padding: 0;
margin: 0;
}
to get rid of the little 1 or 2 px space between the button and the menu itself.

Add padding: 0; margin: 0; to your #dropdown-menu.
jsFiddle

You can try to remove padding and margin of the ul like:
.dropdown-menu {
padding: 0px;
margin: 0px;
}
Fiddle: https://jsfiddle.net/qqnkc9u3/8/

Header Button's text/font-weight changing unintentionally

I am making a header for a page, but from some point I noticed that the text-family is being changed when the dropdown menu was being launched(Safari 8). Then I tried to open it in Chrome, where it didn't changed when launching jQuery function. But when I tried to change the font, but it didn't make any difference. It did't changed the font at all. So even though I don't have specified the font for the header tabs, it's still formatted. Thanks in advance for help. I am sorry if it's just some manor mistake, I am quite new to this.
$(document).ready(function() {
$('.hdr-drpdwn-menu').hide();
$('.hdr-list-more').hover(
function() {
$(this).find('.hdr-drpdwn-menu').stop(true, true).slideDown('fast');
},
function() {
$(this).find('.hdr-drpdwn-menu').stop(true, true).slideUp('fast');
}
);
});
/* RESETTING ALL MARINGS, PADDING AND TEXT-DECORATIONS */
body {
margin: 0;
padding: 0;
}
ul, li, p, h1, h2, h3, h4, h5, button {
margin: 0;
padding: 0;
border: none;
background-color: transparent;
}
ul, li {
list-style: none;
}
a, a:active, a:visited {
text-decoration: none;
}
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 40px;
background-color: #5a5a5a;
font-style: normal;
}
#header .hdr-nav-opt {
float: left;
margin-left: 10px;
background-color: transparent;
}
#header .hdr-nav-soc {
float: right;
margin-right: 10px;
background-color: transparent;
}
.hdr-nav-list .hdr-list-tab{
display: inline;
background-color: transparent;
}
.hdr-nav-list .hdr-list-tab .hdr-button {
height: 40px;
color: #fff;
font-size: 20px;
text-align: center;
padding-left: 5px;
padding-right: 5px;
background-color: transparent;
}
.hdr-nav-list .hdr-list-tab .hdr-button:hover {
background-color: #7D7D7D;
}
.hdr-drpdwn-menu {
position: relative;
width: 120px;
margin-left: 40px;
background-color: #5a5a5a;
box-shadow: 2px 2px 10px #888888;
border: 1px solid #888888;
}
.hdr-drpdwn-menu .hdr-button {
width: 100%;
height: 40px;
color: #fff;
font-size: 20px;
text-align: center;
padding-left: 5px;
padding-right: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<!-- The Global Header of the website-->
<div id="header">
<!-- The Left part of the header-->
<div class="hdr-nav-opt">
<ul class="hdr-nav-list">
<li class="hdr-list-tab"><a class="hdr-list-link" href="?page=home"><button class="hdr-button">Home</button></a></li>|
<li class="hdr-list-tab hdr-list-more"><button class="hdr-button">More</button>
<!-- The Dropdown Menu-->
<div class="hdr-drpdwn-menu">
<ul class="hdr-drpdwn-list">
<li class="hdr-menu-tab"><a class="hdr-list-link" href="?page=about"><button class="hdr-button">About</button></a></li>
<li class="hdr-menu-tab"><a class="hdr-list-link" href="?page=help"><button class="hdr-button">Help</button></a></li>
<li class="hdr-menu-tab"><a class="hdr-list-link" href="?page=credits"><button class="hdr-button">Credits</button></a></li>
</ul>
</div>
</li>
</ul>
</div>
<!-- The Right part of the header-->
<div class="hdr-nav-soc">
<ul class="hdr-nav-list">
<li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Facebook</button></a></li>|
<li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Twitter</button></a></li>|
<li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Instagram</button></a></li>|
<li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Tumblr</button></a></li>
</ul>
</div>
</div>

I don't know which font you are using now, but maybe you need a callback in your styles
.hdr-drpdwn-menu .hdr-button {
width: 100%;
height: 40px;
color: #fff;
font-size: 20px;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;/*like this*/
text-align: center;
padding-left: 5px;
padding-right: 5px;
}
and it will works all the browsers.

Submenu position relative to Mainmenu

I have this menu that is active on the first item of the main menu (top):
The problem I have is that when the user click on the middle, fourth or last main menu item, the submenu now looks like this (getting out of everything):
Also, the main menu will grow up by the client, so there will be sixth, seventh, etc... so I can´t just control with a class the items that are right now...
Any ideas on how to come to a css / jquery solution about this? trying to follow the first image that is based on the design.
This is my markup:
<ul id="mainmenu" class="clearfix">
<li class="active">
<a class="arrowdown" href="javascript:void(0)">ANSIEDAD</a>
<ul class="sublist">
<li>
Política
</li>
<li>
Economía
</li>
<li>
Sociedad
</li>
<li class="active">
Medios
</li>
<li>
Inmobiliario
</li>
</ul>
</li>
<li>
PRETENSIÓN
</li>
<li>
HEDONISMO
</li>
<li>
MATERIALISMO
</li>
<li>
ARROGANCIA
</li>
<li id="menu_search">
</li>
</ul>
and the CSS:
ul#mainmenu{
font-family: Georgia, Times, "Times New Roman", serif;
width: 754px;
margin: 0 auto;
li{
float: left;
list-style: none;
background: #999999;
margin-right: 4px;
.round_corners();
width: 140px;
text-align: center;
padding: 3px 0px;
position: relative;
a{
text-decoration: none;
color: #ffffff;
text-transform: uppercase;
font-size: 14px;
&.arrowdown{
padding-bottom: 10px;
background: url('../img/sprites.png') no-repeat center -169px;
}
}
&#menu_search{
background: url('../img/sprites.png') #000 2px 2px;
width: 34px;
height: 28px;
padding: 0;
margin-right: 0;
a{
display: inline-block;
width: 100%;
height: 100%;
}
}
&.active{
background: #000000;
}
&:hover{
background: #000000;
color: #ffffff;
}
ul.sublist{
position: absolute;
width: 560px;
top: 39px;
left: 40px;
li{
float: left;
margin-right: 5px;
margin-bottom: 5px;
width: auto;
padding: 1px 9px;
background: #666666;
a{
text-transform: none;
}
&.active{
background: #000000;
}
&:hover{
background: #000000;
color: #ffffff;
}
}
}
}
}

Try giving the main menu a max-width. In this case I'd assume you want its maximum width to be 100%.
#mainmenu {
max-width: 100%;
}
This will not allow the main menu to exceed the page's width. You may encounter new problems with this, though.

Using max-width will solve your problem. Here's an example of how you can use max-width to keep the sub-menu in check.
Instead of breaking the sub-menu into two lines, you could probably try to shift the anchor point of the sub-menu to a more centralized location. Just my 2 cents.