Scroll To Top

Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

Adaptive Menu Magic as Library Item PVII is the leader in creative extensions for Dreamweaver

Dreamweaver Library Items allow you to manage repeating sections of your web pages, such as navigation, in a central file. Also see: Templates and Includes. This tutorial uses Adaptive Menu Magic as its focus, but the techniques you learn are applicable to any PVII menu system or widget.

PVII Menu Systems in Dreamweaver Library Items

Dreamweaver Library Items are a popular way to manage repeating content in small to medium-sized web sites.

Library Items work locally. When you make changes to the Library Item file, Dreamweaver updates the local copy of each page that carries an instance of that Library Item. To see those changes on the internet you must then upload all the pages to your remote server. For this tutorial, we will be using Adaptive Menu Magic. AMM is designed to be fully compatible with Dreamweaver Library Items. The system will recognize that a Library Item is being used and adjust accordingly.

Deploying Adaptive Menu Magic in a Dreamweaver Library Item

You'll create 2 pages for this tutorial. The first page will be used to create your menu. The second page will be the one that you add your menu to after you've made the menu a Library item.

-Create a new blank page. Save it in the root of your defined site as amm-library.htm

-Create another blank page. Save it in the root of your defined site as amm-menu-test.htm

Note: The test pages are made in the root to make it easier for you to change the path to your CSS and script files to root-relative, which in turn makes it possible to add your library-based menu to any page, in any folder, of your defined site.

-Open amm-library.htm

-Click on the page and then open the AMM (or other menu system) interface

-Build your menu with any options you desire

-Click the OK button to create the new menu

Copy the AMM CSS and Script Links

The externally linked CSS and JavaScript files used by your menu need to be moved to the destination pages that will contain your menu as a Library Item. In Code View, locate the following 2 lines in the <head> section (near the top of the code):

<script type="text/javascript" src="p7amm/p7AMMscripts.js"></script>
<link href="p7amm/p7AMM-01.css" rel="stylesheet" type="text/css" media="all">

-Copy the 2 lines.

-Open amm-menu-test.htm and locate the closing head tag: </head>

-Make a new line just above </head> and paste in the CSS and JavaScript links.

-Leave amm-menu-test.htm open as you have one more line of code to copy.

-Switch back to amm-library.htm

AMM menus are responsive-enabled by default. Unless you turn off the Enable Responsive Conversion option in the menu interface, a special meta tag will be added to your page. This meta tag needs to be moved to the destination pages that will contain your menu as a Library Item. In Code View, locate the following line in the <head> section (near the top of the code)::

<meta id="p7AMM" name="viewport" content="width=device-width">

-Copy the line.

-Switch to amm-menu-test.htm and locate the title tag in Code View:

<title>Your Title is Here</title>

-Make a new line just above <title> and paste in the meta tag.

Convert the CSS and Script path to Site Root Relative

In all likelihood your site will store its pages in various folders. To ensure a valid path to your CSS and script files, for pages in any folder of your site, you will make the path to those asset files relative to your site's root. To do so, add a leading forward slash to the paths:

<script type="text/javascript" src="/p7amm/p7AMMscripts.js"></script>
<link href="/p7amm/p7AMM-01.css" rel="stylesheet" type="text/css" media="all">

-Save the page and keep it open.

-Switch back to amm-library.htm

Create the Library Item

Select the menu by clicking the first DIV tag <div#p7AMM... on the Tag Selector bar that runs across the bottom of Dreamweaver's window—just above the Properties Inspector.

When you have selected the tag, the menu will become highlighted.

With the menu highlighted, choose:

Dreamweaver CS6 and Earlier

Modify > Library > Add Object to Library

Dreamweaver CC and Later

Tools > Library > Add Object to Library

Your Assets Panel will open and you might see this alert box:

The alert message is not relevant to your task so click OK

The Assets panel will now have focus and you will see a new untitled library item in the panel. Before you do anything else, you will need to give this file a name. Let's give it a name of amm-menu.

The panel will now reflect the name you set in both the Name and the Full Path columns of the panel.

An Update Files dialog will open.

Click the Update button.

Your Library item is now linked to your page and carries the menu. Your menu will now appear with a cream-colored highlight indicating it is a Library item:

If you click on the menu, the Properties Inspector will display the properties of your Library Item.

From the inspector you will be able to Open your Library file, Detach it, or Recreate it.

-Close amm-library.htm. It is no longer needed so you can delete the file if you wish.

Deploying the Library file

We're now going to use the Library file to add a menu to a page.

-Open amm-menu-test.htm

-Click once inside Design View to establish an insertion point.

-Open your Assets panel and select the Library icon. You will see your new Library item listed.

-Select the amm-menu Library Item in the Asset panel's first column and drag it into Design View.

-Release your mouse button to drop the menu onto the page.

That's it. The menu is now resident in your page. You can repeat the above processes to add your menu to any page in any floder of your site.

Modifying an AMM menu in a Library Item

You can Modify the menu at any time. To do so:

-Click on your menu to select it and then click the Open button on your Properties inspector to open the Library file.

Note: The menu will appear unstyled. This is normal.

-Place your cursor in one of the menu links.

-Open the AMM interface.

-Make your modifications.

-Switch to Code View

Remove Extra Code

Dreamweaver will add some extra code to the top of the Library file and your menu system (in this case, AMM) or widget will add back links to their respective CSS and script files. We will remove this code.

-In Code View of your Library file, locate these lines at the top:

<meta id="p7AMM" name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="p7amm/p7AMM-01.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript" src="p7amm/p7AMMscripts.js"></script>

-Delete the code.

-Save your Library file

The Update Library Items dialog will open, listing the pages that use this Library item and asking if you would like to update them.

-Click Update.

The Update Pages dialog will open, indicating the process is Done.

-Click Close.

That's it. You have created a Library file for your menu and have learned how to edit it. You can add your Library item to any page within your site.

Publishing to your Web Server

Dreamweaver manages Library items in your local site. Whenever you edit a Library file, Dreamweaver updates all local files that carry that Library item. To complete the job you need to upload all of the files that Dreamweaver updated locally to your Web server.