7

Jan 11

How to Create a Tab Menu?

Tab menu has the features of space-saving and eye-catching, which is the popular web menu applied to website navigation. Generally, tab menu is 2-level navigation menu, it displays main menu as tabs, and sub-menu will be shown vertically in below line when the mouse is over the main menu. Tab menu usually uses round corner as background, which makes the web menu appealing and pleasing.

Tab Menu

How to Create a Tab Menu?

Tab Menu is a standard compliant 2 level tab menu. With Sothink DHTML menu, you can create a tab menu in steps:

1. Create menu includes sub-menu.2. Enter Global > Menu Type in Tasks panel and select the option “Tab menu”. The menu is switch to a menu with 2 levels.

3. Enter Global > General in Tasks panel, choose “Mouse over” as the method to select the item. So you can move you mouse over one of the sub items to select it.

4. Check “Top-Level-Menu” and enter “Menu Item > Border” to set border as 0; check the popup menu and enter “Popup Menu > Border” to set border as 0 and delete the arrow from “Popup Menu > Arrow”.

5. Select all menu items, enter “Menu Item > Background” to pick up the background image from image library.

6. Set “Transparent” for all menu items, popup menu and the whole menu in “Popup Menu > Background” and “Menu Item > Background”.

Posted in Tutorial Release | 2,570 Comments
Tags: , , , ,

6

Jan 11

Why Choose Menu Creator to make Navigation Menu?

At present, website designers can complete the various navigation menus by different technologies, like CSS menu, JavaScript Menu, Flash menu, HTML menu and jQuery menu. Then, which is the popular way to create navigation bar? The website guru prefers to design web menu by JS and CSS code; but for majority of us, we’d like to make navigation menu by professional menu creator. Here lists three reasons why choose menu creator:

We will take Sothink DHTML Menu for example to explain advantages about menu creator.

WYSWYG Menu Creator Makes Menu Creation Simple

  1. Get a clear menu structure from menu panel; and freely adjust the position for menu item by clicking.menu-creator-panel
  2. Preview JavaScript menu in real time with menu creator.
    menu creator
  3. Choose menu properties and customize the corresponding menu style in menu creator.menu-creator-property

Finish Functional Menus in Easy Way

  1. Set menu type as Float to float menu in fixed position on webpage.float-menu
  2. Edit highlight settings for highlight menu to show where the user is on the web site.Menu Creator - Highlight Menu
  3. Make long menu items scroll and keep their scrolling in a fixed depth.Menu Creator - Scrolling Menu

Quick Start Menu from Rich Resources

  1. Start web menu from the various free menu templates.menu-creator-template
  2. Apply preset menu style to the menu item.
  3. Apply resources from image library to design menu in less time.

The above-mentioned features are only in menu creator; download Sothink DHTML Menu to get more features which other technologies are unable to achieve.

Posted in Tutorial Release | 1,948 Comments
Tags: , , , , ,

5

Jan 11

Make Clear JavaScript Tree Menu for Directory Website

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

Posted in Tutorial Release | 2,553 Comments
Tags: , , , ,

4

Jan 11

10 Beautiful And User-Friendly Navigation Menus

Usability is an essential goal of any website, and usable navigation is something every website needs. It determines where users are led and how they interact with the website. Without usable navigation, content becomes all but useless. Menus need to be simple enough for the user to understand, but also contain the elements necessary to guide the user through the website — with some creativity and good design thrown in.
Below we present over 10 excellent navigation menus — we feature CSS-based design solutions, CSS+JavaScript-based menus and Flash-designs. However, they all have something in common: they are user-friendly yet creative and perfectly fit to the style of their respective websites.

  • Nopokographics8
    Vertical navigation menus are used very rarely, for the simple reason: they are harder to use. However, some designers risk unusual approaches. Nopoko Graphics uses an arrow and a hover-effect for its vertical navigation menu.

    drop-down-menu-1

  • Cosmicsoda10
    This large and colorful menu is very noticeable and uses a slight hover effect to further define the menu items.

    drop-down-menu-2

  • Clearleft14
    Clearleft uses a couple of paper pieces for its navigation.

    navigation-menu-3

  • Water’s Edge Media19
    Patricia Abbott uses clothespins for the navigation options.

    dhtml-menu-4

  • Jeff Sarmiento24
    Why not try a sloping navigation options once in a while?

  • Mac Rabbit
    One more example of a large and clean menu. This one uses icons to aid the reader in recognizing each item’s function.

  • DFW UPA34
    Icons reinforce the menu items on this website and add emphasis to each option.

    menu-samples-7

  • Duarte Pires36
    This menu is located close to the content, where it is easy to use. It uses large icons, which adds a visual element to the navigation. Also, the menu on other pages uses the same icons in a vertical layout, bringing consistency to the website. The icons may not fit perfectly, but it’s a nice idea.

    menu-templates-8

  • Eric Johansson42
    Eric Johansson, a designer from Sweden, uses tall vertical blocks and images for his navigation.

  • Bern45
    I am a big fan of this navigation layout. I like how the menu fits in with the grunge theme. It also uses another jQuery drop-down effect.

The article is from smashingmagazine.com.

Posted in Latest Samples | 2,605 Comments
Tags: , , , ,

29

Dec 10

Eye-Catching Websites With Horizontal Navigation Menu

A website is like a magazine where people search for information. The table of contents of a magazine is like the navigation of a website. Table of contents provides an overview of your magazine, while navigation also shows on what your viewers should expect to see on your website. Both serves as pathways for your viewers on how they can explore your website.

Whenever I think of what is the most important task a web designer could do, I always end up thinking that it should be the creation of good navigation. It must be well-designed in a user-friendly manner that the moment the viewer sees it, they instantly understand how it is used and what is it for. A navigation must also be creatively done, it is one of the elements you can find on a website where you can capture a viewer’s attention.

What’s kind of menus is good for web navigation?

The less click, the better.

Viewers tend to be impatient when searching for information; they want to seek what they are searching very quickly. Make sure that your navigation responds as quickly as possible to your viewers’ instincts.

Horizontal Navigation Menu

Horizontal navigation is the widely used navigation of web designers today. Usually, the navigation bar is placed right under the header.

Good Characteristics:
1. It occupies less space
Horizontal navigation is mostly used by web designers for it occupies less space, because it is placed at the top part of the website. Then, the rest of the spaces you can use for your content.

2. More noticeable
Our eyes first notice elements of the website that are placed on the center, that is why horizontal menus are more noticeable since they are placed on the top and center part of the website.

3. Easier to use
Viewers find horizontal navigation easier to use. Comparing it to vertical navigation, you still have to move your mouse pointer on the left part of the screen (or sometimes right) to click the menus. If the navigation is horizontally placed, you just have to move your pointer upward to click a menu button.

4. Viewers are already used to it
Since it is the mostly used navigation, viewers always expect that all websites have this type of navigation.

Bad Characteristics:

1. Limited space for your menus
When using horizontal navigation, you are limited on the width space of your website and this still depends on the layout of your website.

2. Can only be used if number of menus are already known
Horizontal navigation can only be used if the number of your menus is already fixed, because the size and design depends on the number of menus to be placed.

View Horizontal Navigation Menu Samples for Inspiration:

Posted in Latest Samples | 2,664 Comments
Tags: , , , , ,

28

Dec 10

Designing Drop-Down Menus: Examples and Best Practices

Generally, most Web developers, especially those that the user experience, know that a bad practice to estimate using the menus because it confusing, annoying and often are dysfunctional. From design point of view, however, the menu is a great feature, and are to help clean animated design. If well structured menus, can be a great navigational tool, but is a useful and attractive design.

Yes, it’s true: navigation dropdown menus easy to use. The recent study declines that large and two-dimensional menus enable to avoid scrolling and precision, explain the options the user with the effective use of typography, icons and tooltips.

These panels appear for a short time and disappear when users mouse over another option or a normal screen.

web menuIn this article we take a closer look at the nature of the navigation menu to situations in which they may or may not have to be used to analyze, discuss various implementations, and finally some good and bad examples of menus to see, for example. The article also includes some tips and suggestions to help you to work with menus.

Position to Use Navigation Menus.

You are used to view many trends in the drop-down menus. The most common ones are here:

Arrange the pages section

Most frequently, navigation menus used to draw all the pages in a specific category in an organized element. These are essentially sub-navigation. See the picture below. A drop-down element contains all the different categories for a specific area of the site.

drop down menu

Organize categories in a Blog

You see many blogs which use a menu to organize the categories and labels. Why? Blogs includes a great amount of information supplied, so that the design must maintain as clean as possible to this content. A menu will ultimately helps together links, such as classes, design elements, how to collect the sidebar.

JavaScript Menu

View products on electronic commerce Website

Many menus on e-commerce websites are used for showing products or groups. The menu is a positive feature that can find the clients; it is an ideal way to organize products. The Best Buy Web site, see below.

DHTML Menu

Show Modules
A drop-down may be the best way to tuck away obstructive menu, which the user can click on to reveal. View the example below, logging in the element is part of the navigation will appear as a drop-down list. It is a good way to achieve this important element of the rule without any negative impact on usability.

Menu Style

Posted in Latest Samples | 2,395 Comments
Tags: , , ,

27

Dec 10

Most Useful Menu Examples of JavaScript and HTML5 Uses

In this article I am going to share some interesting uses of JavaScript that would be very much acceptable and useful to the web designers. These examples are not only Uses of JavaScript but HTML and CSS also. So I hope my viewers will gracefully enjoy this article.

Using jQuery for Background Image Animations

javascript menu

 Sliding JavaScript Menu Highlight

Fisheye JavaScript Menu

MenuMatic

Simple Drop-Down Menu

Eyecatchy javasript navigation menu

JavaScript sliding menu

Posted in Latest Samples | 2,274 Comments
Tags: , , , , ,

24

Dec 10

5 sexy jQuery Drop Down Multi Level Menus

Dropdown menus and menu bars have been heavily used since the early days of graphical user interfaces. Their use has become ubiquitous, and even expected, in desktop applications, and the web has quickly followed suit. There are lots of dropdown menus already out there. Here you’ll find 5 sexy jQuery and CSS based drop-down or just multi level menu tutorials with down loadable files and explanations as well.

jquery-dropdown-menujQuery-Menu-DropdownNavigation-Barnavigation-menuSexy-Drop-Down-Menu

Posted in Latest Samples | 1,854 Comments
Tags: , , , ,

23

Dec 10

DIY Your Tree Menu with Customizable Styles

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.

Posted in Menu Release | 2,477 Comments
Tags: , , , , ,

22

Dec 10

How to Disable Nodes from Navigation Tree Menu?

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.

Posted in Tutorial Release | 2,018 Comments
Tags: , , , , ,

Older Entries
Newer Entries