|
HTML - Css Horizontal Drop Down Menu Always On Top
I am working on a site with a CSS horizontal drop down menu. On my Contact Us page I added an office locations map that uses java script and links to MapsAlive.com. My menu only has one drop down category, but when testing it, the drop down stops where the office location map starts. Is there a way to make it so the menu is always on top? I am using Dreamweaver, so the menu is part of my template. Here is my code for the menu:
<div id="outside"> <ul id="navigation-1"> <li><a href="index.html" title="Home" target="_self" >Home</a> </li> <li><a href="" title="Services" target="_self" >Services</a> <ul class="navigation-2"> <li><a href="air.html" title="Air" target="_self" >Air</a></li> <li><a href="altenergy.html" title="Alternative Energy" target="_self" >Alternative Energy</a></li> <li><a href="civil.html" title="Civil Engineering" target="_self" >Civil Engineering</a></li> <li><a href="environmental.html" title="Environmental" target="_self" >Environmental</a></li> <li><a href="health.html" title="Health & Safety" target="_self" >Health & Safety</a></li> <li><a href="solidwaste.html" title="Solid Waste" target="_self" >Solid Waste</a></li> </ul> </li> <li><a href="presentations.html" title="Presentations" target="_self" >Presentations</a> </li> <li><a href="aboutus.html" title="About Us" target="_self" >About Us</a> </li> <li><a href="careers.html" title="Careers" target="_self" >Careers</a> </li> <li><a href="contactus.html" title="Contact Us" target="_self" >Contact Us</a> </li> </ul> </div> Here is my code for the office locations map: <div id="mainContent" align="center"> <link rel="stylesheet" type="text/css" href="http://tour.mapsalive.com/3854/page1.css" /> <script type="text/javascript" src="http://tour.mapsalive.com/3854/mapsalive.js"></script> <script type="text/javascript">maClient.path="http://tour.mapsalive.com/3854/";</script> <script type="text/javascript" src="http://tour.mapsalive.com/3854/page1.js"></script> </div> I have attached a screenshot of how it looks in a browser so you can see what it is doing. I would appreciate any advice from anyone who can give me direction. Thanks, Tatter Similar TutorialsHi folks, I have this menu (generated via menumatic), that needs to not wrap should users decrease the width of their browser too far (or if it does wrap..then I need the div to resize to fit the height properly which it currently does not). Any tips/suggestions welcome The website url: (click the Available Items which will show the 2nd level menu in question (located in div id='promo') http://www.borrownet.com/ the CSS is as follows (from mm2.css): /* Based partially on Matthew Carroll's keyboard accessible flavor of Suckerfish * Dropdowns by Patrick Griffiths and Dan Webb. * http://carroll.org.uk/sandbox/suckerfish/bones2.html */ /* ----[ LINKS ]----*/ /* all menu links */ #nav a, #subMenusContainer a{ text-decoration:none; display:block; padding: 8px 10px; color: #000; font: 70%/90% arial; -moz-border-radius: 4px; -webkit-border-radius: 4px; } /* Just main menu links --[for non-javascript users this applies to submenu links as well]*/ #nav a{ margin:5; float:left; } /* Just sub menu links */ #subMenusContainer a, #nav li li a{ text-align:left; } /* All menu links on hover or focus */ #nav a:hover, #subMenusContainer a:hover { background-color:#90B557; color:#FFF; /* -moz-border-radius: 7px; -webkit-border-radius: 7px;*/ } /* sub menu links on hover or focus */ #subMenusContainer a:hover, #nav li a:hover { background-color:#B2D281; color:#000; } /* .subMenuParentBtn{ background: url(../img/arrow_right.gif) right center no-repeat; } .subMenuParentBtnFocused{ background: url(../img/arrow_right_over.gif) right center no-repeat; } .mainMenuParentBtn{ background: url(../img/arrow_down.gif) right center no-repeat; } .mainMenuParentBtnFocused{ background: url(../img/arrow_down_over.gif) right center no-repeat; } */ /* ----[ OLs ULs, LIs, and DIVs ]----*/ /* Submenu Outer Wrapper - each submenu is inside a div with this class - javascript users only */ .smOW{ display:none; position: absolute; overflow:hidden; /*the 2px left & right padding lets you have a 1px border on the ul or ol inside since overflow is set to hidden*/ padding:0px 4px; margin:0 0 0 -2px; } /* All ULs and OLs */ #nav, #nav ul, #nav ol, #subMenusContainer ul, #subMenusContainer ol { padding: 0; margin: 0; list-style: none; line-height: 1em; } /* All submenu OLs and ULs */ #nav ol, #nav ul, #subMenusContainer ul, #subMenusContainer ol { /*border around submenu goes here*/ -moz-border-radius: 4px; -webkit-border-radius: 4px; background-color:#90B557; border: 2px solid #C3D46A; top: 0px; left:0; z-index:8; } /* List items in main menu --[for non-javascript users this applies to submenus as well] */ #nav li { /*great place to use a background image as a divider*/ display:block; list-style:none; position:relative; float:left; } #subMenusContainer li{ list-style: none; } /* main menu ul or ol elment */ #nav{ display:block; position: absolute; list-style:none; margin:0 0 0 0; z-index: 5; text-align: center; display:block; } #subMenusContainer{ display:block; position:absolute; top:0; left:0; width:100%; height:0; overflow:visible; z-index:1000000000; } /* --------------------------[ The below is just for non-javscript users ]--------------------------*/ #nav li li{ float:none; } #nav li li a{ /* Just submenu links*/ position:relative; float:none; } #nav li ul { /* second-level lists */ position: absolute; width: 11em; margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */ margin-top:2.2em; } /* third-and-above-level lists */ #nav li ul ul { margin: -1em 0 0 -1000em; } #nav li:hover ul ul margin-left: -1000em; } /* lists nested under hovered list items */ #nav li:hover ul{ margin-left: 0; } #nav li li:hover ul { margin-left: 10em; margin-top:-2.5em;} /* extra positioning rules for limited noscript keyboard accessibility */ #nav li a:focus + ul { margin-left: 0; margin-top:2.2em; } #nav li li a:focus + ul { left:0; margin-left: 1010em; margin-top:-2.2em;} #nav li li a:focus {left:0; margin-left:1000em; width:10em; margin-top:0;} #nav li li li a:focus {left:0; margin-left: 2010em; width: 10em; margin-top:-1em;} #nav li:hover a:focus{ margin-left: 0; } #nav li li:hover a:focus + ul { margin-left: 10em; } I thought for sure that after all the helped I've received so far (many thanks, btw) that I'd be able to setup a horizontal menu using UL/LIs with some CSS. I've studied many other sites that use horizontal menues this way and have tried to figure 'em out but no luck so far Here's my attempted code so far: CSS Code: #headerNavMenuContainer {
background: url('images/main_nav_bar2.gif');
float: left;
border: 1px solid #000;
height: 42px;
width: 100%;
}
#headerNavMenu ul {
font-weight: 800;
text-align: center;
}
#headerNavMenu ul a {
border-right: 1px solid #dadada;
color: #000;
text-decoration: none;
}
HTML Code: <div id="headerNavMenuContainer"> <div id="headerNavMenu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">Encyclopedia</a></li> <li><a href="#">Forum</a></li> <li><a href="#">The Truth</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Publications</a></li> </ul> </div> </div> Unfortunately I haven't quite solved this horizontal menu that I'm trying to get displayed correctly, just yet. This is my latest code: CSS Code: #headerNavMenuContainer {
background: url('images/main_nav_bar2.gif') no-repeat center;
float: left;
height: 42px;
width: 100%;
margin: 0 auto;
text-align: center;
}
#headerNavMenu ul {
height: 42px; /* the height of the menu bar */
border: 1px solid #000; /* to make sure DIV displays at desired dimensions */
margin: 0 auto; /* i'm not entirely sure what 'auto' does */
text-align: center; /* i don't know how to center vertically in DIV */
}
#headerNavMenu li {
height: 42px;
margin: 0 auto;
display: inline;
height: 100%;
text-align: center;
border-right: 1px solid #f00;
list-style-type: none;
}
#headerNavMenu li a {
height: 42px;
margin: 0 auto;
color: #000;
text-decoration: none;
}
HTML Code: <div id="headerNavMenuContainer"> <div id="headerNavMenu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">Encyclopedia</a></li> <li><a href="#">Forum</a></li> <li><a href="#">The Truth</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Publications</a></li> </ul> </div> </div> The pics below show what I currently have and what I'm trying to get to. So I'm doing a website with horizontal menu that is centered. The page is 100% width, and the menu can be with or without fixed width. The menu is fine otherwise, but the sub items are not next to each other. This is because they only align the width of their parent. However, I'd like them to be centered under their parent regardless of how many sub items there are (so ultimately they could be as wide as the whole menu, provided there were enough sub items). So in the code I now have, the 3 sub items align so that 2 are inline, and the 3rd is under them. These should be inline, stretching over the width of their parent's width. Thanks for the help! Code: <body>
<div id="banner">
<div id="centeredmenu">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item with Sub</a>
<ul>
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub 2</a></li>
<li><a href="#">Long Sub Item 3</a></li>
</ul>
</li>
<li><a href="#">Menu Item 3</a></li>
</ul>
</div>
</div>
</body>
</html>
Code: #banner {
position: absolute;
width: 100%;
height: 100px;
top: 0;
}
#centeredmenu {
height: 55px;
float:left;
width:100%;
overflow:hidden;
position:relative;
top: 0px;
}
#centeredmenu ul {
float:left;
clear: both;
list-style:none;
margin:0;
padding:0;
position: relative;
left:50%;
text-align:center;
}
#centeredmenu li {
width: 180px;
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
#centeredmenu a {
display:block;
margin:0 0 0 0px;
padding:0px 10px;
background:#C03;
color:#fff;
text-decoration:none;
}
#centeredmenu ul ul {
position: absolute;
width: 100%;
display: none;
z-index: 400;
}
#centeredmenu ul ul li {
position: relative;
width: 50%;
z-index: 500;
}
#centeredmenu ul li a:hover {
background: #C03;
color: #3FF;
}
#centeredmenu ul li:hover ul{
display: block;
}
Help!!!! I have been looking at this for almost 6 hours and I still can't explain why my horizontal menu wrapped using Firefox and not IE. I have firefox 3 installed and some of the categories (on the same tree) wrapped and some doesn't. But if i refresh it a few times, it become normal again. This make no sense. Maybe I need to get some fresh air because i am starting to see spots on the screen. http://208.84.114.15 I am designing a page w/ a horizontal menu and CSS (added in header). For some reason, IE7 dislikes what I am doing (the HOVER doesn't seem to be working...) but it works fine in Opera, FF and Safari . . Perhaps one of the pros here can take a look under the hood? I've been at it for hours and can't seem to find the bug(s)... http://www.huntandfishnj.com/Sterling-G/ Thanks and Best wishes, Xex 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 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 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 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? 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 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! 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 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. 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?! 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. 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 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'... |
|||||||