Tip 1: How to make a drop down menu html

When creating a menu site can face the problem of limited space and the need to save space and avoid piling up too much information.All this is conveniently solved by elements that are hidden when not needed.If you want to avoid the use of scripts, you can create a menu by means of html and css.
Guide
1
Make menu, determine its structure.Place items in a convenient manner for future users.Think of clear and literate section name.Identify items that need to be dropping out, and sub-paragraphs that are in these drop-down lists.
2
Arrange invented structure using html-tags.It will look like the following: & lt; div id = "vmenu" & gt;& lt; ul & gt;& lt; li & gt; &
lt; a href = "#" & gt; Reference 1. & lt; / a & gt; & lt; / li & gt;& lt; li & gt; & lt; a href = "#" & gt; Reference 2. & lt; / a & gt;& lt; ul & gt;& lt; li & gt; & lt; a href = "#" & gt; Item 2.1. & lt; / a & gt; & lt; / li & gt;& lt; li & gt; & lt; a href = "#" & gt; Item 2.2. & lt; / a & gt; & lt; / li & gt;& lt; li & gt; & lt; a href = "#" & gt; Item 2.3. & lt; / a & gt; & lt; / li & gt;& lt; / ul & gt; & lt; / li & gt;& lt; li & gt; & lt; a href = "#" & gt; Reference 3. & lt; / a & gt;& lt; ul & gt; & lt; li & gt; & lt; a href = "#" & gt; Item 3.1. & lt; / a & gt; & lt; / li & gt;& lt; li & gt; & lt; a href = "#" & gt; Item 3.2. & lt; / a & gt; & lt; / li & gt;& lt; li & gt; & lt; a href = "#" & gt; Item 3.3. & lt; / a & gt; & lt; / li & gt;& lt; li & gt; & lt; a href = "#" & gt; Item 3.4. & lt; / a & gt; & lt; / li & gt; & lt; / ul & gt;& lt; / li & gt; & lt; / ul & gt;& lt; / div & gt;
3
Put all the menus in the block & lt; div & gt ;.Ask identifier id, which will continue to be assigned only to this particular unit without affecting the others.Fill in the name of a certain identity, properties, for which the title in the following steps.
4
Create lists, where & lt; ul & gt;- The list itself, and & lt; li & gt;- Each of its lines.Add to all future ssylkok which should create a drop-down menu, a list of sub-items.Turn menu names in links, put them in the tag & lt; a & gt ;.Give him href parameter address of the page on which the link will point.
5
Set list properties through css, making them in css-file: #vmenu ul {margin: 0px;padding: 0px;list-style: none;width: 250px;}.Ask zero padding padding - padding inside and margin - padding outside the item list.Specify the list-style - the style of bullet, the default dots which, when set to none removed.Enter the width of the list width.
6
Add the element properties list: #vmenu ul li {position: relative;}.Specify the position, ie the elements position.Give it a relative value relative, to determine the location of the pop-up menu relative to the original.Create a menu will be vertical.
7
Specify properties for the list in the element of another list: #vmenu li ul {position: absolute;left: 250px;top: 0;display: none;}.Assign the value of the parameter ranking position absolute, absolute positioning to relative submenu item.Set the location using the indentation space to the left and top left top.Determine the setting display element as a display none, because the original drop-down list should not be visible.
8
Make settings for links: #vmenu ul li a {display: block;padding: 5px;text-decoration: none;color: # 606060;background: # d8d8d8;}.Set the parameter value display display block, make an element block.He also visible and behaves like a block.Indent padding, the color of the link text color, background color reference background, links style text-decoration.A value of none removes the underscore by default.
9
Ask effect hover: #vmenu li: hover ul {display: block;}.Point out that when you move the cursor to the list li, a list ul, located in it, becomes visible.
10
Add optional parameters of color or image for the background, horizontal lines, font references, and other properties that define the appearance of the menu.

Tip 2: How to make a vertical drop down menu

Vertical drop down menu very comfortable - it saves space on the Web page at the same time makes it easy to navigate the site.Try to make a drop-down menu based CSS - Cascading Style Sheets.If you are not yet an expert in the creation of a code CSS, we use the service purecssmenu.com.You are required to select the type of menu , customize its appearance, and then adapt to their own site.Service will generate the necessary code, which you then insert into the files of your site.
How to make a vertical drop down menu
Guide
1
Register online purecssmenu.com, otherwise not be able to download a menu created .Click Templates in the left side of the page.Below you will see several small windows with templates dropdown menu , clicking on which will load the preview window on the right in Preview.Select a template that is appropriate for your site.
2
Adjust the font and color of the menu : to use the tab Parameters.Under Font, select the font, font size, if necessary - underscore (underline) and Bold (bold).In the Colors menu to adjust the background (background), the color of the font (font), and the color of the font (font hover) and background color (background hover) when the cursor.
3
tab Items, to control menu items .If you click the basket Clear, examples of items will be cleared and you can create your own.To do this, press the plus Add Item - item will be added to the end of the menu .Add Item Next button is used to add the item following the currently selected time.Button Add Subitem creates a nested menu item for the dedicated.Accordingly, in order to remove any item, use the Remove Item.
4
Note box Item Parameters (parameters points) at the bottom of the site.The Text is enter the name of the menu item , in line Link - url of the page that will guide this item.Line Tip You can leave a description of the item to be displayed when you hover over the link.Target Line is designed to determine how to open the page on which the link leads._self Option in this line opens the page in the same browser window as the current.
5
finished setting menu , download it - click the Download button at the bottom right of the page (available after registration).Select a folder on your hard drive where the file will be saved archive.Unzip it.The desired code file purecssmenu.html you will need to copy the file to your site's CSS templates.Purecssmenu.html Open with a text editor and copy the code enclosed between the tags & lt; style & gt;and & lt; / style & gt ;, with CSS template your site (this file has the extension .css and looks like file.css).Now, insert the code in the template file of the site (theme) - the code between the comments of purecssmenu.html & lt;! - Start PureCSSMenu.com menu - & gt;and & lt;! - End PureCSSMenu.com menu - & gt;code instead of the usual menu .To do this, you need at least a few guided programming.Make sure that the code is inserted in the target file, and save it.
Note
reconfigures items from your site admin, you can not.To change something, you have to re-convert the menu when purecssmenu.com.
Sources:
  • joomla vertical pull-down menu
Note
This method of solution, alas, does not work for older versions in Internet Explorer.
Sources:
  • drop-down menus in HTML and CSS
  • how to create a menu in html

0
0