Web Designer Blog

You are beginner or amateur on building drop down menu; you are unable to create the same navigation bar in your mind. Maybe, Sothink DHTML Menu can help you to build the ideal JavaScript menu. View our simple tutorials to start your web menu.

Download DHTML Menu >>

• Get started with drop down menus
• Make JavaScript menu in Dreamweaver
• Insert a menu to many pages by FrontPage

You are the experienced web designer on menu creation, but you wanna to make data-drive menu by JSP, ASP or PHP at this time. Come on, view our tutorial to learning to create such a functional menu:

• Create Dynamic DHTML Menu with JSP
• Create Dynamic DHTML Menu with ASP
• Create Dynamic DHTML Menu with PHP

When creating web menus, you maybe meet the problem. Yes, you can resort to DHTML Menu tutorial to settle your problem down:

• Displaying Menu above PDF File
• Position Menu in Web Page by Layer Properly
• Auto-Generate a Menu for the Existing Web Site

It is very useful DHTML menu tutorial, right? Hope you enjoy it.
If your concerns are not here, please contact us, we will add it later.

The menus made of scripts are great space savers for complicated websites, but the script drop down menu are difficult to build.

Let’s Do Menu Script First

 
 
 
 
 
 
Step 1: The script for the sample above uses three external files: anylinkmenu.js, menucontents.js and anylinkmenu.css. Download them first.

Step 2: Add the codes to the HEAD section of your page. (check the detailed codes at this page)

Step 3: All that’s left is setting up your link(s) so a menu drops down. The sample HTML demonstrates 3 links, one with the menu dropping down onMouseover, and the other, onClick: (check the detailed codes at this page)

Step 4: To modify the script drop down menu later, you have to customize the script menu’s contents and anchor links, and initialize the menu by scripts every time, which is very complicated and takes much time.

Furthermore, the script menu looks simple, ordinary, and not attractive enough.

Now Check DHTML Menu Builder

While, DHTML Menu Builder usually refers to a program that helps you to create script menus without much knowledge on scripts.

If a script menu is done by a menu builder, it will be much easier and faster. Usually we use Sothink DHTML Menu, a powerful and useful script menu editor. Check the script drop down menu created by the program below:

View the more script drop down menus here

1. When you launch Sothink DHTML Menu, it will pop up a window to ask you to choose templates, so pick up the one you like among them for script drop down menus. With the plentiful templates in the program, pretty and fashionable script drop down menus are easy to get.
2. After selecting the templates, what you need to do is just edit the text, color, background or anything else for the script drop down menus. And you can refer to the tutorials here for details.
3. Next, you can publish your script drop down menus to webpage, however, you needn’t write any scripts but only copy and paste the scripts which are generated by the program automatically to some specified area. Here is the tutorial.
4. If you want to modify the script drop down menu, you can just open the existing .PGT file (the project file of Sothink DHTML Menu) for the script drop down menu, make some changes with some clicks, and publish it to the website for updates.

See the Table Below for a Comparison

 
 
 
 
 
 
It is plain that menu builder is more simple to use. With a lot of templates in the builder, you could create script drop down menus in various styles; and it is also easy to modify and maintain the menu later. Moreover, the most important one is that you even need not to know much about scripts at all!

List menu refers to navigation bar on the website, which shows menu in unordered list, it enables to popup the sub-menu and quick link to the target page. Generally, list menu can be made by CSS+HTML (tag <ul>&<li>). If being familiar with HTML code, you can create a well-design drop down menu with ease; if not, you may have to take days or even weeks to learn DHTML coding before you can build you own list menu from scratch. Fortunately, Sothink DHTML Menu can help you create the professional list menu without coding.
 
 
 
 
 
 
 
 
About Sothink DHTML Menu

Sothink DHTML Menu enables to create list menu without coding. With rich templates and styles, you can create cross-browser list menu in clicks. Fully customize list menu style and free integrate with web editors to build list menu.

Download Sothink DHTML Menu >>

Start list menu with Sothink DHTML Menu

1. Start list menu with rich templates

Launch Sothink DHTML Menu. Template windows open and you can choose list menu “Business > Bullet” .

2.Modify the text and link for list menu

Modify the text and link for your website. Click the text on menu panel, select the option “Menu Item > General”, and edit the text and link in property panel below.

3. Set multi-column function for 2-level menu item in list menu

Select the menu item that includes sub menu items, and click the option “Popup Menu > Multi-Column” to make them display in list way. And adjust their sequence to make them show in right category.

After setting “multi-column” function, the program will auto-arrange the menu items from left to right orderly based on the defined row number or column number. In order to get the better layout, you must adjust the sequence of menu items for drop down menu.

4. Set resource folder for list menu and make it work locally or on Internet

Set resource folder to save JS and image files to the specific directory, which makes the list menu display correctly. Enter the “Global > Resource Folder” to set them.

 
 
 
 
 
 
 
 
 
 
 
 
 
 
5. Publish list menu and upload the necessary resources to web server

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 web page. You can preview list menu locally; upload all the resource files to web server, view list menu on web.

Check the button “Publish” on the toolbar to publish list menu.
Without coding, you can edit list menu style in WYSWYG menu builder; execute the command “Copy&Paste” to insert menu code into web page; and upload all the resources to web server. Your list menu will display perfectly on the web and offer clear navigation to all your visitors.

Popup menu is widely used for web navigation, it can popup its sub-menu upon user interactions, such as moving the mouse over the menu item, or clicking the menu item to display more link items. Popup menu is designed as the hierarchy style; you will see only the top-level menu item on website if no mouse behavior involved.

The popup menu is like this:

Popup menu has the features of slim body and large volume. You can add unlimited sub menu items under the top menu. The popup menu is specially applied to the website design of compact structure and multifarious contents. It not only classifies the web pages clearly for website, but also switches to the destination page in one click. Popup menu can be vertical or horizontal style, which is pretty good decoration element for website design.

At present, many well-known companies use popup menu as navigation bar to navigate their website, such as Microsoft, Adobe, Amazon, etc. But, how can I create popup menu of my own? Be patient, I will show you the steps to create popup menu with Sothink DHTML Menu.

Sothink DHTML Menu enables you to create popup menu for compact website. With the built-in templates and rich preset styles, you can create SE friendly popup menu in clicks. Fully customize popup menu to match with web design. Freely integrate with web editors to build popup menus.

Download Sothink DHTML Menu >>

Follow me to start a popup menu now:

1. Start Popup Menu with Built-in Templates

Launch Sothink DHTML Menu. Template windows open and you can choose popup menu “Simple > Classic Silver”.

2. Add the sub menu items for this popup menu

Select the menu item which needs add sub menu items below, and click the button “Append Sub Menu Item” in the menu panel to add sub menu items.

3. Modify the text and link for popup menu

Modify the text and link for your website. Click the text on menu panel, select the option “Menu Item > General”, and edit the text and link in property panel below.

4. Set resource folder to make popup menu work well in Intranet or Internet

Set resource folder to save JS and image files to the specific directory, which makes the popup menu display correctly. Enter the “Global > Resource Folder” to set them.

5. Publish popup menu and make it display on web page

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 web page.

Check the button “Publish” on the toolbar and choose the option “View/Copy Code…”; the dialog opens, follow the tips to copy and paste the codes to web page; and check the option “Copy the resource files” to copy resource to the defined folder.

Finish the above steps, you can preview menu locally; and upload all the resource files to web server to view popup menu on Internet.

Tab menu usually has the crystal appearance and clean design, which makes the website designer love to use it in their web pages. To more important, tab menu can display more menu items in the limited space, save much more room to present the various contents for surfers.

Tab menus are the one type of drop down menus. This kind of tab navigation bar is usually shown as horizontal web menu, and its submenus list in below line. The tab menu of round corner makes the navigation bar clear and good-looking.

Let view the tab menu samples:

Here is the tutorial about making tab menu in Sothink DHTML Menu:

Hurry up, download Sothink DHTML Menu to create tab menu. Hope you like this tab menu.

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

iPad has come to our lives, and it provides a brand-new way to browse website. The users can view the website vertically or horizontally. Yes, iPad will bring website revolution for viewing way of landscape and portrait mode. As web designer,  have you get your website ready for iPad users? If you think so, then follow me to design iPad website and make it display properly on iPad.

At present, the web designers usually adopt three layouts to design website: fixed, fluid and elastic. These website layouts have their own advantages and disadvantages, the web designers should choose the appropriate layout based on your websites. Let’s view the below chart to get pro&cons of website layout:

Based on the above comparison chart, I think that the fluid layout is the best choice to make iPad website since iPad has the features of fluid width design. Next, I will present you how perfect the website elements in ipad web page of fluid layout, drop down menu, tree menu, image scroller:

iPad drop down menu (made by Sothink DHTML Menu) :

iPad tree menu (made by Sothink Tree Menu) :

iPad Slideshow (made by Sothink JavaScript Web Scroller) :

Does Fluid layout work well in iPad website? At least, the web elements like DHTML menu and JavaScript menu performance excellently. You can attempt to design iPad website by fluid layout. Hope you enjoy it.

View more iPad JavaScript menu samples:

iPad is being hot sales of millions of iPad in weeks since its release, iPad time is overwhelming arrival. As we forecast, iPad will be warm up in the future, are you ready to do something to make your website become iPad website, and satisfy with your iPad visitors? Absolutely need, the sooner the better.

Let’s change the traditional website to iPad website from now. First, we start with iPad drop down menu. As we know, the iPad has the characteristic of landscape and portrait mode, your iPad drop down menu must works well in both modes. For iPad web design, keep two things in your mind, you should set the width in percent instead of the fixed in iPad web page; re-sizing browser window is unavailable in iPad website.

iPad drop down menu can navigate your iPad website clearly; and it enables to contain the unlimited-level of menu items in one line. Next, we will learn making the useful drop down menu for iPad website. Meanwhile you will get some tips in iPad web development to avoid mistaking. Follow us to go ahead:

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

Launch Sothink DHTML Menu, template windows opens; and choose iPad drop down menu “Clean” under the category “Business”.



2. Set iPad drop down menu for iPad website

After the iPad drop down menu display in the preview window, you can set the menu width in percent for iPad website of landscape and portrait mode.
Check “Global > General”, and set the width in percent in below property.



3. Modify the text and link for iPad drop down menu

Modify the text and link to be your own website. Click the text on menu panel, select the option “Menu Item > General”, and edit the text and link in below property panel.


4. Set resource folder to make iPad drop down menu work well in local or Internet

Set resource folder to save JavaScript and image files to the defined directory, which make sure the drop down menu display correctly. You can enter the “Global > Resource Folder” to set.



5. Publish the iPad drop down menu to make it display on iPad web page

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 preview menu on Internet.
Check the button “Publish” on the toolbar to publish your iPad drop down menu.

Finish the above steps, your drop down menu has been shown on the iPad website. Making iPad drop down menu, you should pay attention to step 2, it is vital setting to make the iPad drop down menu perfectly displayed on iPad web page.

More iPad Drop Down Menu Samples:

About Sothink DHTML Menu

The top-rank DHTML Menu creates perfectly iPad drop down menu, JavaScript menu for iPad website of landscape and portrait mode. With the built-in templates and rich preset styles, you can create SE friendly JavaScript menu in minutes. Fully customize iPad drop down menu to match with iPad web page. Free integrate with web editors as add-ons to build iPad drop down menus directly.

Download Now | Order Now

With Tree Menu 2.2 release, Sothink Tutorial Centre adds some tutorials for the users!

New Tree tutorial:

Insert a Tree Menu to Pages by Dynamic Web Template  in Expression Web
http://www.sothink.com/tutorials/viewtopic.php?t=133

Re-arrange tutorial:
http://www.sothink.com/tutorials/index.php?c=4
 

New DHTML Menu Tutorial:

How to Use DHTML Menu with NetObjects Fusion or Other Web Editors?
http://www.sothink.com/tutorials/viewtopic.php?t=132