We Keep Coding

Close navigation when navigation item is clicked

My goal is for my hamburger menu to close when an item is clicked inside of it. As of right now, the menu only uses html and css.
The difference between this nav bar and others is that mine is created from a input checkbox html element, what i need is for my checkbox to uncheck when a link is clicked inside of the hamburger. This should close the entire menu just like it would if i clicked on the hamburger. Also, could you explain what and why the javascript does what it does, i don't have much experience with javascript, thanks. :)
I also made the checkbox visible just so that we can have a better understanding of whats going on.
My CSS:
/* navigation menu */
.nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
line-height: 70px;
text-align: right;
z-index: 10000;
background-color: #ffffff;
border-bottom: 1px solid #eaeaeb;
}
.menu {
margin: 0 30px 0 0;
}
/* link items */
.menu a {
clear: right;
line-height: 70px;
text-decoration: none;
margin: 0 10px;
text-align: center;
color: #33334d;
background-color: #ffffff;
}
.menu a:hover {
background-color: #c2c2d6;
}
/* hamburger properties */
label {
float: right;
display: none;
width: 26px;
line-height: 70px;
margin: 0 40px 0 0;
font-size: 36px;
}
/* checkbox */
#toggle {
}
#media only screen and (max-width: 1075px) {
/* hamburger properties */
label {
display: block;
cursor: pointer;
}
/* nav menu properties */
.menu {
width: 100%;
display: none;
text-align: center;
}
/* link items */
.menu a {
display: block;
margin: 0px;
border-bottom: 1px solid #eaeaeb;
}
/* makes links show when checkbox is checked */
#toggle:checked + .menu {
display: block;
}
}
My HTML:
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<div class="menu">
example
example
example
example
example
example
example
</div>
</div>

Javscript may not actually be required, depending on your needs.
If you give the div containing your nav links an ID you can target this with an a tag setting the href to the ID. Then you can use the :target selector to change the visibility of our navigation div.
/* navigation menu */
.nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
line-height: 70px;
text-align: right;
z-index: 10000;
background-color: #ffffff;
border-bottom: 1px solid #eaeaeb;
}
.menu {
margin: 0 30px 0 0;
}
/* link items */
.menu a {
clear: right;
line-height: 70px;
text-decoration: none;
margin: 0 10px;
text-align: center;
color: #33334d;
background-color: #ffffff;
}
.toggle {
text-decoration: none;
color: #33334d;
}
.menu a:hover {
background-color: #c2c2d6;
}
/* hamburger properties */
.toggle,
label {
float: right;
display: none;
width: 26px;
line-height: 70px;
margin: 0 40px 0 0;
font-size: 36px;
}
/* checkbox */
#toggle {}
#media only screen and (max-width: 1075px) {
/* hamburger properties */
.toggle,
label {
display: block;
cursor: pointer;
}
/* nav menu properties */
.menu {
width: 100%;
display: none;
text-align: center;
}
/* link items */
.menu a {
display: block;
margin: 0px;
border-bottom: 1px solid #eaeaeb;
}
/* makes links show when checkbox is checked */
#menu:target,
#toggle:checked+.menu {
display: block;
}
}
<div class="nav">
<a class="toggle" href="#menu">☰</a>
<div class="menu" id="menu">
example
example
example
example
example
example
example
</div>
</div>

Wow, interesting. It's a pretty weird practise, what you have, but it could work. You can make menu show/hide by input checked. Very interesting. I have never think of like that.
But also you will need a piece of JS code.
By CSS you can handle some basic selector like :hover, :focus, :active etc. In our your case you also make some interesting click event. But checkbox is not for that purpose.
Click and other event are handled by JS (more https://www.w3schools.com/js/js_events.asp).
So in our case, we select all links:
var links = document.querySelectorAll('.menu a');
then we have to add click event to every link, which will set our input to checked="false" = close menu.
This JS code will only work, when selected links are rendered, so you need to put this piece of code to the end of your html file before </body> or use window.onload...
var links = document.querySelectorAll('.menu a');
var linksLength = links.length
for(var i = 0; i < linksLength; i++) {
links[i].addEventListener('click', function() {
document.getElementById('toggle').checked = false;
});
}
/* navigation menu */
.nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
line-height: 70px;
text-align: right;
z-index: 10000;
background-color: #ffffff;
border-bottom: 1px solid #eaeaeb;
}
.menu {
margin: 0 30px 0 0;
}
/* link items */
.menu a {
clear: right;
line-height: 70px;
text-decoration: none;
margin: 0 10px;
text-align: center;
color: #33334d;
background-color: #ffffff;
}
.menu a:hover {
background-color: #c2c2d6;
}
/* hamburger properties */
label {
float: right;
display: none;
width: 26px;
line-height: 70px;
margin: 0 40px 0 0;
font-size: 36px;
}
/* checkbox */
#toggle {
}
#media only screen and (max-width: 1075px) {
/* hamburger properties */
label {
display: block;
cursor: pointer;
}
/* nav menu properties */
.menu {
width: 100%;
display: none;
text-align: center;
}
/* link items */
.menu a {
display: block;
margin: 0px;
border-bottom: 1px solid #eaeaeb;
}
/* makes links show when checkbox is checked */
#toggle {
display: none;
}
#toggle:checked + .menu {
display: block;
}
}
<label class="nav" for="toggle">
<div class="icon">☰</div>
<input type="checkbox" id="toggle"/>
<div class="menu">
example
example
example
example
example
example
example
</div>
</label>

HTML Dropdown Returns Blank

For some reason, my HTML dropdown menu is returning completely blank values. However, you can see the values when you hover your mouse over them. My code is at my GitHub here: https://github.com/kekTEHfrahg/bengalidabbois/blob/master/index.html
EDIT: Sorry, got the wrong link. I fixed it now.
Also, for the specific code with my dropdown:
<div translate="no" class="compact marquee" id="div_language">
<select id="select_language" onchange="updateCountry()">
<option value="0">Afrikaans</option><option value="1">Bahasa Indonesia</option><option value="2">Bahasa Melayu</option><option value="3">Català</option><option value="4">Čeština</option><option value="5">Dansk</option><option value="6">Deutsch</option><option value="7">English</option><option value="8">Español</option><option value="9">Euskara</option><option value="10">Filipino</option><option value="11">Français</option><option value="12">Galego</option><option value="13">Hrvatski</option><option value="14">IsiZulu</option><option value="15">Íslenska</option><option value="16">Italiano</option><option value="17">Lietuvių</option><option value="18">Magyar</option><option value="19">Nederlands</option><option value="20">Norsk bokmål</option><option value="21">Polski</option><option value="22">Português</option><option value="23">Română</option><option value="24">Slovenščina</option><option value="25">Slovenčina</option><option value="26">Suomi</option><option value="27">Svenska</option><option value="28">Tiếng Việt</option><option value="29">Türkçe</option><option value="30">Ελληνικά</option><option value="31">български</option><option value="32">Pусский</option><option value="33">Српски</option><option value="34">Українська</option><option value="35">한국어</option><option value="36">中文</option><option value="37">日本語</option><option value="38">हिन्दी</option><option value="39">ภาษาไทย</option></select> <select id="select_dialect" style="visibility: visible;">
<option value="en-AU">Australia</option><option value="en-CA">Canada</option><option value="en-IN">India</option><option value="en-NZ">New Zealand</option><option value="en-ZA">South Africa</option><option value="en-GB">United Kingdom</option><option value="en-US">United States</option></select>
</div>
</div>
Here is the CSS code. Honestly, I don't find anything wrong with it. Is there something wrong with the CSS that makes the dropdown blank?
<style>
.speech {border: 1px solid #DDD; width: 300px; padding: 0; margin: 0}
.speech input {border: 0; width: 240px; display: inline-block; height: 30px;}
.speech img {float: right; width: 40px }
l {
border: ipx solid black
}
/* Style the tabs */
ul.tab {
list-style-type: none;
border-radius:10px;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #ccc;
background-color: #f2f2f2;
}
/* Float the list items side by side */
ul.tab li {float: left;}
/* Style the links inside the list items */
ul.tab li a {
background-color:#d9d9d9;
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of links on hover */
ul.tab li a:hover {
background-color:#999999 ;
}
/* Create an active/current tablink class */
ul.tab li a:focus, .active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
border-radius:10px;
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
/* All content below pertains to the function of the tabs in an "accordian" style */
button.accordion {
border-radius:26px;
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
button.accordion:after {
content: '>>';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "<<";
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
#info {
font-size: 20px;
}
#div_start {
float: right;
}
#headline {
text-decoration: none
}
#results {
font-size: 14px;
font-weight: bold;
border: 1px solid #ddd;
padding: 15px;
text-align: left;
min-height: 150px;
}
#start_button {
border: 0;
background-color:transparent;
padding: 0;
}
.interim {
color: gray;
}
.final {
color: black;
padding-right: 3px;
}
.button {
display: none;
}
.marquee {
margin: 20px auto;
}
#buttons {
margin: 10px 0;
position: relative;
top: -50px;
}
#copy {
margin-top: 20px;
}
#copy > div {
display: none;
margin: 0 70px;
}
body, h1,h2,h3,h4,h5,h6 {font-family: "Montserrat", sans-serif}
.w3-row-padding img {margin-bottom: 12px}
/* Set the width of the sidebar to 120px */
.w3-sidebar {width: 120px;background: #222;}
/* Add a left margin to the "page content" that matches the width of the sidebar (120px) */
#main {margin-left: 120px}
/* Remove margins from "page content" on small screens */
#media only screen and (max-width: 600px) {#main {margin-left: 0}}
</style>

It looks like the W3Schools style sheet sets the text color of every element to white (color: #fff!important;).
This can be easily remedied with changing the text color for select and option elements:
select, option {
color: black;
}
You can debug something like this by opening your browser's development tools, right-clicking the element and looking at the CSS used to render the element. In this particular case, your body tag uses the w3-green class, which has the following CSS by default:
.w3-green, .w3-hover-green:hover {
color: #fff!important;
background-color: #4CAF50!important;
}
In addition, the normalize style sheet (which has the highest specificity for the select elements) tells the browser to inherit the color from the parent (there's no other color declarations in each of select's parents until it reaches the body tag).
button, input, optgroup, select, textarea {
margin: 0;
font: inherit;
color: inherit;
}

You have a lot of CSS libraries and they are interfering with each other. Bootstrap.min.css is setting the color of your select to "inherit". Add this after bootstrap's style to fix that.
select {color:black;}
You can debug your code by using your browser's developer tools and see what style is being applied to your elements and from which library.

css floating elements error

I have a small problem about div and input floating:
This is my problem, with a jQuery script when you wrote in the input box and press enter, a div element will be added, but if we wrote more then 4 element, the input box remain in the first line and the element go down. Can anyone could help me?
div.box {
width: 300px;
height: 200px;
border: 1px solid #ddd;
padding: 5px;
}
div.box>div.element {
background-color: #00B5B5;
display: inline-block;
color: #fff;
font-size: 11px;
text-transform: uppercase;
padding: 2px 8px 2px 8px;
border-radius: 5px;
line-height: normal;
cursor: pointer;
margin-right: 4px;
margin-bottom: 4px;
float: left;
}
div.box>input#group-input {
height: 11px;
/*border: none;*/
font-size: 12px;
outline: none;
vertical-align: top;
width: 8px;
}
<div class="box" id="box-ins-group">
<div class="element" id="1">prova</div>
<input type="text" id="group-input">
</div>
I have tried everything but still not working :( sorry for my bad english
-- Jquery code:
var counter = 0;
$('#group-input').keypress(function(e) {
if(e.which == 13) {
if($('#group-input').val().length > 3) {
$( "div#box-ins-group" ).append('<div class="element" id="'+counter+'">'+$("#group-input").val()+'</div>');
$('#group-input').val('');
counter++;
}
}
});
counter is a variable

You need to set float: left on the input, and then change this in your js:
$( "div#box-ins-group" ).append
to:
$( "input#group-input" ).before
The problem is that you're appending those elements to the element that contains both the .element divs and the input, so even if you'd fixed the float issue on the input, the new .element divs would always appear after the input in the DOM. Here's a fiddle.
It's also worth noting that you can remove display: inline-block, as it's ignored when you use floats.

Seems that the pills are floating but the input is not. Try this (if you haven't already):
div.container div.edit-local div.form table tr td>div.box>input#group-input {
height: 11px;
/*border: none;*/
font-size: 12px;
outline: none;
vertical-align: top;
width:8px;
float: left;
}

How to make square in Twitter Bootstrap around the item?

I am trying to make some web page as show in image .I am able to make almost 90%.But I have one issue
how to make square as shown in image (a square which have triangle in bottom.I know we can make square using border .but how to make triangle in that bottom triangle
how to make contend scrollable mean my contend it not scrolling I already use overflow:auto and scroll
)
.bg {
background: #597A4D!important;
width: 100%!important;
}
.nav_bar {
background: #597A4D!important;
border-style: none;
height: 44px;
border: 0px!important;
border-radius: 0px!important;
}
.display_menu li a{
font-size: 1.2em!important;
color: #ffffff!important;
}
ul.display_menu li:last-child{
background:#3C86D7;
}
.rowClass {
display: block;
margin-top: 3%;
}
.rowClass >div {
padding: 3em;
text-align: center;
}
.text_row div{
display: block;
border: 1px ;
padding: auto;
color: #ffffff;
margin-top: 3%;
}
.rowClass span {
display: block!important;
color: #ffffff;
}
.logo_image{
width: 60px;
height: 60px;
}
.email_div label {
color: #ffffff;
font-weight: bold;
text-align: center;
}
.email_div{
width: 50%;
margin: auto;
}
.email_div label {
}
.email_div input {
background: transparent;
border: 1px solid #3C86D7;
display: inline;
width: 50%;
}
.email_div button {
display: inline;
}
.wrapper{
overflow: auto!important;
overflow: scroll!important;
}
Here is my plunker: http://plnkr.co/edit/G8mp53rQlF562hEkgmgT?p=preview

just do this
.wrapper{
overflow: auto!important;
overflow: scroll!important
height: 200px;
}
or desired height instead of
.wrapper{
overflow: auto!important;
overflow: scroll!important;
}
it will start scrolling because it will only scroll if data is overflowing
and for shape this article may help but you don't need to use any thing just use bootstrap tooltip

Try this for the overflowing
.wrapper{
overflow: auto!important;
overflow: scroll!important
height: 250px;
}
to get an idea to make those box with shapes,
See this DEMO

How to hide and open navigation

i want to hide and open the navigation i'v created with the "+" and "-" buttons
- when user will click on the '+' button the navigation will start open one by one.
(notice: the links are on display: none; right now)
fiddle link here: http://jsfiddle.net/RKhRy/5/
The css:
.nav {
height: 600px;
width: 150px;
display: none;
}
.nav li {
width: 150px;
height: 70px;
background-color: #232323;
border-bottom: 1px solid #393939;
text-decoration: none;
list-style: none;
line-height: 70px;
text-align: center;
cursor: pointer;
font-size: 15px;
}
#close {
width: 70px;
height: 70px;
background-color: #737373;
color: #fff;
margin-left: 150px;
position: absolute;
line-height: 70px;
text-align: center;
font-size: 30px;
cursor: pointer;
display: none;
}
#open {
width: 70px;
height: 70px;
background-color: #232323;
color: #fff;
position: absolute;
line-height: 70px;
text-align: center;
font-size: 30px;
cursor: pointer;
}

Try adding this jQuery code:
$("#open").click(function(){
$(".nav, #close").show();
$(".nav li").each(function (i) {
$(this).delay(300*i).animate({width:150},300);
});
$("#open").hide();
});
$("#close").click(function(){
$("#close").hide();
$($(".nav li").get().reverse()).each(function (i) {
$(this).delay(300*i).animate({width:0},300);
});
$("#open").show();
});
The result can be seen in this JSFiddle.

I don't know why i've coded for you but the building blocks of what you're after are here in an updated fiddle: http://jsfiddle.net/RKhRy/12/
Use jQuery's slideToggle();

I've edited your example to make it work: http://jsfiddle.net/g8AF6/3/
new CSS:
body {
color: #fff;
font-family: Tahoma;
font-weight: bold;
position:relative;
}
.nav {
height: 600px;
width: 150px;
display: none;
}
#open:focus{
visibility:hidden;
}
#open:focus + #close + .nav{
display:block;
}
#open:focus + #close {
display:block;
}
.nav li {
width: 150px;
height: 70px;
background-color: #232323;
border-bottom: 1px solid #393939;
text-decoration: none;
list-style: none;
line-height: 70px;
text-align: center;
cursor: pointer;
font-size: 15px;
}
#close {
width: 70px;
height: 70px;
background-color: #737373;
color: #fff;
position: absolute;
top:0;
left:0;
line-height: 70px;
text-align: center;
font-size: 30px;
cursor: pointer;
display: none;
}
#open {
width: 70px;
height: 70px;
background-color: #232323;
color: #fff;
line-height: 70px;
text-align: center;
font-size: 30px;
cursor: pointer;
}
now just add transitions for collapse/expand animation
regards

Basic working fiddle here: http://jsfiddle.net/phdphil/YJ8gf/#base
Essentially this bit of code, plus an id=nav in the right tag:
function setNavVisible(visible) {
var nav = document.getElementById('nav');
var close = document.getElementById('close');
var open = document.getElementById('open');
if(visible) {
nav.style.display = "block";
close.style.display = "block";
open.style.display = "none";
} else {
nav.style.display = "none";
close.style.display = "none";
open.style.display = "block";
}
}
document.getElementById('open').onclick = function() {
setNavVisible(true);
}
document.getElementById('close').onclick = function() {
setNavVisible(false);
}

I've cloned and editted your fiddle. Your html is wrong. You can't have li inside of divs. Thinking of that, your open and close divs can be refactored to something more semanthic. Like this:
Toggle Menu
<ul class="nav">
<li>START HERE</li>
<li>ABOUT</li>
<li>PORTFOLIO</li>
<li>BRANDS</li>
<li>SERVICES</li>
<li>CONTACT</li>
</ul>
I've also added pseudo-elements in css instead of having two elements to only one function.
Check the result here:
http://jsfiddle.net/H7ms7/

You will need to bind keydown event with CSS in my mind.
$(document).keydown(function(e){
if (e.keyCode == *NUMBER) {
}
)};
*The number should be the one that + or - trigger with.
The next thing is with the css, I would just bind $("#element").css('display','block'); With the triggers you want.
If you want them one by one like you said, I'm not absulotly sure but I know it might have to do with CSS3 transition. Check it out, dont want to mislead you.
Goodluck