|
HTML - Dropdown List Help
Hi all
i would like to know how to create a combobox/dropdown box that the user can use to up grade options on a pc and the price change with it? here is an example http://www.gr-tek.com.au/proddetail.php?prod=Corei3 many thanks Nick Similar TutorialsHi, I am using css to create a dropdown menu. It works fine in all browsers except IE6. In IE6 a dropdown list covers the dropdown menu. please see the atachment/screenshot. Here is the html/css code I am using. HTML Code: {
position: relative; z-index: 1;}*/
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.dropdown {
position: relative;
z-index: 597;
float: left;
}
ul.dropdown li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
z-index: 599;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
ul.dropdown ul li {
float: none;
z-index: 598;
}
ul.dropdown ul ul {
top: 1px;
left: 99%;
z-index: 598;
}
ul.dropdown li:hover > ul {
visibility: visible;
z-index: 598;
}
HTML Code: <div id="header" class="header" style="background-image: url(./images/blue-curve.jpg); background-position: top;">
<h1>
Finance and Risk
</h1>
<ul class="dropdown dropdown-horizontal noPrint">
<li><a href="#" class="dir">Data Management</a>
<ul>
<?php echo '<li><a href="main.php?PageName=import3' . SID . '">Upload Data</a></li>'; ?>
<?php echo '<li><a href="main.php?PageName=list' . SID . '">Download Data</a></li>'; ?>
<?php echo '<li><a href="main.php?PageName=delete' . SID . '">Delete Data</a></li>'; ?>
<?php echo '<li><a href="main.php?PageName=assetupdate' . SID . '">Update Data</a></li>'; ?>
</ul>
</li>
<li><a href="#" class="dir">Reports</a>
<ul>
<?php echo '<li><a href="main.php?PageName=reports' . SID . '">BS Overview</a></li>'; ?>
<?php echo '<li><a href="main.php?PageName=CDO' . SID . '">CDOs</a></li>'; ?>
<?php echo '<li><a href="main.php?PageName=impairment' . SID . '">Impairments</a></li>'; ?>
<?php echo '<li><a href="main.php?PageName=fvecapreport' . SID . '">FairValue and Risk</a></li>';?>
<?php echo '<li><a href="main.php?PageName=creditrisk' . SID . '">Credit Default Risk</a></li>';?>
<?php echo '<li><a href="main.php?PageName=securitydata' . SID . '">MarketData</a></li>';?>
</ul>
</li>
<li><a href="#" class="dir">Files & Manuals</a>
<ul>
<?php echo '<li><a href="magnitude.pdf" target="_blank">Product Codes</a></li>';?>
<?php echo '<li><a href="uploadmanual.pdf" target="_blank">Upload Manual</a></li>';?>
<?php echo '<li><a href="main.php?PageName=osmdocs' . SID . '">OSM Files</a></li>'; ?>
</ul>
</li>
<li><a href="#" class="dir">Miscellaneous</a> <ul>
<?php echo '<li><a href="main.php?PageName=creditcrises' . SID . '">Credit Crises</a></li>'; ?>
</ul>
</li>
<?php if ($_SESSION['Admin'] == "Yes") { ?>
<li><a href="#" class="dir">Admin </a>
<ul>
<?php echo '<li><a href="main.php?PageName=message' . SID . '">Flash Alerts</a></li>'; ?>
<?php echo '<li><a href="testmarcel1.php?' . SID . '">Test Marcel1</a></li>'; ?>
<?php echo '<li><a href="testmarcel2.php?' . SID . '">Test Marcel2</a></li>'; ?>
<?php echo '<li><a href="testmarcel3.php?' . SID . '">Test Marcel3</a></li>'; ?>
<?php echo '<li><a href="main.php?PageName=testajay1' . SID . '">Test Ajay1</a></li>'; ?>
<?php echo '<li><a href="testajay2.php?' . SID . '">Test Ajay2</a></li>'; ?>
<?php echo '<li><a href="testajay3.php?' . SID . '">Test Ajay3</a></li>'; ?>
</ul>
</li>
<?php } ?>
<li><a class="dir" href="main.php?PageName=menu">Menu</a>
<ul>
<?php echo '<li><a href="logout.php">Logout</a></li>'; ?>
<?php echo '<li><a href="#">Change password</a> </li>'; ?>
</ul>
</li>
<li><a class="dir" href="javascript:window.print()" color="green">Print</a> </li>
</ul>
</div>
Any one has an idea how to get the css menu on top of the dropdown list? Thanks in advance ok i have this code it works fine for what i want but also id like to add in when the option is selected to have an alert that pops up acording to what option was selected Code: <html> <head> <title>Tech Support</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <form> <select onchange="this.form.solu.value=this.options[this.selectedIndex].value"> <option value="" selected>Select from Drop Down List</option> <option value="Plug in the Computer">No Power</option> <option value="Turn on the Monitor">Screen is Dark</option> </select><br> <br> <table> <tr> <td valign="top">Solution:</td> <td><textarea name="solu" rows="3" cols="30"></textarea></td> </tr> </table> </form> </body> </html> Hey guys, I'm having a little problem. My client is being very picky and he doesn't like the way his "form dropdown box unfurls". I did some research and I can't seem to find a way to changed the speed or way that the dropdown box drops down. Can someone help me out? Thank in advance! Aaron Hello all, I have created a dropdown list in a form using the <select> tag. My question is, is there any way to have that dropdown list display a different <option> as the default option when the page loads? The default option right now is always whatever option is the first one in my code. EX. <select> <option value="1">1</option> //by default this first option shows up on page load <option value="2">2</option> <option value="3">3</option> //can I have this option show up instead by default? </select> Thanks in advance. I am trying to make two drop down list boxes (each with a "Enter" button), but I can't get them both to work. The second list box works fine, but the "Enter" button from the first box uses the selection of the second box as its reference. Does anyone know why this is happening? Below is the code that I am using. Code: </ br>
<h1 style="text-align: center;">View Routes</h1>
<p style="text-align: center;">Browse By Location:</ br><script type="text/javascript">
function submitForm() {
var list = document.navList.subMenu;
var page = list.options[ list.selectedIndex ].value;
if (page != "home")
window.location = page;
return false;
}
</script>
<form style="text-align: center" name="navList" onsubmit="return submitForm();">
<select name="subMenu">
<option value="home"> </option>
<option value="http://climb-utah.modern-graphix.com/bryce-national-park">Bryce National Park</option>
<option value="http://climb-utah.modern-graphix.com/capitol-reef-national-park">Capitol Reef National Park</option>
<option value="http://climb-utah.modern-graphix.com/cedar-mesa">Cedar Mesa</option>
<option value="http://climb-utah.modern-graphix.com/escalante-grand-staircase">Escalante Grand Staircase</option>
<option value="http://climb-utah.modern-graphix.com/lake-powell-area">Lake Powell Area</option>
<option value="http://climb-utah.modern-graphix.com/miscellaneous">Miscellaneous</option>
<option value="http://climb-utah.modern-graphix.com/moab-area">Moab Area</option>
<option value="http://climb-utah.modern-graphix.com/robbers-roost">Robbers Roost</option>
<option value="http://climb-utah.modern-graphix.com/san-rafael-swell">San Rafael Swell</option>
<option value="http://climb-utah.modern-graphix.com/wasatch-mountains">Wasatch Mountains</option>
<option value="http://climb-utah.modern-graphix.com/uinta-mountains">Uinta Mountains</option>
<option value="http://climb-utah.modern-graphix.com/valley-of-fire">Valley Of Fire</option>
<option value="http://climb-utah.modern-graphix.com/zion-national-park">Zion National Park</option>
</select>
</ br>
<input type="submit" value="Enter" />
</form>
<p style="text-align: center;">Browse By Category:</p><script type="text/javascript">
function submitForm() {
var list = document.navCat.subMenuCat;
var page = list.options[ list.selectedIndex ].value;
if (page != "home")
window.location = page;
return false;
}
</script>
<form style="text-align: center" name="navCat" onsubmit="return submitForm();">
<select name="subMenuCat">
<option value="home"> </option>
<option value="http://climb-utah.modern-graphix.com/family-fun">Family Fun - Easy</option>
<option value="http://climb-utah.modern-graphix.com/weekend-warrior">Weekend Warrior - Moderate</option>
<option value="http://climb-utah.modern-graphix.com/hardcore">Hardcore - Difficult</option>
<option value="http://climb-utah.modern-graphix.com/technical">Technical - Highly Skilled</option>
<option value="http://climb-utah.modern-graphix.com/adventure-tales">Adventure Tales - Stories</option>
<option value="http://climb-utah.modern-graphix.com/video-audio-clips">Video & Audio Clips</option>
<option value="http://climb-utah.modern-graphix.com/other-stuff">Other Stuff</option>
</select>
</ br>
<input type="submit" value="Enter" />
</form>
I'm a noob so please forgive me if this is a stupid question or if the info is listed somewhere else. I really did try and find it on my own. I'm trying to make a simple website that incorporates amazon's free "astore". It has a search function included in the sidebar already but i don't like it and really want to set up my own. I found this search box code: Quote: <form action="http://astore.amazon.com/adbabel-20/search" method="get" target="_blank"> <input name="node" value="8" type="hidden"> <input name="keywords" size="12" value="" type="text"> <button type="submit" >Search</button> </form> it works well but is limited to searching only one category in my store (i have several). each category is assigned a "node" number. By changing the node value in the code I can change which category the box searches. I want to create a drop down list that, upon selection, changes the node value and thus the category that is to be searched. Can anyone let me know how this might be done? I have a big list and I want to show on my webpage 6lines from that list randomly (when webpage is refreshed another 6 lines appear). can anyone help me with he code, how should the list look like so it works...or where can I find more info on this ? thanks I am making a website with a list inside list for my navigation bar. It looks good on safari(win/mac) and firefox but the list looks horrible in IE7.0(didnt check 6.0) I was wondering if anyone know what it could be HTML Code: Code: <div id="nav"> <img class="menupic" src="images/mainmenu.png" alt="Main Menu"/> <ul class="navli"> <li><a class="point" href="#"><img src="images/menu_findme.png" alt="findMe"/></a></li> <li> <ul class="navlinks"> <li><a href="#goto_facebook" id="facebook">- Facebook</a></li> <li><a href="#goto_myspace" id="myspace">- Myspace</a></li> <li><a href="#goto_youtube" id="youtube">- Youtube</a></li> </ul> </li> </ul> <ul class="navli"> <li><a class="point" href="#"><img src="images/menu_blog.png" alt="blog"/></a></li> <li> <ul class="navlinks"> <li><a href="#blogid2" id="blogid2">- Testing | May 01</a></li> <li><a href="#blogid1" id="blogid1">- Debut Album | Apr 30</a></li> <li><a href="#goto_blogarchive" id="blogarchive">- Archives</a></li> <li class="donthidethis"><ul class="navli donthidethiseither" style="padding:0;"> <li><a class="point" href="#">- Categories</a></li> <li><ul class="navlinks"> <li><a href="#goto_catid2" id="catid2">- Media</a></li><li><a href="#goto_catid1" id="catid1">- News</a></li><li><a href="#goto_catid3" id="catid3">- Off Topic</a></li><li><a href="#goto_catid4" id="catid4">- Tutorials</a></li> </ul></li> </ul></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_eliasmusictv.png" alt="eliasMusic Tv"/></a></li> <li><ul class="navlinks"> <li><a href="#" id="coming">- Coming soon...</a></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_about.png" alt="about"/></a></li> <li><ul class="navlinks"> <li><a href="#goto_biography" id="biography">- biography</a></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_links.png" alt="links"/></a></li> <li><ul class="navlinks"> <li><a href="#" id="links">- Coming soon...</a></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_contact.png" alt="contact"/></a></li> <li><ul class="navlinks"> <li><a href="#goto_contact" id="contactpage">contactForm</a></li> </ul></li> </ul> CSS Code: Code: #nav { float:right; width:195px; padding-left:20px; background:url("images/navback.png"); } #nav ul { list-style: none; margin-left:1px; border: none; } #nav .navli { padding-top:3px; padding-bottom:3px; } #nav .navlinks { padding-left:25px; } #nav .navlinks a,a:link { color:#262626; } #nav .navli img { margin-top:5px; margin-bottom:5px; } #nav .navlinks a:hover { color:#dadada; } #nav img.menupic { margin:20px 10px 5px 95px; } #nav a { font-size:14px; display:block; } #nav a.point { font-size:14px; font-weight:bold; } .navliover { background:url("images/navhover.jpg"); }
Any help at all would be appriciated please I can show u the website via Private message if you are interested in helping Thanks in advance Reply With Quote Hello, I ran into this problem today in my Basic XHTML class, and it was enough to stump me and the instructor: if you want to put an unordered list in the middle of a page, but you want the list items to be left-aligned so the bullets are one on top of the other...how do you do it? I started with code something like <div align="center"> <ul type="disc"> <li>Wine</li> <li>Women</li> <li>Song</li> </ul> </div> This centers the list on the page, but it also centers each list item. I tried placing a <div align="left"> around the list items, individually and collectively, but depending on the positioning it either had no effect or it nullified the center attribute completely and gave me a left-aligned list on the left edge of the page. Attempts to change the style of the <li> tag, which I haven't done in months and was never all that good at, failed. I know I can do this in ten seconds by putting the list inside a one-cell table, and with much fiddling I could probably do it with a spacer GIF...but what's the 1.0 Strict way? I've been working on a dropdown menu using html tables, css and javascript, but it seems to fail in Firefox. When I hover the button the first time it's like it should be, however, when I hover it the second time the dropdown menu actually comes next to the button instead of below it. It's hard to explain, so I've uploaded it to http://darkool.nl/table.php This picture also explains what happens in Firefox: It works fine in other browsers (IE, Opera and Safari) Code: <script>
function showMenu(num) {
for (var count = 1; id = document.getElementById("show"+num+"."+count); ++count) {
id.style.display = "block";
}
}
function hideMenu(num) {
for (var count = 1; id = document.getElementById("show"+num+"."+count); ++count) {
id.style.display = "none";
}
}
</script>
<style>
* {
margin: none;
padding: none;
}
tr {
vertical-align: top;
}
td.menu0 {
border: 1px solid black;
display: none;
}
td.menu1 {
border: 1px solid black;
display: block;
}
</style>
<table onMouseOver='showMenu(0)' onMouseOut='hideMenu(0)' id='menu0' class='menu' cellpadding='0' cellspacing='0'>
<tr><td id='show' class='menu1'>Over ons</td></tr>
<tr><td id='show0.1' class='menu0'>Informatie</td></tr>
<tr><td id='show0.2' class='menu0'>Biografie</td></tr>
</table>
Hey! What's the easiet way to create a link, and when it's pressed a little login form dropsdown from the link? Cheers / DiNozzo Hi, I have a menu that lets me select from multiple options, and I want that any option that I choose will lead me to another website, after that I click the submit button. How I do this? Code: <form action="" method="post"> <select name="Dropdown Menu" id="menu"> <option selected>Select</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <input type="submit" value="" id="button"> </form> Thanks, Steve So for a while a have been trying very hard to create a dropdown menu for my navigation bar. I have searched the web long and hard for this and found little valuable information. I have a four link graphical navigation bar made from image sprites (see this tutorial) and have been trying to make a dropdown bar for just the second link. I know a bit of html/css but very little javascript which if I understand what I read from google, thats what I will need. Can anyone help please? I'm sure this has been done before, but unfortunately im under the pump somewhat! How do I get a drop down menu to post things to a textarea in html? As in when I select an item from a drop down menu how do i get this selection to show relevant information in a text area below.. TruskyMX Please help Im sure there is post already just haven't looked yet. Can somebody help me figure out how to add another <ul> to my dropdown menu? I can't seem to get another menu item item from 'For Rent' -> 'Holiday' - 'Apartments' -> then here I want to list the locations 'Nerja', 'Torrox' and 'Frigiliana' but I can't get it to display properly. Anyone got any pointers. Html: http://www.for-rent-nerja.com/index_links.html CSS: http://www.for-rent-nerja.com/scripts/index_links.css (the link css is at the very bottom) Cheers Jamie hey I'm new at the forum here and kinda need some help with a multi level drop down menu for my website. there shall be 2 boxes where in the first one you can choose your Zipcode and then a box below to choose the city you are living in. first time working with html and I'm not sure if it can be made be that, and i was thinking i could get some help with that for some one in here. let me know if it's not understandable^^ ^^thanks for the help^^ Any assistance that can be provided is greatly appreciated. I am unable to get my dropdown menu to drop in front of my left column. I have copied the css and the html below. I am not sure if there is something wrong with the HTML or the css so please let me know if I need to post this to a CSS thread. Thank you for any help provided. #navigation { margin: 0; padding: 0; width: 100%; background-color: #f5f5f5; height: 1.3em; float: left; clear: both; } #navigation li { list-style: none; float: left; } #navigation li a { display: block; padding: 0 6px; background-color: #f5f5f5; color: #0000ff; text-decoration: none; border-right: 2px solid #fff; font-size: 12px;} #navigation li ul { display: none; width: 10em; background-color: #0000ff; } #navigation li:hover ul, #navigation li.hover ul { display: block; position: absolute; margin:0; padding:0; } #navigation li:hover li, #navigation li.hover li { float: none; } #navigation li:hover li a, #navigation li.hover li a{ background-color: #0000ff; border-bottom: 1px solid #fff; color: #ffffff; } #navigation li li a:hover{ background-color: #0000ff;} /* column container */ .colmask { position:relative; clear:both; float:left; width: 100%; } /* common column settings */ .colright, .colmid, .colleft { float:left; width:100%; position:relative; } .col1, .col2, .col3 { float:left; position:relative; padding:0 0 1em 0; } /* 3 Column settings */ .threecol { background-image: url('DCIMAGE3.jpg'); } .threecol .colmid { right:25%; background-image: url('DCIMAGE3.jpg'); } .threecol .colleft { right:50%; background-color: #ffffff; } .threecol .col1 { width:46%; text-align: center; } .threecol .col2 { width:21%; left:31%; } .threecol .col3 { width:21%; left:85%; } ul id="navigation"> <li><a href="www.zphibeasternregion.org">Home</a></li> <li><a href="#">National Links</a><ul> <li><a href="www.zphib1920.org">Zeta Phi Beta Sorority, Inc.</a></li> <li><a href="http://www.zphib1920.org/antihazing.html"> Sorority's Statement on Hazing</a></li></ul> </li> <li><a href="#">States</a><ul> <li><a href="DistrictofColumbia.htm">District of Columbia</a></li> <li><a href="NorthCarolina.htm">North Carolina</a></li> <li><a href="Virginia.htm">Virginia</a></li> <li><a href="WestVirginia.htm">West Virginia</a></li></ul></li> <li><a href="#">Contact us</a><ul> <li><a href="regionalleadership.htm">Regional Leadership</a></li></ul> </li> </ul> *****html <div class="colmask threecol"> <div class="colmid"> <div class="colleft"> <div class="col1"> <!-- Column 1 start --> <p>fajdflajslrejlaje;jerjekkj</p> <!-- Column 1 end --> </div> <div class="col2"> <!-- Column 2 start --> <p>fajdflajslrejlaje;jerjekkj</p> <!-- Column 2 end --> </div> <div class="col3"> <!-- Column 3 start --> <p>fajdflajslrejlaje;jerjekkj</p> <!-- Column 3 end --> </div> </div> </div> I recently changed my navigation links from js to html and css based links but have a few problems with the layout, I wonder if you anyone can help? http://www.for-rent-nerja.co.uk/ If you rollover the 'For Rent' dropdown do you notice how the dropdown is appearing under my sidebar! Is there any way to repair that? It is running from http://www.for-rent-nerja.co.uk/nav_menu/style.css I am also having problems stretching the width of the links to fit my 950px width, they seem to break apart after about 140px individually! Hi guys, i have problem with my dropdown menu and IE7. Site is -> http://www.blisscupcakecafe.com/4/ When u hover on about us button it appears submenu/dropdown. But in IE7 its behind that AJAX slideshow/slider. So in all browser its ok but on IE its broken Also when i hover About Us from left or right its inline menu instead of block ? Thanks in advance I'm aware that the menu in my site can get too-big to display properly at low to medium resolutions and/or browser windows that aren't maximized, so after considering a couple of possible solutions i figured i'd fix it by putting everything into five general categories, two of which would have subcategories (and some of the subcategories would have subsubcategories, and that's as far as it goes). So... ...I'm looking for a code to turn my menu into a dropdown one. Now, as far as i'm concerned there are three types of dropdown menus, two of which i don't like and thus don't want. Google only returns results for one type, which, true to Murphy's law, is one of the two i don't want. Example of the one i want: the one on the top menu on this site ("HOME", "TUTORIAL", "FORUM", "QUICK LIST") (with possibility of images and that kind of stuff) Example of the one i don't want that Google returns: the kind on this site (default computer type) Example of the one i don't want that Google doesn't return: the kind that appears when you click on "Search", "KotV Roster" or any of those links on this site (forum type) I tried to copy the relevant code on the first page i linked to, but either i didn't copy all that's relevant or i'm doing something wrong with it. I considered both possibilities and tried to fix things, but all failed. So how do i do it? Here's a rough picture of exactly what i want: click. I hope the notes and pictures are enough, but if something is unclear please ask away. Sorry for the weird font, but i didn't pay much attention to how the whole thing looked; it's just a quick sketch i made in two minutes. Thanks in advance. |
|||||||