Drop Down Menu

@orazzalsJul 31.2007

I am looking for a clean (not bulky) looking drop down menu. I know HTML but am not very good with JavaScript so I will need something simple. Can someone recommend a good looking drop down menu that I can use easily? Any help would be greatly appreciated. Thanks

to post a comment

JavaScript

80 Comments(s) _↴

@blis102Jul 31.2007 — #I recently wrote a dropdown menu using minimal JS and CSS. Check it out, it may work for you.

http://dev.organixdesign.com/drop_down_menu/

@blis102Jul 31.2007 — #Forgot to mention. Its tested and working in:

IE6

IE7

Opera 9

Safari 3

and FF2

(which accounts for about 90% of web users or abouts)

@thegooseJul 31.2007 — #nice blis ?

last week i've looked for a dropdown menu aswell, I found a nice and quite simple one. I'll give you the code

chrome.js (you actually don't have to change anything in this):

[CODE]//Chrome Drop Down Menu- Author: Dynamic Drive (http://www.dynamicdrive.com)
 //Last updated: June 14th, 06'
 
 var cssdropdown={
 disappeardelay: 250, //set delay in miliseconds before menu disappears onmouseout
 disablemenuclick: false, //when user clicks on a menu item with a drop down menu, disable menu item's link?
 enableswipe: 1, //enable swipe effect? 1 for yes, 0 for no
 
 //No need to edit beyond here////////////////////////
 dropmenuobj: null, ie: document.all, firefox: document.getElementById&&!document.all, swipetimer: undefined, bottomclip:0,
 
 getposOffset:function(what, offsettype){
 var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
 var parentEl=what.offsetParent;
 while (parentEl!=null){
 totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
 parentEl=parentEl.offsetParent;
 }
 return totaloffset;
 },
 
 swipeeffect:function(){
 if (this.bottomclip<parseInt(this.dropmenuobj.offsetHeight)){
 this.bottomclip+=10+(this.bottomclip/10) //unclip drop down menu visibility gradually
 this.dropmenuobj.style.clip="rect(0 auto "+this.bottomclip+"px 0)"
 }
 else
 return
 this.swipetimer=setTimeout("cssdropdown.swipeeffect()", 10)
 },
 
 showhide:function(obj, e){
 if (this.ie || this.firefox)
 this.dropmenuobj.style.left=this.dropmenuobj.style.top="-500px"
 if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover"){
 if (this.enableswipe==1){
 if (typeof this.swipetimer!="undefined")
 clearTimeout(this.swipetimer)
 obj.clip="rect(0 auto 0 0)" //hide menu via clipping
 this.bottomclip=0
 this.swipeeffect()
 }
 obj.visibility="visible"
 }
 else if (e.type=="click")
 obj.visibility="hidden"
 },
 
 iecompattest:function(){
 return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
 },
 
 clearbrowseredge:function(obj, whichedge){
 var edgeoffset=0
 if (whichedge=="rightedge"){
 var windowedge=this.ie && !window.opera? this.iecompattest().scrollLeft+this.iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
 this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetWidth
 if (windowedge-this.dropmenuobj.x < this.dropmenuobj.contentmeasure)  //move menu to the left?
 edgeoffset=this.dropmenuobj.contentmeasure-obj.offsetWidth
 }
 else{
 var topedge=this.ie && !window.opera? this.iecompattest().scrollTop : window.pageYOffset
 var windowedge=this.ie && !window.opera? this.iecompattest().scrollTop+this.iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
 this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetHeight
 edgeoffset=this.dropmenuobj.contentmeasure+obj.offsetHeight
 if ((this.dropmenuobj.y-topedge)<this.dropmenuobj.contentmeasure) //up no good either?
 edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge
 }
 return edgeoffset
 },
 
 dropit:function(obj, e, dropmenuID){
 if (this.dropmenuobj!=null) //hide previous menu
 this.dropmenuobj.style.visibility="hidden" //hide menu
 this.clearhidemenu()
 if (this.ie||this.firefox){
 obj.onmouseout=function(){cssdropdown.delayhidemenu()}
 obj.onclick=function(){return !cssdropdown.disablemenuclick} //disable main menu item link onclick?
 this.dropmenuobj=document.getElementById(dropmenuID)
 this.dropmenuobj.onmouseover=function(){cssdropdown.clearhidemenu()}
 this.dropmenuobj.onmouseout=function(){cssdropdown.dynamichide(e)}
 this.dropmenuobj.onclick=function(){cssdropdown.delayhidemenu()}
 this.showhide(this.dropmenuobj.style, e)
 this.dropmenuobj.x=this.getposOffset(obj, "left")
 this.dropmenuobj.y=this.getposOffset(obj, "top")
 this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px"
 this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px"
 }
 },
 
 contains_firefox:function(a, b) {
 while (b.parentNode)
 if ((b = b.parentNode) == a)
 return true;
 return false;
 },
 
 dynamichide:function(e){
 var evtobj=window.event? window.event : e
 if (this.ie&&!this.dropmenuobj.contains(evtobj.toElement))
 this.delayhidemenu()
 else if (this.firefox&&e.currentTarget!= evtobj.relatedTarget&& !this.contains_firefox(evtobj.currentTarget, evtobj.relatedTarget))
 this.delayhidemenu()
 },
 
 delayhidemenu:function(){
 this.delayhide=setTimeout("cssdropdown.dropmenuobj.style.visibility='hidden'",this.disappeardelay) //hide menu
 },
 
 clearhidemenu:function(){
 if (this.delayhide!="undefined")
 clearTimeout(this.delayhide)
 },
 
 startchrome:function(){
 for (var ids=0; ids<arguments.length; ids++){
 var menuitems=document.getElementById(arguments[ids]).getElementsByTagName("a")
 for (var i=0; i<menuitems.length; i++){
 if (menuitems[i].getAttribute("rel")){
 var relvalue=menuitems[i].getAttribute("rel")
 menuitems[i].onmouseover=function(e){
 var event=typeof e!="undefined"? e : window.event
 cssdropdown.dropit(this,event,this.getAttribute("rel"))
 }
 }
 }
 }
 }
 
 }[/CODE]

dropdown.css (I made it a dropup menu, you can make it a dropdown menu by changing something in the css):

[code=html]a, a:visited
 {
 color: gray;
 text-decoration: none;
 }
 
 a:hover
 {
 color: white;
 text-decoration: underline;
 }
 
 a.grijs, a.grijs:visited
 {
 color: #656565;
 text-decoration: none;
 font-weight: bold;
 }
 
 a.grijs:hover
 {
 color: #656565;
 text-decoration: none;
 font-weight: bold;
 }
 
 a.rood, a.rood:visited
 {
 color: gray;
 text-decoration: none;
 font:				bold 10px Verdana;
 }
 
 a.rood:hover
 {
 color: white;
 text-decoration: none;
 font:				bold 10px Verdana;
 }
 
 chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
 content: "."; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden;
 }
 
 .chromestyle ul{
 padding: 0;
 margin: 0;
 text-align: center; /*set value to "left", "center", or "right"*/
 }
 
 /* ######### Kleur van de strepen ######### */
 .chromestyle ul li{
 display: inline;
 font-weight: bold;
 color: #999;
 }
 
 .chromestyle ul li a{
 margin: 0;
 text-decoration: none;
 font: 10px Verdana;
 font-weight: bold;
 color: #gray;
 }
 
 /* ######### Text effect menu items ######### */
 .chromestyle ul li a:hover{
 text-decoration: none;
 font-weight: bold;
 color: white;
 }
 
 .chromestyle ul li a[rel]:after{ /*HTML to indicate drop down link*/
 content: "";
 /*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
 }
 
 
 /* ######### Style for Drop Down Menu ######### */
 
 .dropmenudiv{
 position:absolute;
 top: 0;
 border: 1px solid #1b2025; /*THEME CHANGE HERE*/
 border-bottom-width: 0;
 font:normal 10px Verdana;
 line-height:18px;
 z-index:100;
 background-color: #bebebe;
 width: 92px;
 visibility: hidden;
 }
 
 
 .dropmenudiv a{
 width: auto;
 display: block;
 text-indent: 3px;
 border-bottom: 1px solid #1b2025; /*THEME CHANGE HERE*/
 padding: 2px 0;
 text-decoration: none;
 font-weight: bold;
 color: black;
 }
 
 .dropmenudiv a:hover{
 text-decoration: none;
 color: white;
 }
 
 * html .dropmenudiv a{ /*IE only hack*/
 width: 100%;
 }
 
 .dropmenudiv a:hover{ /*THEME CHANGE HERE*/
 background-color: #a1a1a1;
 }[/code]

now for the html file:

add this in your head

[code=html]
 <link rel="stylesheet" type="text/css" href="dropdown.css" />
 
 <script type="text/javascript" src="chrome.js">
 
 /***********************************************
 * Chrome CSS Drop Down Menu- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
 * This notice MUST stay intact for legal use
 * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
 ***********************************************/
 
 </script>[/code]

and this in your body

[code=html]<div id="rand_klein"></div>
 <div id="menu">
 
 
 <div class="chromestyle" id="chromemenu">
 
 <ul>
 
 <li><a href="werkzaamheden.html" target="main">Werkzaamheden</a></li>
 <font face="Times New Roman" color="white" size="2"> &nbsp;&nbsp;|&nbsp;&nbsp; </font>
 <li><a href="#" rel="dropmenu1">Portfolio</a></li>
 <font face="Times New Roman" color="white" size="2"> &nbsp;&nbsp;|&nbsp;&nbsp; </font>
 <li><a href="">Menu #3</a></li>
 <font face="Times New Roman" color="white" size="2"> &nbsp;&nbsp;|&nbsp;&nbsp; </font>
 <li><a href="">Menu #4</a></li>
 
 </ul>
 
 </div>
 
 
 <div id="dropmenu1" class="dropmenudiv">
 
 <a href="badkamer.html" target="main">Badkamer</a>
 <a href="">Submenu #2</a>
 <a href="">Submenu #3</a>
 <a href="">Submenu #4</a>
 
 </div>       <script type="text/javascript">cssdropdown.startchrome("chromemenu")</script>
 
 
   </div>[/code]

you can also look for the tutorial on dynamicdrive.

hope it works,

the goose

@blis102Jul 31.2007 — #Goose,

Good suggestion and thanks for the props, but I have to say that most everything from Dynamic Drive is crap. It may work fine, but its not the right way to do things (unaccessible, ugly, heavy code, etc...). If all [I]orazzals[/I] is looking for is some cut and paste code, that could work just fine, but I would recommend a solution that is more elegant, accessible and clean.

Plus that code uses FONT TAGS! How web 1.0 ?

Cheers

@thegooseJul 31.2007 — #ok lol, i'm only beginner :p

one question about the code: is it possible to make the submenu's background a bit transparant, like 75% opacity? and if so, how could you do it?

@blis102Jul 31.2007 — #We are all beginners at one point buddy, no worries, just wanted to steer you in the right direction.

Yes, you can apply transparency to the submenu's background. Read my entry about transparency here to get familiar with how opacity works on a browser to browser basis.

http://www.dev.organixdesign.com/transparency/

What you would want to do is add this property to your CSS:

[CODE]#menu ul {
 float: none !important;
 float: left; /* Must apply a float to the element to get it to work in IE */
 opacity: 0.5;
 filter: alpha(opacity=50);
 -moz-opacity: 0.5;
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
 }[/CODE]

So your CSS should look something like this:

[CODE]/* Menu
 ---------------------------------------------------------------------------------------- */
 #menu {
 width: 100%;
 float: left;
 margin: 0;
 padding: 0;
 list-style: none;
 background: #EFF3E2;
 border-top: 1px solid #CFD8A9;
 border-right: 1px solid #CFD8A9;
 border-bottom: 1px solid #CFD8A9;
 font-size: 100%;
 }
 #menu li {
 float: left;
 margin: 0;
 padding: 0;
 position: relative;
 }
 #menu a {
 float: left;
 display: block;
 padding: 7px 16px;
 text-decoration: none;
 color: #486A00;
 font-weight: bold;
 border-right: 1px solid #FAFBF7;
 border-left: 1px solid #DEE7C2;
 }
 #menu a:hover {background: #E1E7C9;}
 /* The Drop Down: */
 #menu .parent a {background: url(../images/bullet_arrow_down.png) no-repeat right center;}
 #menu .activeParent a {
 color: #333300;
 background: #E1E7C9 url(../images/bullet_arrow_down.png) no-repeat right center;
 }
 #menu .parent ul {display: none;} /* Hides the dropdown */
 #menu .activeParent ul {
 float: left;
 width: 12em; /* The width of the dropdown */
 margin: 0;
 padding: 0;
 position: absolute;
 top: 2.3em !important; /* For Standard Compliant Browsers */
 top: 2.2em; /* For IE */
 left: 0;
 list-style: none;
 z-index: 1000;
 }
 [B]#menu ul {
 float: none !important;
 float: left; /* Must apply a float to the element to get it to work in IE */
 opacity: 0.5;
 filter: alpha(opacity=50);
 -moz-opacity: 0.5;
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
 }[/B]
 #menu .activeParent li {
 float: left;
 margin: 0;
 padding: 0;
 }
 #menu .activeParent li a {
 float: left;
 width: 12em; /* The width of the dropdown */
 margin: 0;
 padding: 3px 8px;
 color: #556A28;
 display: block;
 background: #FFFFFF;
 font-size: 90%;
 border-bottom: 1px solid #CFD8A9;
 border-right: 1px solid #CFD8A9;
 border-left: 1px solid #CFD8A9;
 }
 #menu .activeParent li a:hover {
 background: #E1E7C9;
 color: #333300;
 }[/CODE]

[I]Note: make sure you add it [B]AFTER [/B]the "#menu .activeParent ul" declaration, or it will not work.[/I]

Hope that works for you.

Cheers

@thegooseJul 31.2007 — #thanks?

@orazzalsauthorJul 31.2007 — #I recently wrote a dropdown menu using minimal JS and CSS. Check it out, it may work for you.

http://dev.organixdesign.com/drop_down_menu/[/QUOTE]

Thank you

That is exactly what I am looking for. What is the code and how do I add it?

@blis102Jul 31.2007 — #Im glad its going to work for you. You can view the JS and CSS here:

http://dev.organixdesign.com/drop_down_menu/js/menu.js

http://dev.organixdesign.com/drop_down_menu/css/menu.css

Ive copy and pasted it below for your convenience.

CSS:

[CODE]/* Menu
 ---------------------------------------------------------------------------------------- */
 #menu {
 width: 100%;
 float: left;
 margin: 0;
 padding: 0;
 list-style: none;
 background: #EFF3E2;
 border-top: 1px solid #CFD8A9;
 border-right: 1px solid #CFD8A9;
 border-bottom: 1px solid #CFD8A9;
 font-size: 100%;
 }
 #menu li {
 float: left;
 margin: 0;
 padding: 0;
 position: relative;
 }
 #menu a {
 float: left;
 display: block;
 padding: 7px 16px;
 text-decoration: none;
 color: #486A00;
 font-weight: bold;
 border-right: 1px solid #FAFBF7;
 border-left: 1px solid #DEE7C2;
 }
 #menu a:hover {background: #E1E7C9;}
 /* The Drop Down: */
 #menu .parent a {background: url(../images/bullet_arrow_down.png) no-repeat right center;}
 #menu .activeParent a {
 color: #333300;
 background: #E1E7C9 url(../images/bullet_arrow_down.png) no-repeat right center;
 }
 #menu .parent ul {display: none;} /* Hides the dropdown */
 #menu .activeParent ul {
 float: left;
 width: 12em; /* The width of the dropdown */
 margin: 0;
 padding: 0;
 position: absolute;
 top: 2.3em !important; /* For Standard Compliant Browsers */
 top: 2.2em; /* For IE */
 left: 0;
 list-style: none;
 z-index: 1000;
 }
 #menu .activeParent li {
 float: left;
 margin: 0;
 padding: 0;
 }
 #menu .activeParent li a {
 float: left;
 width: 12em; /* The width of the dropdown */
 margin: 0;
 padding: 3px 8px;
 color: #556A28;
 display: block;
 background: #FFFFFF;
 font-size: 90%;
 border-bottom: 1px solid #CFD8A9;
 border-right: 1px solid #CFD8A9;
 border-left: 1px solid #CFD8A9;
 }
 #menu .activeParent li a:hover {
 background: #E1E7C9;
 color: #333300;
 }[/CODE]

Javascript:

[CODE]// GetElementsByClass Function
 function getElementsByClass(className) {
 var all = document.all ? document.all : document.getElementsByTagName('*');
 var elements = new Array();
 for (var i = 0; i < all.length; i++)
 if (all[i].className == className)
 elements[elements.length] = all[i];
 return elements;
 }
 
 // Menu Function
 function menu(start,hover) {
 var elm = getElementsByClass(start);
 for (i=0; i < elm.length; i++) {
 elm[i].onmouseover = function() {
 this.className = hover;
 this.onmouseout = function() {
 this.className = start;
 }
 }
 }
 }
 
 // Call Menu Function on page load
 window.onload = function() {
 menu('parent','activeParent');
 }[/CODE]

HTML:

[code=html]
 <ul id="menu">
 <li><a href="#" title="Title Here">Home</a></li>
 <li><a href="#" title="Title Here">About</a></li>
 
  <li class="parent"><a href="#" title="Title Here">Portfolio</a>
   <ul>
   <li><a href="#" title="Title Here">Sub Item</a></li>
   <li><a href="#" title="Title Here">Another Sub Item</a></li>
   <li><a href="#" title="Title Here">Sub Item</a></li>
   </ul>
  </li>
 
  <li class="parent"><a href="#" title="Title Here">Services</a>
   <ul>
   <li><a href="#" title="Title Here">Sub Item</a></li>
   <li><a href="#" title="Title Here">Another Sub Item</a></li>
   <li><a href="#" title="Title Here">Sub Item</a></li>
   </ul>
  </li>
 
  <li class="parent"><a href="#" title="Title Here">Services</a>
   <ul>
   <li><a href="#" title="Title Here">Sub Item</a></li>
   <li><a href="#" title="Title Here">Another Sub Item</a></li>
   <li><a href="#" title="Title Here">Sub Item</a></li>
   </ul>
  </li>
 
  <li><a href="#" title="Title Here">Contact</a></li>
 </ul>
 [/code]

Ive also used one image to indicate what menu item is a drop down if that is important to you:

http://dev.organixdesign.com/drop_down_menu/images/bullet_arrow_down.png

Note that that image is a PNG with transparency and so it does not display properly in IE6 (it has a grey background). I didnt take the time to make it a GIF with transparency and a matte (google "GIF transparency" or something to find out how to do that). You could replace it with a GIF and you would no longer have that problem... or you could just not use an image. Its up to you.

One last note, it is always a good idea to include your CSS and JS in sperate files so that editing is easier, especially if your site is multiple pages. To do that, insert the code below into the head of your document:

[code=html]
 <link rel="stylesheet" type="text/css" href="css/menu.css" />
 
 <script type="text/javascript" src="js/menu.js"></script>
 [/code]

This is assuming you put your CSS in a folder called "css" and your JS in a folder called "js".

Hope that helps, enjoy the menu.

Cheers

@orazzalsauthorAug 02.2007 — #thanks blis

hmmm I feel really stupid

I made a folder css and js like you suggested

I put the appropriate code in each folder

I put the code in the head and body like you instructed...however all I get is the following:

• Home

• About

• Portfolio

o Sub Item

o Another Sub Item

o Sub Item

• Services

o Sub Item

o Another Sub Item

o Sub Item

• Services

o Sub Item

o Another Sub Item

o Sub Item

• Contact

I guess I did something wrong because I am not getting the nice menu bar across my page

Do you have any idea where I went wrong?

I really do appreciate your help. You've been great

Susan

@blis102Aug 02.2007 — #Could you post the html that you have? You probably didnt link to the css/js properly in the <head> of the document. Double check that

@orazzalsauthorAug 02.2007 — #Blis,

I've attached a screen shot of Dreamweaver with one of my pages called our history page.

What I am trying to do is replace the simple menu I currently have on this page (and all the other pages) with your drop down menu. But as I said in my last transmission, when following your instructions I must have goofed up somewhere because what I get is the other attachment called test page.

I hope you can figure out what I did wrong.

Thanks

Susan

[upl-file uuid=02426c55-3993-4ef5-a561-4c6651f35884 size=50kB]our history page.gif[/upl-file]

[upl-file uuid=8d7b4a60-48e2-4cfd-870d-9fc55c07e55b size=33kB]test page.gif[/upl-file]

@orazzalsauthorAug 02.2007 — #Could you post the html that you have? You probably didnt link to the css/js properly in the <head> of the document. Double check that[/QUOTE]

Wow quick response.

I just did a test page. Was afraid to put it in any of my other pages until I saw how it worked. Dreamweaver writes most of the HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Untitled Document</title>

<link rel="stylesheet" type="text/css" href="css/menu.css" />

<script type="text/javascript" src="js/menu.js"></script>

</head>

<body>

<ul id="menu">

<li><a href="#" title="Title Here">Home</a></li>

<li><a href="#" title="Title Here">About</a></li>

 <li class="parent"><a href="#" title="Title Here">Portfolio</a>
   <ul>
   <li><a href="#" title="Title Here">Sub Item</a></li>
   <li><a href="#" title="Title Here">Another Sub Item</a></li>
   <li><a href="#" title="Title Here">Sub Item</a></li>
   </ul>
   </li>
 
   <li class="parent"><a href="#" title="Title Here">Services</a>
   <ul>
   <li><a href="#" title="Title Here">Sub Item</a></li>
   <li><a href="#" title="Title Here">Another Sub Item</a></li>
   <li><a href="#" title="Title Here">Sub Item</a></li>
   </ul>
   </li>
 
   <li class="parent"><a href="#" title="Title Here">Services</a>
   <ul>
   <li><a href="#" title="Title Here">Sub Item</a></li>
   <li><a href="#" title="Title Here">Another Sub Item</a></li>
   <li><a href="#" title="Title Here">Sub Item</a></li>
   </ul>
   </li>
 
   <li><a href="#" title="Title Here">Contact</a></li>

</ul>

</body>

</html>

@blis102Aug 02.2007 — #Hey Susan,

I just updated my demo page with more information and I have the file for download so you can see how it all works and how to link it in:

http://dev.organixdesign.com/demos/drop_down_menu/

@orazzalsauthorAug 02.2007 — #Hey Susan,

I just updated my demo page with more information and I have the file for download so you can see how it all works and how to link it in:

http://dev.organixdesign.com/demos/drop_down_menu/[/QUOTE]

Wow Thanks

That was wonderful.

Another question for you...

On you demo, is there any way to get rid of the empty part of the menu bar after your link "contact"?

I would like the drop down menu to fit in under my logo, The same size as my logo in the center of the page. so after my last link I would like it to end. I tried changing the width from 100% to lets say 60% but that just made everything smaller but left the extra part of the menu bar.

Also where would I put in the align center?

Oh and one other thing...on your download it lists both the js and css right on the same page as the html. You had mentioned that it is easier to make changes if they are linked to the separate files. I think that is where I was going wrong the linking part. Any suggestions for me.

I'm sorry. I feel like I am being a total pain. I am such a beginner and I am JavaScript illiterate. You have been wonderful and such a great help. I really appreciate it. Thanks

@blis102Aug 02.2007 — #Glad you like it all.

To make menu resize automatically, remove the "width: 100%" from the #menu {} section. Then replace it with "float: left". That should do it.

You cannot align a floated element other than by wrapping it in a container element and then giving that container element a width and the margin: 0 auto; to it so it is centered. That should do the same effect.

Sorry about the download, its fixed now, and so is the demo (they are linked to the files, rather than imbedded)

@orazzalsauthorAug 02.2007 — #Ok blis

DId what you said. Changing the width: 100% to float: left did work and the menu bar no longer has the extra to it.

I am not exactly sure what you mean when you said "You cannot align a floated element other than by wrapping it in a container element and then giving that container element a width and the margin: 0 auto; to it so it is centered. "

I changed any place I saw margin: 0; to margin: 0 auto; but it didnt make any difference. I also tried to change it to just auto; still no difference. Since all my pages are centered, in order to use this menu I need it to be centered as well. My logo has a width of 600 and resizes automatically when the screen size is smaller, so I need the menu to be about the same size and do the same.

Any suggestions?

I know I have said this many times before but thanks for all your help.

Susan

@thegooseAug 02.2007 — #blis,

is it possible to change your code for the dropdown menu so it becomes a dropup menu?

@blis102Aug 02.2007 — #Orazzals,

Could you post the code you are working with, or upload a zip of it so I can take a look. Floats are one of the hardest CSS properties to learn to work with, so it can be tricky.

@thegooseAug 02.2007 — #actually i would like to use your code then, because the code i have doesn't work using firefox. or something is wrong with it anyway.

www.team-ireland.net/jan/veralbo

as you can see the site has a dropup menu at the bottom (portfolio), but when i open the site in firefox, and open the dropup, it's not closing properly when clicking next to it or moving your mouse away from it...

maybe you have an idea what's wrong?

@blis102Aug 02.2007 — #Goose,

Here you go:

http://dev.organixdesign.com/demos/drop_up_menu/

Enjoy

@orazzalsauthorAug 02.2007 — #Orazzals,

Could you post the code you are working with, or upload a zip of it so I can take a look. Floats are one of the hardest CSS properties to learn to work with, so it can be tricky.[/QUOTE]

All I did was change your code to say float: left and margin: 0 auto;

I did change the menu names to reflect the names I would like in my menu.

I just re-downloaded your menu code to get the fixed version and actually the other way was better. The float: left definitely fixed the full bar across the page but the margin: 0 auto; didn’t do anything. But now not all the pull downs work. You can see the sub menus however when you mover the curser over them the sub menu disappears before you can click on it. It is intermittent on which sub menus disappear (meaning sometimes it works and some times it doesn’t)

I uploaded a zip file of what I am using.

Thanks Blis

Susan

[upl-file uuid=8d8a9915-9dd0-4286-a711-e57df3199020 size=28kB]images.zip[/upl-file]

@blis102Aug 03.2007 — #What you need to do:

Add this to your html:

[CODE]<div id="menuContainer">
 [B]PUT YOUR MENU HERE[/B]
 </div>[/CODE]

Add this to your css:

[CODE]body {font-size: small;}
 
 #menuContainer {
 margin: 0 auto;
 width: 800px;
 }[/CODE]

And remove all the menu auto's that you added. That should fix it up

@blis102Aug 03.2007 — #If anyone reading this thread is interested in a drop [I]up[/I] menu, i modified my drop down menu to be a drop up menu (or should is say pop-up menu? haha)

http://dev.organixdesign.com/demos/drop_up_menu/

if you have any ?'s please feel free to ask

@orazzalsauthorAug 03.2007 — #Thanks Blis that worked. You have been terrific. Thanks so much. Will send you link to site when finished and uploaded.

@orazzalsauthorAug 03.2007 — #Thanks Blis that worked. You have been terrific. Thanks so much. Will send you link to site when finished and uploaded.[/QUOTE]

ooops I spoke too soon.

I placed it on one of my pages and the menu went down just like it did the first time. take a look at my codes:

<!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>

<title>Trucks</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
  <script type="text/javascript" src="js/menu.js"></script>
  <link rel="stylesheet" type="text/css" href="css/menu.css" />
 
  <style type="text/css">

</style>

</head>

<body>

<h1 id="siteName" div align="center"><img src="../assets/images/Rescue%20logo%20banner.png" width="640" height="57"></div></h1>

<div id="menuContainer">

<ul id="menu">

<li class="parent"><a href="#" title="Title Here">About Us</a>

<ul>

<li><a href="#" title="Title Here">History</a></li>

<li><a href="#" title="Title Here">Trucks</a></li>

<li><a href="#" title="Title Here">Other Equipment</a></li>

<li><a href="#" title="Title Here">Members</a></li>

</ul>

<li class="parent"><a href="#" title="Title Here">Training</a>

<ul>

<li><a href="#" title="Title Here">Required Classes</a></li>

<li><a href="#" title="Title Here">Class Schedules</a></li>

</ul>

<li class="parent"><a href="#" title="Title Here">On the Scene</a>

<ul>

<li><a href="#" title="Title Here">Before 2005</a></li>

<li><a href="#" title="Title Here">2005</a></li>

<li><a href="#" title="Title Here">2006</a></li>

<li><a href="#" title="Title Here">2007</a></li>

</ul>

</li>

<li class="parent"><a href="#" title="Title Here">Special Events</a>

<ul>

<li><a href="#" title="Title Here">Fundraisers</a></li>

<li><a href="#" title="Title Here">Community Events</a></li>

<li><a href="#" title="Title Here">Competitions</a></li>

</ul>

</li>

<li class="parent"><a href="#" title="Title Here">Information</a>

<ul>

<li><a href="#" title="Title Here">In the News</a></li>

<li><a href="#" title="Title Here">Statistics</a></li>

</ul>

</li>

<li><a href="#" title="Title Here">Join Us</a></li>

<li><a href="#" title="Title Here">Contact Us</a></li>

</ul>

</div>

<div align="left" class="style10"></div>

<div align="center" class="style10"></div>

<div align="center"><table width="645" border="0">

<tr>

<td width="4" height="41" class="style10"><div align="left"></div></td>

<td colspan="2" class="style10"><h2 align="left"><strong><FONT COLOR="#CC0000" SIZE="+1" FACE="Arial,Helvetica,Univers,Zurich BT,sans-serif"><B>O U R  T R U C K S</B></FONT><br>

</strong></h2>

</td>

</tr>

<tr>

<td height="41" class="style10"> </td>

<td width="309" class="style10"><FONT SIZE="-1" FACE="Arial,Helvetica,Univers,Zurich BT,sans-serif"><B>RESCUE 9<BR>

</B><I>1996 Saulsbury / Simon Duplex Custom Rescue <BR>

(8 man cab)<br>

<BR>

</I>One of our two First Line Response trucks, it is fully equipped for motor vehicle accidents and fire support operations.  <br>

<br>

<FONT SIZE="-1" FACE="Arial,Helvetica,Univers,Zurich BT,sans-serif">A PTO driven 15 Kw . </FONT><FONT SIZE="-1" FACE="Arial,Helvetica,Univers,Zurich BT,sans-serif">generator provides electric power. Lighting includes a 22 ft, 6000 watt light tower. The truck contains redundant Hurst operations capable of working on either side of the truck. </FONT> </FONT></p>

</td>

<td width="318" class="style10"><IMG ID="Picture19" HEIGHT=222 WIDTH=296 SRC="../assets/images/MVC-056L.jpg" BORDER=2></td>

</tr>

<tr>

<td height="41" class="style10"> </td>

<td colspan="2" class="style10"><FONT SIZE="-1" FACE="Arial,Helvetica,Univers,Zurich BT,sans-serif"><br>

Rescue equipment includes Hurst Model 32, (2) Paladin combo-tools, O-Cutter, TNT Cutter, and various Rams. As a reserve a gas-powered pump backs up the system.  Cascade Operations include (6) 5000 lb. Supply bottles with a Sierra Air Booster, giving us the ability to completely fill over 60, 30-minute bottles. This truck also contains MSA SCBA’s, rescue saws, ventilation equipment, and a Physio-Control Lifepac Defibrillator.</FONT> </td>

</tr>

<tr>

<td height="23" class="style10"> </td>

<td colspan="2" class="style10"> </td>

</tr>

<tr>

<td height="41" class="style10"> </td>

<td class="style10"><img id="Picture19" height=222 width=296 src="../assets/images/MVC-056L.jpg" border=2></td>

<td class="style10"><FONT SIZE="-1" FACE="Arial,Helvetica,Univers,Zurich BT,sans-serif"><B>RESCUE 7<BR>

</B><I>1991 Saulsbury / Simon Duplex Custom Rescue<BR>

(10 man cab)<br>

</I></FONT><FONT SIZE="-1" FACE="Arial,Helvetica,Univers,Zurich BT,sans-serif"><I><BR>

</I>Our 2<SUP>nd</SUP> due truck, it is equipped the same as above. Electrical power is supplied by an on-board Onan 3-phase, 20 Kw generator. Also intended for HAZMAT Support, the truck contains all equipment necessary for a DECON <br>

<br>

operation. including a Hale 250 gpm pump with a 225 gallon tank.</FONT> <FONT SIZE="-1" FACE="Arial,Helvetica,Univers,Zurich BT,sans-serif">operation. including a Hale 250 gpm pump with a 225 gallon tank.</FONT> <FONT SIZE="-1" FACE="Arial,Helvetica,Univers,Zurich BT,sans-serif"> 

</FONT></td>

</tr>

<tr>

<td height="23" class="style10"> </td>

<td colspan="2" class="style10"> </td>

</tr>

<tr>

<td height="41" class="style10"> </td>

<td class="style10"><FONT SIZE="-1" FACE="Arial,Helvetica,Univers,Zurich BT,sans-serif"><B>RESCUE 8<BR>

</B><I>1998 GMC 3500 Dual Wheel Emergency Response Truck<BR>

<BR>

</I>Designated as a Light Duty Rescue, this vehicle is equipped to tow and support the squad’s various trailers.  Also equipped with limited Hurst and Rescue equipment and Defibrillator, it is intended as a primary response vehicle to </FONT><FONT SIZE="-1" FACE="Arial,Helvetica,Univers,Zurich BT,sans-serif">limited access structure such as parking garages, FAST Team responses, and as a back-up to any of our first line trucks. This truck was built in-house by our members and was purchased through the generous donations of our residents</FONT></td>

<td class="style10"><IMG ID="Picture2" HEIGHT=235 WIDTH=300 SRC="../assets/images/vehicle2.jpg" BORDER=0></td>

</tr>

<tr>

<td height="23" class="style10"> </td>

<td colspan="2" class="style10"> </td>

</tr>

<tr>

<td height="229" class="style10"> </td>

<td class="style10"><IMG ID="Picture25" HEIGHT=225 WIDTH=300 SRC="../assets/images/4th_july_a.jpg" BORDER=0></td>

<td class="style10"><P><FONT SIZE="-1" FACE="Arial,Helvetica,Univers,Zurich BT,sans-serif"><B>RESCUE 77<BR>

</B><I>1996 GMC Suburban Custom 1<SUP>st</SUP> Response Vehicle</I></FONT><I></I></P>

<P ALIGN=LEFT><font size="2" face="Arial, Helvetica, sans-serif">Built by Oddessy, this truck now serves as our utility truck, used to move our non-motorized equipment. It is also used as the spare when the Expedition is down for maintenance and repairs.</font></P>

<p> </p>

<p> </p></td>

</tr>

<tr>

<td height="23" class="style10"> </td>

<td colspan="2" class="style10"> </td>

</tr>

<tr>

<td height="237" class="style10"> </td>

<td class="style10"><p><FONT SIZE="-1" FACE="Arial,Helvetica,Univers,Zurich BT,sans-serif"><B><FONT face=Arial size=2>RESCUE 70<BR>

</FONT></B><I><FONT face=Arial

size=2>2004 Ford Excursion Custom 1<SUP>st</SUP> Response Vehicle<br>

</FONT></I></FONT><FONT SIZE="-1" FACE="Arial,Helvetica,Univers,Zurich BT,sans-serif"><BR>

<FONT face=Arial size=2>Built in house by Rescue Members, this truck serves as our Chief’s vehicle. It is equipped with limited Hurst equipment, small tools and complete First Aid Equipment including a Defibrillator.</FONT></FONT></p>

<p> </p>

<p> </p></td>

<td class="style10"><img id="Picture2" height=235 width=300 src="../assets/images/Excursion.jpg" border=0></td>

</tr>

<tr>
   <td colspan="3" class="style11"><div align="center" class="style13">
   <h2 align="left">&nbsp;</h2>
   <h2><span class="style9">&copy;2007 Paramus Rescue. Web site designed by Susan Lazzaro</span></h2>
   </div></td>
  </tr>

</table>

<p class="style10"> </p>

</div>

<span class="style10">



</span>

</body>

</html>

@thegooseAug 03.2007 — #thank you for the tutorial blis, I haven't got time to try it on my page at the moment, but I am going to try it as soon as possible. If I have any questions, I am sure I can ask you ?

thanks so far!

@orazzalsauthorAug 03.2007 — #Hey blis

Perhaps you can help me with another script as well as your drop down menu script. I need a photo album viewer and found what I thought was a simple but nice looking one. However, when I add my photos to it, they dont show up. Below is the code I got off this website but havent found anyone yet to help me with this one. Perhaps I placed the codes in the wrong place.

All I did was change their image1.jpg to the name of my image. That didnt work. I tried using the whole string of where my photos are located but that didnt work as well. What am I doing wrong?

thanks in advance for what ever help you can give me with this problem and the drop down menu.

The code is:

<!-- THREE STEPS TO INSTALL PHOTO ALBUM VIEWER:

1. Copy the coding into the HEAD of your HTML document

2. Add the onLoad event handler into the BODY tag

3. Put the last coding into the BODY of your HTML document -->

<HEAD>

<SCRIPT LANGUAGE="JavaScript">





<!-- Begin

function changeImage()

{

mainimage.src = list.options[list.selectedIndex].value;

}

function prevImage()

{

if(list.selectedIndex == 0)
 
  {
 
   list.selectedIndex = list.options.length-1;
 
  }
 
  else
 
  {
 
   list.selectedIndex--;
 
  }
 
  changeImage();

}

function nextImage()

{

if(list.selectedIndex == list.options.length-1)
 
  {
 
   list.selectedIndex = 0;
 
  }
 
  else
 
  {
 
   list.selectedIndex++;
 
  }
 
  changeImage();

}

// End -->

</script>

</HEAD>



<BODY onLoad="javascript:changeImage()">



<div align="center">

<img name="mainimage" border="1">

<br>

<input type="button" value="Back" onclick="javascript:prevImage()">

<select id="list" onchange="javascript:changeImage()">
 
   <option value="image1.jpg">First Image</option>
 
   <option value="image2.jpg">Second Image</option>
 
   <option value="image3.jpg">Third Image</option>
 
   <option value="image4.jpg">Fourth Image</option>
 
  </select>

<input type="button" value="Next" onclick="javascript:nextImage()">

</div>

<p><center>

<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>

by <a href="http://javascriptsource.com">The JavaScript Source</a></font>

</center><p>

@orazzalsauthorAug 04.2007 — #Yeah! I figured out the photo album viewer all by myself however I still cant figure out what is wrong when I take the code from the drop down menu demo and place it in one of my established pages exchanging my menu for yours. HELP please

Susan

@blis102Aug 04.2007 — #Susan, give me a little bit and I will check that all out.

About the album viewer, good work on fixing it. However I see much room for improvement with the Javascript. I will be making my own version some time this week and ill get back to you when its up

@orazzalsauthorAug 04.2007 — #Thanks blis

Much appreciated.

Actually with both your scrip and the album viewer...as soon as I put the scrip into my established pages it doesn’t work.

I have no clue to what I am doing wrong.

For the photo view...the way my pages are set up now is I have thumbnails two by two going down the page. When you click on a thumbnail another page pops up with a larger picture. To me its cheezy. I am looking for something classy with penaze. I couldn’t find anything so I settled on that one.

Since it is a website for a volunteer rescue squad I am showing photos for actual incidents (fire, extrication form auto accidents, etc)

any sugestions?

@blis102Aug 04.2007 — #send me what you got in a zip and ill check it out

@orazzalsauthorAug 04.2007 — #send me what you got in a zip and ill check it out[/QUOTE]

My web sites are built using Dreamweaver, so it writes the code and scripts for me. I know enough of HTML to manipulate things to my liking. I took classes on Java and JavaScript and I have an understanding of what it does but never could quite do it myself.

In the zip file I am sending you is a page or two from my site written in Dreamweaver. I want to replace the menu bar I currently have with yours but cant seem to make it work when I add it. If I can get one page with the correct coding I can copy and paste (which I am very good at ? ) to all my other pages. As for the photo page do you have any suggestions on how to make the page look snazzy? What I would really like to do is have all the pics a thumbnail size and as soon as the mouse rollsover the pic it grows bigger (almost like what apple does with its iphone). Think that has to be created in Flash if I am not mistaken.

I've included the page with the photos the way it looks now and what I was trying to do with this photo viewer. Unfortunatly you wont see the actual photos ?

hmmmm the website is not allowing me to attach anything. Will try again in a few minutes

Once again I want to thank you for all your help. You have been great.

@orazzalsauthorAug 04.2007 — #Ok here is the zip file. Dont know what the problem was before.

[upl-file uuid=03f558db-4a3b-4c11-a817-15dc5722a7d0 size=17kB]on_the_scene before 2005.zip[/upl-file]

@orazzalsauthorAug 05.2007 — #Just wanted to thank you again for all your help

@vkuttyAug 11.2007 — #I am having problem with drop down menu, can you please help me i need to finish some work next week. I will past the code bellow

thank you.

susy

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Pagetemplate</title>

<style type="text/css">



</style>

<script language="JavaScript" type="text/javascript" src="../menu.js"></script>

<link href="../menu.css" rel="stylesheet" type="text/css" />

</head>

<body>

<table width="995" border="1">

<tr>

<td width="140" height="130" rowspan="3" bgcolor="#003366"><object classid="clsid?27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="140" height="130" title="logo">

<param name="movie" value="../flash/kcah_logo.swf" />

<param name="quality" value="high" />

<embed src="../flash/kcah_logo.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="140" height="130"></embed>

</object></td>

<td width="850" height="30" bgcolor="#003366"> </td>

</tr>

<tr>

<td height="70" align="center" valign="middle" bgcolor="#003366"><object classid="clsid?27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="840" height="70" title="baner">

<param name="movie" value="../flash/kcah_baner.swf" />

<param name="quality" value="high" />

<embed src="../flash/kcah_baner.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="840" height="70"></embed>

</object></td>

</tr>

<tr>

<td bgcolor="#003366"> </td>

<div id="menuContainer">

<ul id="menu"><li><a href="#" title="Title Here">Home</a></li><li><a href="#" title="Title Here">About</a></li><li class="parent"><a href="#" title="Title Here">Portfolio</a><ul><li><a href="#" title="Title Here">Sub Item</a></li><li><a href="#" title="Title Here">Another Sub Item</a></li><li><a href="#" title="Title Here">Sub Item</a></li></ul></li><li class="parent"><a href="#" title="Title Here">Services</a><ul><li><a href="#" title="Title Here">Sub Item</a></li><li><a href="#" title="Title Here">Another Sub Item</a></li><li><a href="#" title="Title Here">Sub Item</a></li></ul></li><li class="parent"><a href="#" title="Title Here">Services</a><ul><li><a href="#" title="Title Here">Sub Item</a></li><li><a href="#" title="Title Here">Another Sub Item</a></li><li><a href="#" title="Title Here">Sub Item</a></li></ul></li><li><a href="#" title="Title Here">Contact</a></li></ul>

</div>

</tr>

</table>

<table width="995" border="1">

<tr>

<td> </td>

</tr>

</table>

<table width="995" border="1">

<tr>

<td width="995" height="20" align="center"></td>

</tr>

</table>

</body>

</html>

@blis102Aug 11.2007 — #Orazzals, sorry for not getting back to you sooner, but I have been a jam with a project I am finishing up. I can help you with that menu some time this weekend and have already made quite a few notes on it already. Just wanted to let you know where Im at.

Cheers

@blis102Aug 11.2007 — #Susy,

There is no way we can help you if you do not post the Javascript and CSS for your file. Please upload a zip file of your HTML, CSS and Javascript for us to look at.

Thanks

@orazzalsauthorAug 11.2007 — #send me what you got in a zip and ill check it out[/QUOTE]

Blis, Any chance to look at the zip file you asked me to post?

Susan

oops sorry didnt see your other messages

Thanks again for your help

@vkuttyAug 11.2007 — #Susy,

There is no way we can help you if you do not post the Javascript and CSS for your file. Please upload a zip file of your HTML, CSS and Javascript for us to look at.

Th[/QUOTE]

Thank you i am attaching css file and js file

Thank you for your help

Susy,

menu.css

/* Menu

---------------------------------------------------------------------------------------- */

#menu {

width: 100%;

float: left;

margin: 0;

padding: 0;

list-style: none;

background: #EFF3E2;

border-top: 1px solid #CFD8A9;

border-right: 1px solid #CFD8A9;

border-bottom: 1px solid #CFD8A9;

font-size: 100%;

}

#menu li {

float: left;

margin: 0;

padding: 0;

position: relative;

}

#menu a {

float: left;

display: block;

padding: 7px 16px;

text-decoration: none;

color: #486A00;

font-weight: bold;

border-right: 1px solid #FAFBF7;

border-left: 1px solid #DEE7C2;

}

#menu a:hover {background: #E1E7C9;}

/* The Drop Down: */

#menu .parent a {background: url(../images/bullet_arrow_down.png) no-repeat right center;}

#menu .activeParent a {

color: #333300;

background: #E1E7C9 url(../images/bullet_arrow_down.png) no-repeat right center;

}

#menu .parent ul {display: none;} /* Hides the dropdown */

#menu .activeParent ul {

float: left;

width: 12em; /* The width of the dropdown */

margin: 0;

padding: 0;

position: absolute;

top: 2.3em !important; /* For Standard Compliant Browsers */

top: 2.2em; /* For IE */

left: 0;

list-style: none;

z-index: 1000;

}

#menu .activeParent li {

float: left;

margin: 0;

padding: 0;

}

#menu .activeParent li a {

float: left;

width: 12em; /* The width of the dropdown */

margin: 0;

padding: 3px 8px;

color: #556A28;

display: block;

background: #FFFFFF;

font-size: 90%;

border-bottom: 1px solid #CFD8A9;

border-right: 1px solid #CFD8A9;

border-left: 1px solid #CFD8A9;

}

#menu .activeParent li a:hover {

background: #E1E7C9;

color: #333300;

}

menu.js

// GetElementsByClass Function

function getElementsByClass(className) {

var all = document.all ? document.all : document.getElementsByTagName('*');

var elements = new Array();

for (var i = 0; i < all.length; i++)

if (all[i].className == className)

elements[elements.length] = all[i];

return elements;

}

// Menu Function

function menu(start,hover) {

var elm = getElementsByClass(start);

for (i=0; i < elm.length; i++) {

elm[i].onmouseover = function() {

this.className = hover;

this.onmouseout = function() {

this.className = start;

}

}

}

}

// Call Menu Function on page load

window.onload = function() {

menu('parent','activeParent');

}

@vkuttyAug 11.2007 — #Thank you i am attaching css file and js file

Thank you for your help

Susy,

[upl-file uuid=56469a65-9492-475e-b5a7-7008eee260a7 size=704B]menu_css.zip[/upl-file]

[upl-file uuid=72c7aa04-5a24-4cd7-abbe-b4c7f6e095a9 size=466B]menu_js.zip[/upl-file]

@vkuttyAug 13.2007 — #Susy,

There is no way we can help you if you do not post the Javascript and CSS for your file. Please upload a zip file of your HTML, CSS and Javascript for us to look at.

Thanks[/QUOTE]
Blis, Any chance to look at the zip file you asked me to post?

Thanks,

Susy.

@blis102Aug 13.2007 — #No, not yet, I was really busy this weekend finishing up a project. Ive got the files on my desktop ready to look at, Ill try and work on it today.

Same goes for you orazzals.

@vkuttyAug 13.2007 — #Thank you for your time and consideration.

Susy

@vkuttyAug 16.2007 — #No, not yet, I was really busy this weekend finishing up a project. Ive got the files on my desktop ready to look at, Ill try and work on it today.

Same goes for you orazzals.[/QUOTE]
I know I am bothering you again sorry for that, any chance to look at the zip file?

Thank you,

Susy.

@blis102Aug 16.2007 — #Susy,

I had a chance to look at your files and Im trying to find out what the problem you are having is, could you tell me what is going wrong?

(btw, the menu is not located within a TD, but is located int the table, which is invalid. The menu should be put into a TD if you are going to use it within a table.)

Thanks

@vkuttyAug 16.2007 — #Susy,

I had a chance to look at your files and Im trying to find out what the problem you are having is, could you tell me what is going wrong?

(btw, the menu is not located within a TD, but is located int the table, which is invalid. The menu should be put into a TD if you are going to use it within a table.)

Thanks[/QUOTE]
Thank you and sorry to bothering again

Please check the word doc and see how I designed menu table and I am not sure where I have to put my html code.

Thank you,

Susy.

[upl-file uuid=74ef39c2-5276-44f8-9ad5-e06d261cd18b size=24kB]table.doc[/upl-file]

@orazzalsauthorAug 16.2007 — #Susy,

I had a chance to look at your files and Im trying to find out what the problem you are having is, could you tell me what is going wrong?

(btw, the menu is not located within a TD, but is located int the table, which is invalid. The menu should be put into a TD if you are going to use it within a table.)

Thanks[/QUOTE]

Did you have a chance to look at mine? I have been waiting very patiently. We have been dealing with this for weeks now.

Susan

@blis102Aug 16.2007 — #Susy, Try this out:

[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <title>Pagetemplate</title>
 <style type="text/css">
 <!--
 body {
 background-color: #FFFFCC;
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 }
 -->
 </style>
 <script language="JavaScript" type="text/javascript" src="../menu.js"></script>
 <link href="../menu.css" rel="stylesheet" type="text/css" />
 </head>
 
 <body>
 
 
 
  <table width="995" border="1">
   <tr>
   <td width="140" height="130" rowspan="3" bgcolor="#003366"><object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="140" height="130" title="logo">
   <param name="movie" value="../flash/kcah_logo.swf" />
   <param name="quality" value="high" />
   <embed src="../flash/kcah_logo.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="140" height="130"></embed>
   </object></td>
   <td width="850" height="30" bgcolor="#003366">&nbsp;</td>
   </tr>
   <tr>
   <td height="70" align="center" valign="middle" bgcolor="#003366">
   <object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="840" height="70" title="baner">
   <param name="movie" value="../flash/kcah_baner.swf" />
   <param name="quality" value="high" />
   <embed src="../flash/kcah_baner.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="840" height="70"></embed>
   </object>
   </td>
   </tr>
   <tr>
   <td bgcolor="#003366"><div id="menuContainer">
 
   <ul id="menu">
   <li><a href="#" title="Title Here">Home</a></li>
   <li><a href="#" title="Title Here">About</a></li>
   <li class="parent"><a href="#" title="Title Here">Portfolio</a>
   <ul>
   <li><a href="#" title="Title Here">Sub Item</a></li>
   <li><a href="#" title="Title Here">Another Sub Item</a></li><li><a href="#" title="Title Here">Sub Item</a></li>
   </ul>
   </li>
   <li class="parent"><a href="#" title="Title Here">Services</a>
   <ul>
   <li><a href="#" title="Title Here">Sub Item</a></li>
   <li><a href="#" title="Title Here">Another Sub Item</a></li>
   <li><a href="#" title="Title Here">Sub Item</a></li>
   </ul>
   </li>
   <li class="parent"><a href="#" title="Title Here">Services</a>
   <ul>
   <li><a href="#" title="Title Here">Sub Item</a></li>
   <li><a href="#" title="Title Here">Another Sub Item</a></li>
   <li><a href="#" title="Title Here">Sub Item</a></li>
   </ul>
   </li>
   <li><a href="#" title="Title Here">Contact</a></li>
   </ul>
   </div>
 
   </td>
   </tr>
  </table>
 
  <table width="995" border="1">
   <tr>
   <td>&nbsp;</td>
   </tr>
  </table>
 
  <table width="995" border="1">
   <tr>
   <td width="995" height="20" align="center"></td>
   </tr>
  </table>
 
 
 
 
 </body>
 </html>[/code]

@blis102Aug 16.2007 — #Hey Susan,

The fix for your problem is pretty simple. All you need to do is insert a new table row above the one that contains your heading (O U R H I S T O R Y, for example) and then put into a TD with a colspan of 4:

[code=html] 	<tr>
 <td colspan="4">
 
   <!-- Menu : Begin -->
   <div id="menuContainer"> 
   <ul id="menu">
   <li class="parent"><a href="#" title="Title Here">About Us</a>
   <ul>
   <li><a href="#" title="Title Here">History</a></li>
   <li><a href="#" title="Title Here">Trucks</a></li>
   <li><a href="#" title="Title Here">Other Equipment</a></li>
   <li><a href="#" title="Title Here">Members</a></li>
   </ul>
   <li class="parent"><a href="#" title="Title Here">Training</a>
   <ul>
   <li><a href="#" title="Title Here">Required Classes</a></li>
   <li><a href="#" title="Title Here">Class Schedules</a></li>
   </ul>
   <li class="parent"><a href="#" title="Title Here">On the Scene</a>
   <ul>
   <li><a href="#" title="Title Here">Before 2005</a></li>
   <li><a href="#" title="Title Here">2005</a></li>
   <li><a href="#" title="Title Here">2006</a></li>
   <li><a href="#" title="Title Here">2007</a></li>
   </ul>
   </li>
   <li class="parent"><a href="#" title="Title Here">Special Events</a>
   <ul>
   <li><a href="#" title="Title Here">Fundraisers</a></li>
   <li><a href="#" title="Title Here">Community Events</a></li>
   <li><a href="#" title="Title Here">Competitions</a></li>
   </ul>
   </li>
   <li class="parent"><a href="#" title="Title Here">Information</a>
   <ul>
   <li><a href="#" title="Title Here">In the News</a></li>
   <li><a href="#" title="Title Here">Statistics</a></li>
   </ul>
   </li>
   <li><a href="#" title="Title Here">Join Us</a></li>
   <li><a href="#" title="Title Here">Contact Us</a></li>
   </ul>
   </div>
   <!-- Menu : End -->
 
   </td>
  </tr>
 
  <tr>
   <td colspan="4" class="style10"><h2 align="left"><strong><FONT SIZE="+1">O U R&nbsp; H I S T O R Y</FONT> <br>
   </strong></h2>
   </td>
  </tr>[/code]

That should solve your problem.

[B]Here are some extra notes I took:[/B]

- dont use tables for your page structure, use divs instead with proper css markup

- dont wrap a H1 tag around your banner, use a div instead

- dont use the align property, instead make a class called alignCenter or something and give it the value "text-align: center;" and apply it to whatever you want to make center.

- try to write code by hand as much as possible so you can see these errors coming. if you plan on doing more web design, it is a great investment of time to learn how the code works intimately (believe me)

- dont use font tags! they are deprecated (no longer part of the W3C recommendation and will not work in the future (plus they just suck because it makes it impossible to change things.

- avoid (virtually in every single situation you come across) doing inline styling, meaning dont do <h2 align="left" style="color: blue;"> do <h2 class="sectionHeading"> (or some relevant name to what that particular tag is used for) and then declare the values for it in your css

- dont space out headings, instead use the css property word-spacing (block -> word spacing in Dreamweaver) to declare the spacing out.

[B]Here is how you could rewrite your page using proper CSS:[/B]

[code=html]<!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>
 
  <title>Put Your Page Title Here</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
  <script type="text/javascript" src="js/menu.js"></script>
  <link rel="stylesheet" type="text/css" href="css/menu.css" />
 
 <style type="text/css">
 
 body {
 font: small Arial, Helvetica, sans-serif;
 margin: 0;
 text-align: center;
 }
 h1 {
 font-size: 160%;
 letter-spacing: .4em;
 }
 
 #container {
 margin: 20px auto;
 width: 800px;
 text-align: left;
 }
 #footer {
 font-size: 90%;
 color: #666666;
 text-align: center;
 }
 
 </style>
 
 </head>
 <body>
 
 
 
 
  <!-- Container : Begin -->
  <div id="container">
 
   <!-- Menu : Begin -->
   <div id="menuContainer"> 
   <ul id="menu">
   <li class="parent"><a href="#" title="Title Here">About Us</a>
   <ul>
   <li><a href="#" title="Title Here">History</a></li>
   <li><a href="#" title="Title Here">Trucks</a></li>
   <li><a href="#" title="Title Here">Other Equipment</a></li>
   <li><a href="#" title="Title Here">Members</a></li>
   </ul>
   <li class="parent"><a href="#" title="Title Here">Training</a>
   <ul>
   <li><a href="#" title="Title Here">Required Classes</a></li>
   <li><a href="#" title="Title Here">Class Schedules</a></li>
   </ul>
   <li class="parent"><a href="#" title="Title Here">On the Scene</a>
   <ul>
   <li><a href="#" title="Title Here">Before 2005</a></li>
   <li><a href="#" title="Title Here">2005</a></li>
   <li><a href="#" title="Title Here">2006</a></li>
   <li><a href="#" title="Title Here">2007</a></li>
   </ul>
   </li>
   <li class="parent"><a href="#" title="Title Here">Special Events</a>
   <ul>
   <li><a href="#" title="Title Here">Fundraisers</a></li>
   <li><a href="#" title="Title Here">Community Events</a></li>
   <li><a href="#" title="Title Here">Competitions</a></li>
   </ul>
   </li>
   <li class="parent"><a href="#" title="Title Here">Information</a>
   <ul>
   <li><a href="#" title="Title Here">In the News</a></li>
   <li><a href="#" title="Title Here">Statistics</a></li>
   </ul>
   </li>
   <li><a href="#" title="Title Here">Join Us</a></li>
   <li><a href="#" title="Title Here">Contact Us</a></li>
   </ul>
   </div>
   <!-- Menu : End -->
 
 
 
   <!-- Content : Begin -->
   <div id="content">
 
   <h1>OUR HISTORY</h1>
 
   <p>The Paramus Rescue Squad was established in 1952 under the Civil Defense – Disaster Control Act as directed by Congress.  The mission of the Rescue Squad was to prepare for rescues and survival following an atomic attack or war.  It was also decided the Squad could respond as a first line unit. Under the direction of Warren G. Hildenbrand (Director), Edward Sharkey (Deputy Director), and Archie A. Petronzio (Operations Officer), the Squad was formed. In 1956 eight men were trained as specialists in heavy duty rescue work.</p>
 
   <!-- CUT AND PASTE THE REST OF YOUR CONTENT INTO <p> TAGS LIKE ABOVE -->
 
 
 
   </div>
   <!-- Content : End -->
 
 
 
 
   <!-- Footer : Begin -->
   <div id="footer">
   ©2007 Paramus Rescue. Web site designed by Susan Lazzaro
   </div>
   <!-- Footer : End -->
 
  </div>
  <!-- Container : End -->
 
 
 
 
 </body>
 </html>[/code]

[B]Some tips:[/B]

- use Firefox to develope your sites and get the extension called "web developer toolbar", it is priceless and allows you to do a ton of cool things with your page to help spot problems. also, while your at it, get firebug which is very useful, especially when working with javascript

- Set up dreamweaver to do the RIGHT things for you:

- go to edit -> preferences and then go to general and make sure that the box next to "use css instead of html tags" is checked.

- try getting the most recent version of dreamweaver (much better support for web standards), it looks like your using DW6 right?

Hope that all helps

Cheers

@orazzalsauthorAug 17.2007 — #Thanks, I will try what you said (well the stuff that I actually understood ?) I have basic knowledge of HTML, very little knowledge of CSS, JavaScript, etc. That is why I rely on Dreamweaver. The code that I gave you was what Dreamweaver wrote for me, except for a few changes.

I learned this stuff on Dreamweaver 3 way back when and unfortunately I havent really kept up with the changing tecnology. I currently have two versions of Dreamweaver, MX and v8. I cant afford the newest version but a friend is supposed to get me a copy.

I am currently creating 3 websites (two for volunteer emergency services organizations) and created & maintain another. I do not get paid for this. I do this on my own time after working 3 jobs. I neither have the time nor the money to really try and learn this stuff even though I would love to. I do what I can with the knowledge I have and what I create is fine for the organizations I am doing this for.

I just want to make them look a bit more professional than the typical websites people build on places like homestead, hotmail, aol, etc. This is where I rely on the generosity of people like you. I really appreciate all your help and in put. I will let you know how it all turns out.

Susan

@orazzalsauthorAug 17.2007 — #I must be really stupid. I copied and pasted the css code you gave me into dreamweaver but again the menu doeant come out to look like a menu. Please look at attached screen shot.

So why isnt the code working? Not compatible with Dreamweaver MX 2004?

[upl-file uuid=ad812353-489c-467e-a308-8b479fb162b4 size=80kB]Doc3.doc[/upl-file]

@blis102Aug 17.2007 — #Its not working because your css file is not linked to correctly in the <head> of the document. Double check the location of your files and try again (I am 100% it works).

Im glad I could help you out and I completely understand your situation. Its a pain in the ass to keep up with Web technology and the only way I can do it is because its my full time job ?

Hope it all works for you,

Cheers

[upl-file uuid=dfbbbd38-ee0a-4c03-af8c-c341c5529644 size=88kB]Doc1.doc[/upl-file]

@orazzalsauthorAug 17.2007 — #Its not working because your css file is not linked to correctly in the <head> of the document. Double check the location of your files and try again (I am 100% it works).

Im glad I could help you out and I completely understand your situation. Its a pain in the ass to keep up with Web technology and the only way I can do it is because its my full time job ?

Hope it all works for you,

Cheers[/QUOTE]

this is where I have the js file:

C:Documents and SettingsSusanMy DocumentsParamus Rescue Websitejsmenu.js

and this is where i have the css file:

C:Documents and SettingsSusanMy DocumentsParamus Rescue Websitecssmenu.css

How exactly should it be writen in HTML to make it linked properly?

@orazzalsauthorAug 17.2007 — #ok blis, now this is really really weird

if you look at the attached file partially on the left shows the page opened in dreamweaver looking funky partially on the right shows what that same page looks like previewed in IE. The menu isnt that funky shape. why is it not displaying correctly in dreamweaver?

however I have three problems (nothing can ever be simple)

1. the menu isnt centering. I would like it to be under the logo and if the page is larger or smaller it will move with the menu always staying in the position underneath it.

2. i wanted to add yet a 3rd dropdown and as you can see under special events i didnt do such a good job. I assume I have to list something in the css file as well? am i correct in my assumption?

3. I used tables which you said isnt a good idea. then how do i place the photos next to the text without a columns?

Susan

[upl-file uuid=fce3c38f-d330-408d-a4f0-7c351ef9bd2b size=66kB]Doc2.jpg[/upl-file]

@blis102Aug 17.2007 — #Susan,

Dreamweaver, especially older versions like MX which was released in 2002, don't have the best support for web standards. The previews they have are not perfect and do not support floats or positioning very well. You should not rely on Dreamweaver for previews, you should also preview in Firefox or Safari 3 or another good, compliant browser. Even better, double check on IE as well (5.5,6, and 7) if your really wanna make sure it works.

1. The menu is not centering because it's floated and you cannot center a floated element, so it will naturally be on the left edge of the page. You could apply a 100% width to the menu UL and it will span the length of the containing element, so it will at least be the size of the rest of the content. The only other way I could think of centering it would be to make it a specific size and use positioning (width of container - width of menu / 2 = left positioning value). So if your container was 800px but you set your menu to 600px you would make give the abxolutely positioned menu at left: 100px; (800px - 600px /

2 = 100px):

[CODE]#container {
 width: 800px;
 position: relative;
 }
 #menu{
 float: left;
 width: 600px;
 position: absolute;
 left: 100px;
 }[/CODE]

2. My script doesnt work with another set of dropdown items. You would have to modify it (dont know if it would even work) to do another level of dropdown functionality.

3. Im not sure what you are talking about, what page should id be referencing? You didnt provide the images in the email so I may not be seeing them or something (plus im pretty tired right now and my brain is functioning at about 50%).

Hope some of that helped,

Cheers

@JackBauerAug 17.2007 — #Blis,

Does this dropdown menu work with Netscape6?

http://dev.organixdesign.com/demos/drop_down_menu/

thanks.

@vkuttyAug 17.2007 — #Susy, Try this out:

[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <title>Pagetemplate</title>
 <style type="text/css">
 <!--
 body {
 background-color: #FFFFCC;
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 }
 -->
 </style>
 <script language="JavaScript" type="text/javascript" src="../menu.js"></script>
 <link href="../menu.css" rel="stylesheet" type="text/css" />
 </head>
 
 <body>
 
 
 
  <table width="995" border="1">
   <tr>
   <td width="140" height="130" rowspan="3" bgcolor="#003366"><object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="140" height="130" title="logo">
   <param name="movie" value="../flash/kcah_logo.swf" />
   <param name="quality" value="high" />
   <embed src="../flash/kcah_logo.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="140" height="130"></embed>
   </object></td>
   <td width="850" height="30" bgcolor="#003366">&nbsp;</td>
   </tr>
   <tr>
   <td height="70" align="center" valign="middle" bgcolor="#003366">
   <object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="840" height="70" title="baner">
   <param name="movie" value="../flash/kcah_baner.swf" />
   <param name="quality" value="high" />
   <embed src="../flash/kcah_baner.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="840" height="70"></embed>
   </object>
   </td>
   </tr>
   <tr>
   <td bgcolor="#003366"><div id="menuContainer">
 
   <ul id="menu">
   <li><a href="#" title="Title Here">Home</a></li>
   <li><a href="#" title="Title Here">About</a></li>
   <li class="parent"><a href="#" title="Title Here">Portfolio</a>
   <ul>
   <li><a href="#" title="Title Here">Sub Item</a></li>
   <li><a href="#" title="Title Here">Another Sub Item</a></li><li><a href="#" title="Title Here">Sub Item</a></li>
   </ul>
   </li>
   <li class="parent"><a href="#" title="Title Here">Services</a>
   <ul>
   <li><a href="#" title="Title Here">Sub Item</a></li>
   <li><a href="#" title="Title Here">Another Sub Item</a></li>
   <li><a href="#" title="Title Here">Sub Item</a></li>
   </ul>
   </li>
   <li class="parent"><a href="#" title="Title Here">Services</a>
   <ul>
   <li><a href="#" title="Title Here">Sub Item</a></li>
   <li><a href="#" title="Title Here">Another Sub Item</a></li>
   <li><a href="#" title="Title Here">Sub Item</a></li>
   </ul>
   </li>
   <li><a href="#" title="Title Here">Contact</a></li>
   </ul>
   </div>
 
   </td>
   </tr>
  </table>
 
  <table width="995" border="1">
   <tr>
   <td>&nbsp;</td>
   </tr>
  </table>
 
  <table width="995" border="1">
   <tr>
   <td width="995" height="20" align="center"></td>
   </tr>
  </table>
 
 
 
 
 </body>
 </html>[/code]

[/QUOTE]
Not working

@blis102Aug 17.2007 — #Jack, I have no idea if it works with Netscape 6, why would you need it to? I think about less than 1% of the population even uses it. If you are curious tho, you could test it out and let me know.

@JackBauerAug 17.2007 — #Blis,

Just tested it and it's not working. Just curious...

Anyhow, i have a dropdown menu that's working fine on IE6 but it's acting up on Firefox and IE7. I'm only using CSS with no Javascript at all. Could you take a look to see if there's anyway i can modify my CSS?

Thanks.

@blis102Aug 17.2007 — #Could you try to be a little more descriptive Susy. What is not working and what does it look like? Double check that the URLs to both the CSS and JS are correct. That is probably the problem

@blis102Aug 19.2007 — #Jack,

I've built a similar CSS menu as well that works in IE6 & 7, Firefox, and Safari 3. Opera renders it funky because Opera has weird support for floating and positioning. I'll post the HTML and CSS here for you to reference, maybe it will help you:

CSS

[CODE]/* Menu
 ------------------------------------------------------------------*/
 /* Styling the main menu */
 #menu {
 float: left;
 width: 100%;
 margin: 0; 
 padding: 0;
 list-style: none;
 }
 #menu li {
 float: left;
 position: relative;
 margin: 0; 
 padding: 0;
 min-width: 6.1em; /* For Opera */
 }
 #menu li a {
 float: left;
 display: block;
 /* fixes opera bug: width: 5em; */
 margin: 0;
 padding: 5px 12px;
 font-weight: bold;
 color: #666;
 text-decoration: none;
 }
 #menu li a:hover {
 background: #fc0;
 color: #fff;
 }
 
 /* Make menu appear on roll over */
 #menu li ul {display: none;}
 #menu li:hover ul {display: block;}
 
 /* Styling the drop down */
 #menu ul {
 float: left;
 width: 150px;
 position: absolute;
 top: 1.9em;
 left: 0;
 list-style: none;
 margin: 0;
 padding: 0;
 }
 #menu ul li {
 float: left;
 margin: 0;
 padding: 0;
 }
 #menu ul a {
 float: left;
 width: 150px;
 display: block;
 background: #fc0;
 color: #fff;
 margin: 0;
 padding: 5px 12px;
 }
 #menu ul a:hover {
 background: #f60;
 }[/CODE]

HTML

[code=html]<ul id="menu"> 
 <li><a href="#"  title="Put Title Here">Home</a></li>
 <li><a href="#"  title="Put Title Here">About</a></li>
 <li><a href="#"  title="Put Title Here">Products</a>
 <ul>
 <li><a href="#" title="Put Title Here">Sofa</a></li>
 <li><a href="#" title="Put Title Here">Large Wood Bed Frame</a></li>
 <li><a href="#" title="Put Title Here">Rolling Office Chair</a></li>
 <li><a href="#" title="Put Title Here">Dresser</a></li>
 </ul>
 </li>
 <li><a href="#"  title="Put Title Here">Services</a>
 <ul>
 <li><a href="#" title="Put Title Here">Custom Work</a></li>
 <li><a href="#" title="Put Title Here">Wholesale Orders</a></li>
 <li><a href="#" title="Put Title Here">Import/Export</a></li>
 </ul>
 </li>
 <li><a href="#"  title="Put Title Here">Contact</a></li>
 </ul>[/code]

and then you need to add this to the head of the document, so that IE supports hovering of LI's:

[CODE]<!--[if IE]>
 <style type="text/css" media="screen">
 body {behavior: url(js/hover_fix.htc);}
 </style>
 <![endif]-->[/CODE]

Change the URL as needed.

Get the script from here: http://www.xs4all.nl/~peterned/csshover.html

The reason you need this .htc fix is because IE does not support the :hover pseudo class (or any other pseudo class) on anything but links. I applied it to the LI that contains the sub menu so that the menu would validate and be semantic as possible. The .htc file helps IE support the :hover pseudo class properly.

However, I would not recommend using a CSS only solution because of the poor support of standards from browser to browser. It is safer (imo) to use a Javascript based drop-down (DOM based Javascript, no procedural, inline crap) that does the dirty work for you.

PS Could you explain why the menu is not working for you? Did you download the zip and test it out? I have tested it out in various browsers with no problem, so could you tell me where it failed?

Cheers

@orazzalsauthorAug 19.2007 — #Just want to thank you for all you time and effort. I really appreciate it.

Susan

@blis102Aug 20.2007 — #No problem susuan, good luck with the rest of your website and let me know if you need any more help along the way.

Cheers

@JackBauerAug 20.2007 — #Blis,

Thanks for posting the CSS and html for the dropdown list.. I have developed a dropdown list with just CSS as well. However, it's not working on IE7 and Firefox. Would you mind looking to see what i miss?

Thanks.

Attached are the CSS and the template of my web site.

[upl-file uuid=3495d38e-f650-4b13-a754-78a36b8990ae size=44kB]dropdownTest.zip[/upl-file]

@vkuttyAug 28.2007 — #Could you try to be a little more descriptive Susy. What is not working and what does it look like? Double check that the URLs to both the CSS and JS are correct. That is probably the problem[/QUOTE]

I want to thank you for all you time and effort, finally menu works with your wonderful help. I was reading your post about table and Div then i change table layout to Div and its little complicated but it works for me. Once again I am really thankful to you.

Susy.

@blis102Aug 29.2007 — #Glad I could be of help, good luck on your project. Also, good to hear you are starting to use non-table based layouts, thats a very good idea. Have a good one.

Cheers

@vkuttyAug 30.2007 — #Glad I could be of help, good luck on your project. Also, good to hear you are starting to use non-table based layouts, thats a very good idea. Have a good one.

Cheers[/QUOTE]
Hello,

Sorry to bother you again, how can I fix my page size for different screen size ( regular and flat panel monitors)

Thank you,

susy.

@blis102Aug 30.2007 — #I do not see why you would need or want to do this, could you explain why you would need such a feature?

You best bet would be to make your layout fluid width (width: 100%) so that no matter the screen size, it will resize accordingly. However there are some inherent problems with this solution (on small screens text can be jammed together, and on big screens it can be spread out a lot). I would say pick a safe width like 700px - 900px or so (most screens these days are 1024px X 768px, so you could go as wide as 1000px if you needed).

Hope that helps

@vkuttyAug 30.2007 — #I do not see why you would need or want to do this, could you explain why you would need such a feature?

You best bet would be to make your layout fluid width (width: 100%) so that no matter the screen size, it will resize accordingly. However there are some inherent problems with this solution (on small screens text can be jammed together, and on big screens it can be spread out a lot). I would say pick a safe width like 700px - 900px or so (most screens these days are 1024px X 768px, so you could go as wide as 1000px if you needed).

Hope that helps[/QUOTE]
I am not familiar with fluid width (it means jest 100% for div)

@vkuttyAug 30.2007 — #I do not see why you would need or want to do this, could you explain why you would need such a feature?

You best bet would be to make your layout fluid width (width: 100%) so that no matter the screen size, it will resize accordingly. However there are some inherent problems with this solution (on small screens text can be jammed together, and on big screens it can be spread out a lot). I would say pick a safe width like 700px - 900px or so (most screens these days are 1024px X 768px, so you could go as wide as 1000px if you needed).

Hope that helps[/QUOTE]
So if some one going to see my page in 20”wide screen fine but same page 15” or 17” regular monitor page is too big and its not fit in the screen.

@blis102Aug 30.2007 — #the size of the screen in inches is unimportant. The pixel size is important. If their screen is say 800px wide and your page is 900px width, the most they will be able to see is about 800px so they miss the other 100px. often people dont view web sites in a fully open browser window, so it can be even smaller. The general practice on the internet these days is to make your page about 700px-900px wide. If you go over that you may have users who cant see it all.

About fluid width. if you make the containing element of your page (a DIV probably) 100% width, then all the content within it will resize depending on the size of the browser window.

@vkuttySep 26.2007 — #Can you please help me?

My drop down menu have problem, when user try to click on the drop down menu its disappears.

Thank you,

Susy

@blis102Sep 26.2007 — #Can you show me the page you are working with? What browser are they using? Are they clicking the main menu, or the drop down part?

@vkuttySep 26.2007 — #yes user can click on main menu, but not the dropdown part

you can see www.kcahomes.com

@blis102Sep 27.2007 — #The drop down does not seem to be working at all for me

@vkuttySep 27.2007 — #it works but some time not working why? i use same code you show me

@blis102Sep 28.2007 — #Could you tell me what browser is causing the problems? There is no way for me to figure out why its not working without some details about how the problem happened.

@vkuttyOct 01.2007 — #The same problems with all browsers, when users try to click on the drop down menu it despair. Some times when users go to the site drop down menu is not active then click any other menu. Drop down going to active. Once you click drop down menu it works and again try to click on drop down menu it will not work.

Also in #JavaScript _↴

Syntax help please Splitting space for variables with same name JavaScript Functions - Optional Parameters

Success!

Help @orazzals spread the word by sharing this article on Twitter...

Tweet This

Drop Down Menu

80 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Drop Down Menu

80 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

80 Comments(s) _↴

Also in #JavaScript _↴