Develop Reference

Add active class to menu li on scrolling through section in div

In the below set of code basd on selecting the .help-menu elements on left .help-descr div navigated to particular section .
Similarly on scrolling the .help-descr div I want to add active class selection to appropriate .help-menu elements
This what I have tried:
Its something similar to the attached link Add Menu Active Class when scrolling to div I am not able to replicate same approach here
help.js
// on load of page
$(function() {
$('.backend-feature li :first').addClass('active');
$('.backend-head').addClass('active');
$('.selected-item').empty();
$('.selected-item').append('<span>Supported Features</span><i class="ion-android-arrow-dropright"></i><span>Backend</span><i class="ion-android-arrow-dropright"></i><span style="font-weight:bold;">' + $('.backend-feature li :first').text() + '</span');
});
//on click of backend feature menu
$(".backend-feature-li").on('click', function() {
$('.frontend-head').removeClass('active');
$('.frontother-head').removeClass('active');
$('.frontend-feature li').find('a').removeClass('active');
$('.front-otherfeature-li').find('a').removeClass('active');
$(this).siblings().find('a').removeClass('active');
$('.backend-head').addClass('active');
$(this).find('a').addClass('active');
$('.selected-item').empty();
$('.selected-item').append('<span>Supported Features</span><i class="ion-android-arrow-dropright"></i><span>Backend</span><i class="ion-android-arrow-dropright"></i><span style="font-weight:bold;">' + $(this).text() + '</span');
});
// on click of frontend feature menu
$(".frontend-feature-li").on('click', function() {
$('.backend-head').removeClass('active');
$('.frontother-head').removeClass('active');
$('.backend-feature li').find('a').removeClass('active');
$('.front-otherfeature-li').find('a').removeClass('active');
$(this).siblings().find('a').removeClass('active');
$('.frontend-head').addClass('active');
$(this).find('a').addClass('active');
$('.selected-item').empty();
$('.selected-item').append('<span>Supported Features</span><i class="ion-android-arrow-dropright"></i><span>Frontend</span><i class="ion-android-arrow-dropright"></i><span style="font-weight:bold;">' + $(this).text() + '</span');
});
//on click of frontend other features menu
$(".front-otherfeature-li").on('click', function() {
$('.backend-head').removeClass('active');
$('.backend-feature li').find('a').removeClass('active');
$('.frontend-feature-li').find('a').removeClass('active');
$(this).siblings().find('a').removeClass('active');
$('.frontend-head').addClass('active');
$('.frontother-head').addClass('active');
$(this).find('a').addClass('active');
$('.selected-item').empty();
$('.selected-item').append('<span>Supported Features</span><i class="ion-android-arrow-dropright"></i><span>Frontend</span><i class="ion-android-arrow-dropright"></i><span>Other Features</span><i class="ion-android-arrow-dropright"></i><span style="font-weight:bold;">' + $(this).text() + '</span');
});
.ion-help-circled {
cursor: pointer;
}
.help-row {
flex-wrap: nowrap;
max-width: 100%;
}
.help-menu {
background-color: #efefef;
overflow: auto;
padding: 15px;
height: 85vh;
}
.help-descr {
position: relative;
background-color: white;
padding: 25px 25px;
overflow: auto;
height: calc(100vh - 107px);
border: 1px solid #efefef;
}
.help-menu ul .front-otherfeature-li {
margin-left: 18px;
}
.help-menu ul li {
list-style-type: none;
margin: 8px;
}
.help-menu ul .backend-head,
.help-menu ul .frontend-head {
margin-left: 0px;
}
.backend-feature li a,
.frontend-feature li a,
.frontend-otherfeature li a {
padding: 0;
text-decoration: none;
color: black;
}
.help-menu li .active {
font-weight: bold;
}
.help-menu a:hover {
font-weight: bold;
}
.main-section {
background-color: white;
}
section {
display: flex;
flex-direction: column;
padding-bottom: 15px;
}
article {
display: flex;
flex-direction: column;
padding-left: 30px;
}
.main-section ul>li {
margin-top: 6px;
}
.main-section p {
margin-bottom: 0px;
}
.backend-feature-arrow,
.frontend-feature-arrow,
.other-feature-arrow {
margin-right: 6px;
cursor: pointer;
}
.selected-item span {
padding: 6px;
}
.descr-seclevel {
list-style-type: square;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'">
<link rel="stylesheet" href="./../node_modules/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="./css/style.css">
<link src="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" src_type="url" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="./vendors/css/ionicons.min.css">
<script defer src="./js/help_page.js"></script>
<title>Revive</title>
</head>
<body>
<div id="header">
<div class="dashboard-header">
<div class="dashboard-left-header">
<ul style="margin-bottom: 0px;">
<li>
<a style="cursor: default;" class="logo" href=""><img src="./assets/img/img1.png"></img>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row help-row">
<div class="col-sm-3 help-menu">
<ul>
<li style="font-weight: bold;">Supported Features</li>
<li>
<ul>
<li class='backend-head'><i class="backend-feature-arrow ion-ios-arrow-down" style="font-size:18px ;display:inline-block"></i>Backend</li>
<li>
<ul class="backend-feature">
<li class="backend-feature-li">Datasources</li>
<li class="backend-feature-li">Joins</li>
</ul>
</li>
<li class='frontend-head'><i class="frontend-feature-arrow ion-ios-arrow-right" style="font-size:18px ;display:inline-block"></i>Frontend</li>
<li>
<ul class="frontend-feature">
<li class="frontend-feature-li">Properties</li>
<li class="frontother-head"><i class="other-feature-arrow ion-ios-arrow-right" style="font-size:18px ;display:inline-block"></i>Other Features</li>
<li>
<ul class="frontend-otherfeature">
<li class="front-otherfeature-li">Actions</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="col-sm-9 help-descr">
<div class='selected-item'></div>
<section class="main-section" id="datasource">
<header>
<h1>Datasources</h1>
</header>
<article>
<p>The supported Datasources:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Excel</li>
<li>Csv</li>
<li>Oracle Database</li>
<li>MSSQL server</li>
<li>PostgreSQL</li>
<li>MySQL</li>
</ul>
</article>
</section>
<section class="main-section" id="joins">
<header>
<h1>Joins</h1>
</header>
<article>
<p>The supported Joins:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Inner Join</li>
<li>Left Join</li>
<li>Right Join</li>
<li>Full Outer Join</li>
</ul>
</article>
</section>
<section class="main-section" id="properties">
<header>
<h1>Properties</h1>
</header>
<article>
<p>The supported Properties:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Titles on charts</li>
<li>X-axis and Y-axis Titles will be renamed</li>
<li>Text Properties like font style ,size and color</li>
<li>Background color</li>
<li>Grid lines</li>
<li>Borders for charts</li>
<li>Alias name for values</li>
<li>Legends will be enabled only if present</li>
<li>Color of Chart:</li>
<ul class="descr-seclevel" style="margin-left: 20px;">
<li>If color is applied it will be added else default color is applied</li>
<li>If a chart contains multiple color representing its data and if palate is assigned it will be applied </li>
</ul>
</ul>
</article>
</section>
<section class="main-section" id="actions">
<header>
<h1>Actions</h1>
</header>
<article>
<p>Actions supported:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Only on-select is supported</li>
<li>With Actions from one dashboard to different dashboard interacts with all charts in target dashboard</li>
</ul>
</article>
</section>
</div>
</div>
</body>
</html>

If you put an IntersectionObserver on each of the main sections the system will tell you when it comes into view or goes out of view.
Then you can add or remove the active class from the related link in the menu.
This snippet gives a demo but it had to shorten the overall length of the menu area just so we got to see the content below and it also fixed it otherwise it scrolled up and the effect of adding the active class couldn't be seen as the menu item was off the screen.
To make it obvious which section(s) are in view a lime background has been put on the link.
Note, there is some thought needed on what 'active' actually means since more than one section can be in the viewport at once. This snippet does not attempt to tackle that - it's ouside the scope of this question.
The snippet needs to be viewed full page.
const callback = (entries, observer) => {
entries.forEach(entry => {
const id = entry.target.id;
const el = document.body.querySelector('[href="#' + id + '"]');
if (entry.isIntersecting) {
el.classList.add('active');
} else {
el.classList.remove('active');
}
});
};
const sections = document.querySelectorAll('.main-section');
const options = {
threshold: 0.33
};
const observer = new IntersectionObserver(callback, options);
sections.forEach(section => {
observer.observe(section);
});
.ion-help-circled {
cursor: pointer;
}
.help-row {
flex-wrap: nowrap;
max-width: 100%;
}
.help-menu {
background-color: #efefef;
overflow: auto;
padding: 15px;
height: 85vh;
height: 30vh;
/* changed for demo so we can see stuff */
}
.help-descr {
position: relative;
background-color: white;
padding: 25px 25px;
overflow: auto;
height: calc(100vh - 107px);
border: 1px solid #efefef;
}
.help-menu ul .front-otherfeature-li {
margin-left: 18px;
}
.help-menu ul li {
list-style-type: none;
margin: 8px;
}
.help-menu ul .backend-head,
.help-menu ul .frontend-head {
margin-left: 0px;
}
.backend-feature li a,
.frontend-feature li a,
.frontend-otherfeature li a {
padding: 0;
text-decoration: none;
color: black;
}
.help-menu li .active {
font-weight: bold;
background-color: lime;
/* ADDED JUST FOR DEMO */
}
.help-menu a:hover {
font-weight: bold;
}
.main-section {
background-color: white;
}
section {
display: flex;
flex-direction: column;
padding-bottom: 15px;
}
article {
display: flex;
flex-direction: column;
padding-left: 30px;
}
.main-section ul>li {
margin-top: 6px;
}
.main-section p {
margin-bottom: 0px;
}
.backend-feature-arrow,
.frontend-feature-arrow,
.other-feature-arrow {
margin-right: 6px;
cursor: pointer;
}
.selected-item span {
padding: 6px;
}
.descr-seclevel {
list-style-type: square;
}
<div style="position: fixed; z-index: 1;">
<!-- added just for demo -->
<div id="header">
<div class="dashboard-header">
<div class="dashboard-left-header">
<ul style="margin-bottom: 0px;">
<li>
<a style="cursor: default;" class="logo" href=""><img src="./assets/img/img1.png"></img>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row help-row">
<div class="col-sm-3 help-menu">
<ul>
<li style="font-weight: bold;">Supported Features</li>
<li>
<ul>
<li class='backend-head'><i class="backend-feature-arrow ion-ios-arrow-down" style="font-size:18px ;display:inline-block"></i>Backend</li>
<li>
<ul class="backend-feature">
<li class="backend-feature-li">Datasources</li>
<li class="backend-feature-li">Joins</li>
</ul>
</li>
<li class='frontend-head'><i class="frontend-feature-arrow ion-ios-arrow-right" style="font-size:18px ;display:inline-block"></i>Frontend</li>
<li>
<ul class="frontend-feature">
<li class="frontend-feature-li">Properties</li>
<li class="frontother-head"><i class="other-feature-arrow ion-ios-arrow-right" style="font-size:18px ;display:inline-block"></i>Other Features</li>
<li>
<ul class="frontend-otherfeature">
<li class="front-otherfeature-li">Actions</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!--ADDED -->
<div class="col-sm-9 help-descr">
<div class='selected-item'></div>
<section class="main-section" id="datasource">
<header>
<h1>Datasources</h1>
</header>
<article>
<p>The supported Datasources:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Excel</li>
<li>Csv</li>
<li>Oracle Database</li>
<li>MSSQL server</li>
<li>PostgreSQL</li>
<li>MySQL</li>
</ul>
</article>
</section>
<section class="main-section" id="joins">
<header>
<h1>Joins</h1>
</header>
<article>
<p>The supported Joins:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Inner Join</li>
<li>Left Join</li>
<li>Right Join</li>
<li>Full Outer Join</li>
</ul>
</article>
</section>
<section class="main-section" id="properties">
<header>
<h1>Properties</h1>
</header>
<article>
<p>The supported Properties:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Titles on charts</li>
<li>X-axis and Y-axis Titles will be renamed</li>
<li>Text Properties like font style ,size and color</li>
<li>Background color</li>
<li>Grid lines</li>
<li>Borders for charts</li>
<li>Alias name for values</li>
<li>Legends will be enabled only if present</li>
<li>Color of Chart:</li>
<ul class="descr-seclevel" style="margin-left: 20px;">
<li>If color is applied it will be added else default color is applied</li>
<li>If a chart contains multiple color representing its data and if palate is assigned it will be applied </li>
</ul>
</ul>
</article>
</section>
<section class="main-section" id="actions">
<header>
<h1>Actions</h1>
</header>
<article>
<p>Actions supported:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Only on-select is supported</li>
<li>With Actions from one dashboard to different dashboard interacts with all charts in target dashboard</li>
</ul>
</article>
</section>
</div>
</div>

Read value from html menu?

How can I read the selected value of this menu, as if it were a dropdown list?
For a regular dropdown list like below, I use something like this to read the value:
<select id="ddl">
<option value="In" selected="selected">In</option>
<option value="Out">Out</option>
<option value="Ratio">Ratio</option>
</select>
With javascript I read the selected value:
var dropdown = document.getElementById("ddl");
var InOrOut = dropdown.options[dropdown.selectedIndex].value;
Is it possible to use something like this to read the selected value of the menu below:
function FillAll()
{
alert('I will read value');
// This is where menu value is read.
alert('Value read is');
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
#wrapper {
width: 100%;
border: 1px solid black;
overflow: hidden; /* will contain if #first is longer than #second */
}
#first {
width: 400px;
float:left; /* add this */
border: 1px solid red;
}
#second {
border: 1px solid green;
text-align: right;
overflow: hidden; /* if you don't want #second to wrap below #first */
}
.bs-example{
margin: 20px;
}
.text
{
font-size: 15pt;
font-family: Helvetica;
color: #3d718b;
}
hr{
margin: 60px 0;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div style="float:left;">
<ul class="nav nav-pills">
<li class="text" class="dropdown">
</b>
<ul class="dropdown-menu">
<li>Value1</li>
<li>Value2</li>
<li>Value3</li>
</ul>
</li>
</li>
</ul>
</div>
<button id="ButtonSearch" onclick="FillAll()">GO</button>
Since one can't do much to change the design of the regular dropdown list, I was thinking of using another approach, and use an html menu instead of the ddl.
Something I didn't mention is that the code to read the value would go inside the click event of a button that already exists. I didn't mention it before because I didn't know the click event would be used to read the value.

You can use getAttribute to scrape a value off of each li:
$('.dropdown-menu li').click( e => {
console.log(e.target.getAttribute('value'));
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
#wrapper {
width: 100%;
border: 1px solid black;
overflow: hidden; /* will contain if #first is longer than #second */
}
#first {
width: 400px;
float:left; /* add this */
border: 1px solid red;
}
#second {
border: 1px solid green;
text-align: right;
overflow: hidden; /* if you don't want #second to wrap below #first */
}
.bs-example{
margin: 20px;
}
.text
{
font-size: 15pt;
font-family: Helvetica;
color: #3d718b;
}
hr{
margin: 60px 0;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div style="float:left;">
<ul class="nav nav-pills">
<li class="text" class="dropdown">
</b>
<ul class="dropdown-menu">
<li value="1">Value1</li>
<li value="2">Value2</li>
<li value="3">Value3</li>
</ul>
</li>
</li>
</ul>
</div>

This looks to do what you need using either jQuery or native JS.
<script>
// with jquery
$('.dropdown-menu li').click(function(el) {
console.log(el.target.textContent)
})
// native
const list = document.querySelectorAll('.dropdown-menu li');
list.forEach(el => el.addEventListener('click', function listClick() {
console.log(el.textContent);
}));
</script>

The short answer is, yes. The following code, following your example, uses an event handler which is triggered when one of the menu items are clicked. I've also included a working jsfiddle example below.
HTML
<ul class="nav nav-pills">
<li class="text" class="dropdown">
</b>
<ul class="dropdown-menu">
<li>Value 1</li>
<li>Value 2</li>
<li>Value 3</li>
</ul>
</li>
</ul>
<div class="col-xs-12 text-danger" id="result"></div>
Javascript / jQuery
$(document).on('click', '.dropdown-menu li a', function() {
var r = $('#result');
r.empty().append('You have clicked <strong>'+$(this).text()+'</strong> in the drop-down menu.');
});
https://jsfiddle.net/Xonos/z9jfa86r/
UPDATE: I have added another answer which shows a secondary example where you can select/de-select a menu item and then click a button to determine which of the menu items are selected. The JSFiddle link is below.
HTML
<div class="col-xs-12">
<ul class="nav nav-pills">
<li class="text" class="dropdown">
</b>
<ul id="myDropdown" class="dropdown-menu">
<li>Value 1</li>
<li>Value 2</li>
<li>Value 3</li>
</ul>
</li>
</ul>
</div>
<div class="col-xs-12 text-red" id="result"> </div>
<br>
<div class="col-xs-12">
<button id="checkBtn" class="btn btn-sm btn-success pull-right">Check Selected Menu Item</button>
</div>
<div class="col-xs-12 text-orange" id="check"> </div>
CSS
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
.text-red {
color:rgb(206, 35, 35);
}
.text-orange {
color:rgb(252, 144, 0);
}
.nav {
background-color:rgba(255,255,255,0.15);
}
.selected-item {
background-color:rgb(255,0,0);
}
Javascript / jQuery
$(document).on('click', '#myDropdown li a', function() {
var r = $('#result');
$(this).parent().parent().children().removeClass('selected-item');
if($(this).hasClass('selected-item')) {
$(this).removeClass('selected-item'); //De-select menu item.
} else {
$(this).parent().addClass('selected-item'); //Select menu item.
}
r.empty().append('You have selected <strong>'+$(this).text()+'</strong> in the drop-down menu.');
});
$(document).on('click', '#checkBtn', function() {
var selected = $('#myDropdown .selected-item');
if(selected.length > 0) { //If any of the menu items <li> have the "selected-item" class added.
$('#check').empty().append('Found a selected menu item. The value of it is: <strong>'+selected.text()+'</strong>');
} else {
$('#check').empty().append('You have not selected an item from the menu.');
}
});
https://jsfiddle.net/Xonos/74pwyL1m/

jQuery submenu not displaying correctly

Here is my code here first menu working properly but when applied sub sub menu it's conflicting with previous li. You can check there is a list under food report . when clicking that child is not displaying.
$(document).ready(function() {
$(".menu_li").click(function() {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
$('.child_ul').hide('slow');
$(this).children().children('.plus').show();
$(this).children().children('.minus').hide();
} else {
$(".menu_li").removeClass('selected');
$('.child_ul').hide('slow');
$(this).addClass('selected');
$('.plus').show();
$('.minus').hide();
$(this).children('.child_ul').show('slow');
$(this).children().children('.plus').hide();
$(this).children().children('.minus').show();
}
});
$(".menu_li1").click(function() {
if ($(".menu_li1").hasClass('selected')) {
$(".menu_li1").removeClass('selected');
$('.child_ul1').hide('slow');
$(".menu_li1").children('.child_ul1').children('.plus1').show();
$(".menu_li1").children('.child_ul1').children('.minus1').hide();
} else {
$(".menu_li1").removeClass('selected');
$('.child_ul1').hide('slow');
$(".menu_li1").addClass('selected');
$('.plus1').show();
$('.minus1').hide();
$(".menu_li1").children('.child_ul1').show('slow');
$(".menu_li1").children('.child_ul1').children('.plus1').hide();
$(".menu_li1").children('.child_ul1').children('.minus1').show();
}
});
});
.child_ul,
.child_ul1 {
display: none;
}
.left_menu ul li {
cursor: pointer;
}
.child_ul li,
.child_ul1 li {
border-left: 10px solid #222;
}
.child_ul,
.child_ul1 {
border-top: 1px solid #222;
}
.child_ul li a,
.child_ul1 li a {
background: #272525 none repeat scroll 0% 0% !important;
border-bottom: 1px solid #222;
}
.plus {
float: right;
margin-right: 5px;
}
.minus {
float: right;
margin-right: 5px;
}
ul li a {
background: #373737;
height: 30px;
padding-top: 14px;
display: block;
color: #949494;
text-decoration: none;
padding-left: 30px;
border-top: 1px solid #2f2f2f;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<li class='menu_li'>
<a>input form
<span class='plus'><img src='plus.png'></span>
<span class='minus' style='display:none'></span>
</a>
<ul class='child_ul'>
<li>
কাজের বিনিময়ে খাদ্য
</li>
<li>
সেতু কালভারট
</li>
<li>
ঘূর্ণিঝড় আস্রয় কেন্দ্র
</li>
</ul>
</li>
<li class='menu_li'>
<a>Report
<span class='plus'><img src='plus.png'></span>
<span class='minus' style='display:none'><img src='minus.png'></span>
</a>
<ul class='child_ul'>
<li class='menu_li1'>
<a>food report
<span class='plus1'><img src='plus.png'></span>
<span class='minus1' style='display:none'><img src='minus.png'></span>
</a>
<ul class='child_ul1'>
<li>
কাজের বিনিময়ে খাদ্য সাধারণ
</li>
<li>
কাজের বিনিময়ে খাদ্য সমন্নিত
</li>
</ul>
</li>
<li>
রিপোর্ট আর্কাইভ
</li>
</ul>
</li>

Thanks Tushar your comment helped me. I solved my problem I placed event.stopPropagation(); for my sub sub menu section then it worked properly. So I placed my own answer with snippet if it helped others.
$(".menu_li").click(function(event){
//$('.child_ul').hide('slow');
//$(this).children('.child_ul').toggle('slow');
if ($(this).hasClass('selected'))
{
$(this).removeClass('selected');
$('.child_ul').hide('slow');
$(this).children().children('.plus').show();
$(this).children().children('.minus').hide();
}else {
$(".menu_li").removeClass('selected');
$('.child_ul').hide('slow');
$(this).addClass('selected');
$('.plus').show();
$('.minus').hide();
$(this).children('.child_ul').show('slow');
$(this).children().children('.plus').hide();
$(this).children().children('.minus').show();
}
});
$(".menu_li1").click(function(event){
//event.preventDefault();
event.stopPropagation();
console.log('brick me!');
//$('.child_ul').hide('slow');
//$(this).children('.child_ul').toggle('slow');
if ($(this).hasClass('selected'))
{
$(this).removeClass('selected');
$('.child_ul1').hide('slow');
$(this).children('.child_ul1').children('.plus1').show();
$(this).children('.child_ul1').children('.minus1').hide();
}else {
$(".menu_li1").removeClass('selected');
$('.child_ul1').hide('slow');
$(this).addClass('selected');
$('.plus1').show();
$('.minus1').hide();
$(this).children('.child_ul1').show('slow');
$(this).children('.child_ul1').children('.plus1').hide();
$(this).children('.child_ul1').children('.minus1').show();
}
});
.child_ul,
.child_ul1 {
display: none;
}
.left_menu ul li {
cursor: pointer;
}
.child_ul li,
.child_ul1 li {
border-left: 10px solid #222;
}
.child_ul,
.child_ul1 {
border-top: 1px solid #222;
}
.child_ul li a,
.child_ul1 li a {
background: #272525 none repeat scroll 0% 0% !important;
border-bottom: 1px solid #222;
}
.plus {
float: right;
margin-right: 5px;
}
.minus {
float: right;
margin-right: 5px;
}
ul li a {
background: #373737;
height: 30px;
padding-top: 14px;
display: block;
color: #949494;
text-decoration: none;
padding-left: 30px;
border-top: 1px solid #2f2f2f;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<li class='menu_li'>
<a>input form
<span class='plus'><img src='plus.png'></span>
<span class='minus' style='display:none'></span>
</a>
<ul class='child_ul'>
<li>
কাজের বিনিময়ে খাদ্য
</li>
<li>
সেতু কালভারট
</li>
<li>
ঘূর্ণিঝড় আস্রয় কেন্দ্র
</li>
</ul>
</li>
<li class='menu_li'>
<a>Report
<span class='plus'><img src='plus.png'></span>
<span class='minus' style='display:none'><img src='minus.png'></span>
</a>
<ul class='child_ul'>
<li class='menu_li1'>
<a>food report
<span class='plus1'><img src='plus.png'></span>
<span class='minus1' style='display:none'><img src='minus.png'></span>
</a>
<ul class='child_ul1'>
<li>
কাজের বিনিময়ে খাদ্য সাধারণ
</li>
<li>
কাজের বিনিময়ে খাদ্য সমন্নিত
</li>
</ul>
</li>
<li>
রিপোর্ট আর্কাইভ
</li>
</ul>
</li>

If event.stopPropogation() doesn't work alone across different browsers try using event.preventDefault() along with event.stopPropogation().

How do I shift content to left in nav bar

So I know this will be a very easy fix, however, I cannot figure it out for the life of me.
How can I shift the letters in this nav bar to the very left?
$(document).ready(function() {
$(".letter").click(function(e) {
$(".letter").parent().removeClass('current');
$(this).parent().addClass('current');
var letter = $(this).html().trim();
$(".submenuDiv").hide();
x = e.clientX - 100;
pos = $(this).position();
y = pos.top + 50;
$("#div" + letter).css({
left: x,
top: y,
position: 'absolute'
});
$("#div" + letter).show();
});
});
.alphabetNav {
background-color: #D9DDDF;
}
.alphabetNav li {
text-decoration: none;
cursor: pointer;
float: left;
display: inline;
list-style: none;
background-color: #E9EDEF;
padding: 3px;
margin: 2px;
}
.letter:hover {
color: red;
}
}
.submenuDiv ul {
display: inline;
}
.submenuDiv ul li {
float: left;
list-style: none;
padding: 5px;
margin: 10px;
background-color: #F1F5F7;
border: solid 1px black;
border-radius: 10px;
font-size: 12px;
}
.submenuDiv {
display: none;
}
.alphabetNav {
width: 550px;
height: 27px
}
.noNav li {
cursor: default;
color: #ccc
}
li.current {
background: #fff
}
.alphabetNav li {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<body>
<ul class='alphabetNav'>
<li><a class='letter' id='letterA'>A</a>
</li>
<li><a class='letter' id='letterB'>B</a>
</li>
<li><a class='letter' id='letterC'>C</a>
</li>
<ul class='noNav'>
<li>D</li>
</ul>
<li><a class='letter' id='letterE'>E</a>
</li>
<ul class='noNav'>
<li>F</li>
</ul>
</ul>
<!-- Submenu for letter A -->
<div class='submenuDiv' id='divA'>
<ul>
<li>
Abbotsford-Mission (B.C.)
</li>
</ul>
</div>
<!-- Submenu for letter B -->
<div class='submenuDiv' id='divB'>
<ul>
<li>
Barrie (Ont.)
</li>
<li>
Brantford (Ont.)
</li>
</ul>
</div>
<!-- Submenu for letter C -->
<div class='submenuDiv' id='divC'>
<ul>
<li>
Calgary (Alta.)
</li>
</ul>
</div>
<!-- Submenu for letter D -->
<div class='submenuDiv' id='divD'>
<ul>
<li>
Apple
</li>
<li>
Artist
</li>
</ul>
</div>
<!-- Submenu for letter E -->
<div class='submenuDiv' id='divE'>
<ul>
<li>
Edmonton (Alta.)
</li>
</ul>
</div>
</body>
Thanks in advance!

All you need is:
.alphabetNav{
padding-left: 0px;
}
Get familiar with using the Web Inspector in the browser, you will get to know what you need to do to fix your problem. :)
Here is a snapshot from Chrome (the green part is for padding):

Remove the padding from the container.
.alphabetNav{
padding:0;
background-color:#D9DDDF;
}
Or just the left padding.
.alphabetNav{
padding-left:0;
background-color:#D9DDDF;
}

Set padding to 0 on alphabetNav

Links in the dropdown menu are not working

Having an issue getting any kind of interaction from these links in the dropdown. I tried various link types and none are responding to clicks.
<li class="headerContact">
Contact Us<i class="fa fa-envelope"></i>
</li>
<li class="menuLink">
Features<i class="fa fa-caret-right right"></i>
</li>
<li class="menuLink">
Science<i class="fa fa-caret-right right"></i>
</li>
<li class="menuLink">
Videos<i class="fa fa-caret-right right"></i>
</li>
The test page is at bruxzir.jgallardo.me/header.aspx.
This is the full code for that page that I am using during development. (I am not doing this in production)
<!doctype html>
<html class="no-js" lang="en">
<head>
<!--#include file="/pages/_includes/head-default.html" -->
<style>
.active .dropdown { display:block; }
.dropdown { display:none; }
.header {
background-color: #333;
color: #fff;
height: 36px;
width: 100%;
line-height: 36px;
}
/* should be replaced with image */
.headerLogo {
display:inline;
font-size: 24px;
line-height: 36px;
padding-left: 6px;
}
.headerMenu{
float:right;
font-size: 36px;
margin-right: 6px;
}
.headerLogo a, .headerMenu a { color:#fff; text-decoration:none; }
.headerNav {
background-color: #292c2d;
overflow:hidden;
width:100%;
}
.headerNav a { color: #f3f3f3; text-decoration: none; }
.headerNav ul {
list-style-type: none;
margin:0;
padding-left: 0;
text-align:left;
}
.headerNav ul li {
border-bottom: 1px dotted #34393b;
display:inline-block;
width: 100%;
}
.menuLink a {
display:block;
line-height: 48px;
padding: 0 12px;
}
.headerNav ul li a i {
line-height: 48px;
}
.right { float:right; }
.findLabLink {
background-color: #48e0a4;
margin: 0 auto;
text-align: center;
width: 84%;
}
.findLabLink a {
color: rgb(40,43,45);
display:block;
line-height: 48px;
}
.headerContact {
line-height: 60px;
text-align: center;
}
.headerContact a {
background-color: #464241;
border-radius: 2px;
letter-spacing: 3px;
padding: 8px 18px;
}
.headerContact i {
margin-left: 30px;
}
</style>
</head>
<body>
<div class="container">
<div id="mainContent" class="block push">
<div class="row">
<div class="large-12 columns">
<h1>BruxZir Home Page</h1>
<div id="dd" class="wrapper-dropdown-3 dd" tabindex="1">
<div class="header">
<div class="headerLogo">
<!-- change # to / -->
BruxZir
</div>
<div class="headerMenu">
≡
</div>
</div> <!--/ end of .header -->
<div class="headerNav">
<ul class="dropdown">
<li class="findLabLink">
Find An Authorized Lab
</li>
<li class="headerContact">
Contact Us<i class="fa fa-envelope"></i>
</li>
<li class="menuLink">
Features<i class="fa fa-caret-right right"></i>
</li>
<li class="menuLink">
Science<i class="fa fa-caret-right right"></i>
</li>
<li class="menuLink">
Videos<i class="fa fa-caret-right right"></i>
</li>
<li class="menuLink">
Cases<i class="fa fa-caret-right right"></i>
</li>
<li class="menuLink">
Testimonials<i class="fa fa-caret-right right"></i>
</li>
</ul>
</div> <!-- headerNav -->
</div>
</div>
</div>
</div> <!-- end of #mainContent -->
</div>
<!-- JavaScript Declarations
======================== -->
<!--#include file="/pages/_includes/js-default.html" -->
<script>
// all of this is for the menu
function WTF() {
window.location.href = "";
}
function DropDown(el) {
this.dd = el;
this.placeholder = this.dd.children('span');
this.opts = this.dd.find('ul.dropdown > li');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown.prototype = {
initEvents: function () {
var obj = this;
obj.dd.on('click', function (event) {
event.stopPropagation();
if (event.target.className === 'dd') {
$(this).toggleClass('active');
}
return false;
});
}
}
$(function () {
var dd = new DropDown($('#dd'));
$(document).click(function () {
// all dropdowns
$('.wrapper-dropdown-3').removeClass('active');
});
});
</script>
</body>
</html>

You're returning false and stopping event bubbling for all clicks withing the $('#dd') element right now. I think you only want to do that for your initial menu toggling click on the $('.dd') element.
if (event.target.className === 'dd') {
$(this).toggleClass('active');
event.stopPropagation(); // not sure why you need this
return false;
}

Look at the jsFiddle. I removed a lot of javascript and used one jQuery. I am not sure what you need, let me know if there something I missed.
$(function () {
$('.dd').on('click', function(event){
event.stopPropagation();
$('.wrapper-dropdown-3').toggleClass('active');
});
$(document).click(function () {
// all dropdowns
$('.wrapper-dropdown-3').removeClass('active');
});
});