+38 093 287 35 14 media-guild@yandex.ua

Terms of Reference for the module


Functionality of the module

The machine (1 level) is divided into 9 parts – assembly units (2 level). Assembly units of the 2 levels are divided into smaller assembly units (level 3). Assembly units of 3 levels are divided into indivisible spare parts. In total there are 120 spare parts and assembly units in the car, for 3-4 iterations we can show them all.

On all pages, we use the same module. The level of nesting is displayed in breadcrumbs. Example of the first level page. Example of page 2 level.

1. Bread crumbs

2. Link tabs

There can be different numbers. The site administrator creates them, how much it need (1, 2, 3, etc.) There must be a special field (“+” or “Add”). In the field two items: the title and the address of the link. If this field is filled, a new tab-link will appear.

3. A drop-down list of sizes

Each line has several items-characteristics of the goods (located horizontally). The number of points is determined when creating a drop-down list. In this example, there are 6 characteristic points. To create a new line you need to fill in all the items-characteristics. Each line represents one link.

Also on click this list is closed.

4. Picture, hover-effect

On the hover there is the following effects:

Picture for 8 milliseconds, moving away, in the Block 5.


After the picture has moved to block 5, in the next 5 milliseconds it loses its transparency (opacity), and simultaneously moves towards those blocks (1,2,3,4,6,7,8,9), where assembly units appear. The movement does not go beyond the borders of the block. Assembly units do not necessarily appear in all blocks 1,2,3,4,6,7,8,9. If the administrator has not installed a picture in the block, then the block remains empty.

In blocks 1,2,3,4,6,7,8,9, the picture appears on the side of block 5, this effect takes 4 milliseconds, at the same time the opasity value changes from 0 to 100.

At the same time the picture in the block 5 changes the effect of the mixer (flow) to another picture.

The final visual effect is as if the detail moved to block 5 and dispersed into its component parts.

The speed of the effect in milliseconds will be specified later, when we see how everything works.

Each block (1,2,3,4,5,6,7,8,9) is a link.

When you hover over a block, in the upper right corner a tooltip appears

5. Block of prices and purchases.

Contains three fixed fields – “buy”, “to compare” and the extreme values ​​of the number (from and to), set by the administrator. If this block is not filled, it remains hidden. The functions of the buttons “buy” and “for comparison” will be done later, by a separate stage of work.

6. Information tabs

Two tabs, one is the number, the other is text.