|
JavaScript - Javascript Drop Down Menu With Pictures
Hi guys.
I have been scowering high and low for code to create a Java drop down menu bar for my site. I want it to be something like this: http://javascript-array.com/scripts/...rop_down_menu/ but want to insert pictures into it, for each heading, to create a new looking bar if thats possible. Can you do a mouseover with them also, as i currently have one set up, to change text colour (2 different images per button) but am unsure of the code. Thanks in advance. Similar TutorialsOkay everyone, new here, of course, and as much as I hate to be one of those people that don't really know much about a topic at hand and gratuitously seek out the help of those who do, here I am. The upshot is that it's probably something really easy to answer for those who know Javascript already. I've tried figuring this out but I'm at a loss. I can manage pretty well with CSS, messing around and playing with values to figure out what I need, but I've taken a look at the Javascript and it's completely unapproachable for me. I used a website, http://www.mycssmenu.com/ to create a really nifty dropdown menu, which has a tree structure in Javascript as well as collapse and expand buttons. The great thing is that, for those with Javascript disabled, it still fully works as a CSS drop-down menu. But I've been asked to modify it. Right now, you click and that's how things expand. But I've been asked to make it so that it will expand simply on hover.And I don't know what to do at all. Of course I know how to change the colors of the particular fields when you hover, through CSS, but to make it expand simply on hover? Think anyone can give me some pointers or a bit of help? The website in question is here Psiholog Popa Anca. Great job on the colors though, eh? Let me know! I'm sorry if this question might have already been posted before, but as I do not know how to go about phrasing the questions(due to low calibre in technical terms), I could not do any search about it. Basically what I intended to do is to add a *drop down list* to the header looking something like this http://www.w3schools.com/DHTML/tryit...rydhtml_menu10 except for the fact that the header(the Tutorials, Scripting, Validation coloured in pink) isn't coded using .html but .js(in this website, its coded in html as shown below). <html> <head> <style> body{font-family:arial;} table{font-size:80%;background:black} a{color:black;text-decoration:none;font:bold} a:hover{color:#606060} td.menu{background:lightblue} table.menu { font-size:100%; position:absolute; visibility:hidden; } </style> <script type="text/javascript"> function showmenu(elmnt) { document.getElementById(elmnt).style.visibility="visible"; } function hidemenu(elmnt) { document.getElementById(elmnt).style.visibility="hidden"; } </script> </head> <body> <h3>Drop down menu</h3> <table width="100%"> <tr bgcolor="#FF8080"> <td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')"> <a href="/default.asp">Tutorials</a><br /> <table class="menu" id="tutorials" width="120"> <tr><td class="menu"><a href="/html/default.asp">HTML</a></td></tr> <tr><td class="menu"><a href="/css/default.asp">CSS</a></td></tr> <tr><td class="menu"><a href="/xml/default.asp">XML</a></td></tr> <tr><td class="menu"><a href="/xsl/default.asp">XSL</a></td></tr> </table> </td> <td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')"> <a href="/default.asp">Scripting</a><br /> <table class="menu" id="scripting" width="120"> <tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr> <tr><td class="menu"><a href="/vbscript/default.asp">VBScript</a></td></tr> <tr><td class="menu"><a href="default.asp">DHTML</a></td></tr> <tr><td class="menu"><a href="/asp/default.asp">ASP</a></td></tr> <tr><td class="menu"><a href="/ado/default.asp">ADO</a></td></tr> </table> </td> <td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')"> <a href="/site/site_validate.asp">Validation</a><br /> <table class="menu" id="validation" width="120"> <tr><td class="menu"><a href="/web/web_validate.asp">Validate HTML</a></td></tr> <tr><td class="menu"><a href="/web/web_validate.asp">Validate XHTML</a></td></tr> <tr><td class="menu"><a href="/web/web_validate.asp">Validate CSS</a></td></tr> <tr><td class="menu"><a href="/web/web_validate.asp">Validate XML</a></td></tr> <tr><td class="menu"><a href="/web/web_validate.asp">Validate WML</a></td></tr> </table> </td> </tr> </table> <p>Mouse over these options to see the drop down menus</p> </body> </html> So how can I code this in .js instead of .html? I really need a clue on how to get started on coding this as this is totally new to me, hope that anyone would appreciate helping me and I will be grateful about it. I am trying to create 2 different drop down menus which are chained. First drop down menu: options 1, 2, 3, and 4 Second drop down menu: options 1, 2, 3 and 4 However for the first drop down menu, if you choose the number then that number cannot be selected again on the second drop down menu. So if i pick 4 on the first drop down. then only 1, 2, and 3 should show up on the second drop down OR if you pick 4 on the second drop down it gives you an error saying you selected that value. Here is the complicated part that I cannot figure out. I want each drop down menus on two different pages and not on the same page. So after you select the submit button on the first drop down it should go to another page with the second drop down.. Has anyone seen this before. if you can give me some tips or show me how its done or even a webpage that has already implemented this i would appreciate it. Thank you! Hi everyone, How can I achieve this? I need to get my drop down menu go over the javascript slideshow going on in this page: www.kimikal.com/store It works on all browsers except for IE, which hides the menu behind the js slideshow. Any help would be greatly appreciated! I've been running into a brick wall on this problem, and have gone over my html, css and PHP dozens of times, so I'm thinking it's a Javascript issue (where my skills are lacking). I'm using a drop-down menu script that I got he http://www.php-development.ru/javascripts/dropdown.php, which I have modified slightly to eliminate timeout and change styles on closing the menu (by clicking on it). It works fine everywhere except in IE 6 and 7. In IE 7, the menu appears where it should, but looks blank. If you leave the sub-menu open and hover over another link, the menu appears as it should. Both drop-down menus do this. In IE6, the problem is similar, except that only the bottom border of the menu items appear, not the whole link. The page can be found he http://www.georgekoury.com/index_test.php, and the only options with drop-down are "Individual Insurance" and "Group Insurance". I realize the code isn't entirely compliant, I inherited this code from another programmer and I'm trying to avoid having to rewrite the whole structure. I'm not sure what code you may need me to post, so if more information is needed, please let me know and I'll provide it. hi im new to scripting so apologies if this is a basic question. I have a form which has javascript validation which triggers hidden divs if certain input boxes are left blank. I have it working with text fields and text areas, but im having trouble with a drop down menu. This is the code for my drop down: Code: <select name="department" size="1" id="department"> <option value="" selected>Please select</option> <option value="1">Personal Injury</option> <option value="2">ULR & Credit Hire</option> <option value="3">Consumer Credit</option> <option value="4">Health & Safety</option> <option value="5">Property</option> </select> And this is the code currently for the Javascript validating: Code: if(department.selectedIndex == 0){
var error = true;
$('#department_error').fadeIn(500);
}else{
$('#department_error').fadeOut(500);
If i leave the drop down on the 'Please Select' value, the error message should show, but at the moment it doesnt show up. I have a feeling the syntax is wrong in the javascript? Any help very much appreciated Thanks I am trying to create a drop down menu for dates that starts with today's date, but allows people to choose 50 years into the past and 10 years into the future. Here's what I have for the years: Code: <!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<h4>Select a date to see the energies for that day
<script type="text/javascript">
var mesparaluna=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec'];
function populatedropdown(mesparaluna, diaparaluna, axxa1){
var today=new Date()
var mesparaluna=document.getElementById(mesparaluna)
var diaparaluna=document.getElementById(diaparaluna)
var axxa1=document.getElementById(axxa1)
for (var i=0; i<31; i++)
diaparaluna.options[i]=new Option(i, i+1)
diaparaluna.options[today.getDate()]=new Option(today.getDate(), today.getDate(), true, true) //select today's day
for (var m=0; m<12; m++)
mesparaluna.options[m]=new Option(mesparaluna[m], mesparaluna[m]+1)
mesparaluna.options[today.getMonth()]=new Option(today.getMonth(), today.getMonth(), true, true) //select today's month
var thisyear=today.getFullYear()
for (var y=0; y<20; y++){
axxa1.options[y]=new Option(thisyear, thisyear)
thisyear+=1
}
axxa1.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true) //select today's year
}
</script>
<script>
sacakindias()
</script>
<SCRIPT SRC=tzolkin.js></script>
<script>
armatzolkin()
</script>
<p><font size="2" face="Verdana">
<SELECT class="input_tex" name=mesparaluna id="mesparaluna"></SELECT> </font>
<SELECT class="input_tex" name="diaparaluna" id="diaparaluna"></SELECT> </font>
<SELECT class="input_tex" name="axxa1" id="axxa1"></SELECT></p>
<p><INPUT class="input_tex" onclick="sacakinpersonal()" type="button" value="Search"><img border="0" name="pirav" src="blanco.gif" class="shakeimage" width="10" height="10">
<INPUT class="input_tex" onclick="sacakindias()" type="button" value="Today"></p></form>
<script type="text/javascript">
//populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select)
window.onload=function(){
populatedropdown("diaparaluna", "mesparaluna", "axxa1")
}
</script>
</h4>
</body>
</html>
I am also having a problem with the month. I wanted it to show the name of the month, but I am getting a number (and a wrong one at that). Apologies... I am a terrible newbie with Javascript. Hey, so I'm a complete javascript newbie and am trying to create a drop down menu with four different boxes. The site I'm working on is basically an ecommerce site, so I'll use cars as a good example for what I want to do. Let's say that I'm selling cars and want to target the buyer directly, then I would have the following boxes, each one serving as a dependent of the one before it: 1. Pick the brand (BMW, Mercedes, Etc.) 2. Pick the type of car (Sports car, SUV, Mini Van, etc.) 3. Pick the color (blue, green, etc.) 4. Pick the price ($0-$19,999/$19,999-29,999/etc.) So far I have the first two boxes down by using the following site: http://www.supertom.com/menugen/. Now my problem is that the site only allows for the first two boxes to be made, and says that "the values in box1 are static and printed directly as normal HTML. The corresponding box2 options will also be copied into the HTML as well as the javascript for full functionality." Being a complete newbie, I have no idea what this means. So I decided to search the internet for an answer and was not able to find one, thus leading me here, which from the looks of it seems like a great forum. If anyone could tell me how to connect a third and fourth box that falls into the same hierarchy as the first and the second then I would appreciate. Really THANK YOU, and I'm really looking forward to reading your replies!! -Bobby 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! Hello! My first (but surely not last) post on this forum. I made a drop box menu and I want to activate specific javascript functions when they are selected. I think this should be fairly easy to solve. I am very new at HTML and Javascript btw. This is what I tried: if (document.getElementById("selectense").value="present"){ document.getElementById("present").style.visibility="visible"; } <span class="tensebox"> <select id="selectense"> <option onclick="showPresent()">Present</option> <option onclick="showPC()">Present</option> </select></span> (and I have some text with the ID "present) Hello All, I'm trying to find a script that would be able to do the following: The are two drop down boxes, the first one populating the second (state/county --> town) The first box is single choice, the second is multiple choice. I'm looking for a script that would be able to deal with generating the code for all possible values that could be chosen in the second drop down box. The drop down boxes are part of a form which allow people to search for educational courses within areas of a state/county. I've had a good root around the internet but am rapidly getting confused ... many thanks in advance. Si. Need some help understanding why and how to fix this.... btw this site is something I've been working on for some time..... and learning bit by bit !!! this is the site : http://www.teiafirme.com/hargrave.html this is the problem : The specific problem is that when you mouse over pictures i have a script to enlarge those pics, but my menu stays on top of those pictures !!!!!!!!!!!!! what do i need to do to fix this? If needed I will post the page html code... I also have another problem which is with the flash movie on the home page which is only loading after i navigate way from the home page and then comeback to it...... Movie does not start on initial page load !!!!! I know how to edit the CSS, and minute parts of the JavaScript code (for example; speed of the drop). The problem is, I had a massive amount of help making the Javascript side of the menu, and do not know how to edit it... I want the rules to still apply, where only one can be expanded at a time (one of the first drops, and then only one of the sub-drops). I noticed in the code, I can edit it so there can be more than one drop, but that would mean, the whole menu could be expanded Also, I want my sub-drops. to have different span colour than the main drop. but trhe links and such, (everything else about it) can be the same.... My live demo is here! Thank you for any help and/or advice in advance, Best Regards, Tim All, I have a PHP script that will get images out of the database and display them in a grid. I have two verisons. I save a thumbnail which I display and then a larger image in a different folder. These images are placed in a scroll bar but what I would like to happen is that when I click on a thumbnail it basically displays the bigger image until I click on that image and it goes away. I would love for the middle of the image to be displayed in the middle of the users screen but beggers probably can't be choosers in this case. An example of a similar desired result is a link he http://qrayg.com/experiment/hig/ Instead of the hover, I'd like to utilize the onclick to display and remove the image. If it's easy to put the center in the center of the screen that that would be absolutely incredible as well. Thanks for any guidance you could provide me on this. Thanks in advance! HI so sorry to bother you with what seems to be a simple problem i am just getting back into my coding and i can not see what i am doing wrong. i have my folder with index page in named "tester_fixed.html" and then a folder for images where i have place header1 header 2 and header 3 . i downloaded a script from http://www.javascriptkit.com/script/...bleslide.shtml and edited my images in and i think i mucked up as they are not showing. please could you tell me what i am doing wrong and point me in the right direction. Many thanks Bec the code: Code: <script type="text/javascript">
// Flexible Image Slideshow- By JavaScriptKit.com (http://www.javascriptkit.com)
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use
var ultimateshow=new Array()
//ultimateshow[x]=["path to image", "OPTIONAL link for image", "OPTIONAL link target"]
ultimateshow[0]=['images/header1.jpeg', '', '']
ultimateshow[1]=['images/header2.jpeg', 'http://www.dynamicdrive.com', '_new']
ultimateshow[2]=['images/header3.jpeg', 'http://www.codingforums.com', '']
//configure the below 3 variables to set the dimension/background color of the slideshow
var slidewidth="240px" //set to width of LARGEST image in your slideshow
var slideheight="940px" //set to height of LARGEST iamge in your slideshow
var slidecycles="3" //number of cycles before slideshow stops (ie: "2" or "continous")
var randomorder="no" //randomize the order in which images are displayed? "yes" or "no"
var preloadimages="yes" //preload images? "yes" or "no"
var slidebgcolor='white'
//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=3000
////Do not edit pass this line////////////////
var ie=document.all
var dom=document.getElementById
var curcycle=0
if (preloadimages=="yes"){
for (i=0;i<ultimateshow.length;i++){
var cacheimage=new Image()
cacheimage.src=ultimateshow[i][0]
}
}
var currentslide=0
function randomize(targetarray){
ultimateshowCopy=new Array()
var the_one
var z=0
while (z<targetarray.length){
the_one=Math.floor(Math.random()*targetarray.length)
if (targetarray[the_one]!="_selected!"){
ultimateshowCopy[z]=targetarray[the_one]
targetarray[the_one]="_selected!"
z++
}
}
}
if (randomorder=="yes")
randomize(ultimateshow)
else
ultimateshowCopy=ultimateshow
function rotateimages(){
curcycle=(currentslide==0)? curcycle+1 : curcycle
ultcontainer='<center>'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='<a href="'+ultimateshowCopy[currentslide][1]+'" target="'+ultimateshowCopy[currentslide][2]+'">'
ultcontainer+='<img src="'+ultimateshowCopy[currentslide][0]+'" border="0">'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='</a>'
ultcontainer+='</center>'
if (ie||dom)
crossrotateobj.innerHTML=ultcontainer
if (currentslide==ultimateshow.length-1) currentslide=0
else currentslide++
if (curcycle==parseInt(slidecycles) && currentslide==0)
return
setTimeout("rotateimages()",slidedelay)
}
if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')
function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : document.all.slidedom
rotateimages()
}
if (ie||dom)
window.onload=start_slider
</script>
<p style="font: normal 11px Arial">This free script provided by<br />
<a href="http://www.javascriptkit.com">JavaScript Kit</a></p>
thanks ? how would i make it for a menu so you could press it and it would go down to click on a link.
Having trouble with Nested Side Bar menu. I got the coding reference from here and tried to alter it for my profile. http://www.dynamicdrive.com/style/cs...side_bar_menu/ I know there are easier ways to create menus like this with flash, but Im trying to learn with CSS,HTML, JAVASCRIPT.If there is anyone that can help me find an easier solution in how to do menus i would like to take your advice, Basically I wanted to change the image on the button that receives the mouse-over. Then, when i place my mouse over the second button just sits idle with no sub-menu employed. Only the first button receives the commands to employ the sub-menu. This is my Code. ********************************************************** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="4thcss.css"> <script src="4thport.js" type="text/javascript"> </script> <title>Ruddy's Portfolio</title> </head> <body> <div id="container"> <div id="containerbackground"> </div> <div id="header"> </div> <div id="headertitles"> <a href="https://www.google.com">CSS</a> <a href="https://www.google.com">PHP</a> <a href="https://www.google.com">HTML</a> <a href="https://www.google.com">JAVASCRIPT</a> <a href="https://www.google.com">MySQL</a> </div> <div id="content"> <p>Hello, this is my website page!<br> Everything done here is by my <br>creative influence.<br> I Hope that you enjoy!</p> </div> ********************************************************** ********************************************************** <div id="yellowbutton"> <div class="sidebarmenu"> <ul id="sidebarmenu1"> <li><a href="#"></a> <ul> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> </ul> </li> </ul> </div> </div> <div id="redbutton"> <div class="sidebarmenu"> <ul id="sidebarmenu1"> <li><a href="#"></a> <ul> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> </ul> </li> </ul> </div> </div> ********************************************************** ********************************************************** <div id="footer"> <div id="footernotes"> <p> A Website by Ruddy J. Woel</p> </div></div> </div> </body> </html> CSS******************************************************* body { background-image:url(Pictures/forest2.jpg); z-index:-1; } #container { width: 860px; margin: 0 auto; height:700px; } #containerbackground { background:#ffff99; position:absolute; top:32px; width:800px; height:700px; opacity:0.8; } #header { background:#009900; position:absolute; top:2px; width:800px; height:29px; opacity:0.8; } #headertitles { position:absolute; top:1px; padding-left:20px; font-size:28px; color:#FFFFFF; font-family:Geneva, Arial, Helvetica, sans-serif; word-spacing:65px; opacity:0.9; } #content { position:absolute; top:70px; left:280px; font-size:16px; font-family:Verdana, Arial, Helvetica, sans-serif; opacity:0.8 } #yellowbutton { position:absolute; top:200px; left:260px; } .sidebarmenu ul{ margin: 0px; padding: 0px; list-style-type:none; font: 18px Verdana; width: 196px; /*main menu width*/ } .sidebarmenu ul li{ position:relative; width:197px; /*sub menu item widths*/ } /* Top level menu links style */ .sidebarmenu ul li a{ display: block; overflow: auto; /*force hasLayout in IE7 */ color: white; text-decoration: none; padding: 6px; height:22px; } .sidebarmenu ul, .sidebarmenu ul li a:visited, .sidebarmenu{ background-image:url(Pictures/yellowbutton.gif); /*background of tabs (default state)*/ } .sidebarmenu ul li a:visited{ color: white; } /*Sub level menu items */ .sidebarmenu ul li ul,.sidebarmenu ul li ul a:visited{ background-image:url(Pictures/menudrop.gif); position: absolute; width: 175px; /*Sub Menu Items width */ top: 0; visibility: hidden; } #redbutton { position:absolute; top:235px; left:260px; z-index:1; } a { text-decoration:none; color:#FFFFFF; word-spacing:40px; } #footer { background-color:#000000; position:absolute; top:733px; height:20px; width:800px; z-index:0; opacity:0.8; } #footernotes { margin-top:-10px; font-family:Geneva, Arial, Helvetica, sans-serif; font-size:14px; z-index:1; color:#FFFFFF; } JAVASCRIPT************************************************* var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas function initsidebarmenu(){ for (var i=0; i<menuids.length; i++){ var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul") for (var t=0; t<ultags.length; t++){ ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle" if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item else //else if this is a sub level submenu (ul) ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it ultags[t].parentNode.onmouseover=function(){ this.getElementsByTagName("ul")[0].style.display="block" } ultags[t].parentNode.onmouseout=function(){ this.getElementsByTagName("ul")[0].style.display="none" } } for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars ultags[t].style.visibility="visible" ultags[t].style.display="none" } } } if (window.addEventListener) window.addEventListener("load", initsidebarmenu, false) else if (window.attachEvent) window.attachEvent("onload", initsidebarmenu) ******************************************************* Thank you for your time! I have some Javascript code for a drop-down menu. The code works fine (will show below) but I was wondering how to turn off one of them? I have a total of 8 icons that have drop-down menus, but I only need 6 of them to do so. If I make any sort of change to the code, it makes all the icons change color when the mouse is hovered over, instead of drop-downs. It seems to be an "all or nothing" situation. Can someone show me how to "turn off" just one of the icons (say the "news" one), so a drop-down doesn't appear? Thank you very much. Code: <script language="JavaScript" type="text/JavaScript">
<!--
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_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_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>
<script language="javascript">
function init() {
if (TransMenu.isSupported()) {
TransMenu.initialize();
menu1.onactivate = function() { document.getElementById("news").className = "hover"; };
menu1.ondeactivate = function() { document.getElementById("news").className = ""; };
menu2.onactivate = function() { document.getElementById("raceresults").className = "hover"; };
menu2.ondeactivate = function() { document.getElementById("raceresults").className = ""; };
}
}
</script>
<tr><td>
<a href="http://www.littlevalleyspeedway.com/test/news.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('news','','http://www.littlevalleyspeedway.com/test/layout/nav_news_on.jpg',1)" id="news"><img src="http://www.littlevalleyspeedway.com/test/layout/nav_news_off.jpg" border="0" name="news" /></a><img src="http://www.littlevalleyspeedway.com/test/layout/nav_top_divider.gif" />
<a href="http://www.littlevalleyspeedway.com/test/race_results.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('navraceresults','','http://www.littlevalleyspeedway.com/test/layout/nav_raceresults_on.jpg',1)" id="raceresults"><img src="http://www.littlevalleyspeedway.com/test/layout/nav_raceresults_off.jpg" border="0" name="navraceresults" /></a><img src="http://www.littlevalleyspeedway.com/test/layout/nav_top_divider.gif" />
</td></tr>
<script language="javascript">
if (TransMenu.isSupported()) {
var ms = new TransMenuSet(TransMenu.direction.down, 1, 0, TransMenu.reference.bottomLeft);
var menu1 = ms.addMenu(document.getElementById("news"));
menu1.addItem();
var menu2 = ms.addMenu(document.getElementById("raceresults"));
menu2.addItem();
TransMenu.renderAll();
}
</script>
Any help would be much appreciated!! I presently have a drop down menu in one of my sites. I wish to break it down one more time so that it opens up on the side. However, not being a javascript expert I cannot figure out how to do it. I assume it is something within the coding that needs to be changed, or even a new section added. I have included the coding, please can someone point me in the right direction. Thank you so much! Monica CODE: var timeout = 500; var closetimer = 0; var ddmenuitem = 0; // open hidden layer function mopen(id) { // cancel close timer mcancelclosetime(); // close old layer if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; // get new layer and show it ddmenuitem = document.getElementById(id); ddmenuitem.style.visibility = 'visible'; } // close showed layer function mclose() { if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; } // go close timer function mclosetime() { closetimer = window.setTimeout(mclose, timeout); } // cancel close timer function mcancelclosetime() { if(closetimer) { window.clearTimeout(closetimer); closetimer = null; } } // close layer when click-out document.onclick = mclose; </SCRIPT> <script type='text/javascript'> $(function() { $('#nav-drop').droppy(); }); SDDM: #sddm { margin: 0; padding: 0; z-index: 300} #sddm li { margin: 0; padding: 0; list-style: none; float: left; font: 14px Arial, Helvetica, sans-serif} #sddm li a { display: block; margin: 0 1px 0 0; padding: 2px 6px; width: 95px; background: ##333366; color: #FFFFFF; text-align: center; text-decoration: none} #sddm li a:hover { background: #9F8469} #sddm div { position: absolute; visibility: hidden; margin: 0; padding: 0; background: #333366; border: 1px solid #FFFFFF} #sddm div a { position: relative; display: block; margin: 0; padding: 5px 10px; width: auto; white-space: nowrap; text-align: left; text-decoration: none; background: #333366; color: #FFFFFF; font: 14px Arial, Helvetica, sans-serif} #sddm div a:hover { background: #9F8469; color: #FFFFFF} .style12 { color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 12px; } HTML: <tr> <td height="21" colspan="3" bgcolor="#333366"> <ul id="sddm"> <li><a href="index.html" class="style18">HOME</a></li> <li><a href="about_us.html" class="style18">ABOUT US</a></li> <li><a href="criminal_law.html" class="style18" onmouseover="mopen('m2')" onmouseout="mclosetime()">CRIMINAL LAW </a> <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="driving-impared_offences.html">Driving/Impaired Offences</a> <a href="drug_related_chages.html">Drug Related Charges</a> <a href="bail_hearing.html">Bail Hearing</a> <a href="fraud_theft.html">Fraud/Theft</a> <a href="assault.html">Assault</a> would like to break this assault button down to 4 more options <a href="domestic_violence.html">Domestic Violence</a> <a href="break_enter_robbery.html">Break & Enter/Robbery</a> <a href="weapons_offences.html">Weapons Offences</a> <a href="fail_to_comply.html">Fail to Comply</a> </div> </li> <li><a href="family_law.html" class="style18" onmouseover="mopen('m3')" onmouseout="mclosetime()">FAMILY LAW</a> <div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="family_law_divorce.html">Divorce</a> <a href="family_law_custody_access.html">Custody and Access</a> <a href="child_spousal_support.html">Child/Spousal Support</a> <a href="division_of_property.html">Division of Property</a> <a href="restraining_orders.html">Restraining Orders</a> <a href="cas_matters.html">CAS Matters</a> <a href="paternity.html">Paternity</a> <a href="adoptions.html">Adoptions</a> <a href="premarital_cohapitation_separtion_agreements.html">Premarital/Cohabitation/Separation Agreements</a> </div> </li> <li><a href="civil.html" class="style18" onmouseover="mopen('m4')" onmouseout="mclosetime()">CIVIL LITIGATION</a> <div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="personal_injury.html">Personal Injury</a> <a href="wrongful_dismissal.html">Wrongful Dismissal</a> <a href="contract_disputes.html">Contract Disputes</a> <a href="property_issue_discrepancies.html">Property/Issue Discrepancies</a> <a href="tax_matters.html">Tax Matters</a> </div> </li> <li><a href="wills.html" class="style18" onmouseover="mopen('m5')" onmouseout="mclosetime()">WILLS & ESTATES</a> <div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="wills.html">Wills</a> <a href="power_of_sale.html">Power of Sale</a> <a href="power_of_attorney.html">Power of Attorney</a> </div> </li> <li><a href="administrative_law.html" class="style18" onmouseover="mopen('m6')" onmouseout="mclosetime()">ADMINISTRATIVE LAW</a> <div id="m6" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="board_tribunals.html">Board Tribunals</a> <a href="omb.html">OMB</a> <a href="rental_housing.html">Rental Housing</a> <a href="licensing_tribunals.html">Licensing Tribunals</a> <a href="ministry_challenges.html">Ministry Challenges</a> <a href="consent_compassion_board.html">Consent and Compassion Board</a> <a href="wsib.html">WSIB</a> <a href="fisco.html">FISCO</a> <a href="human_rights_commission.html">Human Rights Commission</a> <a href="conversation_review_board.html">Conservation Review Board</a> </div> </li> <li><a href="resources.html" class="style18">RESOURCES</a></li> <li><a href="contact_us.html" class="style18">CONTACT US</a></li> </ul> Hi Everyone, I'm trying to put a drop-down menu onto my website, but desperately need some help; I'd be so grateful if someone could offer some assistance. If you click on this link to see the webpage, http://www.ambersupplies.co.uk/newsite/pageone.htm you'll see the drop down menu, and the two problems I'm having with it. Please don't take any notice of the menu content; I'll be styling it all when these problems are sorted. Firstly, you'll see that the external drop down list is lying within the table (with the red background) when it should appear outside. I've obviously missed a closing table or td tag somewhere, but can't find it. Secondly, the drop down menu should appear on mouseover, and disappear on mouseout; which it does, but as you can see, when the page is firstly or reloaded, the menu is showing. I didn't write this drop-down menu code, I copied it from this page with the intention of styling it to my own webpage: http://www.w3schools.com/DHTML/tryit...rydhtml_menu10, perhaps this will give someone a clue. Can anyone shed a bit of light on this for me, please? I'd be really grateful for any help whatsoever. Many thanks in advance. Graham |
|||||||