Develop Reference

jQuery Highlight Nav Item on Load

I'm new to HTML/CSS/JS and I'm doing some testing and fiddling around with stuff and decided to highlight a nav element when on that page. I decided to use jQuery for this because from what I read it was the easiest solution. It's worked great so far, but my issue is that it doesn't highlight the main "chat" page on load because it's just the url, without the /index.html. I'd appreciate any help on how to get it to add the active class to the index.html element on load.
HTML:
<aside>
<nav>
<ul>
<li>Chat</li>
<li>Friends</li>
<li>Settings</li>
</ul>
</nav>
</aside>
JQuery:
jQuery(function($) {
var path = window.location.href;
$('aside nav ul li a').each(function() {
if (this.href === path) {
$(this).addClass('active');
}
});
SCSS:
.active {
border-right: 10px solid $accent-two;
}

First, your pathname includes the entire URL, so it will never match with href in your a tag. You need to get just the page name.
Next, you should check for the href attribute of the a tag and not the href itself.
The example below uses a dummy link to aid as a demo. I had to add in the href in JS because of the snippet.
jQuery(function($) {
var path = window.location.pathname;
var page = path.split("/").pop();
//
// The line below is for demo on stackoverflow purposes
$("#forDemoOnStackPurpose").attr("href", page);
//
$('aside nav ul li a').each(function() {
if ($(this).attr("href") === page) {
$(this).addClass('active');
}
});
});
.active {
border-right: 10px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside>
<nav>
<ul>
<li><a id="forDemoOnStackPurpose" href="">This test page</a></li>
<li>Chat</li>
<li>Friends</li>
<li>Settings</li>
</ul>
</nav>
</aside>

I give you an example of how i will dot it. Note that i had to simulate location change with some code, but every time you run the example, it will highlight a different anchor tag.
$(document).ready(function()
{
// Simulate change on "windows.location.href"
//===========================================================
var paths = ["/index.html","/friends.html","/settings.html"];
var idx = Math.floor(Math.random() * 3) + 0;
console.log("Random idx = " + idx);
//===========================================================
var path = paths[idx];
//var path = window.location.href;
$("a").removeClass('active');
$("a[href='" + path + "']").addClass('active');
});
.active {
border-right: 10px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside>
<nav>
<ul>
<li>Chat</li>
<li>Friends</li>
<li>Settings</li>
</ul>
</nav>
</aside>

Bootstrap navbar menu item li a change the active class when in the specific page

Using pure CSS and some javascript, how can I manage to remove and add the class 'active' to my li item? I tried using the 'onclick' function in javascript. It changes the color of the item but it doesn't redirect me to the link of my the selected item.
<div class="main_navs">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Products</li>
<li>Services</li>
<li> Wishlist</li>
<li> Register</li>
<li> Gift Card</li>
<li><a href="cart.php" class="main_navmenu"
<i class="fa fa-shopping-cart"></i> Cart <span class="badge">0</span></a></li>
</ul>
</div>
<script type="text/javascript">
$('#main_menu_items li a').on('click', function(){
$('li a.active').removeClass('active');
$(this).addClass('active');
});
</script>
CSS:
.main_navs ul li a.active{
background: rgba(255,255,255,0.2);
color: #333;
}
.main_navs ul li a{
background: rgba(0,0,0,1);
color: #fff;
}

I think this should help you out. It should add the class active to the matching anchor in your menu on page load.
<script>
$(function() {
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");
$('.main_navs a').each(function() {
if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
$(this).addClass('active');
}
});
});
</script>

Remove trailing slash first and then it would equal to the url that you want to match.
My solution is:
var current = window.location.href;
var current_url = current.replace(/\/$/, "");
$('.navbar-nav a').each(function(){
var $this = $(this);
// if the current path is like this link, make it active
if($this.attr('href').indexOf(current_url) !== -1){
$this.addClass('active');
}
});

Change Active Menu Item on Page Scroll?

I want to activate the menu item when I get to it's corresponding section. I got inspired by this previous SO question: Change Active Menu Item on Page Scroll? .
but the difference is that in my menu I have a little image over each menu item, that shows only if I hover the menu item, and hides when don't.
HTML
<nav>
<ul id="pics">
<li id="text-what"><img src="images/what.png" id="pic-what" class="vishid"><p>item1</p></li>
<li id="text-training"><img src="images/training.png" id="pic-training" class="vishid"><p>item2</p></li>
<li id="text-testi"><img src="images/trait.png" id="pic-testi" class="vishid"><p>item3</p></li>
<li id="text-contact"><img src="images/contact.gif" id="pic-contact" class="vishid"><p>item4</p></li>
</ul>
</nav>
CSS
.vishid{
visibility: hidden;
}
.visvis{
visibility:visible;
}
JAVASCRIPT (to show and hide images when hovering items)
$(document).ready(function(){
$("#text-what").hover(function(){
$("#pic-what").addClass('visvis');
},function(){
$("#pic-what").removeClass('visvis');
});
$("#text-training").hover(function(){
$("#pic-training").addClass('visvis');
},function(){
$("#pic-training").removeClass('visvis');
});
$("#text-testi").hover(function(){
$("#pic-testi").addClass('visvis');
},function(){
$("#pic-testi").removeClass('visvis');
});
$("#text-contact").hover(function(){
$("#pic-contact").addClass('visvis');
},function(){
$("#pic-contact").removeClass('visvis');
});
});
I want to show the image when I am at it's corresponding section. How can I do that with javascript?

There is a lot going on here. Your HTML should technically be corrected. href's should not encapsulte LI's. Instead your href should be set to block - width and height 100% - within the LI. Let's also move the class of .vishid to the parent LI. That way if you want it to effect anything else - besides just the images - in the future, it would be easy to add. So that would look like:
<nav>
<ul id="pics">
<li id="text-what" class="vishid"><img src="images/what.png" id="pic-what"><p>item1</p></li>
<li id="text-training" class="vishid"><img src="images/training.png" id="pic-training"><p>item2</p></li>
<li id="text-testi" class="vishid"><img src="images/trait.png" id="pic-testi"><p>item3</p></li>
<li id="text-contact" class="vishid"><img src="images/contact.gif" id="pic-contact"><p>item4</p></li><
</ul>
</nav>
Then you need to adjust your CSS to correct for the "non-block" level href.
#pics li a {
display: block;
width: 100%;
height: 100%;
}
.vishid img {
visibility: hidden;
}
.visvis img {
visibility: visible;
}
Finally, I am going to assume that you are using "articles" in your HTML for the sections. Doesn't have to be, but that is what my example will assume.
var clickScroll = false,
triggerHighlight = 80; // distance from the top to trigger action
$(window).scroll(function () {
var y = $(this).scrollTop(),
yCatch = y + triggerHighlight;
// Let's wrap in a variable check. Set this to tru is clicking on navigation
// false if simply scrolling
if (!clickScroll) {
$('article').each(function (i) {
var whichArticle = $(this).attr('id');
if ($(this).position().top < yCatch) {
var currentArticle = "#" + whichArticle;
adjustSubNav(currentArticle);
}
});
}
});
function adjustSubNav(l) {
$('#pics a').each(function (i) {
if ($(this).attr('href') == l) { // Add active class to the corresponding menu item
$(this).parent('li').removeClass('vishid').addClass('visvis');
} else {
$(this).parent('li').removeClass('visvis').addClass('vishid');
}
});
}

Multiple dropdown navigation - how to change the trigger button

I am struggling with one of my dropdowns.
Currently it is set up to be triggered by an i tag to drop down the sub menu.
$('nav li i').click(function() {
I want to change it to (nav li a) so it is not the icon that has to be pressed
I also have the code:
var child = $(this).index('nav ul li i');
but i am not sure what to change this to?
You can see all the code in jsfiddle.
http://jsfiddle.net/susannalarsen/VNYAx/

Since I do not see the <a> element anywhere, I have changed the <i> to <a> for demonstration purposes. You can see the example on http://jsfiddle.net/VNYAx/3/
Basically I changed
$('nav li i').click(function() {
to
$('nav li a').click(function() {
And also
var child = $(this).index('nav ul li i');
to
var child = $(this).index('nav ul li a');
Is this what you need?

Instead of using the index of the icon as a way to identify which dropdown you want to slide down, you can save a reference to that dropdown by searching for '.dropdown' within the element clicked.
$('nav li').click(function () {
var $childDropdown = $(this).find('.dropdown');
if ($childDropdown.is(':visible')) {
$('.dropdown').slideUp(300);
} else {
$('.dropdown').slideUp(300);
$childDropdown.slideDown(300);
}
});
http://jsfiddle.net/9Fk7j/2/

Just an alternative approach to this problem using .slideToggle(). If you need anything explaining please comment and I will edit the answer. I have commented the JavaScript below. I also removed the extra <div> in the markup as the nested <ul> is a perfectly good container.
Demo
HTML
<nav id="moo">
<ul>
<li>Item A
<ul>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</li>
<li>Item B
<ul>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
</ul>
</li>
</ul>
</nav>
CSS
ul {
padding: 0;
margin: 0;
}
li {
display: inline;
}
nav li {
position: relative;
}
ul ul {
display: none;
position: absolute;
border:1px solid #ccc;
padding: 10px;
}
ul ul li {
display: block;
}
JavaScript
var $allSubMenus = $('ul ul'); // handle to all submenus
$('nav li a').click(function (e) {
var $li = $(this).closest('li'); // get parent <li> of the <a> clicked on
var $subMenu = $li.find('ul'); // get our submenu
$allSubMenus.not($subMenu).slideUp(300); // hide all other submenus
$subMenu.slideToggle(300); // show our submenu
e.stopPropagation(); // stop event bubbling further
});
$(document).click(function () {
$allSubMenus.hide(); // no need to reselect, just use handle
});

Remember menu state on reload

I want to create a navigation menu with the exact same functionality as the one on this site: http://www.rex-ny.com/
I would prefer to do it only using HTML and CSS, but I tried all day and couldn't find a solution.
When I select a menu item, I want that menu to stay open after the page loads. Is this possible?
I want to also make the Main menu items clickable, so that they load a new page AND when that page loads that menu is open.
Here is what I have so far:
http://jsfiddle.net/MEL9d/
Here is the jquery:
$(document).ready(function () {
$('#menu > li > a').click(function(){
if ($(this).attr('class') != 'active'){
$('#menu li ul').hide();
$(this).next().toggle();
$('#menu li a').removeClass('active');
$(this).addClass('active');
}
});
});
And CSS:
#menu {
float: left;
}
#menu li a {
display: block;
}
#menu li ul {
display: none;
}

You can do this is plain HTML and CSS. Assuming you have a structure like this:
- site
+ css
+ js
index.html
about.html
You can add a class to the body of each page, so index for index.php and about for about.php:
<body class="about">
Then in your menu, add an id (or a class if you plan on having the menu in many places) to each item that corresponds to the page:
<ul id="menu">
<li id="index" class="active"><a href="index.html"></li>
<li id="about"><a href="about.html"></li>
</ul>
Finally, using CSS you can style the menu items for each page specifically:
.index #index,
.about #about,
#menu .active {
// styles for active item
}