Posts Tagged ‘navigation 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:

tree menu samples

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

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

JavaScript Tree Menu - Menu Templates

Step 2: Set properties for each menu items

  • Choose menu item in Tree panel;

    JavaScript Tree Menu - Tree Panel

  • Enter Tasks panel to choose required items;

    JavaScript Tree Menu - Tasks Panel

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

    JavaScript Tree Menu - Property Panel

Step 3: Publish menu tree to webpage

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

    JavaScript Tree Menu - Publish Button

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

    JavaScript Tree Menu - Publish Wizard

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)
    Tree Menu Size
  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.)
    Tree Menu Style
  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.)

    Customize Tree Menu

  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)

    Disable Tree Menu

  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.

navigation-treeHow 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.

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

Sothink Tree Menu

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.

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 »

Tree Menu can be controlled fully on webpage by interaction with mouse event. Click the text or image on page, you will see the tree menu expanding or collapsing its sub-menu. View the tree menu sample below to experience it:

Sothink Tree Menu

How to create JavaScript tree menu like this?

Steps to control the expanding or collapsing of the menu-tree in above sample:

1. Create an HTML page, and insert the tree menu into it.

2. Select the “Root” in the Tree panel, and then get the codes for expanding or collapsing the sub-tree from Global Settings > Advanced.

3.Insert the images and that refers expanding or collapsing the sub-tree. Then copy the codes which expand or collapse sub-tree and paste them to the web page as follows.

Four pieces of codes are inserted in this sample:

For expanding image:

<img src=”0609_f.gif” onClick=”stExpandSubTree(‘tree6575’,0,1);return false;>

For expanding text:

<a href=”#” onClick=”stExpandSubTree(‘tree6575’,0,1);return false;>expand all</a>

For collapsing image:

<img src=”0609_uf.gif” onClick=”stCollapseSubTree(‘tree6575’,0,1);return false;>

For collapsing text:

<a href=”#” onClick=”stCollapseSubTree(‘tree6575’,0,1);return false;>collapse all</a>

Note: Please input the above red codes manually, and make sure the function works well. The codes “return false” must be added into the <a></a> tag when the function “onclick” is called; if not, it causes the page refreshing in IE and Opera 9+ on Mac. And the codes can be copied from Tree Menu program except for the above-mentioned two parts.

Ok, click the image or text to experience.

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:
ipad tree menu - blue

  1. Start With Built-in Templates from Tree Menu Builder
  2. Launch Sothink Tree Menu, template windows opens; and choose tree menu “Deep Blue” under the category “Business”.

    iPad Tree Menu

  3. Modify the text and link for tree menu and apply it into your iPad websites
  4. 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.

    iPad Tree Menu - Node settings

  5. Set web path to make iPad tree menu work in local or Internet
  6. 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.

    iPad tree menu - web path

  7. Publish the iPad tree menu to make it display on iPad websites
  8. 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 ipad tree menu - publishPublish 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: