Posts Tagged ‘menu style’

It is time to design new style for your website. With festival arrival, special day coming, website designers will work out new style to dress up the existing website. When web has been changed its style to new one, it is obviously outdated if navigation menu still keeps unchangeable.  For website that needs to transform frequently, you should solve the problem about how to build navigation menu to match with versatile website styles. To get perfect visual effect between website and navigation, you need to edit two elements in navigation menu, background image or color. Let’s see how Sothink DHTML Menu create navigation menu:

Step 1: Add Menu Items to scheme structure for navigation menu

Launch Sothink DHTML Menu, you can add menu item on the left panel. First, check one menu item; and then, choose the button to add the same-level menu items or sub-level menu items; final, click once to add one menu item, and click more add more.

navigation menu builderStep 2: Apply menu style from templates to navigation menu

After menu structure is done, you can edit the menu item, including text, link, and font. To quick Apply the menu style from template, you can choose “Template > Apply template to menu” command to apply template style to your navigation menu.

drop down menuStep 2: Publish navigation menu to website

Menu creation is finished. Click the button “Publish” to choose the best publishing method. After the option is check, you can follow the step to publish your navigation to website. And upload all the resources for navigation menu.

navigation menu

The navigation of a website is meant to be clicked. It shouldn’t be hard to find. It’s important that it stands out from the rest of the elements on the page with elegant style but yet still matches the overall style and color of the design. Here is a showcase of websites that achieve this in a very stylish way. These navigations look amazing, have serious click appeal, and are guaranteed to inspire you for it’s beautifully color variation with the whole website.

navigation menu

Positive Impressions

DHTML Menu

Hart & Huntington

Amigo in Granada

drop down menu

Yankee Soda

web menu

Kelt

drop-down menu

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.