topic

The dynamic dropping out menu

Introduction

Whether you when or heard such statement, what " it is impossible to make the dynamic dropping out menu extremely on CSS for IE "? It is confident, what yes. Also what, you believe this? Correctly, do not believe better.

The purpose which we want to reach{achieve} in this clause{article}

The purpose of given clause{article} - to make the dropping out menu for IE, made exclusively on CSS. Having started{begun} with this production, I have expanded a problem to forcing to work such menu in other most known browsers (a comment per.: from comments it is found out, that these browsers are Opera 7.x and last versions Firefox).

The purpose which we want to reach{achieve} in this clause{article}, basically more or less general educational i.e. to give a common view about some "latent" and seldom used features of browsers.

Also especially curious can find in this clause{article} some shifts with which help it is possible to reach{achieve} the certain non-standard results. Well and for developers this clause{article} can become an occasion for reflection or a source of new ideas.

To what we represent a level of the reader.

Generally I thought of marking this clause{article} as for " the profound studying (advanced) ". But I am confident, that at all the most skilled developers well will understand that is written in clause{article}. More shortly, the reader is simply obliged to know bases CSS and

HTML.

Than it is the menu differs from all others?

I for a long time searched in network of the menu which would be made on CSS, but have not found any decision which would work without glitches in IE. However I have found many interesting ideas which have led me to to that result which here will be described. Yes, my code too is not perfect, but I simply do not have time to correct all mistakes. The most interesting alternative decision from everything, that I saw (which use CSS), is based on use of a pseudo-class hover for elements LI. And I never also did not think, that such probably, however, as well as did not think that in general it is possible to make the dropping out menu for IE without scripts...

The basic difference between mine and other menus is that I works in IE. All decisions which I saw, use an element LI as a basic element for a pseudo-class:hover, however Microsoft has decided, that this pseudo-class can be used only for

Element A. The majority of sites do{make} the clause, that their menu work only in browsers Opera 7.x or Mozilla. But in fact these browsers are used only by five percent{interests} of users! Yes, such menus are good in these browsers, but unfortunately cannot be visible in the majority of the most widespread browsers. Now we correct this misunderstanding.

What is the menu made with the help only CSS?

This dynamic menu for which creation it is used only CSS, and scripts (for example, written on JavaScript) are not used.

What, it is not believed?

Let's consider a code:

*::-moz-any-link br, *:-moz-any-link br {

/*a workarround for mozilla*/

display:none;

}

div*menu * {

cursor: pointer;/*because IE displays the text cursor

if the link is inactive*/

}

.disabled {

color: red! important;

background: none! important;

}

div*menu {

background: *F5F5DC;

font: 10px Verdana, sans-serif;

height: 15px;

white-space: nowrap;

width: 100 %;

}

div*menu .a {

background: *F5F5DC;

border: 1px solid *F5F5DC;

color: *000000;

text-decoration: none;

}

div*menu .a table {

display: block;

font: 10px Verdana, sans-serif;

white-space: nowrap;

}

div*menu table, div*menu table a {

display: none;

}

div*menu .a:hover, div*menu div.menuitem:hover {

background: *7DA6EE;

border: 1px solid *000080;

color: *0000FF;

margin-right:-1px;/*resolves a problem with Opera

not displaying the right border*/

}

div*menu .a:hover table, div*menu div.menuitem:hover table {

background: *FFFFFF;

border: 1px solid *708090;

display: block;

position: absolute;

white-space: nowrap;

}

div*menu .a:hover table a, div*menu div.menuitem:hover table a {

border-left: 10px solid *708090;

border-right: 1px solid white;/*resolves a jump problem*/

color: *000000;

display: block;

padding: 1px 12px;

text-decoration: none;

white-space: nowrap;

z-index: 1000;

}

div*menu .a:hover table a:hover, div*menu div.menuitem:hover table a:hover {

background: *7DA6EE;

border: 1px solid *000000;

border-left: 10px solid *000000;

color: *000000;

display: block;

padding: 0px 12px;

text-decoration: none;

z-index: 1000;

}

td {

border-width: 0px;

padding: 0px 0px 0px 0px;

}

.menuitem {

float: left;

margin: 1px 1px 1px 1px;

padding: 1px 1px 1px 1px;

}

.menuitem * {

padding: 0px 0px 0px 0px;

}

*other {

height: auto; visibility: visible;

}

*moz {

height: 1px; visibility: hidden;

}

*moz::-moz-cell-content {

height: auto; visibility: visible;

}

*other::-moz-cell-content {

height: 1px; visibility: hidden;

}

*holder {

width: 100 %;

}

</STYLE>

<TR>

<TABLE>

<TR>

<TD> <a href = * 2> click me </A> </TD>

</TR>

<TR>

</TR>

<TR>

<TD> <a href = * 4> Close </A> </TD>

</TR>

</TABLE>

</DIV>

<TABLE>

<TR>

</TR>

<TR>

<TD> <a href = * 13> Index </A> </TD>

</TR>

<TR>

<TD> <a href = " * 14 "> About </A> </TD>

</TR>

</TABLE>

</DIV>

</TD>

</TR>

<TR>

<TD id = "moz"> Mozilla specific menu!

<a class = "a" href = ' * '> Filezilla </A>

<TABLE>

<TR>

</TR>

<TR>

</TR>

<TR>

<TD> <a href = * 4> Close </A> </TD>

</TR>

</TABLE>

</a>

</DIV>

<A class = "a" href = " * 11 "> Helpzilla </A>

<TABLE>

<TR>

</TR>

<TR>

<TD> <a href = * 13> Index </A> </TD>

</TR>

<TR>

<TD> <a href = " * 14 "> About </A> </TD>

</TR>

</TABLE>

</A>

</DIV>

</TD>

</TR>

</TABLE> <BR>

What occurs, why all works?

At once I shall make a reservation, that in this clause{article} I shall not learn{teach} you to use CSS. Therefore at once we pass to consideration of a principle of job of the menu - to a pseudo-class ':hover '. Yes, it is a class. I.e. the selector can inherit other selector which includes ':hover '. In our case ' A:hover TABLE 'chooses' <TABLE> in

Element <A> at which the index of the mouse is directed. The trick with the table further follows, property "display" which is equaled "none" (i.e. she is invisible). The table is between tags of anchors (<A>, </A>). By words Microsoft, it can call inadequate reaction IE, but I such have not noticed anything.

Why we use the table? That is why, that that she very well divides{shares} the enclosed anchors which we want to involve from the basic anchor. Such decision does not work in Mozilla 0.7 and even with help JavaScript I yet have not found a way to realize it. The direct investment of anchors is not supposed Microsoft, therefore the element table is original khak for IE. And, as far as I know, only tables allow "to lead{carry out}" thus IE.

So, what at us here is present? 2 tables with anchors inside anchors.

<TR>

<TD> <a href = " * 12 "> Howto </A> </TD>

</TR>

<TR>

<TD> <a href = " * 13 "> Index </A> </TD>

</TR>

<TR>

<TD> <a href = " * 14 "> About </A> </TD>

</TR>

</TABLE> </A>

Which are latent.

div*menu .a table {

display: none;

z-index:-1;

}

The browser shows contents of an anchor at prompting the index of the mouse and applies in this case corresponding style:

For the text of the link it is used:

div*menu .a:hover {

background: *7DA6EE;

border: 1px solid black;

color: black; z-index:0;

}

For the dropping out table which we use for a submenu: it is the key table which is the dropping out list.

div*menu .a:hover table {

background: White;

display: block;

position: absolute;

width: 125px; z-index: 0;

border: 1px solid *708090;

}

For links inside a submenu:

div*menu .a:hover table a {

display: block;

color: Black;

text-decoration: none;

padding: 1px 12px; z-index:1000;

}

If we direct the index at one of links in a submenu, the browser applies the following style:

For links inside a submenu:

div*menu .a:hover table a:hover {

display: block;

background: *7DA6EE;

color: black;

text-decoration: none;

padding: 0px 11px;

border: 1px solid black; z-index:1000;

visibility: visible;

}

Style of links in the dropping out menu:

div*menu .a:hover table a {

display: block;

color: Black;

text-decoration: none;

padding: 1px 12px; z-index:1000;

}

Probably, you have noticed, that I ispol`hhoval some properties ' z-index ' for some elements. They are khakami for some problems which I have found at testing the menu.

Improvements

To add sublevels in the dropping out menu it is necessary to insert simply one more element div '.menuitem ' (together with his contents and similar structure) instead of the link into the parental table.

Now, when you have sublevels in the menu, you will need to remove tags

, To give the menu " normally to leave ". In addition to this, you will need to make some copies of classes .menuitem and .a with identical properties, but different names for each submenu.

Yes, similar to work it is necessary much, BUT you can simply add their selectors in corresponding section of the table of styles.

The full description of how it to make, I shall make next time.

For now I shall say, what is it you can change the menu how to you will want, to adapt under yourself. And opportunities for this purpose there is an infinite set - limit them your imagination can only...

Switching of styles (Skiny)

If you want to add skiny for your menu with an opportunity of their change by the user, you will need to add additional tables of styles and to give them names with id ='some_name ' (for IE) and with names name ='some_name ' (for other browsers). That both styles were not applied, you need to block all styles, except for styles by default, by addition of parameter "disabled" in style of a tag (and has no value, whether you connect it or use linear syntax). Mozilla and Opera allow switching the named styles from a browser. As a rule, these browsers do not apply all styles which are determined by a name name = "..." Also ignore id = "...". Also they are able to use a name name ='default ' as the table of styles by default and name ='alternate ' as the alternative table of styles. You can define{determine} a name of style which the user will see as property title = "..." . For example, the demo of the menu on this page includes the following definitions:

... <STYLE>

... <STYLE>

Pay attention to the order of assignment of names, I persistently recommend strictly to him to follow.

IE has no built - in switching of styles CSS, therefore we should make it (here any more without use JavaScript):

Choose one of styles, having cluck on corresponding, and return upwards to see

Changes:

onclick = " document.styleSheets (' default ') .disabled=false; document.styleSheets (' alternate ') .disabled=true; "> Style

By default

onclick = " document.styleSheets (' alternate ') .disabled=false; document.styleSheets (' default ') .disabled=true; "> Blue

onclick = " document.styleSheets (' alternate ') .disabled=true; document.styleSheets (' default ') .disabled=true; "> Without

Styles

It is done{made} so:

<ul>

<li onclick = " document.styleSheets (' default ') .disabled=false;

document.styleSheets (' alternate ') .disabled=true; ">

<a> Default </a>

</li>

<li onclick = " document.styleSheets (' alternate ') .disabled=false;

document.styleSheets (' default ') .disabled=true; ">

</li>

<li onclick = " document.styleSheets (' alternate ') .disabled=true;

document.styleSheets (' default ') .disabled=true; ">

<a> No Stylesheet </a>

</li>

</ul>

The prevention{warning}! It is simply small example!

Perezagruzka pages will reset{dump} default values for tables of styles. Therefore for the real purposes it is necessary to use cookies or server scripts to remember a choice of the user, that besides is not a subject of consideration of given clause{article}.

I shall add only, that the above mentioned code will work only in

IE.

The conclusion

I advise all to use the menu on basis CSS on your sites (and in webs - applications) because thus it is possible to avoid many problems which appear at use of the menu on basis JavaScript. Such problems, as a rule, arise at wrong processing events in IE. Moreover, in some browsers there is an opportunity of disconnect of scripts, and especially many browsers do not support JS from Microsoft.

If the browser does not support CSS he will display at least all links.

So-called " problem Mozilla-HH " - links inside a submenu do not work. I.e. it is impossible to open them in the same window (but they work by joint pressing Shift+nazhatie - in new). The description of a problem look in section of "mistake".

Known mistakes

By default links in a submenu do not work in Mozilla. But I have found more - less comprehensible decision of this mistake. It is based on an insert of the special menu, besides without use of scripts. See{overlook} closely those places of a code where it is mentioned Mozilla (or ' moz '). You will see, that HTML sections have no enclosed anchors (last tag is placed there where he and should be). In first part CSS I use not documentary selectors are special selectors for Mozilla, and I add the selector:hover for those elements div which are supported Mozilla. And all the same after that the behaviour remains not absolutely correct.

In comments there is a remark (from Nick Young), that the menu does not work in Netscape. I is confident, that a problem there in the same, as in Mozilla. It is necessary to search for the additional information on it. The decision probably will demand some changes because the alternative code should work normally and in Netscape.

Remarks:

The page has been tested in IE versions 5, 5.5, 6, in Opera 7.23 and Mozilla 0.71. Most likely, the menu will work and in earlier versions of the specified browsers.