|
JavaScript - Onclick Change Css Question?
I have the concept down to change the CSS for a label when I click it.
<label class="text" onClick="this.className='big_text" style="margin:5px;">Text</label> I was wondering, the goal is that it works, it changes from small text to big text when selected, but how can I change to back to small text from big text and vice versa using java for only the CSS? Much appreciated! C8 Similar TutorialsI'm currently working on a project and I am doing a bunch of image switching. I'm having a problem with the following... I have seven medium image objects and one small one. One is at the top and the other 7 are below. When one of the 7 is clicked, it then becomes the one up top and the one up top then takes the place of the image clicked. This needs to be able to happen no matter which of the seven i click. Also when you click one of the seven it runs a script to change 9 other images in the center of the page. this isnt too important because i have it working already. What i have is, each of the seven images run their function that changes the 9 center images and then it runs another function. What i need is for that function to determine which company for example(shaws, lowes, target) the top image belongs to and replace the image that was clicked with the top one. But i also need to replace the NAME="" and ONCLICK="function()" with the proper ones for the original company up top. Please if you can understand what im trying to do let me know, if you need further clarification i can do so. i can draw a picture of what im trying to do or the layout if needed but i cant necessarily show anyone the project due to a non-disclosure. I have managed to get my program running perfectly for outputting alert boxes, however instead of alert boxes I would like my image to change with an IF statement. My main image is a pic with text saying Please enter Temperature. if the user enters a temperature it will display an alert saying HOT, MODERATE or COLD. I have made other images that basically say the same thing and I would like the appropriate image to replace the original image depending on the IF statement I have commented out my alertboxes (which work) and replaced new code above that I can't seem to get working. On lines 21, 27 and 33. Any help would be greatly appreciated. Code: <html>
<head>
<title>TempReader™</title>
<script type="text/javascript">
//This is where we decare our function to validate the HTML form
function validateform()
{
// Setting our variable name and it's value by calling it from the HTML form textbox
var temp = document.forms["inputform"]["temperature"].value
// If the input is not a number or an empty field, alert the user and stop the program
if (isNaN(temp) || temp == "")
{
alert("Please enter a number");
return false;
}
//If the input is valid we compare the input value and display the appropriate output
if (temp > 35)
{
document.getElementById("temp_img").src ="temp_hot.png";
//alert("Wow, it's really hot!");
}
else if (temp <= 35 && parseFloat(temp) >= 18)
{
document.getElementById("temp_img").src ="temp_mid.png";
//alert("It's a comfortable temperature right now");
}
else if (temp < 18)
{
document.getElementById("temp_img").src ="temp_cold.png";
//alert("Brrr, it's a little bit cold for my liking");
}
}
</script>
</head>
<body>
<div style="margin-top:0px; text-align:center">
<img id="temp_img" src="what_temp.png" alt="Temperature" />
</div>
<form name="inputform" method="post" action="">
<table>
<tr><td><input type="text" name="temperature" value="Enter Temperature"></td></tr>
<!-- Below is submit button that when pressed validates the form -->
<tr><td><input type="submit" value="Submit" onclick = validateform()></td></tr>
</table>
</form>
</body>
</html>
BTW, My images are stored in the same directory as the HTML file and the img names are correct hi all, I am using ajaxcontent javascript to load content into certain parts of the website and all my links work that way.. the problem with that is that I can't use classical approach for building menus.. like when you assign "current " class to your link and then it changes color or whatever when you follow link to another html or whichever website. So I have menu like this .. Code: <li class="current"><a href="index.htm"><b>One</b></a></li>
<li><a href="javascript:ajaxpage('2.php', 'right');"><b>Two</b></a></li>
<li><a href="javascript:ajaxpage('3.php', 'right');"><b>Three</b></a></li>
<li><a href="javascript:ajaxpage('4.php', 'right');"><b>Four</b></a></li>
<li><a href="javascript:ajaxpage('5.php', 'right');"><b>Five</b></a></li>
I'm sorry for my English is so bad.. but I will try to explain what I'd like to achieve.. I'd like to put in some kind of onclick script which will change class of that <li> to current but at the same time I want to change <li class="current"> to <li class=""> or <li class="whatever">... so here I go again.. Code: <li class="current"><a href="index.htm"><b>One</b></a></li>
<li><a href="javascript:ajaxpage('2.php', 'right');"><b>Two</b></a></li>
<li><a href="javascript:ajaxpage('3.php', 'right');"><b>Three</b></a></li>
<li><a href="javascript:ajaxpage('4.php', 'right');"><b>Four</b></a></li>
<li><a href="javascript:ajaxpage('5.php', 'right');" onclick="this.className='current'"><b>Five</b></a></li>
Now this changes the <li> class to current and I only want to have 1 current. In this case link "Five" should have current class others should have no class or class="whatever" its same Thank you for any answers in advance Here is my code for two tab images. Code: <a href="#page-2"><img src="/images/but02.png" style="margin-top:8px; float:left;"></a>
<a href="#page-1"><img src="/images/but01.png" style="margin-top:8px; float:left;"></a>
I need to have it so when tab '#page-2' is clicked it will change the image to '/images/but03.png' and when tab '#page-1' is clicked it will change the image to '/images/but04.png' ? Its basically to show which tab is active, one image is lighter then the other. Can anyone help ? Hi, I have a row of buttons that are made by innerhtml using this code: Code: sidebar_html += '<div id="button"><input type="button" onclick="toggleRun('+poly_num+')" value="Start Bus" id="runBtn'+poly_num+'" style="width:120px; height:24px; text-align:center"></div><br />';
to fire this function: Code: function toggleRun(poly_num){
var btn = document.getElementById('runBtn'+poly_num);
if (document.getElementById('runBtn'+poly_num).onclick) {
if (run){
run=false;
document.getElementById('runBtn'+poly_num).value="Reload Page";
startAnimation(poly_num);
} else {
run=true;
document.getElementById('runBtn'+poly_num).value="Reload Page";
window.location.reload();
}
}
}
the function can only run once, so the idea is that the button either runs it the first time or reloads the page. at the moment, the way it's working is that the button that's clicked changes its value to "Reload Page" but the others keep their original value, even though it reloads if you click them. So I'd like a way to change the value of the rest of the buttons when one is clicked. Is that possible? Here's the page if I didn't explain myself well enough. Hi Guys, How could I change Code: <a onclick="processForm();">Continue</a> to Code: <input type="checkbox" name="agree" value="1" onclick="if(this.checked).processForm();" /><label for="agree">Continue</label> or to Code: <input type="checkbox" name="agree" value="1" checked="checked" onchange="if(this.checked).processForm();" /><label for="agree">Continue</label> Code: <script type="text/javascript">
function processForm() {
$.ajax( {
type: 'POST',
url: '<?php echo $submit); ?>',
data: '<?php $data); ?>',
success: function(data) {
$('#message').html(data);
}
} );
}
</script>
when i Using <a onclick="processForm();">Continue</a> then work fine, but i needed the checkbox. Anyone could help me? Hi im trying to do this: I have an app multilanguage english & spanish at the start of page it appears english flag but webpage on spanish like this pictu and when i click english flag then it turns english webpage and flag change to spanish like this image: im trying to make a loop cause when i click again spanish flag it turns to english flag but when i click again english flag it doesnt appears anything i dont get any javascript error here is my code of flags: Code: <div id="lang_panel">
<div id="ZA_lang" onclick="setLang('PA'); toggle2();"></div>
<div id="PA_lang" onclick="setLang('ZA'); toggle();"></div>
</div>
the Code: setLang('PA')
is for set webpage language. and Code: toggle(); & toggle2(): i made if for changes the flag here is full toogle & toggle2 functions: Code: function toggle() {
var ele = document.getElementById("PA_lang");
if(ele.style.display == "block") {
ele.style.display = "block";
$("PA_lang").style.background = "url('./img/ui/l_ZA_on.png') no-repeat";
}
else {
ele.style.display = "block";
}
}
function toggle2() {
var ele = document.getElementById("PA_lang");
if(ele.style.display == "block") {
ele.style.display = "none";
$("ZA_lang").style.background = "url('./img/ui/l_ZA_on.png') no-repeat";
}
else {
ele.style.display = "block";
}
}
Code: l_ZA_on.png is USA flag Code: l_PA_on.png is Panama flag How do I change the Button's value onClick? I want it to initially be "Read More" and then change to "Show Less" Code: <script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
</script>
<div>Why are we going to stop making investments in companies like this?</div>
<span id="obamaenergyapril212011" style="display:none;">
END 12:50 P.M. PDT</span>
<input type="button" name="obama" onclick="return toggleMe('obamaenergyapril212011')" value="Read/Hide More" >
Hello again today I am trying to figure out how to change or maybe even assign the arguments passed in a link. Code: function link(x)
{
alert("The word you are thinking is" +x);
}
<a href="#" onclick="link('cow')"> LINK</a>
As you can see from the code above clicking on the LINK would produce an alert box saying "The word you are thinking is cow" I need to find a way to use JS to change the passed argument 'cow' to something else like 'cat' I need this to be a funtion and not an input box. I will be running this through a loop and the passed parameter will be changing so if I can just figure out how to adjust the argument from a function then I think I can figure out the next stem of my project Thanks I am trying to add a border around the base they select and then when they select another one, I want the previous one to go away and then high light that one. This is my PHP code that outputs the bases: Code: $gender = $_GET['gender'];
// SQL Injection here?
$sql = "SELECT * FROM habases WHERE gender='".$gender."'";
$result = mysqli_query($cxn, $sql) or die(mysqli_error($cxn));
$baseCount = 0;
while ($row = mysqli_fetch_assoc($result))
{
$baseimage = $row['image'];
$basesOutput .= "<input type=\"image\" id=\"".$baseCount."\" src=\"http://www.elvonica.com/".$baseimage."\" onclick=\"baseBorder(".$baseCount.");return false;\" value=\"".$baseimage."\" name=\"base\">";
$baseCount++;
}
I have a baseCount so each image ID is unique. The baseBorder() is the function that will change the border. Here is the baseBorder() function: Code: var prevId;
function baseBorder(count)
{
if (prevId)
{
$("#prevId").style.border="none";
}
else
{
$("#count").style.border="2px solid #E8272C";
prevId = count;
}
}
Can anyone help me out since it's not working? Code: <img id="who" class="who" src="who.jpg" alt="Warriors Chosen For Battle" title="Warriors Chosen For Battle"> <img id="chosen" class="selector" src="selector.jpg" alt="Click for next image" title="Click for next image" onclick="chosen()"> <img id="ambassador" class="selector" src="selector.jpg" alt="Click for next image" title="Click for next image"onclick="ambassador()"> Code: function chosen()
{
document.getElementById("who").src="chosen_for_christ.jpg";
}
function ambassador()
{
document.getElementById("who").src="ambassador.jpg";
}
Yeah so basically when I click on one of the selector images I want it to change the value "who" images src value. I'm making an image selector, it works fine in IE, but every other browser it refuses to do anything. Hi, i have a <td> with a background image and 3 other <td>'s that contains blank photos in them, i need 2 things that they'll make: 1. when i click on one td that contain blank image lets call it tdimg1 it will toggle the visibility of the div inside the first td lets call it tdframe and for the div lets call it divframe1, (i have a script that works) but the main issue is that when i click tdimg1 tdimg2 and tdimg3 it will show divframe1 divframe2 and divframe3 what i want is that it will show only one at a time, so if ill hit the tdimg2 it will show me divframe2 and if after that ill hit tdimg3 it will hide the divframe2 and appear the divframe3. 2.the tdframe have an image as a background lets call it basicbg.jpg, i want that when i will hit tdimg1 the background of the tdframe will change to lets say newbg1.jpg, and as ill hit it again it will go back to basicbg.jpg, as ill hit tdimg3 it will change to newbg3.jpg and if i wont "close" it and click tdimg2 it will just change it to newbg2.jpg thanks! I would like to have a text link do 2 things: 1. Change #box1.style1 to class="style2" (from style1) 2. Change #box2.style2 to class="style1" (from style2) So the text link would not change its own style, but change the class of 2 different divs Your help on this is very much appreciated. Thank you Hi, is it possible to change the class of an element onClick with a fade? This is the code I have so far which works great for changing the class but I have no idea how to include a fade in this. I am changing the class in order to change the background-image of a div. Code: <a href="#none" onclick="document.getElementById('tool').className ='tool1'">
Many thanks, M I just cannot get the html to load for each linked button to the Iframe. If I remove the "onclick" command for the backround images, the links load to the Iframe. If I leave the "onclick" command in there only the background changes. So, I would assume there is a conflicting issue with loading the "a href" and the "onclick" commands together. Maybe I need to know how to do multiple "onclick" commands...suggestions? Code: <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to Whitetail Fantasies</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
font-family:Tahoma, Geneva, sans-serif;
background-color: #000;
}
#background {
position:absolute;
float:left;
width:1024px;
height:768px;
background-image:url(wf_layout/wf_bkgnd-1.jpg);
z-index:0;
}
</style>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('wf_layout/buttons/home_inv.png','wf_layout/buttons/aboutus_inv.png','wf_layout/buttons/trophies_inv.png','wf_layout/buttons/trailcams_inv.png','wf_layout/buttons/calendar_inv.png','wf_layout/buttons/contact_inv.png')">
<div id="background"></div>
<div id="outer">
<div id="header"></div>
<div id="wrapper">
<div id="left_side"><br /><br /><br /><br /><br /><br /><br />
<table width="140" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="wf_home.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-1.jpg)'; return false;" onmouseover="MM_swapImage('btn_home','','url(wf_layout/buttons/home_inv.png)',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/home.png" alt="Home button" name="btn_home" width="140" height="42" border="0" id="btn_home" /></a></td>
</tr>
<tr>
<td><a href="wf_aboutus.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-2.jpg)'; return false;" onmouseover="MM_swapImage('btn_aboutut','','wf_layout/buttons/aboutus_inv.png',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/aboutus.png" alt="About Us Button" name="btn_aboutut" width="140" height="42" border="0" id="btn_aboutut" /></a></td>
</tr>
<tr>
<td><a href="wf_trophies.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-3.jpg)'; return false;" onmouseover="MM_swapImage('btn_trophies','','wf_layout/buttons/trophies_inv.png',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/trophies.png" alt="Trophies button" name="btn_trophies" width="140" height="42" border="0" id="btn_trophies" /></a></td>
</tr>
<tr>
<td><a href="wf_trailcams.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-4.jpg)'; return false;" onmouseover="MM_swapImage('btn_trailcams','','wf_layout/buttons/trailcams_inv.png',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/trailcams.png" alt="Trial Cams Button" name="btn_trailcams" width="140" height="42" border="0" id="btn_trailcams" /></a></td>
</tr>
<tr>
<td><a href="wf_prices.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-5.jpg)'; return false;" onmouseover="MM_swapImage('btn_prices','','wf_layout/buttons/calendar_inv.png',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/calendar.png" alt="Prices button" name="btn_prices" width="140" height="42" border="0" id="btn_prices" /></a></td>
</tr>
<tr>
<td height="41" align="center" valign="middle"><a href="wf_contact.html" target="_IFrame" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn_contact','','wf_layout/buttons/contact_inv.png',1)" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-6.jpg)'; return false;"><img src="wf_layout/buttons/contact.png" alt="contact button" name="btn_contact" width="137" height="41" border="0" id="btn_contact" /></a></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td align="center"><img src="mdclogo.png" alt="mdc_logo" width="120" height="106" border="0" usemap="#Map" /></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</div>
<div id="content_area">
<br /><br /><br />
<iframe name="_IFrame" style="width:800px; height:500px;" src="wf_home.html" frameborder="0" allowtransparency="true"></iframe>
</div>
iu
</div>
</div>
<div id="footer"></div>
<map name="Map" id="Map">
<area shape="poly" coords="0,100" href="#" />
<area shape="poly" coords="58,1,119,97,1,99" href="http://mdc.mo.gov/hunt/" target="_blank" />
</map>
</body>
</html>
Hello, So I have two pieces of Javascript attached to my open/close text boxes. One for the visibility function: Code: <script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
The other for changinging the image to reflect the text box's status (open of closed): Code: <script type="text/javascript">
var ImgPath='../images/portfolio/';
function changeImage (id) {
var tab = document.getElementById(id);
if (tab.src.match('open.png')) {
tab.src = ImgPath + 'close.png';
}
else {
tab.src = ImgPath + 'open.png';
}
}
</script>
The problem only shows further down the page, when I click to open a box it automatically goes back to the top of the page instead of staying at the user's current page position I would like it to stop changing the page position onclick. Any help would be much appreciated! Hi, I would like to add Start / Pause buttons to my website which upon click change from Start to Pause and back. And an onclick event of writing a DB entry which on the other end will be read again by a php script. There is all ready a javascript on the page being: Code: <script type="text/JavaScript">
function showHide(elementid){
if (document.getElementById(elementid).style.display == 'none'){
document.getElementById(elementid).style.display = '';
} else {
document.getElementById(elementid).style.display = 'none';
}
}
</script>
At the moment it echo's DB rows with php and i want to add the buttons to the echoed line. I'm fairly new to php and don't know anything about javascript basicly. Is there anyone that can help me with this? Many thanks I'm very inexperienced with Javascript, but want to use the onclick event to change an image to text. I'm working on a directory type website and want users to have to click on the image of a telephone in order to reveal the telephone number they are looking for. how do i do this? Also is there a way of tracking how many clicks each person gets? I'd really appreciate any help you guys can give me on this Hi guys, I am having an issue changing a piece of Javascript and hoped you guru's could help?I am not awful with Javascript but it is fair to say I am still at the beginning of my learning! I can't find the correct answer in forums and tutorials and you guys are literally my last hope! Here it is .... I have a drop-down menu on a website I am working on which is made up of HTML, CSS and a little bit of Javascript. At the moment it is set so that when the user hovers over the menu it operates the drop-down. This obviously does not work for iPads etc as there is no mouse to hover. I want to keep my menu but alter the Javascript so the menu drops when clicked instead. Here is my code: Javascript Code: <script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]></script>
HTML Code: <div id="menuPadding"> <div id="menu"> <ul id="nav"> <li id="m1"><a href="">HOME</a></li> <li id="m2">ABOUT US <ul> <li><a href="">Our Values</a></li> <li><a href="">Facilities</a></li> <li><a href="">Arena</a></li> <li><a href="">Jobs</a></li> </ul> </li> <li id="m3">SUCCESS <ul> <li><a href="">Jobs</a></li> <li><a href="">Results</a></li> <li><a href="">Awards</a></li> <li><a href="">Testimonials</a></li> </ul> </li> </div> </div> CSS Code: #menu {
margin-top: 16px;
width: 879px;
height: 30px;
z-index: 1000;
font-family: Verdana, Geneva, sans-serif;
font-size:11px;
font-weight:bold;
}
#menuPadding {
margin: 0px 0px 0px 0px;
padding: 10px 0px 10px 0px;
text-align:center;
z-index: 1000;
}
#menuPadding ul {
height: 29px;
margin: 0px 0px 0px 0px;
padding: 5px 0px 5px 0px;
z-index: 1000;
}
#menuPadding ul li {
/* display: inline;*/
line-height: 29px;
padding:0px;
margin-left:1px;
display:block;
float:left;
font-weight:bold;
color:#fff;
z-index: 1000;
}
#menuPadding ul li a {
text-align:center;
z-index: 1000;
}
#menuPadding ul li li {
padding:0px;
margin:0px;
z-index: 1000;
}
#menuPadding ul li li a {
text-align:left;
padding-left:14px;
text-transform:uppercase;
z-index: 1000;
font-size:90%;
}
#menuPadding ul li li a.notupper {
text-transform:none;
z-index: 1000;
}
/* coloured menus */
#menuPadding ul li#m1 {
background:#FF0000;
width:96px;
z-index: 1000;
}
#menuPadding ul li#m1 li {
background:#FF0000;
width:146px;
z-index: 1000;
}
#menuPadding ul li#m2 {
background:#0099CC;
width:96px;
z-index: 1000;
}
#menuPadding ul li#m2 li {
background:#0099CC;
width:166px;
z-index: 1000;
}
#menuPadding ul li#m2 li a {
width:166px;
z-index: 1000;
}
#menuPadding ul li#m3 {
background:#999999;
width:97px;
z-index: 1000;
}
#menuPadding ul li#m3 li {
background:#999999;
width:176px;
z-index: 1000;
}
#menuPadding ul li#m3 li a {
width:176px;
z-index: 1000;
}
#menuPadding ul li#m4 {
background:#9966CC;
width:96px;
z-index: 1000;
}
#menuPadding ul li#m4 li {
background:#9966CC;
width:156px;
z-index: 1000;
}
#menuPadding ul li#m4 li a {
width:156px;
z-index: 1000;
}
#menuPadding ul li#m5 {
background:#AAC619;
width:96px;
z-index: 1000;
}
#menuPadding ul li#m5 li {
background:#AAC619;
width:230px;
padding-right:20px;
z-index: 1000;
}
#menuPadding ul li#m5 li a {
width:230px;
z-index: 1000;
}
#menuPadding ul li#m6 {
background:#FF9900;
width:97px;
z-index: 1000;
}
#menuPadding ul li#m6 li {
background:#FF9900;
width:146px;
z-index: 1000;
}
#menuPadding ul li#m7 {
background:#FF0099;
width:97px;
z-index: 1000;
}
#menuPadding ul li#m7 li {
background:#FF0099;
width:216px;
color:#fff;
z-index: 1000;
}
#menuPadding ul li#m7 li a {
width:216px;
color:#fff;
z-index: 1000;
}
#menuPadding ul li#m7 li li {
font-size:87%;
z-index: 1000;
}
#menu li ul ul { /* third-and-above-level lists */
margin: -30px 0 0 216px;
z-index: 1000;
}
#menu li:hover ul ul, #menu li.sfhover ul ul {
left: -999em;
z-index: 1000;
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
z-index: 1000;
}
#menuPadding ul li#m8 {
background:#660099;
width:97px;
z-index: 1000;
}
#menuPadding ul li#m8 li {
background:#660099;
width:146px;
z-index: 1000;
}
#menuPadding ul li#m9 {
background:#A80017;
width:97px;
z-index: 1000;
}
#menuPadding ul li#m9 li {
background:#A80017;
width:146px;
z-index: 1000;
}
#menuPadding ul li a:link,#menuPadding ul li a:active,#menuPadding ul li a:visited {
color:#fff;
z-index: 1000;
}
#menuPadding ul li a:hover {
color:#000;
z-index: 1000;
}
/* suckerfish */
#menu, #menu ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;color:#fff;
}
#menu a {
display: block;
width: 96px;
}
#menu li { /* all list items */
float: left;
width: 96px; /* width needed or else Opera goes nuts */
border-top:1px solid #fff;
}
#menu li ul { /* second-level lists */
position: absolute;
background: orange;
width: 106px;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
font-size:90%;
}
#menu li ul ul { /* third-and-above-level lists */
/* margin: -1em 0 0 96px;*/
font-size:110%;
}
#menu li li {
font-size:100%;
color:#fff;
}
#menu li:hover ul ul, #menu li.sfhover ul ul {
left: -999em;
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
I realise that this must be quite an easy thing for you guys but - as I said - I am at the beginning of my learning and it is confusing the hell out of me! All of the things I have tried have not worked! Any help would be truly appreciated! Thanks in advance! |
|||||||