Building a C# Chat Client and Server
A step by step tutorial teaching you how to create your own chat client and chat server easily in C#, for local networks or the Internet.
Getting Hard Drive Information
A C# tutorial showing you how to make use of WMI to extract information on disk drives, such as model, capacity, sectors and serial number.
UPS Shipping Calculator
This tutorial will teach you how to calculate the shipping cost based on the weight, height, length and depth of the box, the distance and the UPS service type.
Create Your Own Rich Text Editor
Creating a Rich Text Editor using JavaScript is easier to do than you might think, thanks to the support of modern browsers; this tutorial will walk you through it.
- ActionScript (5)
- ASP (7)
- ASP.NET (28)
- Assembly (1)
- C (6)
- C# (132)
- C++ (33)
- CSS (6)
- General (4)
- HTML (6)
- Java (28)
- JavaScript (38)
- MySQL (2)
- Objective C (1)
- Pascal (1)
- PHP (61)
- Python (3)
- Ruby (18)
- Silverlight (1)
- SQL (8)
- VB.NET (5)
- Visual Basic (3)
Horizontal Drop-Down Menu using CSSLearn how to create a drop-down horizontal CSS menu, completely JavaScript-free. The menu is valid XHTML and CSS and uses unordered lists for the menu items. |
On Sunday, April 15th 2007 at 04:35 PM By Sorin Sodolescu (View Profile)   (Rated 4.3 with 27 votes) |
||
  See this code in actionThe advantage of creating menus with CSS is the fact that it's not a scripting language and, unlike JavaScript, it can not be turned off leaving your menu inaccessible. First let's see the HTML. We'll use a DIV and some ULs to create our menu since this is not only the most appropriate method but it's also optimizes it for search engines. <body> The next step is to write the CSS. To make this work in Internet Explorer and Firefox we'll need 2 separate CSS files, one for each browser. Let's start with the file for Internet Explorer. First let's format the containing DIV. We'll set its width, height, position and background color. div.menu The next step is to format the unordered lists. These lists are the top level of the menu, they will be visible all the time. ul.menu We've removed the default padding and margins of the UL and made it float left. This way all of the ULs will fit next to eachother. Up next are the second level ULs. ul.menu ul The lists are now hidden and positioned under the first level UL. Now it's time for the third level ULs. ul.menu ul ul These ULs are also hidden, and they position is set to absolute to make them appear on top of other elements. We will make the ULs become visible and invisible with ":hover". ul.menu:hover ul This makes the second level ULs become visible when the mouse is over the first level UL, the third level ULs will remain hidded until the mouse is over the second level UL. Finally, we format the links. a.menu The CSS file for IE is done. The file for FF is almost the same except the second and third level ULs. ul.menu ul We've set the position of the second level ULs to absolute, because otherwise it won't apear on top of other elements (like it does in IE). Also, the ULs have z-index:1 to appear on top if the third level ULs. The left margin is set to -40px to position it under the first level UL. ul.menu ul ul The third level ULs have z-index:-1 to appear under the second level ULs, and have negative margins in order for them to be aligned corectlly with the rest of the level. <link rel="stylesheet" href="NonIEcssMenu.css" /> Here is the entire code for the CSS drop-down menu: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> div.menu{ /* IEcssMenu.css */ div.menu |
|||
 Digg It!
 Del.icio.us
 Reddit
 StumbleIt
 Newsvine
 Furl
 BlinkList
|
|||
|
|||
Rate this tutorial
Current Comments
cool... too bad it doesnt work in IE 6
Matt is right.. this code doesn't work in IE so it's useless.
This code doesn't work in IE 6, because IE 6 doesn't render things the way they're intended. For example the min-height attribute doesn't work at all in IE6. You should give a modern browser a try, and you'll see that this code works just fine in IE 7, Firefox 2, Safari 3 or Opera 9. So it's pretty useful with a modern browser.
Useless maybe a a rather strong term to define this...however these guys have a point. The thing is to suggest that we try a modern browser is ridiculous....or do you suggest this to every user of your sites?
Hi Will. No, I can't force people to use what browser I want (and don't want to). I'm just saying that this code was intended to work on modern browsers; also using a .htc file this code can work on IE6 too. But I do think that if a script doesn't work on an older and flawed browser but works on modern ones, it can't be called useless. If you try running an application developed in .net on a computer that doesn't have the .net framework installed it won't work, but that application is not useless. But everyone is entitled to an opinion, so the previous comments are welcome.
this tutorial not working in IE
Well,because IE sucks..it's just a fact..
It does work in IE7. Who still uses IE6 anyway?
Well Apparently a lot of people who have commented this tutorial...IE still sucks no matter what it's version.
well 60% of users of our sites use ie, and of the 60% 72% use ie 6
so as much as ie sucks the average joe still uses it
'If it ain't broke don't fix it' but IE 6 was broke from the start so update it! IE 7 is FREE after all.
What amazes me, as a Firefox user, is I am told all the time about the upgrades, in fact it upgrades happily in the background. Doesn't IE do this? Then it is little wonder the poor average joe is stuck with IE6 and web-designers have to spend hours coming up with hacks to make a non-standard browser work. Microsoft have a lot to answer for.
The point they're making is that websites should be made for maximum compatability. If this menu does not work on the browser the majority of people use, then it's useless to webdesigners who want to reach a large number of people. We can't force people to upgrade their browsers, so the best thing to do is design for people who DO have crappy browsers. If you design for IE 6, it'll work in FF. It doesn't work the other way around.
Hi Sorin Sodolescu,
Great code you got for the menu.
You suggested in an earlier post that this menu could work in IE6
if you use a .htc file. Can you show us how?
Thanks.
Hi Boutros.
First of all you will have to download the .htc file -http://www.xs4all.nl/~peterned/csshover.html. You may also want to read what the author wrote there.
To enable hovering in IE6, you simply have to put these lines in the head section of your code:
<!--[if IE]>
<style type="text/css">
body {behavior: url(csshover.htc);}
</style>
<![endif]-->
Of course, you have to use the appropiate URL.
Here is a small example for enabling hover with div elements.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" href="style.css"/>
<title>Test</title>
<!--[if IE]>
<style type="text/css">
body {behavior: url(csshover.htc);}
</style>
<![endif]-->
</head>
<body>
<div class="s1"> Style1
</div>
<div class="s2"> Style2
</div>
<div class="s2"> Style2
</div>
<div class="s2"> Style2
</div>
<div class="s2"> Style2
</div>
</body>
</html>
I hope you will find this useful. Good luck with your code!
Hi Sorin,
Thanks for your feedback about the hover in IE6.
I got the menu to work in IE6 (using the *.htc file) but the alignments for the sub-lists are OFF, and also the I noticed that the grandchild list is hard to activate, it disappears before being able to click it, plus other styling issues. Your code at the top of the page works great for IE7, Mozilla/Firefox 2+, and Opera+.
Would it be too much to modify your top code so that your code works in IE6 too (IE6/IE7 and the rest). Believe it or not a lot of people and companies are still using IE6 (I don't know why?)
Thanks for your help.
Hello Boutros
I do know that a lot of people still use IE6... this tutorial was meant only to be a nice and clean menu for modern browsers. (It works well in Safari 3 - Windows too). Unfortunatelly, I can't rewrite the CSS, because I can't test it in IE6 (I don't have it installed, and software like Virtual PC is not an option right now). I suggest you create a CSS file for IE6 and one for IE7, and use proper conditional comments, in order for the menu to look good on all browsers.
<link rel="stylesheet" href="NonIEcssMenu.css" />
<!--[if IE 7]>
<link rel="stylesheet" href="IE7cssMenu.css" />
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" href="IEcssMenu.css" />
<![endif]-->
I hope this help.
Best regards,
Sorin
Thanks Sorin for all your suggestions. It works great in IE6 now,
in addition to all modern browsers.
Take care,
Boutros.
@boutros:
can you post your css-code for ie6, please?
Hi Sorin,
I just realized when I loaded the menu to the server, it stopped
working in IE6. I did all the menu testing, on my local C drive and it was working great on IE 6.
Do you have any idea, why when I loaded the menu file to the
server, the menu does not work anymore in IE6???
Any suggestions?
@donkie: when I am successful for the server part, I will be happy
to post a copy.
Thanks,
Boutros.
Hi Boutros,
I don't really know why you're having that problem, but one answer might be that the browser's security settings is blocking the .htc file, because the page is not ran locally, but from a server. If this is the case, then I'm sorry, but the CSS menu + htc file isn't a reliable solution for IE6.
Good luck finding a fix for your problem!
Sorin
Hey boutros, did you ever get the above file working for IE 6? has anyone been able to make the above drop down menu work in IE 6?
Anish
Hi Anish,
No, I was not able to get the menu to work in IE6. I suspect,
like Sorin said, that the security setting on the server was
blocking the execution of the htc file.
So I dropped it.
Boutros.
kontol
kontol
kontol
kontol
kontol
how do u place this code in to a table?
Really I am unable to thanx ,because Thanx are less than you
I got a problem there was a big gap above my menu ine IE7. Had to correct it by increasing the line height and the height.
h! why it does not work in ie????
but it works in ff?? do they defer?
From URL:
http://htmldog.com/articles/suckerfish/dropdowns/
...And that will sort out everything for those browsers that fully support the :hover pseudo class, but for Internet Explorer we need to set the Suckerfish JavaScript loose:
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i ) {
sfEls[i].onmouseover=function() {
this.className =" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
Hi Sorin,
I downloaded the *.htc file and put it in the same folder as the CSS and HTM files but the menu doesnt work in the IE6. It works great for other modern browsers but I still am unable to figure out what to do for IE6. It would be great if you could post the modified complete code for the IE6 ver including the *.htc file details.
Thanks a million.
Hi WEB Family,
I tried but unfortunatley didn´t work in IE. I got a solution for this issue, visit the following link that brings a good dropdown menu, it does not need javascrip even Jquery:
http://www.cssnolanche.com.br/css-dropdown-menu-sem-javascript-ou-hacks/
Thanks for sharing
66
66
66
66
66
Hi
this code is excellent
Howdy! Works excellent in IE7 and Mozilla - but no good in IE8 - any ideas what it might be?
Can turn on compatibility mode which fixes it - but not a permanent fix for people looking at my webpage.
I strictly recommend not to hold back until you earn big sum of money to buy different goods! You should just take the <a href="http://bestfinance-blog.com">loans</a> or just short term loan and feel yourself comfortable
Related Tutorials
Related Source Code
CSS Job Search
News
Tutorials
Source Code
Pictures
Videos
Reviews
Special Reports
Bargains
Resources
Icons
Newsgroups
Knowledge Base
Books
Magazines
Downloads
Jobs
Forums
Search
About Geekpedia |
Legal |
More Resources |
Closed Sections |
Geekpedia Network |
