Dreamweaver Ajax Beta - Details :: Using CSS Menu with Ajax

Hello

I know that the CSS menu can be use with Ajax but i am little confused about the target panel matter on CSS menu linking.

I added the CSS menu but the links does not work and i think due to right target what to open and where to open. Anybody can help about this ?

Regds
Liton

Hi Liton

Make sure, the CSS Menu is inside an AJAX Panel.
Apply an AJAX link to a menu item poniting to the Panel, your content is in:

For example:

-----------------------------------------------------
Panel name = Menu, State name = default
(this panel contains your CSS Menu)

Homepage | Products | More Links |

-----------------------------------------------------

Panel name = Content, State name = Products
(this panel contains your Content for Products)

-----------------------------------------------------

So the link applied to the "Products" item in your menu would be:

index.php?Content__state=Products

The workflow for a MX CSS static menu is as follows:

1. Select the Menu Panel from the AJAX Panels floater
2. Click inside the CSS Menu
3. In the DW property inspector select "Edit menu items"
4. In the CSS Menus window, select the menu item, you want to apply the link.
5. For the URL click "Browse"
6. In the "Select menu location file" panel chose your index.php and click on "Parameter"
7. In the Parameter window enter "Content__state" for the Name
   (Rememer the 2 underscores for the name)
8. For the value parameter enter "Products"

If you have a dynamic CSS menu with "Link type" = "Built with URL parameter":

1. click "Browse" and chose your index.php
2. Click "Parameter"
3. In the Parameter window enter "Content__state" for the Name
   (Rememer the 2 underscores for the name)
4. For the value parameter enter "Products"
5. Click the "+" button and enter "id_pag" for tne name, leaving the value empty.
6. After clicking "OK" , back in the "Database-driven CSS Menu Wizard" select your database column for "URL parameter value" and adjust the "Target" value, if needed.
7. Click next to set the other parameters for your menu.

If you have a dynamic CSS menu with "Link type" = "Retrieved from database":

1. Set the URL and Target values, according to your table setup. However, you must then of course deliver the correct URL-parameters on page creation, which is a bit tricky ;-)

Cheers

Willi

Hi Willi,

Thanks for the excellent explanation, was just half/half thinking of it the last days, I have build it and it works perfect.

Maybe a good theme for the Tips & Tricks 2 elsewhere.

So now up to the dynamical CCS menu. Build that already but not in a AJAX site.

Thanks again.

Regards,

Nico

PS. Oops I see you updated it already with dynamical CCS ;-)

Hi Nico

PS. Oops I see you updated it already with dynamical CCS ;-)

Yes I updated my first post to add this information for Liton.

Cheers

Willi

Hi Willi,

Excellent explanation!!!!

One question though ...

You end up with a link such as 'index.php?Content__state=Products' ... this seems to reload the entire index page instead of just changing the Content Panel?

Again, awesome explanation ... I thank you!

Brad

Hi Brad

Excellent explanation!!!!

Thanks ;-)

One question though ...

You end up with a link such as 'index.php?Content__state=Products' ... this seems to reload the entire index page instead of just changing the Content Panel?

Your menu has to be inside an AJAX Panel.
Then clicking a menu link does not reload the whole page.
Add an "AJAX loading indicator" to your page (Master Page) and you'll see the effect.
Only the Content panel gets reloaded to the "products" state (see my example).

Cheers

Willi

Hey guys,

You can also check out the new tutorial How to use MX CSS Menus with AJAX panels. The folder with the database scripts is attached to this thread.

I hope it helps,

Lacra

Hi Lacra

 The folder with the database scripts is attached to this thread.

The above link seems to be incorrect.

Willi

Hi Willi,

That link is correct.  Try it again, please, and notice the Using MX CSS Menus.zip file attached to my post there.

Lacra

Hi Lacra,

I have the same problem. I don’t know what it is exactly.

Right click in FF and IE6 the link should go to; http://www.interaktonline.com/Support/Forums/thread_108639.html

However if I paste it in the browser I am redirect to this page;

http://www.interaktonline.com/

And yes I am logged in ;-)

Regards,

Nico

Hey guys,

The link I gave you was taken from the forum Help Desk end, and that is why it was not working for you.  Sorry :(

Here is the front-end link, it should work now: click here.  I will edit the link in my first post as well.

Thank you for the correction,

Lacra