Web Designer Blog

Auto highlight node to show where the user is on the web site. Sothink Tree Menu can automatically display the highlighted node linking to the current page in the browsers.

Introduction:

In the above tree menu, you can see that the node “Overview” is highlighted by menu font and bold style. That is because, through the analysis of tree menu, the link URL of node “Overview” is the same with “index.htm” you are visiting.

Steps:

Click Global Settings > Highlight in Tasks panel and check “Auto highlight current node” option.
The highlighted node is the same as the selected node of mouse out state when the highlight function takes efect; the highlighted node is the same as selected node of mouse over state when the mouse moves over highlighted node.

Step1. Follow the visual tutorial.

http://www.sothink.com/tutorials/how-to-create-dynamic-tree-menu-with-created-recordset-from-dreamweaver.htm

Step2.

Launch Sothink Tree Menu. Create a new menu item and Input ”

<%=sCatName%>

” in it.

Enter “Node Setting > Condition” and input the following codes in Prefix:
/*
<%
While Not Recordset1.EOF
sCatName=Recordset1.Fields.Item(“NAME”).Value
%>
*/

Then input the following codes in Suffix:

/*
<%
RecordSet1.MoveNext
Wend
%>
*/

Step3.

Create a sub item for this menu item, then input ”

<%=sProduct%>

” in it and input

<%=sLink%>

in link field.

Enter “Node Setting > Condition” and input the following codes in Prefix:
/*
<%
Recordset2.Filter = “CATID=” & Recordset1.Fields.Item(“ID”).Value
While Not RecordSet2.EOF
sProduct=Recordset2.Fields.Item(“NAME”).Value
sLink=Recordset2.Fields.Item(“LINK”).Value
%>
*/

Then input the following codes in Suffix:
/*
<%
RecordSet2.MoveNext
Wend
%>

*/
Step4.

Enter “Global Setting > Web Path” to set the webpath as below:

Script path:

http;//localhost/js

Image path:

http;//localhost/image
Step5.

Publish the menu to the ASP page we have just created in step1.

Now you have successfully use the created recordset from DW with Tree Menu.

JavaScript tree menu will be the best guide for website of a complicated directory structure. You can see such navigation tree menus on many large-scale websites, such as shopping and knowledge website. This type of tree menu has the features of clear navigation, unlimited level of tree menu, smart recording function and SE-friendly; that is the reason why tree menu becomes popular.

Now, you have decided to insert menu tree into webpage to navigate your website. Next, let’s think about how to make tree menu quickly? Create a navigation bar by CSS or HTML code? No, Sothink Tree Menu will be the ideal tree menu builder to create JavaScript tree menu because there is no coding and professional skills needed.

Build the professional menu tree as below in 3 steps:

Step 1: Start tree menu from free built-in templates.

Launch Sothink Tree Menu, choose “Business > Flip” from Startup window.

Step 2: Set properties for each menu items

• Choose menu item in Tree panel;

  

• Enter Tasks panel to choose required items;

  

• Set properties for the selected menu item in properties panel, such as text content modification, link, and item size.

  

Step 3: Publish menu tree to webpage

• Check “Publish” button on the toolbar to publish your tree menu.

  

• Choose right publish method to insert web menu to webpage step by step.

  

For website, navigation tree menu maybe keep the same menu link and menu text for long time.  Is it tedious? No, web designer won’t make it come true. The experienced designers can apply diverse styles to make tree menu attractive and stunning.  Almost all elements in tree menu can be customized, and become the spotlight to beautify the website.

The tree menu will present a new look even a tiny element is modified, which brings exciting to website. With Sothink Tree Menu, the beginners can customize the styles in intuitive interface with ease; it provides image library of various types to design menu tree style; and the outside files can be imported to tree menu to form your own style.

Let’s compare some tree menus, and view the magic about tree menu style:

1. Set size to get another tree menu, which is completely different menu tree.
   (Enter “Global Settings > General” to set width and height for the whole tree menu)
   
2. Set properties for tree menu and its items to build a totally different web menu, these properties include background, color, font, etc.
   (Select node in  Tree panel, and enter  “Node Settings > Font” or “Node Settings  > Background” panel to set their properties.)
   
3. Add graphics to customize button, line, arrow and cursor images.
   (Select node or sub-tree; enter the related option in “Global Settings” panel to set image properties.)

   

4. Disable some nodes in tree menu, which needs to be changed from time to time.
   (Check the selected nodes, and enter   “Node Settings > Advanced” to set this function)

   

5. Tree menu expands its sub-tree with dynamic and visual effect after mouse interacts with menu tree, which gives the visitors deep impression. The program presets the various effects for showing or hiding sub-tree respectively, effect speed can be set too.

View more tree menu samples to get inspiration; download tree menu builder to DIY your tree menu with customizable menu style.

User-friendly navigation tree menu is one of the most important aspects of web site design, and also one of the most challenging. Using navigation tree builder, any novice web developer can put together a 100-page web site, but organizing those 100 pages into easily-navigable as if seasoned designers.

Web designers have no shortage of choices when it comes to choosing a navigation tree for a site. For example, floating JavaScript menu, highlight menu tree, accordion menus, and a number of other creative solutions can be found. With Sothink Tree Menu, web designers can build navigation tree menus from free menu templates & image library, and customize menu tree style as you like. The various menu templates can significantly reduce the time spent on making a navigation tree for a Web site, and also give the designer a choice of many different options so that to choose the one most appropriate for the requirements at hand.

Besides above general navigation tree menus, Sothink Tree Menu can create a special navigation tree menu, which enables to hide some nodes from showing up in the navigation tree. There are two reasons why need such navigation tree on webpage:

1. Insert the same navigation tree menu for the whole website, but display different menu contents for the various pages.
2. Reserve or restore the node for special purposes, such as product promotion, festival special.

The below navigation tree menu will get you a clear cognition.

How to create navigation tree that some nodes are disabled?

It is easy to make such a disable node navigation tree menu if you are using Sothink Tree Menu to edit menu tree. In this menu tree builder, just pick up the nodes that need to be disabled, and enter the tasks panel to click “Advanced” option, and check “Disable node(s)” on below properties panel.

In the program, you will get navigation bar like this:

Whenever you can restore the navigation tree menu only uncheck the “Disable node(s)”. The disable nodes are visible in authoring file; it won’t be displayed on browser.

With Sothink Tree menu 3.0 release, add 14 free menu templates in the program. Below will show 5 favorite menu samples:

Sothink Tree Menu releases its new version 3.0 recently, which supports Windows 7 and IE 9 Beta. As quality seekers, maybe the web designers need to create tree menu on Windows 7, and viewers the same with you, they would like to enjoy navigation tree menu in IE 9 Beta. Sothink Tree Menu enables you create DHTML tree menu on Windows 7, and generate the web menu compatible with IE 9 Beta. What’s more, this tree menu builder provides 50+ free tree menu templates to match with various website styles; versatile image library available; fully customize menu style. Seamlessly integrate with DW, FP and EW.

First at all, check out stunning tree menu samples in IE 9 Beta:

Read on »

Step1. Follow the visual tutorial.

Step2. Launch Sothink Tree Menu. Create a new menu item and Input ”

<%=sCatName%> in it.

Enter “Node Setting > Condition” and input the following codes in Prefix:

/*
<%
While Not Recordset1.EOF
sCatName=Recordset1.Fields.Item(“NAME”).Value
%>
*/

Then input the following codes in Suffix:
/*
<%
RecordSet1.MoveNext
Wend
%>
*/

Read on »

This feature is designed for CGI (ASP, PHP, JSP, Perl, etc.) programmers who want to create dynamic tree menus. Otherwise please keep this option checked (the default setting).

When you choose “Encode special characters” option, the program will encode some special HTML characters or symbols:

Read on »

Click File in menu bar and select Report to know the detail information about your menu. The menu information  are divided into two parts in report dialog. One is menu size, it lists the size of each element and lists total size of the whole tree menu too; the other is download time, it shows different download time according to different modems. These modems include Modem (28k), Modem (56k), ISDN ( 128K), ADSL (512K), and T1 (1.544M).