Search the Entire Site
|
HTML - Scrollbar In Drop-down Menu
Topic
I would if someone could tell me what to put, and where so my horizontal menu could have a scroll; the problem occured because one book of mine has 90 parts (Odlucio sam da te volim in this case) and it would be ugly to see all of them at once (it would be nicer if there was a scroll somewhere)...the whole page can be seen here
link here is the code for that whole part...yes I know it's pretty long link Similar TutorialsI would if someone could tell me what to put, and where so my horizontal menu could have a scroll; the problem occured because one book of mine has 90 parts (Odlucio sam da te volim in this case) and it would be ugly to see all of them at once (it would be nicer if there was a scroll somewhere)...the whole page can be seen here link here is the code for that whole part...yes I know it's pretty long link 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! Good day guys... is there anyone who can share about drop down menu's Hi All! I would like to make a drop down box with all the departments of my company. Basically the user would select a dept and without refreshing or opening a new page the information would appear below. I have seen this before using a database but is there a way to do it without? 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! 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'... Hi, Basically i have an index page with two frame, a navigation frame for the top and a main frame for the information, i have a drop down menu in the navigation frame. But the problem is, the drop down menu cant all bee seen when it drops over the main frame. Does anyone know a solution to this problem, i tried using an Iframe instead of normal frames, but that leaves a big gap between the end of the drop down menu and the start of the information. I have also tried using the <div> tags this also didnt help, i was wondering if there is a way to set the order in which the frames are displayed,so the navigation frame is displayed over the main frame. Any help would be great. Thanks for your time. mmarab. Id like to do a drop down menu similar to there's... is there any simple way of doing 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 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? Hai everybody.. I want to create a html drop down menu. I created a menu using template toolkit, but i want to create this in html code.Caan anyone help. Pls find here what i done. { title = 'Enterprise Name' type = 'select' dropdown_field = arr_Ent_NameId (This is the array which contains all the data i.e enterprise name. name = 'ent_id' } How can i do this in html. In the select and value button , how can i use this array 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. 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. 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 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 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>
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 Hi, I have a website at http://www.homecookingdiary.com with a drop down menu on the right side. The problem I am having is that once you click on the arrow, the size of the table containing the words isn't consistent on Firefox and IE. On Firefox, the width automatically changes according to the length of the submenu. On IE, the width is fixed so that any long subtitles are cut off. I want to fix this problem so that on IE, the width automatically adjusts according to the words. I used this code below. <select onchange="self.location.href=''+this.options[this.selectedIndex].value+''" style="font-size:12px;color:#006699;font-family:verdana;background-color:#ffffff;width:140px" name="menu"> Please let me know how I can fix this problem. Thank you. 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
trying to accomplish creating a drop down menu for the anchors of a page. any help or code would be greatly appreciated. any further details needed please dont be shy Example Drop Down-> Products Description->to anchored section. For multiple anchors. Thanks for your time. Hello I want to make a drop down menu that will allow someone to select a room location that would generate the appropriate link. Because there are many rooms and each having a different link, to make a drop down box with each option having its corresponding link would take up a lot of code space. Instead I wanted to make a drop down box so that the link will be generated. Or maybe a user can input text through a textbox to generate the link. It will be like this... User selects room: 12K002 And the link would be of the kind: h33p://www.intranetpage.com/building12K/departmentroom/location002 So if the user selects the room 9J025 The corresponding link should be: h33p://www.intranetpage.com/building9J/departmentroom/location025 Can you suggest how I can make this code please? It is required to run on IE6 and needs to be as simple and short as possible. thanks Ok, well I got it working perfectly on Firefox 2... I checked it on IE and the second drop down list is way off track... I put in the javascript hack given in the tutorial... but I had to tweak the code they gave a bit... basically to work with my layout. http://www.htmldog.com/articles/suckerfish/dropdowns/ Any advice on how to fix any cross browser difficulties would be great, thanks! http://www.runescapeemporium.com/newlayout I have created a vertical drop down menu on my website. www.aplexia-villas.co.uk. When i select a tab then go off it, the tabs quickly goes back to the way they was at the start. How do i slow it down? Thanks for your help. |
|||||||