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.

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.

  

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.

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.

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

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

Create navigation tree menu with Sothink Tree Menu on Window 7, you can:

• Generate cross-browser tree menu. (Support IE 9 Beta, Google Chrome, FireFox 3, Opera 9.5 and Safari 3.1!)
• Get SE friendly JavaScript Tree menu.
• Create database tree menu with ASP, PHP and JSP.
• Build functional tree menus, including sound tree menu, highlight menu tree and control tree menu by external text or image.
• Apply preset special effect to your tree menu.
• Fully customize the tree menu style, like font, icon, button, background, line, border, cursor, tool tip, etc.
• Edit tree menu in HTML editors directly.

View all features about tree menu builder >>

Download Sothink Tree Menu to build navigation tree menu on Windows 7, and view this menu tree in IE 9 Beta.

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

]]> http://www.dhtml-menu-builder.com/blog/how-does-tree-menu-display-properly-on-ipad-websites/feed/ 0