html5 menu builder | Get css drop down menu | HTML5 menu example | CSS menu maker | Menu html css example | Web menu design | Web menu inspiration
This is old product page. Use new version from swimbi.com:
CSS Menus made easy by SWIMBI, drop down menus, vertical menus

Multipage menu control

One of the most frequently asked questions is how to edit one page item and have it update sitewide. There are a lot of different solutions. You can use server-side programming and databases, dreamweaver templates with repeating regions, dreamweaver library items, SSI (Server Side Include) , the XML feature of our menus.

If you are not familiar with server-side programming languages, such as PHP, Perl etc., use one of the following ways:
- Ajax menu - best way,
- Server Side Include (SSI) - good way,
- XML - easiest way,
- DW template or library item - good way if you are accustomed to it,
- Frames or iframe - not recommended.

Ajax menu

The new advanced User Interface can embed scripts that uses Ajax to enable you to load external pages into a DIV without having to reload the browser.

Read detailed instructions here

Server Side Include (SSI)

SSI is a simple server-side scripting language. As its name implies, its primary use is including the contents of one file into another one dynamically.
For example, a file containing a menu code could be included into multiple SSI-enabled pages throughout a website by placing the following code into the desired pages: 

<!--#include file="menu.html" -->
Important! Ask your hosting provider if the SSI feature is enabled for your website.

Wikipedia Server Side Includes


Examples of using SSI:
http://f-source.com/example/ssi/index.shtml - SHTML page
http://f-source.com/example/ssi/index.html - HTML page
http://f-source.com/example/ssi/index.php - PHP page
http://f-source.com/example/ssi/newfolder/ - Different folders example

All pages mentioned above include the same file http://f-source.com/example/ssi/menu.html

Keep navigation settings in one XML file

With the new user interface it's very easy. Just set "Save as XML" in the UI => Navigation tab => Save => as XML in file.
New XML file "navigation.xml" will be created. It will be placed in the menu folder.

Read detailed instructions here

How to create a library item

Create a single Library item with navigation and then reuse it on each page. When you need to make an edit, it’s simply a matter of opening the Library item, making the edit and letting Dreamweaver replicate that edit across all the pages containing the Library item.

1. Create new "Dreamweaver site" (or open existing site).

  • - Open "Files panel" (F8 or Window -> Files),
  • - Select in Site pop-up menu "Manage sites",
  • - The Manage Sites dialog box appears. Press "New",
  • - Create new site.

2. Create new Library item.
  • - Open "Assets panel" (F11 or Window -> Assets)
  • - By default, the "Images category" is selected. Select the last category - "Library"
  • - Click the New Library item button at the bottom of the Library category.
  • - Type a name for the new library item.
assets

3. Insert the menu in the Library item.
  • - Double click to open the Library item, Dreamweaver opens a new window for editing the library item. This window is much like a Document window, but its Design view has a gray background to indicate that you’re editing a library item instead of a document.
  • - Click menu button on your Insert bar (Flash elements section) to insert f-source menu (for example "Mac Style Menu")
  • - Save the flash element in the Library folder (type new name "menu.swf")
  • - Save the script 'ActiveContent3_2.js' in the Library folder,
    (to get the script download it here http://f-source.com/support/ActiveContent3_2.js)
  • - Test the Library item in browser (F12), if it not working, check the script path and SWF path.

4. Use the Library item.
  • - Drag a library item from the Assets panel to the Document window,
  • - When you edit a library item, you can update all documents that use that item. If you choose not to update, the documents remain associated with the library item; you can update them later.

Thus, you will have in the Library folder these files:
menu library files library
In the menuLibrary.lbi correct path to the SWF file must looks like : 
<param name="movie" value="menu.swf" />
.....

<embed src="menu.swf" ......
In the test.html correct path to the SWF file will looks like : 
<param name="movie" value="Library/menu.swf" />
.....
<embed src="Library/menu.swf" ......
Here is example of HTML code inside of the Library item: 
<script src='ActiveContent3_2.js'></script>

<div id='menu'>
  <div><a href='http://f-source.com'>Button1</a></div>
  <div id='submenu'>
    <div><a href='http://f-source.com'>SubButton1-1</a></div>
    <div><a href='http://f-source.com'>SubButton1-2</a></div>
    <div><a href='http://f-source.com'>SubButton1-3</a></div>
  </div>
  <div><a href='http://f-source.com'>Button2</a></div>
  .........

</div>

<div id="f-source menu" style="position:absolute; left:0px;
top:10px; width:100%; height:45px; z-index:99999;">
  <object classid="............