We Keep Coding

On page load set a certain style to a LI element

I have a page with the following menu:
https://jsfiddle.net/dva4zo8t/
Based on which menu button is clicked, the color changes and I can "remember" (set) the color on a new page load, like so:
$('[id*="button"]').click(function() {
$('.topmenu-ul li').removeClass();
$(this).addClass('topmenu-selected' + $('a', this).attr('class'));
});
I also want to set a style to the LI element (a different background color and a red highlighted text) once the page loads. So, when I click on "New Appointment", on the new page, the LI element should look like this:
So what I basically want is to change the class of the sub li just as I do with the main buttons, for example:
$('#redbutton').addClass('topmenu-selectedred');
$('.topmenu-tab-appointments').show();

I´ve created a fiddle that will make the buttons turn it´s background when pushed.
then you will make to them tu "unpush" when others are pushed.
try this fiddle.
$(".topmenu-ul li").click(function() {
$('li > #topmenu-ul').hide();
$(this).children("ul").toggle();
});
$('[id*="button"]').click(function() {
$('.topmenu-ul li').removeClass();
$(this).addClass('topmenu-selected' + $('a', this).attr('class'));
});
$('.topmenu-ul li a').click(function() {
$(this).addClass('topmenu-selectedsub');
});
* {
margin: 0;
padding: 0;
overflow: auto;
}
html,
body {
height: 100%
}
header,
footer,
article,
section,
hgroup,
nav,
figure {
display: block
}
body {
font-size: 1em;
color: #fcfcfc;
background-color: #f8f4eb;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
/*
* HTML5 Sections
*/
.header {
height: 72px;
margin: 0;
padding: 0;
background-color: #fff;
overflow: hidden;
}
.nav {
position: relative;
height: 52px;
margin: 0;
padding: 0;
overflow: hidden;
}
.main {
position: relative;
min-height: calc(100% - 124px);
background-color: #f8f4eb;
}
.aside {
float: left;
width: 195px;
background-color: #ebddca;
height: 100%;
}
/*
* Top Menu Styles
*/
.topmenu {
background: -webkit-linear-gradient(#858585, #636263);
border-top: 1px solid #656565;
border-bottom: 1px solid #3663ab;
box-shadow: inset 0 1px 0 #a8a8a8;
height: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000
}
.topmenu-header {
height: 4px;
background: -webkit-linear-gradient(top, #f5efe4 0%, #d3cdbe 100%);
border-top: 1px solid #d5cab8
}
.topmenu-subbg {
padding-left: 5px;
left: 0;
width: 100%;
height: 24px;
top: 30px;
background: -webkit-linear-gradient(top, #c8bfb0 0px, #f5efe6 7px);
border-bottom: 1px solid #d3c7b6
}
.topmenu-ul,
li,
a {
margin: 0;
padding: 0;
cursor: pointer;
}
.topmenu-ul li {
list-style: none
}
a {
text-decoration: none;
color: #000
}
.topmenu-ul > li {
float: left;
display: inline;
list-style: none;
white-space: nowrap;
border-right: 1px solid #414141;
box-shadow: 1px 0 0 0 rgba(165, 162, 165, 1)
}
.topmenu-ul > li a {
color: #e6e6e6;
font-size: .7rem;
line-height: 20px;
height: 20px;
display: block;
padding: 0 20px
}
.topmenu-ul > li a:hover {
color: #fff
}
.topmenu-ul li ul li a:hover {
background-color: #f3efe5
}
.topmenu-ul li ul {
font-size: 0;
display: none;
list-style: none;
position: absolute;
top: 27px;
left: -8px;
}
.topmenu-ul li ul li a {
color: #000;
line-height: 24px;
height: 24px;
font-weight: normal;
}
.topmenu-ul li ul li a:hover {
color: red;
}
.topmenu-ul li ul li {
display: inline-block;
list-style: none;
white-space: nowrap;
line-height: 24px;
height: 24px;
background: -webkit-linear-gradient(top, #c8bfb0 0px, #f5efe6 7px);
border-bottom: 1px solid #d3c7b6;
border-right: 1px solid #d5ccbe
}
.topmenu-ul > [class*=topmenu-selected] > a {
color: #fff;
}
.topmenu-selectedblue {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#78b1ff, #4881dc)
}
.topmenu-selectedred {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#ff8476, #dc5348)
}
.topmenu-selectedpurple {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#b479ff, #854ade)
}
.topmenu-selectedgreen {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#9dd592, #649f5a)
}
.topmenu-selectedsub {
background-color: #f3efe5
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
<div class="topmenu-header"></div>
<div class="topmenu">
<ul class="topmenu-ul">
<li id="bluebutton"><a class="blue">Home</a>
<ul id="topmenu-ul" class="topmenu-tab-home">
<li>Dashboard
</li>
</ul>
</li>
<li id="redbutton"><a class="red">Appointments</a>
<ul id="topmenu-ul" class="topmenu-tab-appointments">
<li>Appointments
</li>
<li><a id="new" href="#">New Appointment</a>
</li>
</ul>
</li>
<li id="greenbutton"><a class="green">Contacts</a>
<ul id="topmenu-ul" class="topmenu-tab-contacts">
<li>Contacts
</li>
<li>New Contact
</li>
</ul>
</li>
</ul>
</div>
</nav>
EDIT
Anyway, if you want to do it after page is loaded, you can use document.ready:
$( document ).ready(function() {
//JUST ADD AN ID TO THE BUTTON AND THIS WILL CHANGE IT´S BACKGROUND AFTER PAGE LOADS
$("#new").addClass('topmenu-selectedsub');
});
There is the demo:
$( document ).ready(function() {
//JUST ADD AN ID TO THE BUTTON AND THIS WILL CHANGE IT´S BACKGROUND AFTER PAGE LOADS
$('#new').addClass('topmenu-selectedsub');
$('.topmenu-tab-appointments').show();
});
$(".topmenu-ul li").click(function() {
$('li > #topmenu-ul').hide();
$(this).children("ul").toggle();
});
$('[id*="button"]').click(function() {
$('.topmenu-ul li').removeClass();
$(this).addClass('topmenu-selected' + $('a', this).attr('class'));
});
$('.topmenu-ul li a').click(function() {
$(this).addClass('topmenu-selectedsub');
});
* {
margin: 0;
padding: 0;
overflow: auto;
}
html,
body {
height: 100%
}
header,
footer,
article,
section,
hgroup,
nav,
figure {
display: block
}
body {
font-size: 1em;
color: #fcfcfc;
background-color: #f8f4eb;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
/*
* HTML5 Sections
*/
.header {
height: 72px;
margin: 0;
padding: 0;
background-color: #fff;
overflow: hidden;
}
.nav {
position: relative;
height: 52px;
margin: 0;
padding: 0;
overflow: hidden;
}
.main {
position: relative;
min-height: calc(100% - 124px);
background-color: #f8f4eb;
}
.aside {
float: left;
width: 195px;
background-color: #ebddca;
height: 100%;
}
/*
* Top Menu Styles
*/
.topmenu {
background: -webkit-linear-gradient(#858585, #636263);
border-top: 1px solid #656565;
border-bottom: 1px solid #3663ab;
box-shadow: inset 0 1px 0 #a8a8a8;
height: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000
}
.topmenu-header {
height: 4px;
background: -webkit-linear-gradient(top, #f5efe4 0%, #d3cdbe 100%);
border-top: 1px solid #d5cab8
}
.topmenu-subbg {
padding-left: 5px;
left: 0;
width: 100%;
height: 24px;
top: 30px;
background: -webkit-linear-gradient(top, #c8bfb0 0px, #f5efe6 7px);
border-bottom: 1px solid #d3c7b6
}
.topmenu-ul,
li,
a {
margin: 0;
padding: 0;
cursor: pointer;
}
.topmenu-ul li {
list-style: none
}
a {
text-decoration: none;
color: #000
}
.topmenu-ul > li {
float: left;
display: inline;
list-style: none;
white-space: nowrap;
border-right: 1px solid #414141;
box-shadow: 1px 0 0 0 rgba(165, 162, 165, 1)
}
.topmenu-ul > li a {
color: #e6e6e6;
font-size: .7rem;
line-height: 20px;
height: 20px;
display: block;
padding: 0 20px
}
.topmenu-ul > li a:hover {
color: #fff
}
.topmenu-ul li ul li a:hover {
background-color: #f3efe5
}
.topmenu-ul li ul {
font-size: 0;
display: none;
list-style: none;
position: absolute;
top: 27px;
left: -8px;
}
.topmenu-ul li ul li a {
color: #000;
line-height: 24px;
height: 24px;
font-weight: normal;
}
.topmenu-ul li ul li a:hover {
color: red;
}
.topmenu-ul li ul li {
display: inline-block;
list-style: none;
white-space: nowrap;
line-height: 24px;
height: 24px;
background: -webkit-linear-gradient(top, #c8bfb0 0px, #f5efe6 7px);
border-bottom: 1px solid #d3c7b6;
border-right: 1px solid #d5ccbe
}
.topmenu-ul > [class*=topmenu-selected] > a {
color: #fff;
}
.topmenu-selectedblue {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#78b1ff, #4881dc)
}
.topmenu-selectedred {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#ff8476, #dc5348)
}
.topmenu-selectedpurple {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#b479ff, #854ade)
}
.topmenu-selectedgreen {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#9dd592, #649f5a)
}
.topmenu-selectedsub {
background-color: #f3efe5
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
<div class="topmenu-header"></div>
<div class="topmenu">
<ul class="topmenu-ul">
<li id="bluebutton"><a class="blue">Home</a>
<ul id="topmenu-ul" class="topmenu-tab-home">
<li>Dashboard
</li>
</ul>
</li>
<li id="redbutton"><a class="red">Appointments</a>
<ul id="topmenu-ul" class="topmenu-tab-appointments">
<li>Appointments
</li>
<li><a id="new" href="#">New Appointment</a>
</li>
</ul>
</li>
<li id="greenbutton"><a class="green">Contacts</a>
<ul id="topmenu-ul" class="topmenu-tab-contacts">
<li>Contacts
</li>
<li>New Contact
</li>
</ul>
</li>
</ul>
</div>
</nav>

To do this you would normally use a sever side language to set a class on loading the page (i.e; on the About page add the class about-page to body, or the class current to the about link). But to do it with jQuery only you would need to know the urls of the pages.
$(document).on('ready', function(){
var $links = $('nav a'),
links_array = [],
current_url = window.location.pathname,
current_link_idx;
// we dont have an actual url so we'll pretend here
// for the sake of the snippet/preview
current_url = '/about';
$links.each(function(){
links_array.push($(this).attr('href'));
});
current_link_idx = links_array.indexOf(current_url);
$links.eq(current_link_idx).addClass('current-page');
});
.current-page {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
About
Contact
Etc
</nav>
Obviously, if you have complex nav/urls, this isn't bulletproof. You'll need to do some fiddling with the current_url, maybe splitting it into fragments.
Still, this is best done server side.

See this working Demo
$(".topmenu-ul li").click(function() {
$('li > #topmenu-ul').hide();
$(this).children("ul").toggle();
$(".topmenu-ul li").css("background-color","")
$(this).css("background-color","red")
});
$('[id*="button"]').click(function() {
$('.topmenu-ul li').removeClass();
$(this).addClass('topmenu-selected' + $('a', this).attr('class'));
});
$("#topmenu-ul li a").click(function() {
$("#topmenu-ul li a").css("background-color","")
$(this).css("background-color","red")
});
You can put whatever color you like to add. Its upto you , I have just shown you how to do it

Want to create drop down menu in my existing main menu

I am tired to create drop down menu in my existing main menu of website. I have tried many times but no result sometimes I get menu inline sometimes everything disturbed.
HTML code :
<ul class="mainmenu">
<li>Best Forex Broker</li>
<li>Top Rated Brokers</li>
<li>
Forex Bonus
<ul>
<li>drop1</li>
<li>drop2</li>
<li>drop3</li>
</ul>
</li>
<li>Articles & Tutorials</li>
<li>Affiliate Programs</li>
<li>
<img src="<?=$site_folder?>/images/rss.png" alt="RSS" />
</li>
<li> </li>
</ul>
and CSS code:
div.mainmenu { background: url('images/body-bg.gif') 0px -50px repeat-x; }
div.mainmenu div.center { background: url('images/body-bg.gif') 0px -50px repeat-x; border-bottom-color: #007399; border-left: none; border-right: none; }
ul.mainmenu { height: 28px; padding: 4px 0px 5px 0px; background: url('images/body-bg.gif') 0px -50px repeat-x; }
ul.mainmenu li { float: left; padding: 5px 10px 5px 12px; margin: 0px; background: url('images/mainmenu-sep2.gif') left repeat-y; font-size: 15px; }
ul.mainmenu li a { color: #fff; }
ul.mainmenu li a:hover { color: #e0f0ff; }
ul.mainmenu img { width: 20px; height: 20px; vertical-align: middle; margin: 0px 0px -2px 0px; }
I am waiting for anybody to help me . Thanks

So, you may do something like below. Add a class .dropdown to the 2dn level menu and hide it to begin with. Then, on li:hover display it. You need to apply positions to your main menu and dropdown menu as I did in the CSS. Feel free to style your dropdown the way you like. Take a look.
ul.mainmenu { position: relative; height: 28px; padding: 4px 0px 5px 0px; }
ul.mainmenu li { list-style-type: none; float: left; padding: 5px 10px 5px 12px; margin: 0px; font-size: 15px; }
ul.mainmenu li a { color: #000; }
ul.mainmenu li a:hover { color: #e0f0ff; }
ul.dropdown { position: absolute; overflow: hidden; top: 24px; margin: 0; display: none; background: #ccc; padding: 0; max-width: 100px; }
ul.mainmenu li:hover .dropdown, .dropdown:hover { display: block; }
<ul class="mainmenu">
<li>Best Forex Broker</li>
<li>Top Rated Brokers</li>
<li>
Forex Bonus
<ul class="dropdown">
<li>drop1</li>
<li>drop2</li>
<li>drop3</li>
</ul>
</li>
<li>Articles & Tutorials</li>
</ul>

changing li class on click

Having trouble changing the class for a li using javascript.
html
<ul id="mainmenu" style="width:130px">
<li class="mainmenudrop">Contact us
</li></ul>
css
#mainmenu {
list-style: none;
margin-left: 35px;
display: block;
}
#mainmenu li {
float: left;
padding: 3px 3px 3px 3px;
position: relative;
margin-right: 15px;
margin-top: 1px;
border: none;
cursor: default;
z-index: 999;
display: hidden;
}
This is the class I want to change:
#mainmenu li:hover {
border: 1px solid #aaa;
background: #fffff;
border-radius: 2px 2px 0px 0px;
padding: 2px 2px 2px 2px;
display: hidden;
}
rest of css
#mainmenu li a {
font-family: Verdana, Arial;
font-size: 12px;
color: #444444;
text-decoration: none;
display: block;
}
#mainmenu li:hover a {
color: #333333;
}
#mainmenu li .drop {
padding: 1px 20px 2px 4px;
background: url("../images/arrow2.gif") no-repeat right 4px ;
}
#mainmenu li:hover .drop {
background: url("../images/arrow.gif") no-repeat right 4px;
}
js (wanting to use)
$(#mainmenu li:hover).click(function(){
$(this).removeClass('menuhoverswap');
$(this).addClass('menuhoverswap');
});
id to swap
#menuhoverswap {
border: 1px solid #aaa;
}
Normally would be ok doing it but cant get my head around it as I have done the css for the menu in a different markup, referring css to mainmenu then li rather then giving the li a class of its own.

It's confusing what you are trying to achieve, but here is what i think you want to try.
http://jsfiddle.net/ccx9o55s/2
$(".mainmenudrop").on("mouseenter", function(e){
$(this).addClass("menuhoverswap");
});
$(".mainmenudrop").on("mouseleave", function(e){
$(this).removeClass("menuhoverswap");
});

UPDATED
Do you want to add the class on hover only?
$('.drop').hover(
function() {
$(this).addClass('selected');
}, function() {
$('.drop').removeClass('selected');
});
Here the full working example with your code.

Select box option list overlaping on menu

When click on select box then mouse over on menu
Select box option list overlaping on menu.
I have already used z-index property but its not working.
Select box hide but not option list. You can use any ready made menu and put select box at near the place on menu option list always display
CSS :
#navigation {
position: relative;
text-align:center;
margin:0 auto;
background-color:#fff;
}
#navigation li {
position: relative;
list-style: none;
display: inline-block;
padding: 5px 20px;
}
#navigation li a {
padding: 5px;
display: block;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 700;
color: #3b3b3b;
text-align: left;
text-shadow: 1px 1px 0 rgba(255,255,255,0.25);
}
#navigation li:hover .main {
color: #ee4e1d;
}
#navigation li .sub-nav-wrapper {
display: block;
position: absolute;
z-index: 30;
margin-left: -16px;
}
#navigation li .sub-nav-wrapper .sub-nav {
width: 150px;
margin-top: 4px;
background: #fff;
border-top: 1px solid #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.35);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
#navigation li:hover .sub-nav-wrapper {
display: block;
}
#navigation li .sub-nav-wrapper .sub-nav li {
list-style: none;
display: block;
margin: 0;
padding: 0;
text-align: left;
border-bottom: 1px solid #d7d7d7;
}
#navigation li .sub-nav-wrapper .sub-nav li:first-child {
}
#navigation li .sub-nav-wrapper .sub-nav li:last-child {
border: none;
}
#navigation li .sub-nav-wrapper .sub-nav li a {
display: block;
padding: 11px 20px;
font-size: 12px;
font-weight: 600;
text-shadow: 1px 1px 0 rgba(255,255,255,1.0);
box-shadow: inset 0 0 2px rgba(255,255,255,1.0);
-moz-box-shadow: inset 0 0 2px rgba(255,255,255,1.0);
-webkit-box-shadow: inset 0 0 2px rgba(255,255,255,1.0);
}
#navigation li .sub-nav-wrapper .sub-nav li:hover {
background: #f5f5f5;
border-bottom: 1px solid #3b3b3b;
}
/*****END DROPDOWN*****/
HTML :
<ul id="navigation">
<li>
Home
</li>
<li>
Portfolio
<div class="sub-nav-wrapper"><ul class="sub-nav">
<li>Graphics</li>
<li>Web</li>
<li>Print</li>
</ul></div>
</li>
<li>
Services
<div class="sub-nav-wrapper"><ul class="sub-nav">
<li>Web Design</li>
<li>SEO</li>
<li>Content Writing</li>
</ul></div>
</li>
<li>
Technology
<div class="sub-nav-wrapper"><ul class="sub-nav">
<li>JavaScript</li>
<li>HTML/CSS</li>
<li>Drupal</li>
<li>Joomla</li>
<li>Wordpress</li>
<li>MySQL</li>
<li>Oracle</li>
</ul></div>
</li>
</ul>
<!-----END NAVIGATION----->
<div style="margin:0 auto;width:900px;text-align:center;">
<select name="search_type" id="search-type" >
<option value="Data2">Data1</option>
<option value="Data1">Data1</option>
</select>
</div>

try using a higher value for z-index. It may work. As said by Era u can also use position relative, but if you are using many similar kind of things, every time you should have to change the positions.

try adding :
"position:relative"
to the parent div of menu.

Create a custom drop down select like the one used on twitter when user logs out

I'm trying to create custom drop-down select like the one used on twitter when user logs out and till now I did not succeed :
This is what I achieved but is not working on IE9 :|
http://fiddle.jshell.net/Hz2JH/
<ul id="main">
<li class="username" tabindex="1" >
<a>USER</a>
<ul class="curent_buser">
<li class="help">Help</li>
<li class="logoff">Log Off</li>
</ul>
</li>
</ul>
ul#main {
color: 232323;
width: 120px;
border:2px solid #ccc;
list-style: none;
font-size: 12px;
letter-spacing: -1px;
font-weight: bold;
text-decoration: none;
height:30px;
background:#f1f1f1;
}
ul#main:hover {
opacity: 0.7;
text-decoration: none;
}
#main > li{
background: url('http://cdn1.iconfinder.com/data/icons/crystalproject/24x24/actions/1downarrow1.png') 100% 0 no-repeat;
outline:0;
padding:10px;
}
ul#main li ul {
display: none;
width: 116px;
background: transparent;
border-top: 1px solid #eaeaea;
padding: 2px;
list-style: none;
margin: 7px 0 0 -3px;
}
ul.curent_buser li a {
color: gray;;
cursor: pointer;
}
ul.curent_buser{
background:lime !important;
}
ul#main li ul li a {
display: block;
padding: 5px 0;
position: relative;
z-index: 5;
}
#main li:focus ul, #main li.username:active ul {
display: block;
}
.help{
background: url("http://cdn1.iconfinder.com/data/icons/musthave/16/Help.png") no-repeat 100% center ;
height: 25px;
margin-bottom: 2px;
border-bottom: 1px solid white;
}
.help:hover{
background: #f4f4f4;
}
.logoff{
background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/on-off.png") no-repeat 100% center ;
height: 25px;
}
.logoff:hover{
background: #f4f4f4 ;
height: 25px;
}
.help a,.logoff a{
color:gray;
font-family: Museo700Regular,sans-serif;
letter-spacing: 0;
font-size: small;
}
​
So how can I build a custom select like the one used on twitter?

This works for me, doesnt require a click to get the drop down. Just add li elements to put the custom images on each menu item. Straight CSS and works on all browsers I have tested, if you find a browser that doesnt work let me know please.
#addMenu, #addMenu ul {
list-style: none;
}
#addMenu {
float: left;
}
#addMenu > li {
float: left;
}
#addMenu li a {
display: block;
padding: 0 8px;
text-decoration: none;
}
#addMenu ul {
position: absolute;
display: none;
z-index: 999;
}
#addMenu ul li a {
width: 70px;
color: #000;
font-weight: bold;
}
#addMenu li:hover ul.noJS {
display: block;
background: #ccc;
color: #000;
}
#addMenu ul li:hover a {
background: #ddd;
}
HTML
<ul id='addMenu'>
<li>
<a href='#'>MENU</a>
<ul class='noJS'>
<li><a href='URL'>Option1</a></li>
<li><a href='URL'>Option2</a></li>
<li><a href='URL'>Option3</a></li>
<li><a href='URL'>Option4</a></li>
</ul>
</li>
</ul>