Script for Slide Menu

[chockku]

Hi,

I am designing a html page using frontpage. What's the exact script required to perpare the drop down menu & what other stuffs i need to. suppose if i have 10 Employees in a Department. i have to list the Department name as the heading and when i move the mouse over the Department Name , i need to the dropdown menu should list the 10 employee name. Kindly help me do bring the similar type of menu attached with this mail.

Thankyou,
Chock.

[vbbit]

Do a google search would be helpful...

[RobDog888]

I wouldnt use front page as it is not the best editor. I use notepad instead.

Theres a javascript site that has scripts for menus like these. I'll look for it again and post when I find it.

[chockku]

Hi,

Thanks for the replies. I did the google search, but all are payable. Hope Rob could give the exact link which could help me.

Thankyou,
Chock.

[penagate]

Do not, I repeat not, ever use JS menus!

Generally, unless extremely carefully done, Javascript-driven menus break the structure of the document, do not work when Javascript support is not present (obviously) and just generally make the page inaccessible, unless you have an alternative means of navigation.

If you must use menus (which I'd avoid in most cases anyway as a matter of design principle, but still) use CSS-driven menus. They will work in CSS-capable browsers, do not require scripting, and most importantly the content will still be accessible if the user agent is not CSS-aware.

Here are a couple of demonstrations of this technique.
http://www.meyerweb.com/eric/css/edge/menus/demo.html
http://www.howtocreate.co.uk/tutorials/testMenu.html

Now the issue with those two is that they do not work in Internet Explorer (<= 6), because pre version 7 IE does not support the child combinator and does not properly support the :hover pseduo-class. If you know your CSS well enough however it is possible to design the menu structure and CSS selection rules so that it works correctly in Internet Explorer. You will need to make each menu and menu item primarily an anchor <a> element, because IE 6 and below do not recognise :hover on any other elements.

The general structure of it is fairly simple, the menu bar should be a <ul> list, each menu item is a list item element <li>, and those that expand with menus contain the menu as a list within that list element. So your entire menu system is essentially a structure of nested lists. Sub levels are all hidden using CSS (display: none) and set to display when the mouse is over using the :hover effect.

[RobDog888]

Would you miond making a small example of this PG

[penagate]

Here

http://penagate.spiralmindsinc.com/misc/ie-css-menu/

I'm annoyed that I couldn't get it to work in IE 6 without using Peterned's Whatever:hover stylesheet behaviour file, as that uses Javascript... but what can you do? At least it will work properly in IE 7. In my post above I was forgetting, of course, that you can't nest a list within an anchor tag. So that ruins it for IE 6 unless you use the script to hack around that.

Do us a favour and test it in a standards-compliant browser too, it should actually look like a menu

My point is, the document structure is all there for a non-CSS-capable browser too. If you prefer you can disable the menu for IE <= 6 using the same conditional comment I did to include the HTC file, as HTC is Javascript and you so you lose the advantage of not using scripting anyway.

Not to rag on IE in general (in this case) as it should work fine in version 7.

[Merri]

I disagree with penagate here.

If we take a look into the big picture of web design, the most important thing to provide the visitor is to let them browse everywhere and let them access all the content. This is the first and foremost thing to do. Now, if we make the site browsable even without the menu, ie. content area leads to all the important content and thus everywhere in the site, it doesn't matter if the menu is made using JavaScript or not. The site is still fully accessible to anyone who visits.

Yet we can still respect the standards and accessibility and make the menu using standards compatible techniques. Of course we need to work out issues of older Internet Explorers, but since the content is already accessible in these browsers when we place everything important to the content area as well, it doesn't matter if JavaScript happens to be turned off or not. At the best case the main level menu items are links and thus clickable so there isn't even a need for the user to know if it is a dropdown menu or not. We have effectively skipped the issues of using JavaScript by simple web design rules.

Thus my words are: use JavaScript if you want as long as you make sure it doesn't matter to the user if JavaScript is enabled or not.


Oh, with the penagate's link above, I did a accessible fixed position dropdown menu in a centered content which I've sometime heard elsewhere claimed to be impossible in IE. Visually it looks pretty bad but it works smoothly. It actually renders a bit better in IE6 than Firefox, you notice a small glitch in Firefox when you open up a submenu Also, Firefox's scrolling speed dies if I set text-align:justify; to the content area. Opera required a z-index:1; to the menu so it would popup the submenus when scrolled down a bit (again these weird optimization related issues in Opera). So in the end no browser manages to do the perfect job without a little help.



Edit! For an example of a well thought of sliding menu, see OmegaDrivers.net: you can access all the pages even without the sliding menu. However, I don't like the technical side of the code, I'd still make an accessible menu instead of pushing menu content and structure with document.write.

[Merri]

I made a sliding dropdown menu. CSS for style, JavaScript for functionality. It could be done a bit better JavaScript-wise (ie. use addEvent instead of onmouseover and onmouseout attributes in HTML), but that'll do for now. Took me long enough to get it working

[RobDog888]

Yes, that menu is a bit hard on the eyes but works great for me in IE 6. I'll have to check out your code.

Thanks

[Merri]

I styled the sliding menu page. I used some CSS not supported by IE6 and alphatransparent PNG images so it doesn't look as good on IE6 as it does on IE7, Firefox and Opera.

[RobDog888]

I have IE 6 and it displayed without error but Im not sure how its supposed to look. but still good.

[Merri]

Yup, menu icons is an area where it means less to have all the candy

Here is a screencap from Firefox for comparison:

[RobDog888]

Here it is in IE 6. Icons are the only issue but its still very good

[Merri]

I made a vertical version to the Goldblog. Used the same design since there was no point making a new one. IE was pretty painful this time but I think I nailed it well enough: both IE 5.5 and IE 6 work although don't look as cool as Firefox and Opera (alphatransparent PNGs again).

Technically I did a lot of improvement: I found a nice code for addEvent and that takes care of adding the required events. Actually I patched a problem with the menu in IE using the code a bit more... links will now get focus automatically when you hover them, otherwise all menu items wouldn't be accessible. What else... IE5.5 required special treatment via JavaScript as it doesn't support fixed positioning in any way.

Oh well, hope someone else can understand the code and use it for their own needs

[RobDog888]

I think the menu is great and would like to use just the vertical dropdown and not the entire sliding part. When I get to the next part of this site I will hit you up for it.

[chockku]

Hi,

Lot of discussions over there from Rob & Merri. Hope it will be useful. The movable menu in the left corner is very nice, but it seems dim in IE6. One more question How you have given the background for menus. I mean the Background of the menu bar & menu item. Is it a Background picture or the Background colour or what. Kindly suggest about my Menu creating requirement.

Thankyou,
Chock.

[Merri]

I've given both background image and background color. If you take a look into the source:

#menu {
	background : #CCD url('arrow.png') no-repeat right center;
	border-color : #BBC;
	border-style : solid;
	border-width : 2px 2px 2px 0;
	color : white;
	left : 0;
	padding-right : 20px;
	position : fixed;
	top : 20px;
	width : 200px;
	z-index : 1;
}

There is the background property. This first gives the color of the background, in this case the darker color you see in the right side of the menubar where the arrow is. Then it adds the background image arrow.png and positions it to right and middle and only once with no-repeat.

Padding-right reserves space for the arrow image.

Border properties give a 2px border to top, right and bottom of the menubar.

z-index fixes an issue in Opera by forcing the menubar and it's child items on top of everything.

Position:fixed sets the menu to float in the set position, which in this case is 0px from left and 20px from top.

And last, 200px is reserved horizontally for the menubar's main level items.


Good luck on learning CSS

[chockku]

Hi,

Thankyou for the response. In which page you are using this #Menu function which u given in ur previous post & how to apply the hover: style. If i move from one menu to the other then how the bacground color and Foreground color will change. should i use javascript or with css it can be done. so what's ur advice ? bcoz i am new, should i use both css & javascript or only css. I need to design & give some good page. Kindly suggest about it.

Thankyou,
Chock.

[Merri]

You need only CSS to do the basics, plus an additional file to get IE right (whatever:hover code). Doing a menu without knowing enough CSS is pretty hard, but I'll explain it anyway. So first make a menu with CSS and testing it with Firefox and Opera. Basic code to get it working:

<ul id="menu">
    <li><a href="/">Test link #1</a>
        <ul>
            <li><a href="/">Submenu link #1</a></li>
            <li><a href="/">Submenu link #2</a></li>
        </ul>
    </li>
    <li><a href="/">Test link #2</a>
        <ul>
            <li><a href="/">Submenu link #3</a></li>
            <li><a href="/">Submenu link #4</a></li>
            <li><a href="/">Submenu link #5</a></li>
        </ul>
    </li>
</ul>

This is a unordered list which has two unordered lists within it. You can take a look into it with a browser to see what it looks like without styling.

Now we start applying CSS to get whatever result we want. First it is good to reset some settings to get nearly identical results on all browsers.

* { border : 0; margin : 0; padding : 0; }

This will set borders, margin and padding of all elements to zero. The ending result is that everything is very much close together. This however makes custom styling much easier when comparing the results between multiple browsers, because we don't need to individually reset settings for many elements. Browsers don't have an entirely identical line on what is used to gain the default look of an element, sometimes margins are used in one browser, sometimes padding in another. If we don't reset settings in some browser we might get very different result from other browsers.

Anyways, the visual result looks like this:

* Test link #1
* Submenu link #1
* Submenu link #2
* Test link #2
* Submenu link #3
* Submenu link #4
* Submenu link #5

Next we want to remove the bullets. This is very easy:

#menu,#menu ul { list-style : none; }

This will remove the bullets from the main level #menu and from the child items. Since we are making a horizontal menu, we want to set the main level items horizontally next to each other. Thus:

#menu { display : block; height : 25px; overflow : hidden; }
#menu li { display : inline; float : left; }

Now top level items are right next to each other so that the child items go on top of each other. Next lets make it so that the submenus become submenus, so that we need to hover on the main level items to see the submenus:

#menu ul { top : -2000px; }
#menu li:hover ul { top : auto; }

Now this automatically hides the menus from the screen -2000px above the top. We need to do this way so that the screen readers can read the menu contents for blind people. The hover sets the menus to position where they'd normally go to.

Our next challenge is to fix the submenus so that they look better and tile them on top of each other. CSS inherits settings, so we have to undo some of the settings that effect also the submenus. Float is one of these settings that we want to undo, because we don't want the submenu items to tile horizontally.

#menu li li { float : none; }
#menu a { display : block; height : 19px; padding : 3px 10px; }
#menu li:hover a { background : black; color : white; }

Now we set all links to be block elements. This makes them nice boxes. We also set so that when we hover on top of a main level element the link background becomes black and link text color white. Unfortunatenaly the settings are again inherited to all child links as well, so we need to undo the effects. Luckily this is easy enough:

#menu li:hover ul a { background : white; color : black; }

This sets the items within the submenu to have white background and black text color. But we don't have a hover effect! We just have to do it again for the submenu items:

#menu ul li:hover a { background : black; color : white; }

Now we should have a quite simple horizontal CSS menu. For more possible styling options, take a look at W3C's CSS property index.

As a note, I didn't really test any of the code I wrote, I hope I got it all right and that you learned most of what you need to know when dealing with a pure CSS dropdown menu Remember that IE will be a devil, you need to use conditional comments to add IE specific style to force it look like the other browsers. You also need the whatever:hover code to add :hover support to list items. As additional tip you might want to use display : inline-block; and position : relative; to fix some of IE's issues with a horizontal dropdown menu.

[chockku]

Hi,

I tried the code you given , but i am able to see only one item in the top. Again for your information i am using IE 6. Placed the code in front page and tested. I am not able to see any box or anything. i followed the code style as it is in ur web page. I think still some thing is missing , even its simple i can't achieve, Kindly can u correct and put it here, i think you have to put some more effort to finish this menu.

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

<html>
<head>

<title>SAPSD</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
<style type="text/css"> 

#menu { * { border : 0; margin : 0; padding : 0; } 

#menu,#menu ul { list-style : none; } 

#menu { display : block; height : 25px; overflow : hidden; } 
#menu li { display : inline; float : left; } 

#menu ul { top : -2000px; } 
#menu li:hover ul { top : auto; } 

#menu li li { float : none; } 
#menu a { display : block; height : 19px; padding : 3px 10px; } 
#menu li:hover a { background : black; color : white; } 

#menu li:hover ul a { background : white; color : black; } 

#menu ul li:hover a { background : black; color : white; } }

</style>




<ul id="menu">
    <li><a href="/">Test link #1</a>
        <ul>
            <li><a href="/">Submenu link #1</a></li>
            <li><a href="/">Submenu link #2</a></li>
        </ul>
    </li>

    <li><a href="/">Test link #2</a>
            <ul>
                <li><a href="/">Submenu link #3</a></li>                
                <li><a href="/">Submenu link #4</a></li>                
                <li><a href="/">Submenu link #5</a></li>                                
            </ul>
     </li>
</ul>

</body>

</head>

<body> 
</html> 

Thankyou,
Chock.

[Merri]

With IE only you need the fixes. If you're making websites you should really download more browsers to test with, because when you test only for one browser, you're likely to make something that won't work with anything else.

Anyways, now we'll patch IE. Get the whatever:hover file I linked to before. I've renamed it to iehover.htc in my own use and I can't remember the original name, so you'll have to change that once you have the file.

You had some other errors in your syntax (<head> and <body> tags all messed up) and you had tried your own things (wrapping everything for #menu doesn't work) so here is a complete file you can save. There were more IE fixes then I remembered there would be. But this shows you how much differently IE really behaves when it comes to seeing how standards actually work. IE can't handle automatically horizontally space reserving menus, so I had to set a maximum width, in this case 150px. And many other fixes. I set some margin to show that it works elsewhere than just in the left hand corner of a page.

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

<html>
<head>

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

<style type="text/css">

* { border : 0; margin : 0; padding : 0; }

#menu,#menu ul { list-style : none; }

#menu { display : block; height : 25px; overflow : hidden; margin : 100px 0 0 200px; }
#menu li { display : inline; float : left; }

#menu ul { position : absolute; top : -2000px; }
#menu li:hover ul { top : auto; }

#menu li li { float : none; }
#menu a { display : block; height : 19px; padding : 3px 10px; }
#menu li:hover a { background : black; color : white; }

#menu li:hover ul a { background : white; color : black; }

#menu ul li:hover a { background : black; color : white; }

</style>

<!--[if lt IE 7]><style type="text/css">

body { behavior : url('iehover.htc'); }
#menu li { display : inline-block; position : relative; }
#menu li li { display : inline; position : static; }
#menu ul { display : block; left : 0; width : 150px; }
#menu li:hover ul { top : 25px; }
#menu li a { display : inline-block; float : left; } 
#menu li li a { display : block; float : none; }

</style><![endif]-->

</head>
<body>

<ul id="menu">
    <li><a href="/">Test link #1</a>
        <ul>
            <li><a href="/">Submenu link #1</a></li>
            <li><a href="/">Submenu link #2</a></li>
        </ul>
    </li>

    <li><a href="/">Test link #2</a>
            <ul>
                <li><a href="/">Submenu link #3</a></li>                
                <li><a href="/">Submenu link #4</a></li>                
                <li><a href="/">Submenu link #5</a></li>                                
            </ul>
     </li>
</ul>

</body>
</html> 

Now it'd need a real environment, other content. If the menu items don't show above the following content the menu needs z-index : 1; to force it above all.

[chockku]

Hi Merri,

Thankyou very much. I got it. Its working fine. I have to try with various fonts and make it good looking. I think i can't understand the .htc file. Is it written by you or what. Actually what's the .htc file. Is it for using CSS or what. Ok in my company all are using only IE, that's why i asked the code for IE.

Thankyou,
Chock.

[Merri]

HTC file is a IE proprietary feature. I don't actually care how it works, the only task it does is to add :hover support for all elements which is very useful for creating menus. Thus it only patches a feature that is missing from IE and which can be found from other browsers.

IE usage is continuously going down so it is a good thing to do support for other browsers - in case some day not everyone there is using IE

[chockku]

Merri,

Thanks for your moral support. I got some sense with this Thread. Really I have appreciate for your help.

Thankyou,
Chock.