Detailed explanation on the creation of a drop-down menu in Dreamweaver, in which placing the mouse on the different options shows some layers with secondary options.
Many times, our pages have so much content that if we wanted all of them to appear in a certain place on our page, in a menu, this would cover almost the entire space we have for our website. In these cases it is very useful to insert one or more of these drop-down menus, appearing above the content of the page itself to show all its parts and disappearing later.
Throughout this article we are going to develop how to create one of these menus with DreamWeaver in a generic way so that everyone can expand it to their liking.
First of all, we have to know that this menu is built almost entirely by layers, to which we will attribute specific behaviors so that they appear and disappear as we like.
Another thing that we must take into account is the condition of absolute layer or relative layer, since absolute layers have to be given positioning coordinates based on the upper left corner of our website, coordinates that are of no use to us. in the event that our page has the content centered, since the position in which it will appear will depend on the configuration of the monitor from which said page is viewed.
The first step we have to take is to mentally develop an outline of the menu that we want to make, or better, on paper. We have decided to make a main menu made up of 5 parts in a horizontal position, for which we will create a table with 5 cells and give each of them a certain pixel size, in our case 100px – 20px. Next we will click on the layer icon and draw one anywhere, then we will drag the layer symbol (which determines the place where the program will insert the line of HTML code, which by default it will create inside the “Body” tag) inside one of the cells of the table that we have generated and then we will modify in the properties window, the fields “Iz” (left) and “Sup” (upper) leaving them blank, when doing this the program hooks the layer in the upper left corner of the container in which it is located, in this case, the cell in which we have inserted the layer. Then we will give a value to the “An” (width) and “Al” (height) fields. In the example we are creating they will be 100px and 20px respectively, we have to repeat this step for each of the 5 cells (in our case ), of which our main menu is made up.
Once this step is finished, we will proceed to create other layers within the ones that we have already established. We will have to give these layers some size values depending on the different parts that we want to introduce dependent on each menu (we will give 100px – 80px in the first dropdown, 100px – 140px in the second, 100px – 100px in the third, 100px – 80px in the fourth and 100px – 140px in the fifth). To place one layer inside another we can do it: 1st, dragging this new layer inside the previous one as we have done before, or 2nd, pressing the F2 key, the “layers” window will appear where we can see a scheme of the layers that we have in our web, taking one of the layers that appear and dragging it on top of another while we press the “ctrl” key, we will introduce the dragged layer inside the one we have selected.
These sublayers that we have created, which depend on the main ones, by default have the “default” property that leaves the layer visible at all times and it is good for us to work with, but before giving them a behavior, when we have completely finished the structure of our menu, we must change this “default” tribute of the secondary layers (those found within the 5 main layers) to “hidden”, which makes them invisible, giving us the possibility of working with the behaviors making them appear and disappear to our liking.
Within these secondary layers we will introduce tables with the number of cells that we have calculated with the size of each layer. Once this is done in all the layers we should place the images or the words of our menu to be able to configure the behaviors, since if we do not place anything inside the layers, they will not be seen when they appear or disappear because they are transparent. Another solution is to give them a background color.
The last step to finish our menu will be to give each layer a behavior. For that we need the behavior window that, if we don’t already have it in view, pressing the F3 key will bring it up. To be able to play with the behaviors of “show or hide layer” we must work with a link (these links will be the images that we have placed inside the cells and, failing that, the words, to make this link we will enter the space reserved for the links from the properties window the “#” symbol, thus creating a blank link, then we will press the created link (the link symbol “” will appear in bold at the bottom of the main page) then we will go to the behavior window and press the symbol “+” and we will click on “Show – Hide layers” and a window will appear with a list of all the layers that we have created, what we have to do is press the layer that should be displayed when we pass the mouse over the link that we are modifying and press the “Show” button and the other layers click and hide them in the same way that we have done before but in this case pressing the button “Disguise”.
We will repeat this step for each of the five main links from which the corresponding submenus will be displayed.
Facebook Comments
Disqus