WPDFD Articles: css menus (oct 2004)

started by Ggiunta on Oct 1, 2004 — RSS Feed

Ggiunta Ggiunta
Posts: 2

really nice job !

final touches:

+ prevent the web browser status bar to show the anchor/js targets for menu bar buttons: add to mouseover event
window.status=''; return true

+ you might as well set the cursor property to a different style with css - at least I did so with menu bar buttons that are activated on mouseover instead of click (which is somehow more standard behaviour on the web)

Joe Gillespie Joe Gillespie
Posts: 528

Yes, I sometimes change the status bar message but it would probably be more helpful to say something like window.status="home page"; return true (or whatever the page title is).

Good idea but CSS cursors are not very well supported across browsers at the minute. I suppose that it's no big deal if it doesn't change.

Smaxey Smaxey
Posts: 2

Agreed, really nice job, but there is one significant (and annoying to the user) way in which these menus differ from those app menus on both Win and Mac. You write:

"If you don't make a menu choice, you have to click the top menu-bar item again to close the menu or, if you scroll sideways, the adjacent menus drop down, so you don't have to click every menu-bar item to find individual menu items."

But of course there's one other way in which menus close for both operating systems: If you click in the application window anywhere outside the menu area. Clicking elsewhere on the webpage should also close the windows. is there a good way to achieve this other than establishing a 100%-of-window-sized invisible layer under the menuing layer when a submenu is activated that closes all sumenus onClick?

Baxter Baxter
Posts: 157

I don't think that would work without breaking your links or something.

Perhaps something using an onmouseout command?

Smaxey Smaxey
Posts: 2

I think the onMouseout behavior is what he's trying to avoid. The submenu should remain visible even when you're no longer hovering over it, until you click on the parent menu (in his example) or elsewhere (as I suggest it should be if you're truly trying to replicate application behavior).

Joe Gillespie Joe Gillespie
Posts: 528

Clicking elsewhere on the webpage should also close the windows.


Strictly speaking, it should. Any click has to be on something but I just tried this...

<body onclick="javascript: hideAll(0)">

and it worked. I haven't tested it extensively but give it a whirl and let me know.

Owen Owen
Posts: 1

I was going to mention the same thing about clicking outside the menu to clear it.  I'm going to give the body onclick thing a try too.

The issue about changing the status bar only comes up if you use the nothing() function instead of a URL.  But wouldn't you be using a URL?

The other thing I'd like to see is a version that allows more flexible text-resizing.  I'll have to experiment with changing some of the pixel values to ems and see if that still works.  

It's a beautiful system!  It inspires me to try drop-down menus for the first time!

Ggiunta Ggiunta
Posts: 2

The issue about changing the status bar only comes up if you use the nothing() function instead of a URL.  But wouldn't you be using a URL?

The effect I was trying to avoid is showing an url in the status bar while hovering the mouse above the menu bar (and this happens wheter you use javascript:void(), # or anything else as href for the anchor). Showing the url while hovering the mouse over the single menu item is actually a recommended practice.

Another interesting issue worth of mentioning: lovely IE has huge problems with any select box that happens to be positioned on the page 'underneath' menus: the select boxes will show thru the menus (for the technically minded: select boxes use a separate hwindow to paint themselves, thus getting infinite z-index).
There is no final solution (AFAIK) to the problem, but some dirty-hack workarounds: use an (empty?) iframe as 'select box quencher' and use js to have it dinamically sized and moved underneath your menu. The iframe must have a z-index > 0 but lower of the menu divs.
Catch: this works with IE 5.5up on windoze, but has to be absolutely avoided for IE 5.0, since it refuses to give iframes a z-index less than infinity.
(Note: I have no idea about the behaviour of IE 5.2 on mac regarding this issue...)

Joe Gillespie Joe Gillespie
Posts: 528

I only used javascript:nothing() for this 'for instance' example. A real web page would have real URLs in there so you would get the correct status bar result in practice.

Yes, IEs 'always on top' form elements could be a problem if the menus were too close. You would have to use the horizontal format or keep them down the page. I don't like iFrames. Not as bad as frames frames but not always reliable.

Mark_bills Mark_bills
Posts: 3

An excellent article. The pictorial menu example was very creative. It inspired me to dig into the code/css to see how it worked.

While investigating, I found a very minor bug. The code in the showMenu() function that "latches" the menubar item in its highlighted state doesn't get called the first time the mouseout event is called. You can fix this with the following steps:

1) Remove the following lines from the showMenu() function...

    var themenubaritem=document.getElementById("menubaritem"+m);
    themenubaritem.style.background="#b6b1a8";


2) ...and insert them into the hideAll() function, along with a few lines of new code and some minor modifications to the variable declarations, as follows (sorry about the formatting)...


function hideAll(e) // hide all menus except e
{
 for(i=1;i<=menus;i++)
 {
   var themenubaritem, themenu;   // <-- Have to change where the variables are declared

   if(e!=i)
   {
      if(document.getElementById)
     {
       themenubaritem=document.getElementById("menubaritem"+i);
       themenubaritem.style.background="transparent";
       themenu=document.getElementById("menu"+i);
       themenu.style.visibility="hidden";
     }
   }

   // THIS IS THE NEW CODE, WHICH LATCHES THE HIGHLIGHT IF THE MENU IS VISIBLE
   else {
     themenu=document.getElementById("menu"+i);
     if(themenu.style.visibility == "visible"
     {
       themenubaritem=document.getElementById("menubaritem"+i);
       themenubaritem.style.background="#b6b1a8";
     } // end inner if
   } // end else
 } // end for
}
 

Joe Gillespie Joe Gillespie
Posts: 528

Thank you Mark. I will add a link to your suggestion from the article.

Mark_bills Mark_bills
Posts: 3

I just tried this...

<body onclick="javascript: hideAll(0)">

and it worked. I haven't tested it extensively but give it a whirl and let me know.


This works well, but it doesn't reset the 'clicked' variable to 'false'. Thus, when a menubaritem receives a mouseover event, the menu is displayed automatically. This results in the menubar working differently depending on whether the user last closed a menu by clicking on the menubaritem or in the body of the page.

This can be reasonable behavior. However, if you'd like to make the behavior consistent, you can complete the following steps:

1) Insert the following code into the hideAll() function before the 'for' loop:

if( e <= 0 )
{
clicked=false;
currentMenu=0;
selectedMenu=0;
}


2) Add the following event handler to each '<div>' element with id="menubaritem_":

onclick="event.cancelBubble=true";

for example:

<div id="menubaritem1" style="width: 100px" onclick="event.cancelBubble=true">

This stops the body element from calling the hideAll() function and resetting the variables. If you don't add this, you won't be able to close the menu by clicking on a menubaritem.

Joe Gillespie Joe Gillespie
Posts: 528

I'm not quite sure what you are getting at here.

From the point of view of 'understandability', I would prefer to do this...

<body onclick="javascriptageClick()">

function pageClick()
   {
   clicked=false;
   currentMenu=-1;
   selectedMenu=0;
   hideAll(currentMenu);
   }

But you are solving one problem and creating another (worse) one.


onclick="event.cancelBubble=true";


This is a IE 5-only thing, I try to avoid old browser specific stuff personally. I would rather that the menu closed when clicking a menubar item than rely on this. There must be a better way?

Mark_bills Mark_bills
Posts: 3

I'm not quite sure what you are getting at here.


This is a IE 5-only thing, I try to avoid old browser specific stuff personally...There must be a better way?


Sorry about the confusion. What happens is that, because the <A> elements defined in the menubaritems don't have an onclick event handler, it bubbles up to the <BODY> element and the hideAll() or pageClick() function is called before the selectMenu() function. This sets 'clicked' back to false, so selectMenu() keeps showing it, resulting in a menu that won't disappear.

Calling a new function or defining an onclick event handler for the <A> elements won't stop the function from being called. That's why I used the cancelBubble approach, which is part of the W3C DOM L2 specification and is supported by IE4+ and NN6+. You are correct that it will not work in older browsers. I should have added that caveat.

Your question about whether there is an easier and less browser-specific way to do this made me realize that you could do the following, which incorporates your improvement for understandability:

1) Define the following variable at the top of the script (along with the others):

var menuClick=false;


2) Change the onclick event code in the <a> elements in the menubaritems to:

onclick="menuClick=true"

for example,

<div id="menubaritem1" style="width: 100px" onclick="menuClick=true">


3) Change the onclick event in the <BODY> element to:

<body onclick="pageClick()">


4) Add the pageClick() function, as follows:

function pageClick()
{
 if( !menuClick )
 {
clicked=false;
currentMenu=0;
selectedMenu=0;
 hideAll(0);
 }
 else
 {
menuClick = false;
 }
}

Joe Gillespie Joe Gillespie
Posts: 528

Thank you Mark, that is a much more elegant solution. I have added it to the graphic menu example and given you credit ;?)

Gulfcoast Gulfcoast
Posts: 2

How might the code look for one of the menus if you didn't want the menu item dropdown, as in just a "home" link for the first menu. Obviously, you wouldn't need the drop down in this case. Many thanx.

Joe Gillespie Joe Gillespie
Posts: 528

Just make the first menubaritem a 'home' link and don't have any menu nested inside it.

Gulfcoast Gulfcoast
Posts: 2

I've got myself a little confused here. Am I getting close with this:

<div id="menubaritem1" style="width: 80px"></div>
<div id="menu1" href="http://www.charlottes-saddlery.com/">2 Item One</a></div>

Joe Gillespie Joe Gillespie
Posts: 528

Try this. Stick a #menubaitem0 in front of all the others...


<div id="menubaritem0" style="width: 80px">
                                   <a href="index.html">Home</a></div>

Dario Dario
Posts: 3

Hi,
Great site and really too bad it's not going to be updated anymore. Hope the forum is still going.

Here's the deal:
I added a 'HOME' as outlined in the above post. It works fine.
I also tried to add another link (menubaritem5) and all is well in Safari and Camino but IE 5.2.3 puts the added item on a new line, not in the menu row. Also, when I change the var to 5, IE throws all kinds of errors.
I HATE IE!


Anyone with any thoughts on it?

Joe Gillespie Joe Gillespie
Posts: 528

It's very difficult to tell what's going on when you paste code into a forum page like this. Can you show us the complete page on the Web, even it's just a temporary address?

Dario Dario
Posts: 3

Ooops. I'm sorry about that.
So, here's the page:

http://www.studiorousar.com/test.html


EDIT--- I worked on it some more and I guess I fixed it. However, as I don't have access to a Windows machine I may not have.

Joe Gillespie Joe Gillespie
Posts: 528

In IE 6, the four right hand menus have moved dropped down below the first 'Home' menu. Looking at the HTML, you seem to have the menus all jumbled up and full of redundant menu items. This is totally confusing the browser - and me too

Clean it up and put the menubaritems in the correct left to right order.

Dario Dario
Posts: 3

I finally foind a winbox to test on and noticed the same thing. My menubar width was less than the total width of the menus so I fixed that (funny how it worked fine on all my Mac browsers -Safari, IE, Camino, Firefox). Oh well, me and 3% of the world would be happy.

As this was just a prelim test run I haven't cleaned it up yet. Probably should have though, before I sought help.

Thanks for looking and testing. i appreciate your time and this wonderful resource.

Adam Adam
Posts: 1

Hi Joe,

Excellent code - I'm experimenting with it at the moment for a menu bar on a website I'm putting together.

Everything works great, except for a couple of slight glitches. My code is located here:

http://www.drakeway.com/~adam/dropdown_menu2.htm

The problems I am facing are:

1) When using Firefox, the first-selected menu item gets a dotted box around it. When moving on to other menu items, this dotted box remains on the first-selected item. It does not do this in IE. Can anyone suggest a solution?

2) When scrolling across the opened menus, each menu closes as another opens, EXCEPT the home menu button, which doesn't have any submenus. This means that the calendar menu will stay open whilst the mouse is over the home menu button. Any ideas? UPDATE: SORTED THIS ONE!

3) This is an IE only problem: When moving the mouse over an opened menu, the first entry in the submenu will highlight no matter where the mouse is placed in the submenu box. Other submenu entries however will only highlight when the mouse is placed over the submenu text. This is noticable when the submenu items are of different wordlengths. Again, any solutions?

Thanks,

Adam

Joe Gillespie Joe Gillespie
Posts: 528

Adam said:

1) When using Firefox, the first-selected menu item gets a dotted box around it. When moving on to other menu items, this dotted box remains on the first-selected item. It does not do this in IE. Can anyone suggest a solution?



This is the correct behaviour, The menu with the dots round is the currently selected menu.

3) This is an IE only problem: When moving the mouse over an opened menu, the first entry in the submenu will highlight no matter where the mouse is placed in the submenu box. Other submenu entries however will only highlight when the mouse is placed over the submenu text. This is noticable when the submenu items are of different wordlengths. Again, any solutions?


If you are depending on text as your link, this is to be expected. If you use a graphic, it can fill the whole menuitem area.

Motive Minds Solutions Motive Minds Solutions
Posts: 0

The prices as usuall are very low, we wrap an ecommerce site for as low as $550 and a database driven real estate website for $450 and content management system comes only for $500 and in case you opt for wordpress CMS then we do the job with a customized design for just $250. With $250 you are a owner of a website, which has a customized design and which allows you to change/add any content you please, I am offering you the wordpress Content management system here.
arrow For a simple website containing 4-5 pages the cost is as low as $150
arrow For a much larger site containing 10-15 pages the cost is $250
arrow And if you need a flash header then Please add another $75 to the above costs.
In case you want to hire our PHP programmers on hourly basis then you can hire them for $10 per hour BUT on maintenance projects where our programmers or designers grey cells are not taxed! we charge only $7 per hour! Don't you love that? If so then what are you waiting for drop me a mail or get in touch with me immediately and let us discuss the benefit you will gain if you hire us. My guys work round the clock so time and distance won't matter for us, if you are having any second thoughts on thoose grounds then don't even think about it!

www.motiveminds.com

Sabri Dino Sabri Dino
Posts: 45

yerinde köpek egitimi
ücretsiz arkadaşlık sitesi
Web tasarımı
istanbul eskort
kopekegitimi
bayaneskort
5651 sayılı yasa

You must login to reply