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.

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.

The initial vertical position of a floating menu is often lower on the page than it needs to be when the page is scrolled. On this site, for example, the initial “Y” coordinate is 140 pixels below the top of the page in order to leave room for the page header. However, as the page is scrolled, the menu would look funny if it were a third of the way down the page, so, when the page is scrolled, the menu is only 10 pixels below the top of the page.

Here is how to change the initial “Y” coordinate from 140 pixels to 10 pixels when the page is scrolled:

1. Select the first menu item in the Menu Tree (the item just below <Top-level Menu>) and select Condition under Menu Item Settings.

2. Enter the following code in the Prefix window:

var myitem=

3. Enter the following code in the Suffix window:

myitem.oParMenu.iY=”Math.max(140,stgct()+10)”

In the code you enter in the Suffix window, be sure to change “140” to the initial Y coordinate of your floating menu.

The tutorial is from the warm-hearted DHTML Menu users

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 »

The tree menu has guide line to show the node’s hierarchy by default. If you dislike these guide lines showing in the tree menu, you can uncheck the option to delete them. Please click Global Seetings > Line on the tasks panel, and property panel in the bottom pops up, you will see the option “Show lines” checked. The tree menu is deleted the guide lines in the preview window immediately by unchecking this option.

–To get rid of the border of the main menu, please choose in Menu Tree panel, choose “Popup Menu > Border” in tasks panel, and set the Border Width as “0”.
To get rid of the border of the sub menu, please first select the menu item which has the sub menu in Menu Tree panel, choose “Popup Menu > Border” in tasks panel, and set the Border Width as “0”.
To get rid of the border of each menu item, please first select the menu item in Menu Tree panel, choose “Menu Item > Border” in tasks panel, and set the Border Width as “0”.

Apple’s iPad leads us into the better user experience, which provides us more ways to view websites, and the smart fluid width design can be landscape or portrait mode, which gives the visitors two completely different layouts of website. But now, the desktop computer is not compatible with iPad because of the different dimensions. For iPad web design, should we design two types of navigation tree menu for iPad websites? Of course you not, Sothink Tree Menu enables you to create the magic tree menu to match with iPad web page.

Navigation tree menu in iPad websites can quickly guide visitors to the target iPad web page, which is special used for iPad web design of large-scale directory. The collapsible tree menu is cross-browser, fast loading and SE friendly tree menu. And seamless integrations with HTML editors will enable you to add tree menu to iPad web page never so easy.

Using Sothink Tree Menu, let’s start building deep blue tree menu as below now:

1. Start With Built-in Templates from Tree Menu Builder

Launch Sothink Tree Menu, template windows opens; and choose tree menu “Deep Blue” under the category “Business”.



2. Modify the text and link for tree menu and apply it into your iPad websites

Modify the text and link to make the tree menu server for your iPad websites. Click the text on Tree panel, select the option “Node Settings > General”, and edit the text and link in below property panel.



3. Set web path to make iPad tree menu work in local or Internet

Set web path to save JavaScript and image files to the defined directory, which makes sure the tree menu display correctly. You can enter the “Global Settings > Web Path” to set directory.



4. Publish the iPad tree menu to make it display on iPad websites

Publish the resource files, menu code or JavaScript menu code to the specific folder, and insert two pieces of code to the tag “head” and “body” within iPad web page. You can preview menu locally; upload all the resource files to web server, you can view tree menu on Internet.

Check the button Publish Tree Menuon the toolbar to publish your iPad tree menu.

Finish the above steps; your tree menu has been displayed on the iPad websites. Is iPad tree menu perfectly displayed on iPad websites of the fluid design? Hope you like it.

View More iPad Tree Menu Samples:

http://www.sothink.com/product/treemenu/ipad/index.htm