Posts Tagged ‘HTML code’

Javascript provides the web page developer with an excellent and powerful programming tool – which is, of course, why it forms the core of that current hot Internet technique: Ajax (Asynchronous Javascript and XML). However, Javascript can be of benefit to any web site – especially when it comes to manipulating objects on a web page: objects such a menus.

The Basics of a Javascript Menu

In order to create a menu the web site developer needs to make use of two Javascript methods:

  • · onmouseover – this is triggered when the mouse pointer is placed over an object
  • · onmouseout – triggered when the mouse pointer is moved away from an object

The web site developer also needs to make use of the web page’s object’s style, and in particular the object’s:

  • background-color
  • display
  • left
  • position
  • top
  • width
  • z-index

Read on »

To make a sub menu of multiple columns, you can use HTML in the text field. The content of the HTML code is actually a table with a couple of rows and columns.

How to create a sub menu of multiple columns? Follow the below steps to get:

Step 1: Create a table and define CSS

Create a table of multiple columns and multiple rows in Dreamweaver, and then define CSS between <head></head> for this web page. view what the web page looks like:

In this example, the included CSS is as follows:

<style type=”text/css”>

.popover-grouping {
font-size: 11px;
font-family: Tahoma, sans-serif;
margin-bottom: 0.7em;
.popover-grouping a, .popover-grouping a:active {
text-decoration: none;
line-height: 15px;
margin-left: .3em;
font-family: Tahoma, sans-serif;
.popover-grouping a:hover {
text-decoration: underline;
font-family: Tahoma, sans-serif;}
.popover-row {
margin-bottom: 0.2em;
font-size: 11px;
font-family: Tahoma, sans-serif;
.popover-row a, .popover-row a:active,.popover-row a:hover {
text-decoration: none;
line-height: 0.82em;
margin-left: .3em;
font-family: Tahoma, sans-serif;
color: #CC6600;
font-weight: bold;
font-family: Tahoma, sans-serif;}


Step 2: Copy table codes and paste them into application

Select the whole table in Dreamweaver, and then enter Code View to copy the highlighted codes.

Open PGT file in Sothink DHTML Menu, add a new menu item under the selected popup menu. Click this menu item, choose Menu Item > General on the Tasks Panel; check the option “HTML” in the properties panel, paste the highlighted code into the content box. Now, you can preview the result of menu item in the preview window.

Step 3: Publish the menu and insert the CSS

Follow “Publish > Publish JS” to publish your menu into the web page, and copy the defined CSS into the tag <head></head>. In this example, we copy the above CSS marked green and paste them to the HEAD part of the web page.

OK, you can get the sub menu of multiple columns exactly the same menu with above example.

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.