Archive for the ‘Tutorial Release’ Category

7

Sep 10

How to position navigation bar?

For web designers, they would like to layout each element in website precisely. As an important element, navigation menu needs to be placed in the proper situation on the website. But how to place navigation bar on special location, how to make it align to other elements? Next, I will show you the ways to position navigation menu:

Position Menu in Web Page by Layer

http://www.sothink.com/tutorials/position-menu-in-web-page-by-layer-properly.htm


Position Menu in Web Page by Table

http://www.sothink.com/tutorials/position-menu-in-web-page-by-table-properly.htm

You can download Sothink DHTML Menu to try position javaScript menu on the webpage.

Posted in Tutorial Release | 2,584 Comments
Tags: , , ,

6

Sep 10

Insert DHTML menu into multiple pages at one time?

There are four ways to insert one DHTML menu into many pages.

First One:

If you have FrontPage, you can use the shared borders or include page function to do so. Please check work with shared borders.

Second One:

If you have Expression Web, you can use DWT (dynamic web template) to do so. Please check work with dynamic web template.

Third One:
If you use Dreamweaver, you can use the Library function to do so.
Please check work with library in Dreamweaver.

Fourth One:

Use the program alone to create a separate js include file. (Suggest you to use absolute path in links); and then insert the js file into the web page. Please check “Insert a Menu by Including Separate JS File“.

Posted in Tutorial Release | 2,546 Comments
Tags: , , , ,

3

Sep 10

Cross-frame Menu Samples and Tutorials

You are hosting the frameset website, a drop down menu is required to navigate the website; but the common DHTML menu are unable to popup its sub menu in another frame page. In this case, you need a special cross-frame menu to navigate your frameset website:

let’s check the cross-frame menu sample:

Highlight Frameset Menu

Two Cross-frame Menus in One Page

Highlight Cross-Frame Menu

All the cross-frame menus are made by Sothink DHTML Menu. If you are interested in building cross-frame menu, download this cross-frame menu builder to create your menu sample.

Posted in Tutorial Release | 1,821 Comments
Tags: , , , ,

2

Sep 10

Auto-generate DHTML Menu for Existing Web Site

Having set up a website, then you need a navigation menu that can be link to every page on the website. Build a drop down menu manually or generate a menu automatically? Obviously, generating menu automatically is a simple way to reach your needs.

Note: It would be better to use absolute link path in your page.

View visual tutorial to generate a navigation menu

Download Sothink DHTML Menu to build a web menu for the existing website.

Posted in Tutorial Release | 2,226 Comments
Tags: , , ,

28

Aug 10

Using HTML to Create Multi-Column Menu

To make a sub menu of multiple columns, you can use HTML in the text field. The content of the HTML code is actually a table with a couple of rows and columns.

How to create a sub menu of multiple columns? Follow the below steps to get:

Step 1: Create a table and define CSS

Create a table of multiple columns and multiple rows in Dreamweaver, and then define CSS between <head></head> for this web page. view what the web page looks like:

In this example, the included CSS is as follows:

<style type=”text/css”>

div{
text-align:left;
}
.popover-grouping {
font-size: 11px;
font-family: Tahoma, sans-serif;
margin-bottom: 0.7em;
}
.popover-grouping a, .popover-grouping a:active {
text-decoration: none;
line-height: 15px;
margin-left: .3em;
font-family: Tahoma, sans-serif;
}
.popover-grouping a:hover {
color:#CC6600;
text-decoration: underline;
background-color:#F5F5E6;
font-family: Tahoma, sans-serif;}
.popover-row {
margin-bottom: 0.2em;
font-size: 11px;
font-family: Tahoma, sans-serif;
}
.popover-row a, .popover-row a:active,.popover-row a:hover {
color:black;
text-decoration: none;
line-height: 0.82em;
margin-left: .3em;
font-family: Tahoma, sans-serif;
}
.popover-category-name{
color: #CC6600;
font-weight: bold;
font-family: Tahoma, sans-serif;}

</style>

Step 2: Copy table codes and paste them into application

Select the whole table in Dreamweaver, and then enter Code View to copy the highlighted codes.

Open PGT file in Sothink DHTML Menu, add a new menu item under the selected popup menu. Click this menu item, choose Menu Item > General on the Tasks Panel; check the option “HTML” in the properties panel, paste the highlighted code into the content box. Now, you can preview the result of menu item in the preview window.

Step 3: Publish the menu and insert the CSS

Follow “Publish > Publish JS” to publish your menu into the web page, and copy the defined CSS into the tag <head></head>. In this example, we copy the above CSS marked green and paste them to the HEAD part of the web page.

OK, you can get the sub menu of multiple columns exactly the same menu with above example.

Posted in Tutorial Release | 2,329 Comments
Tags: , , , ,

27

Aug 10

How to Create Adobe Menu?

We will create an adobe menu starting from built-in template from Sothink DHTML Menu, follow the steps to make the menu below:

  • Launch the program, template windows open, and you can choose menu “Simple > Underline “.

adobe-menu

  • In Menu Tree, click the button Adobe Menu - Popup Menu to select all popup menus; enter the Tasks Panel, select the option “Popup Menu > Border”, and set border as 0 in property panel below; Unselect the top-level menu, enter the “Popup Menu > General” to set displaying as vertically; Enter the option “Popup Menu > Popup Direction”, change the popup menu direction.
    adobe menu
  • Still in Menu Tree, click the button Adobe Menu - Separator to select all separators; right-click the selected separators to popup the context-menu, and choose “Delete” to delete all the separators.
  • Choose the top-level menu items shown on website, and set their background color as website background color. Enter the option “Menu Item > Background”, and set bg color as website color for mouse out and mouse over.
  • Choose 3-level menu items under the menu item “DHTML Software”, cut these menu items and paste them after “News” is selected, which makes them become 2-level menu items; move up & move down to adjust their position.
  • Pick up “DHTML Software”, enter “Menu Item > font” to set the text as bold.
  • Select “Sothink DHTML Menu”, enter “Menu Item > General” to modify the text and link.
    The basic steps to create adobe menu are over, you can download Sothink DHTML Menu to try building your ones, and attempt to find out more magic functions.

Posted in Tutorial Release | 2,206 Comments
Tags: , , , ,

26

Aug 10

How to create black menu with DHTML Menu builder?

Sothink DHTML Menu provides many well-designed black menus in built-in templates, which you can apply them directly. Let’s view these black menus:

Silver Black

Silver black menu will change into blue when the mouse is over on menu item.

Board

Black menu is on the top, and popup menu uses the irregular background image.

List

The menu contains multi-column list popup menus.

With Sothink DHTML Menu, you just edit background setting for menu item or popup menu. You can set the background as black, or insert the black image as background in panel below:

If you want to set black for each menu item, enter the “Menu Iitem > Background” property panel.

If you want to set black for popup menu or the 1-level menu, enter the “Popup Menu > Background” property panel.

Simple enough? Download Sothink DHTML Menu to experience this process and create black menu from the built-in templates.

Posted in Tutorial Release | 2,047 Comments
Tags: , , ,

18

Aug 10

How to Make Your JavaScript Menu Search Engine Friendly?

As you know, JavaScript menu have a crucial role in indexing of web sites by search spiders. Now JavaScript menu builder can generate Google XML Sitemap and search engine friendly code, which enable spider to crawl menu info including links and captions, and therefore all pages of your web site will be indexed by the search engines. Google XML Sitemap and search engine friendly code are available for crawling by the spider from Google, Bing, Yahoo and Ask.com to better index your website.

Generate Google XML Sitemap by JavaScript Menu Builder

After finishing JavaScript menu configuration in DHTML menu builder, you can check “Tools > Generate Google XML Sitemap…” to open dialog. And then input domain name and check the options to generate Google XML sitemap and save as XML files based on your JavaScript menu. Finally, submit this sitemap to Google, JavaScript menu’s link will be indexed and crawled much easier for the crawlers to see the complete structure of your site and retrieve it more efficiently.

Generate Search Engine Friendly Code by JavaScript Menu Builder

After finishing JavaScript menu configuration in DHTML menu builder, you can check “Tools > Generate Search Engine Friendly Code…” to open dialog. The codes which are friendly to search engine will be auto-generated, you can click the button “Copy All” to paste these codes between the tag of HTML. Your website will be crawled easily by spider and list in the top rank of searched result.

JavaScript menu itself cannot be indexed by search engines, it is well-known fact and main drawback of JavaScript menus. Now JavaScript menu builder can assist in making Google XML Sitemap and special search engine friendly codes for search engine.

Posted in Tutorial Release | 2,007 Comments
Tags: , , , ,

17

Aug 10

How to create tab menu?

Tab menu is a space-saving and good-looking navigation bar on the website, which makes browsing easier for visitors. The tab menu divides the information into several sections and distributes them in simple text and nice image, the URL linked to destination description with image will guide the visitors to the web page that most interests them with single click. Tab menu is usually shown as horizontal drop down menu at the top of the page or bars along the side, which is specially used for the website of complicated structure and extensive contents.

Create Tab Menu

• Choose “File > New > Horizontal Menu” to create a horizontal menu.

tab menu

• Enter “Global > Menu Type” and set the menu as “Tab Menu” in “Global – Menu Type” properties panel below.

tab menu 2

• Set width for tab menu. Click “Global > General” and set width as “10%” in “Global – General” properties panel below.

tab menu 3

• Set round-corner background for tab menu. Click “Menu Item > Background” and set round corner in “Menu Item – Background” properties panel below. You can click the button “Background Library” to apply the round corner background directly; also, you can click the button “Custom images” to customize the round-corner background.
Note: If installing Sothink DHTML Menu, you can get the background images at :/Program Files/SourceTec/Sothink DHTML Menu 9/images/Normal/

tab menu 4

• Modify the text and link for menu item. Modify the text and link for your website. Click the text on menu panel, select the option “Menu Item > General”, and edit the text and link in property panel below.

tab menu 5

• Add more menu items for this tab menu. Still in menu panel, select the “DHTML Menu” and click the left-side button “Insert Item After” to add menu items. The new items will inherit the properties of the menu item “DHTML Menu”.

navigation bar

That’s end, tab menu is finished. Download Sothink DHTML Menu to create your own one.

Posted in Tutorial Release | 2,534 Comments
Tags: , , ,

13

Aug 10

How to make your dynamic menu display properly over Flash?

Dynamic menu can popup menu depending on user interaction, you can move the mouse over the top menu item to view sub menu, or you can click the menu item to popup sub menu item. If your website includes dynamic menu and Flash, which Flash is beneath the menu, maybe you need set dynamic menu or Flash to get your wanted effects. Generally speaking, there are three displaying ways between dynamic menu and Flash: dynamic menu show under Flash; dynamic menu show, but flash hide; dynamic menu display over Flash. Displaying dynamic menu and Flash at the same time is the ideal result, let’s learn it:

The dynamic menu shows over the Flash, you can see both clearly. Let’s learn it now:

1. keep dynamic menu in original status.
2. Set Flash in Dreamweaver. Choose Flash, and click the button “Parameters…” in properties panel; in the open dialog, input “wmode” in parameter column, and enter “opaque” in value column.

View visual tutorial to get it clearly >>

Posted in Tutorial Release | 2,401 Comments
Tags: , , ,

« Older Entries
Newer Entries »