Web Designer Blog

Website color is vital component for web design. Many website designers are likely to choose black as main color from a marketing point of view. In order to get a certain harmony, the web elements usually apply the similar or the same color to match with web design, for example, black menu is used on the black website.

Black menu is color joker, it is widely used for the various website colors which ranges from light to dark, the classic color includes black&white, red&black; black menu conveys the sense of fashion, business, reliance; black menu is plain and high capacity to contain almost all URL links to reach the target page quickly. Black menu is absolutely the popular menu, let’s view the excellent black menus from the famous companies:

Adobe

Sony

Nero

Adobe is a well-known computer software company, it has historically focused upon the creation of multimedia and creativity software products. Though Adobe Systems Incorporated develops so many excellent software, services, resources, etc, you will find everything quickly with the help of Adobe menu, and won’t get lost on their website. How does Adobe menu navigation website effectively? Let’s take a look of snapshot from Adobe website:

Adobe Menu – Features:

In this Adobe menu, menu background and website background are the same, which makes you feel harmonious. At the first sight, just plain text links are on website, but you will see so many menu items after the mouse is over on the top adobe menu; in popup menu items, some items are classified into several categories by Bold and big-size font; the item with link guides the visitors to right web page with one click.

Sothink Menu Template collects lots of website-matching DHTML menus and tree menus, you can apply the professional and well-designed menus to your website directly. In menu template, almost all menus are listed here, such as vertical or horizontal JavaScript menus, drop down menus and tree menus. Each series of menu template inlcudes the DHTML menus of several colors. Come on, pick up your favorite menu template!

Just 3 steps to build menu from menu template. First, choose one menu template and open the authoring file (.pgt or .stm) in Sothink program; and then edit the menu style, text and link to match with your website; finally, publish the menu to make it display perfectly on Internet.

View Menu template:

Each Menu template has several colors:

View drop down menu template >>

View tree menu template >>

Download Sothink DHTML Menu >>

Download Tree Menu >>

Query is a Javascript framework that is simple to use and of a good extendibility. With jQuery, it is easy to get the ajax effect of some webpages.

JQuery menu uses simple, cross browser compatible jquery to transform your multilevel menus into click and expand menus. In this post I’ve selected 30 examples which are helpful to create simple but effective jQuery drop down menus.

Let’s enjoy this kinds of drop down menus:

1. Animated jQuery Drop Down Menu

 
 
 
 
 
 
 
 
 
 
 
2. jQuery iPod-style Drilldown Menu

 
3. jQuery Drop Line Tabs

View 30 Simple but effective jquery drop down menus >>

At present, many well-known companies use drop down menu as navigation bar to navigate their website, such as Microsoft, Adobe, Amazon, etc. How these great drop down menu would be like? Below collects the excellent drop down menus from famous websites. The clone web menus have their own features, such as multi-column JavaScript menu, horizontal or vertical drop down menus. These simple and practical navigation bars are the most favorite web menu for big company.

Let’s view thses clone web menus:

Navigation bar from Amazon

 
 
 
 
 
 
 
 
 
 
 
 
 

Drop down menu from Amazon

 
 
 
 
 
Web menu from Alcatel

 
 
 
 
DHTML menu from Sony

 
 
 
 
 
 
 
 
 

View more drop down menus >>

Calendar is used for indicating the date, as website designer, you can put it on the website to prompt the viewer the current date. How to build an exquisite calendar? And which builder can make this kind of calendar. First, let’s enjoy three calendars:

All three calendars are made by Sothink DHTML Menu; you can easily create a calendar like above calendar samples in this JavaScript menu builder.

In Sothink DHTML Menu, you can set the properties of the dates in this calendar, including their font, icon, background, border, style, etc., by editing the items listed below. Each of these items corresponds to one of four types of date:
Sunday: It represents the date style of Sunday during this month.
Today: It represents the date style of today.
General: It represents the date style of the date that is not defined by other styles during this month.
Disable: It represents the date style of other months listed in the calendar.

Note: You can enter Edit Mode by pressing Ctrl + E and edit the items in preview window easily.

Download Sothink DHTML Menu to build your calendar.

Since iPad release,  it brings us so many surprises. iPad presents new way to browse the Internet. Enter the URL in the browser to view the web page on iPad; and rotate this device  90 degree, and see if the same webpage contents of completely different layout display properly. Yes, so good! It is no doubt that iPad will change the way we design website. About iPad website, I will take iPad drop down menu for example to share some tips&tracks.

As we know, iPad drop down menu is the vital element in iPad web design; it has the characteristic of navigating iPad website, beautifying iPad web page and including more contents in less space. And if inserting iPad drop down menu into iPad web page, your website will get better user experience. Let’s view the JavaScript menu on iPad.

• Make Your iPad Website Fluid Web Design

With iPad, you can view the websites in landscape or in portrait mode. In fact, the web designer need to make different two web designs for displaying website perfectly. Of course, there is a simple method to get the ideal results – a smart combination of CSS and JavaScript. This way enables your iPad website performs well on iPad and PC.

For drop down menu, you can set the menu’s width in percent to make it work well, which matches with iPad website of different resolutions and dimensions. From below figure, you will see almost the same menu effect in two web pages of two dimensions.



• Design Big Enough Link and Hover Effect

iPad is not the traditional point-based deices, all the interaction between iPad and users is touch, which is fulfilled by finger. For getting better user experiences, you should design link and hover effects big and clear, so that the user can dexterously click upon it.

Below presents us the drop down menu in website and iPad drop down menu in iPad website, you can get clear comparison.



• Create Your iPad Website with HTML 5

HTML 5 is a standard for structuring and presenting content on World Wide Web. The new standard incorporates features like video playback and drag-and-drop. With HTML 5, Google is use HTML 5 for Youtube. As web designer, you should try HTML 5 to make iPad web page.

Keep these advices in your mind; you can make the compatible iPad website for iPad users.

The iPad drop down menu above-mentioned is created by Sothink DHTML Menu. Besides this drop down menu, it offers us more JavaScrip menu, DHTML menu.



DHTML Menu

The top-rank DHTML Menu creates perfectly iPad drop down 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 | order

Sothink DHTML Menu 9.4 has been released! We’ve upgraded Dreamweaver plug-in to V3.3.2 to make DHTML Menu work seamlessly with Dreamweaver CS5. Now, Safari 5 is supported both on Windows and Mac. What’s more, we’ve added 18 fresh new drop down menu templates. Check five of them below:

Can’t wait to experience the polished new version? Download it here.

To get more details on DHTML Menu 9.4 and its new features >>

Sothink Tree Menu 2.6 provides you with several new functions which make your menu more attractive and functional! You can feel there new features from our new built-in templates below.

Function One: Sound function in Global Settings. It enables the menu to play sound when clicking the node including sub tree to expand & collapse, clicking the node with link address or moving the mouse over the node. You can try this new feature in the new built-in template “Business > Sound”.

Function Two: Effect function in Sub-tree Settings. It enables users to choose a type of special effect to display or hide the sub nodes. In the built-in template “XP Panel > Red”, there is a special effect when the sub nodes are expanded or collapsed.

Function Three: Arrow function in Sub-tree Settings. It enables users to configure arrow image of the node that includes sub trees. For example, the nodes in the built-in template “XP Panel > Woody” have used arrow images.tree Settings. It enables users to configure arrow image of the node that includes sub trees. For example, the nodes in the built-in template “XP Panel > Woody” have used arrow images.

 

Version: Sothink Tree Menu 2.6 Build: 80815

Download now!

Functions Enhanced:

• Upgrade plug-in from 3.2 to 3.3 for Dreamweaver, from 3.2 to 3.3 for FrontPage, from 1.7 to 1.8 for Expression Web and from 2.1 to 2.2 for Golive.
• Optimize the JavaScript file to enhance the stability and function of the program.
• Add 5 new built-in templates and modify 7 templates. Put these 7 templates in the new catagory “XP Panel”.
• Add ruler function in the program. Press the mouse in intersection and drag the crossing to position the coordinates origin. The current coordinates of the mouse show in the right bottom of the state bar.
• Add effect function to Sub-tree Settings. It enables users to choose a type of special effect to display or hide the sub nodes.
• Add arrow function to Sub-tree Settings. It enables users to configure arrow image of the node that includes sub trees.
• Add sound function to Global Settings. It enables the menu to play sound when clicking the node including sub tree to expand & collapse, clicking the node with link address or moving the mouse over the node.
• Add the option “Indent” in “Sub-tree Settings > General” to set the indent between sub-tree and parent node.
• Increase arrow images in image library.
• Add the function to edit images in group library.
• There is a “Auto” image in the Library. When choosing Auto, the cursor image will be the system default one. For example, if the node does not include arrow, the cursor image of Linking and No linking will be pointer and hand; if the node includes arrow, the cursor image of Linking and No linking will both be hand.
• Work as add-in of Expression Web 2.0.

Fixed bugs:

• The “Check for Updates” dialog has popped up by mistake if installing and running Office 2007 after Sothink Tree Menu was installed.
• A mistake prompting dialog has popped up when you open the web pages in Dreamweaver or Golive and the web pages were saved in the directory with name containing Non-English characters.
• Some dll which was mistakenly regarded as viruses by Anti-virus software is actually not viruses.

Get more details