Dynamic menu. Dynamic user menus. Changing a Menu Class Using jQuery

Numerous requests from my persistent readers and simply curious users have had their effect. I finally created a lesson in which we will learn how to make a dynamic VKontakte menu with the effect of pressed buttons! By analogy with regular Internet sites, when a visited link is marked in a special way(pressed button, underlining, etc.) - we will create the same design on VKontakte, using the created pages and graphic design. To begin with, we will make graphic templates in Photoshop - we will create a menu header and two types of buttons. Then we will create several VKontakte pages, according to the items in our menu. And finally we'll do trick, which, in fact, will create for us the illusion of following the link. The lesson is quite complex and is suitable for those who feel confident in the functionality of Vkontakte. I will perform all manipulations using an example your VKontakte group, where this effect is realized live. So, let's get to work!

Step 1. Create a menu header in Photoshop
Create a document in Photoshop with a width of 600 pixels. The height can be different, at your discretion. You can place any specific photograph, collage, information banner and other graphic pictures in the header. In this case I used this one advertising banner size 600x172 pixels.

Step 2. Create a navigation bar in Photoshop
Now we need to create a navigation bar. IN in this example I used only text as buttons. But at your discretion, you can create colored buttons and write text on them. We do this - create a 600x56 pixel rectangle in Photoshop and in this case fill it with white. Then we write menu items on the line - about 5-6 items, no more. Large quantity items will look squeezed.

Step 3. Create a pressed navigation bar in Photoshop
Now we need to create active links, as if they were clicked on. I used a regular underline, but you can use a different text or background color to mark the visited link.

Step 4. Cut ready-made pictures
On at this stage we need to cut the pictures from Step 2 and Step 3. We should have two sets of five buttons each - one button without an underline, the other button with an underline. The buttons for each individual item (with and without underlining) must be same size. The picture below shows all of our graphic design— ten buttons and one menu header.

Step 5. Create a VKontakte Menu page
Now let's go to VKontakte. Our task is to create separate page called "Menu". To do this we will use the following code
http://vk.com/pages?oid=-XXX&p=Page_Name
where instead of XXX we will substitute the id of our group, and instead of the text “Page Name” we will write Menu. Now we need to find out the group id. How to do it? Let's go to home page groups and look at our posts on the wall - right under the “Add post” block it will say “All posts” – click on this link.

Step 6. Determine the group id and edit the code
We go to the page and see a URL like this https://vk.com/wall-78320145?own=1, where the numbers 78320145 in this example are the group id. We substitute our data into source and we get a record like this:
http://vk.com/pages?oid=-78320145&p=Menu(with your numbers!). Paste this line into address bar browser and press Enter. This is how we created new page VKontakte and initially it looks like this.

Step 7. Create the remaining VKontakte navigation pages
In a similar way, we create four more navigation pages: Prices, How to order, Technical specifications and Questions. That is, we copy the corresponding code four more times into the address bar of the browser (with your id numbers in the example below, my numbers):

http://vk.com/pages?oid=-78320145&p=Prices

http://vk.com/pages?oid=-78320145&p=How_to order

http://vk.com/pages?oid=-78320145&p=Technical specifications

http://vk.com/pages?oid=-78320145&p=Questions
Please note that in the two-word page title (How to order), the space between the words is replaced by an underscore How_to order. Now we have five ready-made pages for each menu item. We did not create a Portfolio page because it is located on the Menu page

Step 8. Upload photos to the first page of the menu
On the created one, not yet blank page(see Step 6) Menu click on the Edit link or the Fill with content link. After this we see the editing panel. Here we need to click on the camera icon with the Upload photo function. Important! Please make sure that you are in wiki markup mode. Switching modes is regulated by the icon at the right edge of the page.

Step 9. Result after loading images
We load our pictures that we created in Step 1 and Step 2. After loading, we see the code as in the picture below, and the menu itself looks like this. After each code change, don’t forget to click Save Page, and then click Preview to view the result.

Step 10. Editing the image code
Now our task is to replace all noborder properties with the nopadding property. And put the first picture actual sizes, since VKontakte compressed the image to 400 pixels when uploading. After all the changes we should get the following code and menu.

Step 11. Add links to pictures
Now we need to put links for each picture. The link must be inserted after nopadding| instead of a space before the closing parentheses. For the first image (menu header from Step 1), you can give a link to the main page of the group, or you can use the nolink property (put through; after nopadding without spaces). For the second card, insert the address of the format page page-78320145_49821289. That is, the full URL of the image https://vk.com/page-78320145_49821289, the first part with the domain can be omitted. But for links to external sites, the URL of the link must be specified in full.

Step 12. Copy the code to the remaining navigation pages
That's enough simple step, we copy latest code from the previous step and paste it onto the remaining created pages - Prices, How to order, Terms of reference and Questions. We are on the page, click Edit or Fill with content (we are in wiki markup mode), paste the code and click Save. And then also on next page. That is, now we have five pages, on each of which the menu looks exactly the same. But you can already navigate through the menu - when you click on a link, for example Prices, we will be moved to the Prices page, etc.

Step 13. Making a pressed button effect
Now we have to change one picture on each of the five pages (replace the button without an underline with a button with an underline). For example, on the first page of the Menu we load a new image and then replace the address in the code old picture to a new one (underlined in red). Then go to the Prices page, upload a picture with underlined Prices and change the address in the code new picture. Then we go to the pages How to order, Terms of reference and Questions and do the same operation in the same way.

The final.
As a result, we got a navigation effect when you click on a menu link and it becomes active. But since the graphic design on all pages is almost the same, with the exception of active link, the illusion of navigation is created, although in fact it is moving to another page.

The menu designed in this way is not adapted to mobile devices. When the screen size decreases, the pictures begin to slide one under the other. In order to do adaptive design, you need to use tables for the hard version. But this is another story and a more advanced technique. In the meantime, look at various options graphic design of the menu.

Have you ever heard the statement that "you can't make a dynamic dropdown menu using just CSS in IE"? I'm sure so. So, do you actually believe this? That's right, better not believe it.

The goal we want to achieve in this article

The goal of this article is to make a dropdown menu for IE made entirely in CSS. Starting with this setting, I expanded the task to make such a menu work in other most famous browsers (approx. per.: from the comments it turns out that these browsers are Opera 7.x and latest versions Firefox).

The goal that we want to achieve in this article is, in principle, more or less general educational, i.e. give a general idea of some of the "hidden" and rarely used features of browsers.
Also, those who are especially curious can find in this article some tricks with which you can achieve certain non-standard results. Well, for developers, this article can become a reason for thought or a source of new ideas.

How do we imagine the level of the reader?

I was actually thinking about labeling this article as "advanced". But I am sure that even not the most experienced developers will understand well what is written in the article. In short, the reader simply must know the basics of CSS and
HTML.

How is this menu different from all others?

I spent a long time looking online for menus that were made in CSS, but I didn’t find a single solution that would work without glitches in IE. However, I found a lot interesting ideas, which led me to the result that will be described here. Yes, my code isn't perfect either, but I simply don't have the time to fix all the errors. The most interesting alternative solution of all the ones I've seen (that use CSS) is based on using the hover pseudo-class on LI elements. But I never thought that this was possible, nor did I think that it was even possible to make a drop-down menu for IE without scripts...

The main difference between mine and other menus is that mine runs in IE. All the solutions I've seen use the LI element as the main element for the :hover pseudo-class, however Microsoft has decided that this pseudo-class can only be used for
element A. Most sites make a disclaimer that their menus only work in Opera browsers 7.x or Mozilla. But these browsers are used by only five percent of users! Yes, such menus are good in these browsers, but unfortunately they cannot be visible in most of the most common browsers. Now we will correct this misunderstanding.

What is a menu made with just CSS?

This is a dynamic menu that is created using only CSS and no scripts (for example, written in JavaScript).

What, you can’t believe it?

Let's look at the code:

< STYLE type = text / css id = "default" title = "default" name = "default" >
*::- 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;

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 (

}

#moz(

}

#moz::-moz-cell-content(
height: auto; visibility: visible;
}

#other::-moz-cell-content(
height: 1px; visibility: hidden;
}

#holder (
width: 100%;
}

< TABLE id = holder >
< TR >
< TD id = "other" >
< DIV id = "menu" >
< DIV class= "menuitem" >
< a class= "a" href = "#" >File< BR >
< TABLE >
< TR >
< TD >< a href = #2>click me

< TR >
< TD >< a href = #3>Save

< TR >
< TD >< a href = #4>Close

< DIV class= "menuitem" >
< A class= "a" href = "#11" >Help< BR >
< TABLE >
< TR >
< TD >< a class= "disabled" >..

< TR >
< TD >< a href = #13>Index

< TR >
< TD >< a href = "#14" >About

< TR >
< TD id = "moz" >Mozilla specific menu!
< DIV id = "menu" >
< DIV class= "menuitem" >
< a class= "a" href = "#" >Filezilla
< TABLE >
< TR >
< TD >< a href = #2>Open

< TR >
< TD >< a href = #3>Save

< TR >
< TD >< a href = #4>Close

< DIV class= "menuitem" >
< A class= "a" href = "#11" >Helpzilla
< TABLE >
< TR >
< TD >< a class= "disabled" >..

< TR >
< TD >< a href = #13>Index

< TR >
< TD >< a href = "#14" >About

< BR >

What's going on, why is everything working?

Let me make a reservation right away that in this article I will not teach you using CSS. Therefore, we immediately move on to consider the principle of operation of the menu - to the pseudo-class ":hover". Yes, this is exactly the class. Those. a selector can inherit another selector that includes ":hover". In our case, "A:hover TABLE" selects "

V
element , which the mouse pointer is hovering over. The following is a trick with a table whose "display" property is set to "none" (that is, it is invisible). The table is located between the anchor tags ( ,). By according to Microsoft, this may cause IE to react inappropriately, but I didn't notice anything like that.

Why do we use a table? But because it very well separates the nested anchors that we want to use from the main anchor. This solution does not work in Mozilla 0.7 and even with using JavaScript I haven't found a way to implement this yet. Direct nesting of anchors is not allowed by Microsoft, so the table element is a kind of hack for IE. And, as far as I know, only tables allow you to “run” IE in this way.

So what do we have here? 2 tables with anchors inside anchors.

< A class= "a" href = "#11" >Help< BR >
< TABLE cellpadding = "0" cellspacing = "0" border = "0" >
< TR >
< TD >< a href = "#12" >Howto

< TR >
< TD >< a href = "#13" >Index

< TR >
< TD >< a href = "#14" >About

Which are hidden.

div #menu .a table (
display: none;
z - index :- 1 ;
}

The browser shows the contents of the anchor on mouseover and applies the appropriate styling when it does so:

div #menu .a:hover (
background : #7DA6EE;
border : 1px solid black ;
color: black; z-index: 0;
}

For the dropdown table that we use for the submenu: this is the key table, which is the dropdown list.

div #menu .a:hover table(
background:White;
display: block;
position: absolute;
width: 125px; z-index: 0;
border : 1px solid #708090;
}

For links inside submenus:

div #menu .a:hover table a (
display: block;
color: Black;
text - decoration : none ;

}

If we hover over one of the links in the submenu, the browser applies the following style:

For links inside submenus:

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;
}

Dropdown menu link style:

div #menu .a:hover table a (
display: block;
color: Black;
text - decoration : none ;
padding: 1px 12px; z-index: 1000;
}

You may have noticed that I used multiple "z-index" properties on some elements. They are hacks for some problems I found when testing the menu.

Improvements

To add sublevels to a dropdown menu, you simply need to insert another ".menuitem" div element (along with its content and similar structure) instead of a link in the parent table.
Now that you have sub-levels in the menu, you will need to remove the tags
to give the menu "normal check out". In addition to this, you will need to make multiple copies of the .menuitem and .a classes with the same properties, but different names for each submenu.
Yes, it looks like a lot of work, BUT you can simply add their selectors to the appropriate section of the style sheet.

Full description I'll do it next time on how to do it.
In the meantime, I’ll say that you can change this menu the way you want, adapt it to suit you. And there are endless possibilities for this - only your imagination can limit them...

Switching styles (Skins)

If you want to add skins for your menu with the ability to change them by the user, you will need to add additional tables styles and give them names with id="some_name" (for IE) and with name="some_name" (for other browsers). To prevent both styles from being applied, you need to disable all but the default styles by adding a "disabled" option to the tag's style (whether you link it or use linear syntax). Mozilla and Opera allow you to switch named styles from within the browser. Typically, these browsers do not apply all styles that are defined by name="..." and ignore id="...". They also know how to use name="default" as a default style sheet and name="alternate" as an alternative style sheet. You can define a style name that the user will see as the title="..." property. For example, the demo menu on this page includes the following definitions:

< STYLE type = text / css id = "alternate" title = "Blue" name = "alternate" disabled >
...< STYLE >
< STYLE type = text / css id = "default" title = "Default" name = "default" >
...< STYLE >

Pay attention to the naming order, I strongly recommend that you strictly follow it.

IE doesn't have built-in toggle CSS styles, so we’ll have to do it ourselves (not without using JavaScript):

Select one of the styles by clicking on the appropriate one and go back up to see
changes:

onclick = "document.styleSheets("default").disabled=false;document.styleSheets("alternate").disabled=true;"> Style
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

This is done like this:

< ul >
< li onclick = "document.styleSheets("default").disabled=false;
document.styleSheets("alternate").disabled=true;">
< a >Default

< li onclick = "document.styleSheets("alternate").disabled=false;
>
< a >Blue

< li onclick = "document.styleSheets("alternate").disabled=true;
document.styleSheets("default").disabled=true;">
< a >No Stylesheet

Warning! This is just a small example!
Reloading the page will reset the stylesheets to default. Therefore, for real purposes it is necessary to use cookies or server scripts in order to remember the user's choices, which again is not the subject of this article.
I will only add that the above code will only work in
I.E.

Conclusion

I advise everyone to use the menu on CSS based on your sites (and web applications), because this way you can avoid many of the problems that appear when using menus on JavaScript based. Such problems typically arise when events are handled incorrectly in IE. Moreover, some browsers have the ability to disable scripts, and even more so, many browsers do not support Microsoft JS.

If the browser does not support CSS, then it will at least display all links.

Known Bugs

By default, links in submenus do not work in Mozilla. But I found a more or less acceptable solution to this error. It is based on insertion special menu, again without using scripts. Look carefully at the places in the code where Mozilla (or "moz") is mentioned. You will see that the HTML sections do not have nested anchors (the last tag is placed where it should be). In the first part of CSS I use undocumented selectors - these are special selectors for Mozilla, and adding a selector:hover for those div elements, which are supported by Mozilla. And still, after this, the behavior remains not entirely correct.

There is a note in the comments (from Nick Young) that the menu does not work in Netscape. I'm sure the problem there is the same as in Mozilla. Have to search Additional information about it. The solution may require some changes because alternative code should work fine in Netscape as well.

Notes:

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

The first thing to clarify is that there is no such term officially. In general, a dynamic menu can be understood as a menu whose content changes while the user is working, depending on any external circumstances.

In this case we're talking about about a subject that, although falling under this vague formulation, is simpler and more prosaic. If the menu, as such, is characterized by dynamics (remember that installing a program leads to changes in it) and there is even a particularly changeable “Documents” menu, invented by Microsoft, then I propose to talk about how to organize a menu that contains exactly your data and changes you in the process of work.

With the release of Windows 95, Microsoft company made an attempt to shift the emphasis from system-programmer gizmos like “files” to ones that anyone can understand business person"documentation". To do this, the relationship between file types was strengthened and it was strongly encouraged to open them double click mouse directly over the document icon, and not from a pre-launched application. Well, this is not a new thing and, in principle, it is a more convenient thing than climbing disks in the “Open” window.

As a bait, the company placed a “Documents” item in the menu, designed to provide accelerated access to the most recently opened files. This innovation has already been criticized, let me remind you only of the main complaints: the system does a poor job of displaying exactly opened ones in the menu latest documents, the menu is littered, the documents are not organized and cannot be structured thematically, and finally, they are simply not all presented.

I tried ten times to modernize the "Documents" menu, but nothing particularly useful happened. I can offer another option. Imagine that in system menu at its first level there are one or several items that provide access to a submenu system corresponding to the division of documents into groups you have accepted (by topic, time, type, etc.), and the submenu contains all the document files at your disposal, their composition is updated as they are created or deleted, they are transferred from one menu to another, automatically following the movements of files on disk.

Normal option quick access, viewing and searching documents? Then keep in mind that implementing such a dynamic menu is as easy as shelling pears. You just need to place your working directories in the directory on the disk corresponding to the main menu. These are directories with live files, not shortcuts. Do this and you will immediately have access through the menu to each of the documents stored there.

But to make everything look tick-tock, you still have to tinker. Must be used long names, then your custom document menu will have a human look. This will require you to give up your favorite DOS cuttlefish like Docs, Doc1, etc. It’s okay, you need to get used to calling a spade a spade and forget about eight-letter underground nicknames.

You'll have to think about the names. As I already said, the number of nested directories should not exceed 3, well, a maximum of 4 levels. Their names should not be made too lengthy, as should the names of the documents contained in them. Otherwise, your menu will walk across the screen first from left to right, then bend back and forward again. You'll get tired of moving the mouse. Avoid duplicating words. If the directory and, accordingly, the submenu are called “Agreements”, then there is no need to call the documents included in it “Agreement No. 139-45 dated...”. It is quite obvious that this is an agreement, since it is in the folder with agreements. Also try, using a few words allocated by fate (or the width of the screen, if you prefer) to describe the document, to reflect its content. The number and date are excellent information, but it is unlikely that you will immediately remember what this document was about.

At the cost of additional effort, you can achieve agreement within the chain formed by the names of the submenu and the final document, cases, conjugations and other evil spirits. It is more pleasing to the eye and less tiring for you to read decently constructed phrases on the screen, rather than communicate with the computer in broken Russian, as with a representative of a foreign language. legal entity. For example, if the document is described by the expression “Agreement for 1996 for the lease of a warehouse at the railway station,” then you can draw up next chain menu: "Agreement" - "for 1996" - "on rent" - "warehouse at the railway station." Perhaps someone will be offended by the name of the file “warehouse at the railway station,” but taking into account the chain of directory names lining up in front of it, everything turns out correctly.

A dynamic system organized in this way custom menu there are also disadvantages. Firstly, the system does not always update the menu immediately after a new file gets there (an existing one is deleted). Apparently, somewhere in the labyrinths of multithreading and multitasking, the command about the need to refresh the menu gets stuck. It's a little annoying, but it doesn't happen very often, and after booting the machine, the menu will certainly correspond to what is written on the disk. (This does not mean that I call every time similar cases to reboot the machine, you can usually get by by re-reading the directory in Explorer using the key.) Secondly, it is not good to store your work files inside the Windows directory. You'll have to pull out the "Main Menu" folder from there and monitor it, as you should worry about safety user information- do backups, clear debris, etc. The third trouble is psychological in nature - at first it is very unusual to see your working directories not inside the root table of contents of the disk, but somewhere in the “Main Menu”. But it passes - you get used to it.

Hidden menu items

Another way to simplify the content of the menu and therefore increase the efficiency of its use is to hide part of it during normal operation.

IN Windows menu 95 is full of things that normal operation no need to use it. These include shortcuts from application uninstallation programs, various files Readme and other text information from manufacturers, registration programs and forms for submitting e-mail. This also includes utility utilities that you use only when the software starts to whine or behave suspiciously. To perform daily computer hygiene procedures, it is most convenient (and sufficient) to resort to the services of the automatic execution utility System Agent from set Plus, instead of running a disk scan and defragmentation manually. And if so, then there is no reason to constantly keep these programs on the menu.

However, you should not remove from the menu everything that is in this moment seemed unnecessary. For example, when uninstalling many applications, they turn to the Uninstall shortcut in the menu, and not to the program itself. God be their judge, but if you delete the shortcut, then you won’t be able to click the application in the usual way. There is also a simple and painless way to simplify the menu without throwing anything away.

In Windows 95, like in DOS, there is the concept of hidden files and directories. At regular work you do not see them on the screen because the system does not show those files and directories that have the "Hidden" checkbox selected. This flag is checked and reset in the file properties window. To see such objects, you need to go to the “View” / “Options” menu in “Explorer” and turn on the “Display all files” mode.

Try this. Without deleting anything, assemble in the system menu such a structure of nested levels and items that will suit you in your daily work. Make the rest of the filling hidden, marking it as individual shortcuts both files and entire directories and setting the appropriate attribute on them. It is better to do this in the display mode for all file types. After finishing the exercises, switch the display mode to normal, in which hidden files invisible, and look at the results of your labor.

If the menu has become simpler and more convenient, then you have succeeded in making changes to Windows interface 95 one more most useful setting. When you have to start tinkering with system problems (and this, alas, happens quite often), just turn on the display of all files in Explorer and you will have at your disposal full set menu items.

In principle, a similar approach can be used for the desktop, the contents of which are associated with the C:\Windows\Desktop folder. However, for the desktop, the system stores not only the shortcuts, but also the order in which they are placed (it is hidden in the depths of the configuration registry), so when switching the display mode on my machine, the system collected the icons in alphabetical order. Which, naturally, didn’t suit me. The problem of creating multiple desktop layouts can be solved, but it’s better in a different way.

The possibilities for arranging the menu and desktop in Windows 95 (unlike today's conversation) do not end there. Any user can find new approaches to optimizing the workplace if they take the time to experiment and try to use standard and well-known ones in a somewhat unconventional way. system tools from the Microsoft arsenal.

Roman Sabalenko

06.06.06 26.3K

Introduction

Have you ever heard the statement that “you can't make a dynamic dropdown menu using just CSS in IE”? I'm sure so. So, do you actually believe this? That's right, better not believe it.

The goal we want to achieve in this article

The goal of this article is to make a dropdown menu for IE made entirely in CSS. Starting with this setting, I expanded the task to make such a menu work in other most famous browsers (from the comments it turns out that these browsers are Opera 7.x and the latest versions of Firefox).

How do we imagine the level of the reader?

How is this menu different from all others?

I spent a long time looking online for menus that were made in CSS, but I didn’t find a single solution that would work without glitches in IE. However, I found many interesting ideas that led me to the result that will be described here. Yes, my code isn't perfect either, but I simply don't have the time to fix all the errors. The most interesting alternative solution I've seen (that uses CSS) is based on using the hover pseudo-class for LI elements. But I never thought that this was possible, just as I never thought that it was even possible to make a drop-down menu for IE without scripts...

The main difference between mine and other menus is that mine runs in IE. All the solutions I've seen use the LI element as the main element for the :hover pseudo-class, however Microsoft has decided that this pseudo-class can only be used for
element A. Most sites make a reservation that their menus only work in Opera 7.x or Mozilla browsers. But these browsers are used by only five percent of users! Yes, such menus are good in these browsers, but unfortunately they cannot be visible in most of the most common browsers. Now we will correct this misunderstanding.

What is a menu made with just CSS?

This is a dynamic menu that is created using only CSS and no scripts (for example, written in JavaScript).

What, you can’t believe it?

Let's look at the code:

Mozilla specific menu!

What's going on, why is everything working?

Let me make a reservation right away that in this article I will not teach you how to use CSS. Therefore, let’s immediately move on to consider the principle of operation of the menu - to the pseudo-class ‘:hover’. Yes, this is exactly the class. Those. a selector can inherit another selector that includes ':hover'. In our case, ‘A:hover TABLE’ selects ‘

V
element , which the mouse pointer is hovering over. The following is a trick with a table whose "display" property is set to "none" (that is, it is invisible). The table is located between the anchor tags ( ,). According to Microsoft, this may cause IE to react inappropriately, but I haven't noticed anything like that.

Why do we use a table? But because it very well separates the nested anchors that we want to use from the main anchor. This solution does not work in Mozilla 0.7 and even with JavaScript I have not yet found a way to implement this. Direct nesting of anchors is not allowed by Microsoft, so the table element is a kind of hack for IE. And, as far as I know, only tables allow you to “run” IE in this way.

So what do we have here? 2 tables with anchors inside anchors.

Help

Howto

Index

About

Which are hidden.

div#menu .a table ( display: none; z-index:-1; )

The browser shows the contents of the anchor on mouseover and applies the appropriate styling when it does so:

div#menu .a:hover ( background: #7DA6EE; border: 1px solid black; color: black;z-index:0; )

For the dropdown table that we use for the submenu: this is the key table, which is the dropdown list.

div#menu .a:hover table( background: White; display: block; position: absolute; width: 125px; z-index: 0; border: 1px solid #708090; )

For links inside submenus:

If we hover over one of the links in the submenu, the browser applies the following style:

For links inside submenus:

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)

Dropdown menu link style:

div#menu .a:hover table a ( display: block; color: Black; text-decoration: none; padding: 1px 12px; z-index:1000; )

You may have noticed that I used multiple 'z-index' properties on some elements. They are hacks for some problems I found when testing the menu.

Improvements

To add sublevels to a dropdown menu, you simply need to insert another div '.menuitem' element (along with its content and similar structure) instead of a link in the parent table.
Now that you have sub-levels in the menu, you will need to remove the tags
to give the menu "normal check out". In addition to this, you will need to make multiple copies of the .menuitem and .a classes with the same properties but different names for each submenu.
Yes, it looks like a lot of work, BUT you can simply add their selectors to the appropriate section of the style sheet.

I'll give a full description of how to do this next time.
In the meantime, I’ll say that you can change this menu the way you want, adapt it to suit you. And there are endless possibilities for this - only your imagination can limit them...

Switching styles (Skins)

If you want to add skins for your menu that can be changed by the user, you will need to add additional style sheets and name them with id=’some_name’ (for IE) and name=’some_name’ (for other browsers). To prevent both styles from being applied, you need to disable all but the default styles by adding a "disabled" option to the tag's style (whether you link it or use linear syntax). Mozilla and Opera allow you to switch named styles from within the browser. Typically, these browsers do not apply all styles that are defined by name="..." and ignore id="...". They also know how to use name=’default’ as a default style sheet and name=’alternate’ as an alternative style sheet. You can define a style name that the user will see as the title="..." property. For example, the demo menu on this page includes the following definitions: