|
HTML - Drop Down Menu Issues
OK, I have a JavaScript code that toggles between the visibility of a div. When my mouse hovers over an element (lets say an li ), it would display the hidden div, on mouse out it would hide it again. When the drop down becomes visible, I click on any one of its links it takes me to the next page. The problem now is that if I was to then press the back button, the drop down menu would remain up, despite the fact that its not being triggered! Is there a code i'm missing that should correct this? How do I ensure if the user were to hit the back button, the div would reset to its original state?
p.s. I had to cut some code out from the html, it exceed the character limit, but all the necessary codes are there. 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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>facpros</title>
<link rel="stylesheet" type="text/css" href="css1.css" id="default"/>
</head>
<body style="padding-top:0px;margin:0px;padding:0px;background-image:url('images/bg.png')" >
<script type =" text/javascript" src="fac.js" >
</script>
<!--beginning of div top-->
<div id="top"class="topstyle" style="left: 0px; top: 0px; " >
<!--the logo div-->
<div id="logo" style="width:285px; height:110px;position:relative; left: 0px; top: 0px;background-image:url('images/facproslogo.png')">
</div><!--end of logo div-->
<!--begining od facpros def-->
<div id="feder" class="fed" style="float:right; margin:0px; top: -110px;">
<p class="fac" style="position:absolute; width: 565px; left: 81px; top: 6px;"> Federation des Amis Chretiens pour la Promotion Sociale
</p>
</div><!--end of facpros def-->
<!--navigation menu list-->
<div id="Navigation" style="left:0px; top: -110px; float:right;" >
<ul class="nav" >
<li class="nli" id ="home" onclick="window.location.href='home.html'"style="width: 61px" ><a><span>Home</span></a></li>
<li class="nli"id ="about" onmouseover= "fabout('over')" onmouseout="fabout('out')" ><a><span>About Us</span></a>
<ul id="aboutdrop"style="visibility:hidden;position:absolute;list-style:none;z-index:1;top:45px;left:81px;text-align:left;">
<li onclick="window.location.href='about.html'" class="ischild" style=" width:150px;left: 0px; top: 0px;line-height:2em;height:30px;" >
Mission
</li>
<li onclick="window.location.href='leader.html'" class="ischild" style=" width:150px;left: 0px; top: 31px;line-height:2em;height:30px;" >
Leadership
</li>
<li onclick="window.location.href='member.html'" class="ischild" style=" width:150px;left: 0px; top: 62px;line-height:2em;height:30px;" >
Member
</li>
<li onclick="window.location.href='sof.html'" class="ischild" style=" width:150px;left: 0px; top: 93px;line-height:2.3em;height:30px; font-size:13px;" >
Statement Of Faith
</li>
</ul>
</li>
<li class="nli" id ="event" onclick="window.location.href='event.html'"><a><span>Events</span></a></li>
<li class="nli" id ="photo" onclick="window.location.href='photo.html'"><a><span >Gallery</span></a></li>
<li class="nli" id ="contact" onclick="window.location.href='contact.html'"><a><span >Contact Us</span></a></li>
<li class="nli" id ="lang" onmouseover= "flang('over')" onmouseout="flang('out')" ><a><span >Language</span></a>
<ul id="langdrop"style="list-style:none;width:100px; position:absolute; left:351px; top:61px;background-color:transparent;visibility:hidden;z-index:1;">
<li onclick="window.location.href='frhome.html'" class="ischild" style=" width:100px;left: 0px; top: -16px;line-height:2em;height:30px;" >
French
</li>
<li onclick="window.location.href='home.html'" class="ischild"style="width:100px;left:0px; bottom:-47px; height:30px;line-height:2em; ">
English
</li>
</ul>
</li>
</ul><!--navigation ul-->
</div><!--end of navigation menu div-->
</div><!--end of div top-->
</body>
</html>
Code: body{
background-color:gray;
}
p.fac{
font-family:"Lucida Calligraphy"; color:white; position:relative;font-size:large;
margin-left:auto;margin-right:auto;
}
li.ischild{
height:20px;
position:absolute;
text-align:center;
background-color:#f0f0f0;
cursor:pointer;
color:black;
border:thin gray solid;
text-align:left;
padding-left:5px;
}
ul.nav{
font-family:Copperplate33bc;
list-style:none;
padding: 0;
margin: 0; font-size:14px;
height:45px;
}
div.fed{
background-color:maroon;
position:relative;
width:715px;
height:65px;
}
div.topstyle{
top:0px;
background-color:transparent;
height:110px;
width: 1000px;
margin-left:auto;
margin-right:auto;
position:relative;
}
div.topcenter{
background-image:url('images/topcenterbgblue.png');
height:286px;
width: 1000px;
margin-left:auto;
margin-right:auto;
position:relative;
}
div.mbstyle{
background-color:white;
width:1000px;
position:relative;
margin-left:auto;
margin-right:auto;
height:390px;
}
div.bstyle{
background-color:white;
height:100px;
width: 1000px;
margin-left:auto;
margin-right:auto;
position:relative;
}
a:link,a:visited{
text-decoration:none;color:black;
}
a:link.nn,a:visited.nn{
text-decoration:none;
color:#666666;
margin-bottom:auto;
margin-top:auto;
font-family:'Times New Roman', Times, serif;
font-size:small;
}
#Navigation{
width:715px;
position:relative;
background-image:url('images/navbg2.png');
}
li.nli
{
float: left;
display: block;
text-decoration: none;
text-align: center;
padding-left:10px;
padding-right:10px;
width:auto;
height:45px;
line-height:3.5em;
border-right-width:2px;
border-right-style:groove;
border-right-color:#CCCCCC;
cursor:pointer;
background-image:url('images/hoverbg2.png');
}
td{
padding-left:50px;padding-right:100px; margin-bottom:auto;margin-top:auto;font-family:"Times New Roman", Times, serif; color:#666666;
}
#navigation li{
}
.ischild:hover{
height:20px;
position:absolute;
text-align:center;
background-color:#c0c0c0;
cursor:pointer;
color:black;
border:thin gray solid;
text-align:left;
padding-left:5px;
}
.nli:hover{
float: left;
display: block;
text-decoration: none;
text-align: center;
padding-left:10px;
padding-right:10px;
width:auto;
height:45px;
line-height:3.5em;
border-right-width:2px;
border-right-style:groove;
border-right-color:#CCCCCC;
cursor:pointer;
background-image:url('images/hoverbg.png');
color:#990000;
}
Code: function fabout(status)
{
switch(status)
{
case("over"):
{
document.getElementById("aboutdrop").style.visibility ='visible';
}break;
case("out"):
{
document.getElementById("aboutdrop").style.visibility ='hidden';
}break;
}
}//end of fabout
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function flang(status)
{
switch(status)
{
case("over"):
{
document.getElementById("langdrop").style.visibility = "visible";
}break;
case("out"):
{
document.getElementById("langdrop").style.visibility = "hidden";
}break;
}
}//end of flang
Similar TutorialsHi guys. I have a menu on this page, and the last menu item "galleries" drops down a menu when it's hovered over. http://www.dualimagephotography.com/gallery/ But in IE instead of dropping beneath it shoots out to the right. Anyone know why? I don't really mind it so much except it's really hard to hover over the submenu when it goes that way The CSS: ul#nav, ul#nav ul { margin: 0px; padding: 0px; list-style: none; } ul#nav ul { border: 0px solid #999; background-color: transparent; display: none; position: absolute; z-index: 9; } ul#nav li { display: inline; float: left; text-indent: 0px; margin: 0 12px 0 12px; float:right; } ul#nav ul li a { display: block; text-decoration: none; color: #000; padding: 2px; } ul#nav ul li a:hover { background: transparent; color: #fff; } ul#nav li ul { border-bottom: 0px solid #999; background-color: transparent; display: none; position: absolute; z-index: 9; } ul#nav li ul li { display: inline; float: left; text-indent: 0px; margin: 3px 0px 3px 0px; } ul#nav li ul li a { display: block; text-decoration: none; color: #000; padding: 2px; border-bottom: 1px solid #fff; } ul#nav li ul li a:hover { background: transparent; color: #fff; border-bottom: 1px solid #ccc; } ul#nav li li { display: block; float: none; } Hi all Im having some serious problems with my drop down menu on the home page of a site... it hides behind the jquery slideshow?! http://www.silver-worldwide.com/dev/onvu/ Does anyone have any idea how i can fix this issue? It works on every other page!! Thanks in advance! Mat I have inserted this http://www.dynamicdrive.com/style/cs...side_bar_menu/ it a test page, but there is a layout issue in FF, and possibly errors generally. It all displays ok in IE. http://www.trytest.net/testing/build/ Can someone have a look and point out the error of my ways? Or if need be point me in the direction off a better solution? Cheers Good afternoon, I'm currently designing a site for a large exterior decorating company. I've had trouble, but nothing I couldn't work around. My graphic design skills are great, but my web coding is amateur at best. I've compiled a fixed-width site, it looks great in every browser, and in different resoultions. here's the kicker. (and I would have included code if the site were local on this computer, but it's on my laptop) My navigation is giving me major issues. Its set up to link to the site directory folder on my pc, the preview is real-time - what i'm trying to say is you can navigate the site from my pc, although it's not online. and the links work. I have one main-navigation, with drop-downs to a maximum of 2 sublevels (ie: spry vertical menu bar). I can navigate the main level to any of the sub-levels without issue. Code: /../index.html ---- to ---- /../products/siding/wood.html BUT when navigating back to any menu (or to a different sub-level in the same category, ie: siding/aluminum.html) for lack of a better explanation - the url won't drop the current directory. What I mean by this is Code: /../products/siding/wood.html ---- to ----- products/siding/aluminum.html redirects to products/siding/siding/aluminum.html So what i'm asking is if someone can assist me in fixing my page so it doesn't do this. I feel after writing this that my issue lies in the fact that I haven't specified index.html as my root directory. You would assume it would come intuitively for the page to drop the current directory, especially when you're specifying a page in a different level.. But apparently not. Also, i've explored it before but never found a decent answer: Is there any code that will allow me to embed the navigation to each page from a single file. Allowing easy changes to the navigation, simply by editing one file - the navigation? HI, Having trouble getting this menu to center. menu alone: http://www.havinc.com/menu.htm menu within the page: http://www.havinc.com/home.htm I have tried using the center tag, align="center" and no luck. I have tried within the menu fil eitself, and within the cell it is included in. Any help appreciated. tracie I am trying to implement a CSS dropdown menu into my site. I have it put in and positioned properly but when I hover over the links the menu doesn't drop. I have checked z-index's but other than that I am lost. I attached just the menu and the menu in the site. Menu Only (This Works): Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <style media="all" type="text/css">@import "menu/menu_style.css";</style> <div> <ul class="menu"> <li class="top"><a href="www.collegecovers.com" target="_self" class="top_link"><span>Home</span></a> </li> <li class="top"><a href="www.collegecovers.com/schools.html" target="_self" class="top_link"><span>Shop By School</span></a> <ul class="sub"> <li><a href="www.collegecovers.com/alabama.html" target="_self">Alabama</a></li> <li><a href="www.collegecovers.com/arkansas.html" target="_self">Arkansas</a></li> <li><a href="www.collegecovers.com/auburn.html" target="_self">Auburn</a></li> <li><a href="www.collegecovers.com/clemson.html" target="_self">Clemson</a></li> <li><a href="www.collegecovers.com/duke.html" target="_self">Duke</a></li> <li><a href="www.collegecovers.com/florida.html" target="_self">Florida</a></li> <li><a href="www.collegecovers.com/floridastate.html" target="_self">Florida State</a></li> <li><a href="www.collegecovers.com/georgia.html" target="_self">Georgia</a></li> <li><a href="www.collegecovers.com/gonzaga.html" target="_self">Gonzaga</a></li> <li><a href="www.collegecovers.com/georgetown.html" target="_self">Georgetown</a></li> <li><a href="www.collegecovers.com/iowa.html" target="_self">Iowa</a></li> <li><a href="www.collegecovers.com/iowastate.html" target="_self">Iowa State</a></li> <li><a href="www.collegecovers.com/kansas.html" target="_self">Kansas</a></li> <li><a href="www.collegecovers.com/kansasstate.html" target="_self">Kansas State</a></li> <li><a href="www.collegecovers.com/kentucky.html" target="_self">Kentucky</a></li> <li><a href="www.collegecovers.com/louisianastate.html" target="_self">Louisiana State</a></li> <li><a href="www.collegecovers.com/michigan.html" target="_self">Michigan</a></li> <li><a href="www.collegecovers.com/michiganstate.html" target="_self">Michigan State</a></li> <li><a href="www.collegecovers.com/northcarolina.html" target="_self">North Carolina</a></li> <li><a href="www.collegecovers.com/northcarolinastate.html" target="_self">North Carolina State</a></li> <li><a href="www.collegecovers.com/nebraska.html" target="_self">Nebraska</a></li> <li><a href="www.collegecovers.com/ohiostate.html" target="_self">Ohio State</a></li> <li><a href="www.collegecovers.com/oklahoma.html" target="_self">Oklahoma</a></li> <li><a href="www.collegecovers.com/oklahomastate.html" target="_self">Oklahoma State</a></li> <li><a href="www.collegecovers.com/oregon.html" target="_self">Oregon</a></li> <li><a href="www.collegecovers.com/oregonstate.html" target="_self">Oregon State</a></li> <li><a href="www.collegecovers.com/penn.html" target="_self">Penn State</a></li> <li><a href="www.collegecovers.com/southcarolina.html" target="_self">Oregon</a></li> <li><a href="www.collegecovers.com/texas.html" target="_self">Texas</a></li> <li><a href="www.collegecovers.com/texasam.html" target="_self">Texas A&M</a></li> <li><a href="www.collegecovers.com/texastech.html" target="_self">Texas Tech</a></li> <li><a href="www.collegecovers.com/vanderbilt.html" target="_self">Vanderbilt</a></li> <li><a href="www.collegecovers.com/wakeforest.html" target="_self">Wake Forest</a></li> <li><a href="www.collegecovers.com/westvirginia.html" target="_self">West Virginia</a></li> </ul> </li> <li class="top"><a href="www.collegecovers.com/category.html" target="_self" class="top_link"><span>Shop By Category</span></a> <ul class="sub"> <li><a href="www.collegecovers.com/bib.html" target="_self">Bed in a Bag</a></li> <li><a href="www.collegecovers.com/comforter.html" target="_self">Comforters</a></li> <li><a href="www.collegecovers.com/sheets.html" target="_self">Sheets</a></li> <li><a href="www.collegecovers.com/futon.html" target="_self">Futon Covers</a></li> <li><a href="www.collegecovers.com/crib.html" target="_self">Crib Covers </a></li> <li><a href="www.collegecovers.com/etc.html" target="_self">Accessories</a></li> </ul> </li> <li class="top"><a href="www.collegecovers.com/register.html" target="_self" class="top_link"><span>Register</span></a> </li> <li class="top"><a href="www.collegecovers.com/contactus.html" target="_self" class="top_link"><span>Contact Us</span></a> </li> </ul> </div> </body> </html> Menu on site (Not working): Code:
.bg {background: url(images/button4.gif);}
.menu {
padding:0 0 0 32px;
margin:0;
list-style:none;
height:40px;
background:#fff url(images/button1a.gif) repeat-x;
position:relative;
font-family:arial, verdana, sans-serif;
z-index: 100;
visibility: visible;
}
.menu li.top {display:block; float:left; position:relative;}
.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(images/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(images/button4.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(images/button4a.gif) no-repeat right top;}
.menu li:hover > a.top_link {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(images/button4.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(images/button4a.gif) no-repeat right top;}
.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:100;}
.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #999999; white-space:nowrap; width:200px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}
.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url(images/arrow.gif) 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#999999; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 999999; white-space:nowrap; width:93px; z-index:200; height:auto;}
Thank you for the help! Hi all, I can't for the life of me get the submenus to work. Here is my basic code and style sheet. How and where do I get a sub menu working on the navigation to display when you hover over it. I.E. hovering over 'News' displays sub menu of 'today', 'tomorrow'... Id like to do a drop down menu similar to there's... is there any simple way of doing this?! Dear HTML Experts, I need your help, I would love to have a dropdown menu. Which drop out of a image? Like when your mouse is at the image, the menu shows up vertically? Thanks So, I am new to html, but I want my site to have a drop down menu, much like that of IBM's. http://www.ibm.com/us/en/sandbox/ver2/ Is this even possible with HTML? If so, where do I start? Regards, YahtzeeFish Hey, Kinda new to this so bare with me. Im using Trellian web page to do some updating on our companies' website and they just asked me to make up a sort of parts catalog for our inventory we have here. I thought the best way for the person visiting the website to find the parts they need is to have drop down menus.Ive been trying so hard to make this but i just keep failing. This is what i want to do. The first one would ask "Make..." they would click that and scroll down the list to find the Make of their machine. Once they click their machine, another drop down menu would appear underneath of that asking the model and the menu would contain all the models associated with the make of the machine. And i want to have another one appear under that once they click on the model. Is there anything or any place where i can find a nice tutorial on how to make this dream come true.....? something like this http://www.wengers.com/Parts/TractorParts.aspx I have a drop down menu on my page, and I want to change the background color of the box from white to match the rest of the page, how do I do this. Thanks Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Welcome to my Home Page</title>
<script language="JavaScript" type="text/javascript">
////The source for this script came from http://allwebco-templates.com/support/S_menus_dropdown.htm////
///For the Game,I changed the back ground picture. I realize it's not JS///
<!--
function land(ref, target)
{
lowtarget=target.toLowerCase();
if (lowtarget=="_self") {window.location=loc;}
else {if (lowtarget=="_top") {top.location=loc;}
else {if (lowtarget=="_blank") {window.open(loc);}
else {if (lowtarget=="_parent") {parent.location=loc;}
else {parent.frames[target].location=loc;};
}}}
}
function jump(menu)
{
ref=menu.choice.options[menu.choice.selectedIndex].value;
splitc=ref.lastIndexOf("*");
target="";
if (splitc!=-1)
{loc=ref.substring(0,splitc);
target=ref.substring(splitc+1,1000);}
else {loc=ref; target="_self";};
if (ref != "") {land(loc,target);}
}
//-->
<!--
/// The JS below is for the date and time. and i got the sorce from http://www.re-es.org/ ///
var day_names = new Array(7)
day_names[0] = "Sunday"
day_names[1] = "Monday"
day_names[2] = "Tuesday"
day_names[3] = "Wednesday"
day_names[4] = "Thursday"
day_names[5] = "Friday"
day_names[6] = "Saturday"
var month_names = new Array(12)
month_names[0] = "January"
month_names[1] = "February"
month_names[2] = "March"
month_names[3] = "April"
month_names[4] = "May"
month_names[5] = "June"
month_names[6] = "July"
month_names[7] = "August"
month_names[8] = "September"
month_names[9] = "October"
month_names[10] = "November"
month_names[11] = "December"
date_now = new Date()
day_value = date_now.getDay()
date_text = day_names[day_value]
month_value = date_now.getMonth()
date_text += " " + month_names[month_value]
date_text += " " + date_now.getDate()
date_text += ", " + date_now.getFullYear()
minute_value = date_now.getMinutes()
if (minute_value < 10) {
minute_value = "0" + minute_value
}
hour_value = date_now.getHours()
if (hour_value == 0) {
greeting = "Good Morning "
time_text = " at " + (hour_value + 12) + ":" + minute_value + " AM"
}
else if (hour_value < 12) {
greeting = "Good Morning "
time_text = " at " + hour_value + ":" + minute_value + " AM"
}
else if (hour_value == 12) {
greeting = "Good Afternoon "
time_text = " at " + hour_value + ":" + minute_value + " PM"
}
else if (hour_value < 17) {
greeting = "Good Afternoon "
time_text = " at " + (hour_value - 12) + ":" + minute_value + " PM"
}
else {
greeting = "Good Evening"
time_text = " at " + (hour_value - 12) + ":" + minute_value + " PM"
}
document.write(greeting + " Today is " + date_text + time_text)
//-->
</script>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="container">
<p><img id="banner" src="images/banner.gif" alt="banner"></p><hr color="#FF0000"></p>
<ul id="nav">
<li><form action="#" method="post">
<select name="choice" size="1" onChange="jump(this.form)" class="dropdown">
<option value="index.html" selected>Home</option>
<option value="scripts_developed.html">Scripts Developed</option>
<option value="best_practices.html">Best practices for JavaScript coding</option>
<option value="ajax.html">AJAX</option>
<option value="JavaScript_frustrations.html">JavaScript frustrations & Javascript Game</option>
</select>
</form>
</li>
</ul>
<div id="content"></div>
</div>
<table width="1050" border="0" align="center">
<tr>
<td align="center"><p><img src="images/logo1.gif" width="300" height="300" hspace="30"><img src="images/logo3.gif" width="300" height="300"><img src="images/logo2.gif" width="300" height="300"></p>
<p><img src="images/logo4.gif" width="300" height="300" hspace="30"><img src="images/logo5.gif" width="300" height="300"><img src="images/logo6.gif" width="300" height="300"></p></td>
</tr>
</table>
<p> </p>
<p> </p>
</body>
</html>
I have the following drop down menu. HTML Code: <form> <select name="menu" style="font-family:'Arial';color:#FFFFFF;background-color:#000000;font-size:10pt;"> <option value="no link no action">title of menu</option> <option value="url 1">link 1</option> <option value="url 2">link 2</option> <option value="url 3">link 3</option> <option value="url 4">link 4</option> </select> <input type="button" onClick="location=this.form.menu.options[this.form.menu.selectedIndex].value;" value="GO" style="font-family:'Arial';color:#FFFFFF;background-color:#000000;font-size:10pt;"> </form> Here is a screen capture of what the menu looks like. It's at this point I want no action to take place when "go" is clicked. As it is now (above code) it refreshes current page. My question is how do I change this so that the first "option" has no action when chosen and then "go" is clicked. As is is right now it refreshes the current page being that between the quotes <option value=" HERE ">title of menu</option> there isn't a link because I don't want this option to do anything. Basically when the drop down menu shows "title of menu" and I click on "go" I want nothing to happen instead of a refresh. Hi All, This is my first post so please be kind I am currently trying to create 3 drop down menus in a top frame going across the top of the page. This is my first time trying to do anything like this and have run into a few issues i cant get my head around nor find an answer on the net. The code i have so far is this: _______________________________________________________________ <HTML> <HEAD> <TITLE> Test</TITLE> <BODY> </BODY> <SCRIPT TYPE="text/javascript"> <!-- function dropdown(mySel) { var myWin, myVal; myVal = mySel.options[mySel.selectedIndex].value; if(myVal) { if(mySel.form.target)myWin = parent[mySel.form.target]; else myWin = window; if (! myWin) return true; myWin.location = myVal; } return false; } //--> </SCRIPT> </HEAD> <div align="center"> <table border="1" cellpadding="4" width=500> <FORM METHOD=POST onSubmit="return dropdown(this.gourl)" TARGET=MAIN > <SELECT NAME="gourl"> <OPTION VALUE="">Choose a Destination... <OPTION VALUE="C:\Users\Desktop\a.htm">User Manuals </SELECT> <INPUT TYPE=SUBMIT VALUE="Go"> </FORM> <FORM METHOD=POST onSubmit="return dropdown(this.gourl)" TARGET=MAIN > <SELECT NAME="gourl"> <OPTION VALUE="">Choose a Destination... <OPTION VALUE="C:\Users\Desktop\a.htm">User Manuals </SELECT> <INPUT TYPE=SUBMIT VALUE="Go"> </FORM> <FORM METHOD=POST onSubmit="return dropdown(this.gourl)" TARGET=MAIN > <SELECT NAME="gourl"> <OPTION VALUE="">Choose a Destination... <OPTION VALUE="C:\Users\Desktop\a.htm">User Manuals </SELECT> <INPUT TYPE=SUBMIT VALUE="Go"> </FORM> </HTML> _______________________________________________________________ 1) When selecting 'User Manuals' on the drop down box, it opens up a new window and directs me back to the home page? 2) i am unsure as to how you place the drop down boxes side by side aligned at the top of the page? Is anyone able to help me out here? Cheers in advance Hello im looking for a script for my website that offers the following I have an image link, that I want to rollover to another image (Of the text glowing) then have a drop down menu pop up below it that can have other menus drop down from that one.) Right now Im trying a Javascript that I found for free on the internet but i cant seem to get it working. http://javascript-array.com/scripts/...rop_down_menu/ But I cant get it to be a rollover image instead of a text box. and it doesnt support multiple drop downs like this one: http://javascript-array.com/scripts/..._down_menu/?sb plus they want you to pay for it, and im looking for a free solution. Any help appreciated, thanks. Good day guys... is there anyone who can share about drop down menu's I want to create a drop down bar using images, like the one on this page: http://www.teamtalk.com/ I already have the images which I want to use. I have scoured the internet for how to do it and tried many, many tutorials but I don't understand how to do it. Please help! Hey guys, I need help making a drop down menu. I know how to make a basic one, but this is what I need... I want to have 4 drop down menus, with about 4 choices in each one. Under them I need a 'Submit" button. Basically, I need it so that any combination of the 4 choices in the 4 menus will open a specific page. For instance, lets say in menu 1 I pick the word "cat". In menu 2, I pick the word "dog". In menu 3 I pick the word "car". In menu 4 I pick the word "tree". Once I click submit, a page with a picture of a cat, dog, tree and car would open up. (I would provide all the possible different pictures). So how would one do this? Any help is GREATLY appreciated, thanks! Hey guys, I am very new to web design, however have some basic knowledge of html. I am designing a simple site which needs a drop down menu tab for only ONE TAB in the nav bar. See the following site for an example: http://www.dynamicdrive.com/dynamici...wntabsdemo.htm Again I need a drop down menu for only one tab. How do I achieve this? Hello All, I am new to coding and looking to self teach myself with the help of this forum so I can design my own web site. I am looking for the best solution for searching a database. The database will for example contain USA States and Cities with the final result being an item or thing etc. that the search criteria points to. Let's say for example I want to know where all the Dentists are in the State of Maryland. I found this example below and It creates the option to choose a state however how do you make it accept your choice once chosen and go to the next webpage for the next lookup or whatever you decide to have it do next. I guess what I am asking is how do you make a Search or Go button take you to your drop down search criteria. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=unicode"> <meta content="MSHTML 6.00.2900.3429" name="GENERATOR"></head> <body><select name="state" size="1"> <option value="NA" selected="">Select A State</option> <option value="Blank">--------------------</option> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> <option value="CA">California</option> </select> </body></html> Thanks for any assistance... I am sure there is a simple answer to this |
|||||||