How to create a dynamic menu on VKontakte with a navigation effect. Dynamic user menus

/* Sizes for the smaller menu */ header.small( height: 50px; ) header.small img( width: 287px; height: 69px; margin-top: -10px; ) header.small li( margin-top: 17px; )

So as you can see, these styles are almost identical to those in the larger menu, we just changed the class “large” to “small” and changed the values ​​we used to smaller ones. We use negative margin tops on the image to centralize it in the container since the image has a thin shadow and is taller than the writing to accommodate it. Now we have all the necessary styles to customize the resize menu, and if you try to change it in your , you will see in the browser that the menu will become smaller. But we need it to be dynamic.

Changing a Menu Class Using jQuery

With all our styling in place, we just need to add some JavaScript to switch between the "large" and "small" classes. Since we want to change this based on user scrolling, we will use the .ScrollTop() function in jQuery. This function will allow us to get or set the scroll position in pixels. The scroll position is the number of pixels that have already been scrolled in the browser window. In this case, we just need to know how many pixels the user scrolled so we can call our code and switch between classes:

$(document).on("scroll",function())( if($(document).scrollTop()>100)( $("header").removeClass("large").addClass("small"); ) else( $("header").removeClass("small").addClass("large"); ) ));

If the user has scrolled more than 100 pixels, then the "large" class we created will be removed and our new "small" class will be added. This way the menu will resize as we previously defined in the CSS. Give it a try, it should be working by now, but you may have noticed that the transitions between classes seem very abrupt.

CSS transitions for menu animation

In order to smoothly switch between classes in our menu, we will use CSS transitions. Just use this piece of code next to the rest of your CSS.

Header,nav, a, img, li( transition: all 1s; -moz-transition: all 1s; /* Firefox 4 */ -webkit-transition: all 1s; /* Safari and Chrome */ -o-transition: all 1s; /* Opera */ )

Here we have defined transitions for all CSS properties for. And

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).

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 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:

< 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 how to use 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 "

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.

< 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 within 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 within 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.

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 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 CSS style switching, 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 encourage everyone to use CSS-based menus on your websites (and web applications) because this way you can avoid many of the problems that come with using JavaScript-based menus. 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 doesn't support CSS, it will at least render 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 inserting a special menu, again without the use of 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 the CSS, I use undocumented selectors - these are Mozilla-specific selectors, and add a:hover selector for those div elements that 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. We need to look for more information about this. The solution may require some modifications because the alternative code should work fine in Netscape.

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 earlier versions of the specified browsers.

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 ordinary 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 a tricky trick, which, in fact, will create 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, etc. in the header graphic pictures. 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. A larger number of points 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) should be the 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 title of the two-word page (How to order), the space between the words is replaced with 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 images
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 the last 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 the 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 of the old image in the code with 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 the active link, the illusion of navigation is created, although in fact it is a transition 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.