Categories

Fast Quote Request

:
:
:

How to create static menu with "act" effect using widgets in Magento

By Wolf | 28.02.2011

Very often it is nessesary to create static menu for the store. This can be submenu in header or footer sections. Lots of designs force us to forsee act effect for this links. This is difficult to implement with CSS only, but much easer with widgets which are aviable in Magento Community Edition 1.4 or later.

Let's create this menu:

1. Create CMS Pages for your menu (About Us, Shipping info, Terms and Conditions etc.)

2. Create file for our widget here app/design/frontend/your_package/your_theme/template/cms/widget/link/cms_menu_link.phtml with the folowing code inside:


<?php 
$testHref = trim($this->getBaseUrl(),'/').$this->getRequest()->getPathInfo();
if ($testHref == $this->getHref() || strpos($testHref, $this->getHref().'/') === 0) {
	$this->setClass($this->getClass().' act'); 
}
?>
<a <?php echo $this->getLinkAttributes() ?>><span><?php echo $this->htmlEscape($this->getAnchorText()) ?></span></a>

3. Now create CMS block or use the one you have. We will use Footer links block here.

4. Click on "Insert Widget" button and in popup select "CMS Page Link" in Widget Type dropdown.
Fill fields "Anchor Custom Text" and "Anchor Custom Title" and in dropdown "Template" select "CMS Page Link Inline Template". After it is set up click on "Select Page" button and select desiered page (in our case we choose About Us). Then press "Insert Widget" in upper right corner.

5. You will receive the folowing code which will generate a link to About Us page.


{{widget type="cms/widget_page_link" anchor_text="About Us" title="About Us" template="cms/widget/link/link_inline.phtml" page_id="3"}}

6. Now you should change template path for your widget. So change template="cms/widget/link/link_inline.phtml" to template="cms/widget/link/cms_menu_link.phtml".

7. Repeat steps 4-6 for all your links.

8. After you save the block it will generate menu with class "act" on active page. You can style it without any problems.

Hope this info will be useful.

Posted in: How toMagento | Tags: magentohow tomenucmswidget

<< Back

4 answers

  1. Gravatar: Alex Boschmans

    Alex Boschmans

    Interesting article, but what do you mean by "act" ? I think something is lost in translation from your mother language to english.

    Do you mean an interactive menu ?

    I was going to ask for a screenshot, but then I saw there was one attached. I still don't really understand what you are aiming to achieve though...

    (I'm also just beginning to learn magento, so maybe the problem is on my side)
  2. Gravatar: Norbert

    Norbert

    As far as I can tell, all these steps will add an "act" CSS class to the links.
    This will not create a folding menu, you still have to code that yourself.
  3. Gravatar: Wolf

    Wolf

    @Alex Boschmans this is a simple static menu with "act" class. This code won't help you if you need complex menu.
  4. Gravatar: Eddie

    Eddie

    Hi,
    Just implemented this on 1.6 & it works great!

    What I'd like to do now is make the 'Home' page active when you land on the root url (ie, www.mysite.com as it would if you landed on www.mysite.com/home).

    Thanks for making this available.

    Regards,
    Eddie

Your comment

Notify me when someone adds another comment to this post