Five minutes to quickly make CSS navigation menu

css| Menu | navigation

With the concept of Web page standardization popular, more and more websites adopt CSS architecture. CSS Architecture Web pages are not only consistent with the standards of the consortium, but also very attractive. Standardized web pages start with a nice CSS menu.

As we all know, CSS menus are a piece of code, a piece of code to write out, create a beautiful menu, today to introduce a small software: CSS Tab designer!

　　Click here to download the small software (1.35M)

CSS Tab Designer is a use of CSS to design navigation menu of the visual software, software built in more than 60 different styles of style, just modify the ready-made style template, you can quickly generate CSS menus. It is particularly worth mentioning that the software generated XHTML code strictly follow the Web standards, the creation of CSS menus compatible with a variety of mainstream browsers, whether it is the system's own Internet Explorer, or Firefox, Opera, Netscape will not have problems.

CSS Tab Designer operation is simple, the main interface is a three-column layout: items, styles (Tab Styles), preview (Preview) in turn, almost all operations in the main interface, as shown.

The procedure for creating a new menu is very simple, in the "Style (tab Styles)" prefabricated more than 60 different styles of menu styles, first select the desired style, then click on the left "items" in the "Fill with samples", immediately on the "preview" ( Preview) "To see the effect, the menu even if generated.

Of course, the menu items in the Software built-in style template are all in English, not for Chinese users, and we need to make some changes. The current menu item appears in the items on the left side of the main window, and the Project toolbar arranges multiple buttons, from left to right: adding multiple items (add multiple items), adding items (add Item), deleting items (delete item), moving up (move Up, moving down, edit Select item (Edit Selected item), as shown in figure.

Double-click any current item to enter the Edit dialog box, we modify the original English for the required Chinese can, as shown.

When you have finished modifying everything, you can see the effect in the preview area. At this point, we found that the text on the menu is not expected to appear in Chinese, but some garbled, this is why? As pictured.

CSS Tab Designer is an English software, preset code is for the English Department page, so we need to manually modify the code for Chinese. Since the software itself does not have the code editing function, we will make changes after the CSS menu page file is generated.

When the preview of the face garbled or not very good, you can be in the preview area in the blank to right-click, in the Right button menu to choose "encoding → Simplified Chinese (gb2312)", the preview effect is back to normal, as shown.

Unconsciously, the CSS menu is done, and then the output file. Click on the "Create HTML (Generate HTML)" button on the Software toolbar and the system goes to the Save dialog box. In this example: Select Save folder: D:\web, enter filename: menu, click the "Save" button to complete.

As has been said before, the software default generated Web page encoding is the English department, next, we began to do coding modification work.

Entering the D:\web directory, you can generally see two files:

menu.html, generated CSS menu page.

MENU1.GIF,CSS menu calls related pictures, in fact, the file name may be slightly different.

You can use any text editor to open the menu.html file, the author used the system from the "notepad", open the file, find the following:

<meta http-equiv= "Content-type" content= "text/html; Charset=iso-8859-1 "/>

CSS TAB Designer The default encoding for the generated file is "Iso-8859-1", which is modified to Chinese encoding "gb2312", as shown in figure:

<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>

So simple, save the change results, open menu.html again to see how, how, there is no garbled it!