We Keep Coding

Adding class or CSS:active using javascript

I need some help with both JS and CSS. I am using JS to hide and show subsections from one specific navigation bar on the website. First problem is, that I would like the JS code to specifically only work for that navigation bar and not the many others on the same site. Below is the JS code:
$('a').click(function(){
$('section').hide();
$($(this).attr('href')).show();
});
And below is the HTML code. I was wondering if I could somehow use the "navigation" class to select only this navigation bar in the JS code?
<ul class="navigation">
<li class="link">Tab1</li>
<li class="link">Tab2</li>
<li class="link">Tab3</li>
</ul>
Next problem has to do with the CSS. I would like to have the #content1, Tab1 be default when the site loads - and would like to have the text in it set to a color that is different from the rest (red or whatever). When tab2 is selected I would like that to change color while tab1 switches to black like the others etc. However I can't get the :active method to work in CSS (I guess because the JS really doesn't set it active.) Can anybody help me with that? Below is my CSS code (not all is relevant).
section {
display: none;
}
section:first-of-type {
display:block;
}
.navigation {
list-style: none;
}
li {
display: inline-block;
}
.nav2 {
display: inline-block;
width: 100px;
margin-right: 25px;
margin-bottom: 25px;
padding: 5px 5px 5px 5px;
background-color: #ffffff;
border: 1px;
border-style: solid;
border-color: #000000;
text-align: center;
text-decoration: none;
color: #000000;
}
Thank you very much in advance!

Create a CSS class that will be in charge of styling the active element. For this example we will use the class .active. It's important to notice that this is not a Pseudo-Class.
We will use a simple HTML markup for the tabs:
<ul class="tabs">
<li>
my tab
</li>
</ul>
Here follows a minimalist example of a tab style:
.tabs a { // represents the tabs
border: 1px solid #000;
}
.tabs a.active { // represents the active tabs
background: #f00;
}
Next step is creating a script to handle the clicks on the tabs. We want the script to remove the class .active from every other tabs and assign it to the tab that just got clicked. For that we can create an script that looks like:
$('.tabs').on('click', 'a', function () {
var $this = $(this), $ul = $this.parents('ul');
$ul.find('a').removeClass('active');
$this.addClass('active');
});
Example
$('.tabs').on('click', 'a', function() {
var $this = $(this),
$ul = $this.parents('ul');
$ul.find('a').removeClass('active');
$this.addClass('active');
});
body {
margin: 25px;
}
ul.tabs {
margin: 0 0 30px 0;
padding: 0;
list-style: none;
}
ul.tabs li {
display: inline-block;
}
ul.tabs li a {
margin: 0 2px;
padding: 5px 10px;
box-shadow: 0 0 4px rgba(0, 0, 0, .4);
text-decoration: none;
background: #eee;
color: #888;
text-transform: uppercase;
border-radius: 4px;
}
ul.tabs li a:hover {
box-shadow: 0 0 4px rgba(0, 0, 0, .4), 0 0 8px rgba(0, 0, 0, .8);
}
ul.tabs li a.active {
background: #aaa;
color: #fff;
}
<ul class="tabs">
<li>
tab 1
</li>
<li>
<a class="active" href="javascript:void(0)">tab 2</a>
</li>
<li>
tab 3
</li>
<li>
tab 4
</li>
<li>
tab 5
</li>
</ul>
<ul class="tabs">
<li>
tab 1
</li>
<li>
<a class="active" href="javascript:void(0)">tab 2</a>
</li>
<li>
tab 3
</li>
<li>
tab 4
</li>
<li>
tab 5
</li>
</ul>
<ul class="tabs">
<li>
tab 1
</li>
<li>
<a class="active" href="javascript:void(0)">tab 2</a>
</li>
<li>
tab 3
</li>
<li>
tab 4
</li>
<li>
tab 5
</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Ok so lets cover css first
If you want link be active by default just modify it to
<ul class="navigation">
<li class="link">Tab1</li>
<li class="link">Tab2</li>
<li class="link">Tab3</li>
and then style it with css
.active { your css }
And then you can handle rest via JS , use .find to select element only in navigation and .addClass and .removeClass to change a to active
$(".navigation a").click(function() {
$(".navigation").find('a').removeClass('active');
$(this).addClass('active');
});

jQuery selection strings use the same syntax as CSS. Therefore to select only anchor tags that are children of navigation, you can use descendent selectors.
$('.navigation a')
And for your CSS issue, no need to use the :active selector. Simply add or remove classes to your target element.
$('.navigation a').click(function () {
// make tabs default color
$('.navigation a').removeclass('fancy-colors')
// make clicked tab fancy
$(this).addClass('fancy-colors')
})
Check out the jQuery toggleclass docs http://api.jquery.com/toggleclass/
Setting default on page load simply means adding your class in the markup.
<a class="fancy-colors">

making movable menu items in html

Making movable menu items in html,
I have four menu items arranged in right corner of my site vertically one below the other like
Home
Services
Contact
About
Now i need On click of second element(services) the second element has come to top and first element(home) has to push down, similarly click on third element has to come to top and first has to push down .
Any help and any reference links Thanks ?

Here is how you could have the options jump straight to the top when you click them:
$(function() {
$('#menu').on('click', 'li', function(event) {
$(event.target).prependTo('#menu');
});
});
ul {
padding: 0;
}
li {
display: block;
list-style-type: none;
height: 30px;
line-height: 30px;
color: darkblue;
font-family: sans-serif;
background-color: #ddd;
padding-left: 10px;
margin: 5px 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
<li>Home</li>
<li>Services</li>
<li>Contact</li>
<li>About</li>
</ul>
jsFiddle link

Creating Drop Down Menu on click CSS

I'm required to build a menu with 5 options, upon clicking a certain one a new sub menu is to appear. I have absolutely no idea how to do this.
/**Navigation */
nav {
border: 1px solid red;
float: left;
margin-right: 35px;
min-height: 280px;
}
nav li {
text-decoration: none;
font-weight: normal;
color: red;
list-style: none;
}
/**Content */
#section {
background-color: ;
border: 1px solid;
font: normal 12px Helvetica, Arial, sans-serif;
margin-left: 180px;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
<div class="clearfix"></div>
<nav>
<ul>
<li> Home </li>
<li> Portfolio </li>
<ul>
<li>Commercial </li>
<li>Residential </li>
<li>Heritage </li>
<li>Rennovations </li>
</ul>
<li> Services </li>
<li> About Us </li>
<li> Contact Us </li>
</ul>
</nav>

In addition to the already mentioned checkbox hack, you could also use a button as menu items, and use the :focus state to display the dropdown menu. A benefit over this is that the menu will close if you click outside of it. Some HTML elements do not naturally receive focus upon clicks; for those, you can add the "tabindex" attribute to allow them to gain focus.
ul {
list-style: none;
}
.menu > li {
float: left;
}
.menu button {
border: 0;
background: transparent;
cursor: pointer;
}
.menu button:hover,
.menu button:focus {
outline: 0;
text-decoration: underline;
}
.submenu {
display: none;
position: absolute;
padding: 10px;
}
.menu button:focus + .submenu,
.submenu:hover {
display: block;
}
<ul class="menu">
<li>
<button>Home</button>
<ul class="submenu">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</li>
<li><button>More</button></li>
<li><button>Info</button></li>
</ul>

CSS does not have a click handler. For this reason it is impossible to do with standard CSS. You could use something called the checkbox hack, but in my humble opinion, it's a bit clunky and would be awkward to work with inside a navigation menu like your use-case requires. For this reason I would suggest jQuery or Javascript... Here is a rather simple solution using jQuery.
Basically, we hide the sub-nav from the start using display: none; Then, using jQuery, when ".parent" is clicked we toggle a class ".visible" to the sub-nav element (the nested UL) with display: block; which makes it appear. When clicked again, it disappears as the class is removed.
Note that for this to work, every nested <UL> which is a "sub-nav" MUST have the .sub-nav class, and it's parent element (the <LI>) MUST have the .parent class. Also, since this uses jQuery, you will need to hook up a jQuery library to your site. You can do this by hosting it yourself and linking it like you normally would, or you can link it from google's library service (recommended).
JSFiddle Demo
$(document).ready(function() {
$('.parent').click(function() {
$('.sub-nav').toggleClass('visible');
});
});
#nav ul.sub-nav {
display: none;
}
#nav ul.visible {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav">
<li>Home</li>
<li class="parent">About
<ul class="sub-nav">
<li>Johnny</li>
<li>Julie</li>
<li>Jamie</li>
</ul>
</li>
<li>Contact</li>
</ul>

Of course I am late but:
You can trigger a css click using a hack!!
Work with an checkbox!!
Sample:
ul{
display: none;
}
#checkbox{
opacity: 0;
}
#checkbox:checked + ul {
display: block;
}
<div class="container">
<label for="checkbox">Dropdown menu</label>
<input id="checkbox" type="checkbox" />
<ul>
<li>Dropdown link 1</li>
<li>Dropdown link 2</li>
</ul>
</div>
You can use transitions to animate the show an hide effect :)
This is just a very simple example!!
Mention: this is a CSS3 hack if you need borwser support for old browsers this is not working.

In fact, there is a possibility to get this working with pure CSS and browser element behaviour, using the checkbox hack, however at the time of writing this, it is pushing what SHOULD be done with CSS vs what COULD be done with CSS. Also It can cause some pretty terrible semantic code (after all there is a reason it is usually stated as the checkbox HACK).
Having said that, you could use it if you only have requirements for modern browsers, giving limited functionality to others and I have myself used this in production code, on an isolated chrome only project and it is pretty fun to play with.
Here is a link to read more on it:
http://css-tricks.com/the-checkbox-hack/
But again to stress, like others have on here already, that functional behaviour should really be done via JavaScript. Unless you actually want a hover based menu solution then that is a different question all together!

You will need to do this using javascript and registering a click event handler to perform your action.
If you're new to everything then you should look for some javascript tutorials (don't use W3Schools, look elsewhere) and then look at some jQuery tutorials as jQuery simplifies tasks like these.

There are many frameworks that you can use with good looking menus for your needs, not to mention they support all devices (tablets, phones and PCs).
For example in the twitter bootstrap framework there is exactly what you need, check this tutorial:
Twitter bootstrap - Navs
Read the whole Nav section, at the end they talk about Nav with dropdown for more options.
The menu of the tutorial itself is built with the Twitter bootstrap framework.

a pure css solution to your problem looks like this
Demo: http://jsfiddle.net/HyGZf/1/
you need input and label and you have to remove the href on portfolio if you only want to use css
you can add transition: all 1s ease-in-out; to the submenu if you want it to be animate
/**Navigation */
nav{
border: 1px solid red ;
float: left;
margin-right:35px;
min-height:280px;
}
nav li{
text-decoration:none;
font-weight:normal;
color:red;
list-style:none;
display:block;
width:100%;
}
/**Content */
#section{
background-color: ;
border: 1px solid;
font: normal 12px Helvetica, Arial, sans-serif;
margin-left:180px;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
#Portfolio:checked +ul ul#submenu{
height:80px;
}
#submenu{
overflow:hidden;
height:0px;
margin:0;
}
a[accesskey="2"]{
color:blue;
cursor:pointer;
text-decoration:underline;
}
the markup
<div class="clearfix"></div>
<nav>
<input id="Portfolio" type="checkbox" name="menu" hidden>
<ul>
<li> Home </li>
<li><label for="Portfolio"><a accesskey="2"> Portfolio </a></label> </li>
<ul id=submenu type="list">
<li>Commercial </li>
<li>Residential </li>
<li>Heritage </li>
<li>Rennovations </li>
</ul>
<li> Services </li>
<li> About Us </li>
<li> Contact Us </li>
</ul>
</nav>

$('#open').on('click', function(e) {
simple_showpopup("popup", e);
});
function simple_showpopup(id, evt) {
var _pnl = $("#" + id);
_pnl.show();
_pnl.css({
"left": evt.pageX - ($("#" + id).width() / 2),
"top": (evt.pageY + 10)
});
$(document).on("mouseup", function(e) {
var popup = $("#" + id);
if (!popup.is(e.target) && popup.has(e.target).length == 0) {
popup.hide();
$(this).off(e);
}
});
}
$("#popup").hide();
.defa-context-panel {
border: 1px solid black;
position: absolute;
min-width: 200px;
min-height: 150px;
background-color: #f8f8f8;
border: solid 1px #f2f2f2;
border-radius: 10px;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Open <span id="open" style="text-decoration:underline;color:blue;cursor:pointer">Click here</span>
<div id="popup" class="defa-context-panel">Content
<div>DIV inside</div>
</div>

drop down menu not working on ipad

I have an issue with my navigation menu. It's basically a logo image that when hovered a submenu slides down and then slides up when not hovered on. It works fine on desktops but the issue I am having it with mobiles devices. Specifically the iPad. For some reason the iPhone seems to translate it OK but on the iPad the first time you click the image the drop down menu slides down and then up quickly and will not appear again. I have been searching the net for a solution and have tried rewriting the menu completely to use click instead but still haven't had it work properly on an iPad. If someone could help me or point me in the right direction I would REALLY appreciate it!!
I've also put the sections of code in js fiddle
<div id="button">
<ul class="hover">
<li class="hoverli">
<img src="assets/images/menu_logo.jpg" width="210" height="160" class="menu_class"/>
<ul class="file_menu">
<li>our work
</li>
<li>about
</li>
<li>contact
</li>
<li class="#">blog
</li>
</ul>
</li>
</ul>
$(document).ready(function () {
$(".hoverli").hover(
function () {
$('ul.file_menu').slideDown('medium');
},
function () {
$('ul.file_menu').slideUp('medium');
});
$(".file_menu li").hover(
function () {
$(this).children("ul").slideDown('medium');
},
function () {
$(this).children("ul").slideUp('medium');
});
});
the css
#newmenu {
position: absolute;
height: 32px;
width: 184px;
left: 35px;
top: 100px;
margin: auto;
}
ul, li {
margin:0;
padding:0;
list-style:none;
}
#submenu {
display:none;
width:100px;
position: relative;
left: 110px;
font-family: helvetica;
font-size:12px;
}
#submenu li {
background-color: #FFFFFF;
position: relative;
}
#submenu li a {
color:#00000;
text-decoration:none;
padding:5px;
display:block;
text-align: right;
padding-right: 13px
}
.file_menu li a:hover {
color: #585858;
}
.blog {
padding-bottom: 10px;
}

As you've found, touch devices (Android included) don't handle Hover or Mouse events. Consider using .click() or .change(), which I have found to be especially useful on DDL or other menu/filtering behavior.

Problem with sub-menu showing/hiding on click

I followed a great example of how to make a sub-menu appear/disappear on click here and made it work. Quite an accomplishment since I'm just starting with javascript. But just as I made it work a few other problems came up, I'll try to explain:
1.- I have a vertical main menu and one of the options, 'Products' has a sub-category that opens on hover below the parent item. When selecting one of its sub-categories, a bigger menu shows up in a new div to the right of the main menu. When this happens, the selected sub-category changes color and displays a bullet so the user knows which sub-category they are viewing. I was doing this using PHP to detect the current page and assign an "active" id. But when I had it like that the sub-menu show/hide didn't work and all the options were showing when first entering the page. So I changed the link reference from "page.php" to "#" ­---which makes more sense since that option is not meant to be a link rather than just display another sub-menu but had to include it for the sake of displaying the 'active' id--- and now the show/hide works except after I click a sub-category, the menu to the right opens, but the previously selected sub-category that opens on hover closes and the php detect function doesn't work because I changed the reference to "#" and the link doesn't show an 'active' status; in fact, the 'home' option stays selected even when the second div is already showing.
It sounds confusing, I know. Here's the example, I hope it's clear what I'm trying to do. I'd appreciate if anyone knows a way around this.
2.- Once I can get this fixed, is there a way to make the second div slide from left to right instead of fading in?
Thanks in advance :)

See my update to your code.. http://jsfiddle.net/Jaybles/tkVfX/4/
CSS
.mainNav {
float: left;
width: 200px;
height: 100%;
min-width: 150px;
background-color: #e21a22;
}
.active{
font-weight:bold;
}
.mainSide {
font-size: 14px;
list-style: none;
font-family: Helvetica,"Helvetica Neue",Arial,sans-serif;
padding-top: 40px;
width: 143px;
margin-right: auto;
margin-left: auto;
}
.mainSide li a, .mainSide li {
color: #fff;
width: 143px;
display: block;
padding: 2px 0 2px 0;
text-decoration: none;
}
.mainSide ul li a {
width: 125px;
list-style: none;
padding: 6px 0 2px 18px;
}
.mainSide li a:hover {
color: #fdb046;
}
.mainSide li a#active, .mainSide ul li a#active {
color: #fdb046;
background: url("../img/bullet.jpg") right center no-repeat;
}
#subNavSys, #subNavApp, #subNavAcc {
float: left;
width: 200px;
height: 100%;
min-width: 150px;
background-color: #414143;
display:none;
}
#subSideSys, #subSideApp, #subSideAcc {
font-size: 14px;
list-style: none;
font-family: Helvetica,"Helvetica Neue",Arial,sans-serif;
padding-top: 163px;
width: 143px;
margin-right: auto;
margin-left: auto;
}
#subSideSys li a, #subSideSys li, #subSideApp li a, #subSideApp li, #subSideAcc li a, #subSideAcc li {
color: #fff;
width: 143px;
display: block;
padding: 2px 0 2px 0;
text-decoration: none;
}
#subSideSys li a:hover, #subSideApp li a:hover, #subSideAcc li a:hover {
color: #fdb046;
HTML
<div class="mainNav">
<img id="top" src="img/metal.jpg" width="143" height="43" alt="Index" />
<ul class="mainSide">
<li>Home</li>
<li>About us</li>
<li>Products
<ul>
<li>By system</li>
<li>By application</li>
<li>Accesories</li>
</ul>
</li>
</ul>
</div>
<div id="subNavSys">
<ul id="subSideSys">
<li>Sub-menu-1.1</li>
<li>Sub-menu-1.2</li>
<li>Sub-menu-1.3</li>
</ul>
</div>
<div id="subNavApp">
<ul id="subSideApp">
<li>Sub-menu-2.1</li>
<li>Sub-menu-2.2</li>
<li>Sub-menu-2.3</li>
</ul>
</div>
<div id="subNavAcc">
<ul id="subSideAcc">
<li>Sub-menu-3.1</li>
<li>Sub-menu-3.2</li>
<li>Sub-menu-3.3</li>
</ul>
</div>
JS
$(document).ready(function(){
$("#sys").click(function() {
$("#subNavApp").hide();
$("#subNavAcc").hide();
$("#subNavSys").fadeIn(800);
$('*').removeClass('active');
$(this).addClass('active');
});
$("#app").click(function() {
$("#subNavSys").hide();
$("#subNavAcc").hide();
$("#subNavApp").fadeIn(800);
$('*').removeClass('active');
$(this).addClass('active');
});
$("#acc").click(function() {
$("#subNavSys").hide();
$("#subNavApp").hide();
$("#subNavAcc").fadeIn(800);
$('*').removeClass('active');
$(this).addClass('active');
});
});