3

I'm trying to figure out how I can implement my magento navigation so that certain links when hovered over create a dropdown with more links in.

At the moment to add a new link I create it in the local.xml file

<?xml version="1.0"?>
<layout version="0.1.0">
    <default>
        <reference name="top.links">
            <!-- Add  link  -->
            <action method="addLink" translate="label title">
                <label>ABOUT ProGARM®</label>
                <url>about-progarm</url>  <!-- can use full url also -->
                <title>ABOUT ProGARM®</title>
                <prepare>true</prepare> <!-- set true if adding base url param -->
                <urlParams helper="core/url/getHomeUrl"/> 
                <position>1</position>
                <liParams/>
                <aParams>class="top-link-about-us"</aParams>
                <beforeText></beforeText>
                <afterText></afterText>
            </action>
             <action method="addLink" translate="label title">
                <label>PRODUCTION</label>
                <url>progarm-in-production</url>  <!-- can use full url also -->
                <title>PRODUCTION</title>
                <prepare>true</prepare> <!-- set true if adding base url param -->
                <urlParams helper="core/url/getHomeUrl"/> 
                <position>1</position>
                <liParams/>
                <aParams>class="top-link-production"</aParams>
                <beforeText></beforeText>
                <afterText></afterText>
            </action>
            <action method="addLink" translate="label title">
                <label>CE CERTIFICATION</label>
                <url>ce-certification</url>  <!-- can use full url also -->
                <title>CE CERTIFICATION</title>
                <prepare>true</prepare> <!-- set true if adding base url param -->
                <urlParams helper="core/url/getHomeUrl"/> 
                <position>20</position>
                <liParams/>
                <aParams>class="top-link-cert"</aParams>
                <beforeText></beforeText>
                <afterText></afterText>
            </action>
              <action method="addLink" translate="label title">
                <label>QUALITY</label>
                <url>quality</url>  <!-- can use full url also -->
                <title>QUALITY</title>
                <prepare>true</prepare> <!-- set true if adding base url param -->
                <urlParams helper="core/url/getHomeUrl"/> 
                <position>21</position>
                <liParams/>
                <aParams>class="top-link-quality"</aParams>
                <beforeText></beforeText>
                <afterText></afterText>
            </action>
              <action method="addLink" translate="label title">
                <label>PRODUCTS</label>
                <url>products</url>  <!-- can use full url also -->
                <title>PRODUCTS</title>
                <prepare>true</prepare> <!-- set true if adding base url param -->
                <urlParams helper="core/url/getHomeUrl"/> 
                <position>22</position>
                <liParams/>
                <aParams>class="top-link-quality"</aParams>
                <beforeText></beforeText>
                <afterText></afterText>
            </action>
               <action method="addLink" translate="label title">
                <label>VXS+</label>
                <url>the-new-vxs-fabric</url>  <!-- can use full url also -->
                <title>VXS+</title>
                <prepare>true</prepare> <!-- set true if adding base url param -->
                <urlParams helper="core/url/getHomeUrl"/> 
                <position>23</position>
                <liParams/>
                <aParams>class="top-link-quality"</aParams>
                <beforeText></beforeText>
                <afterText></afterText>
            </action>

               <action method="addLink" translate="label title">
                <label>FABRICS</label>
                <url>fabrics</url>  <!-- can use full url also -->
                <title>FABRICS</title>
                <prepare>true</prepare> <!-- set true if adding base url param -->
                <urlParams helper="core/url/getHomeUrl"/> 
                <position>25</position>
                <liParams/>
                <aParams>class="top-link-quality"</aParams>
                <beforeText></beforeText>
                <afterText></afterText>
            </action>
              <action method="addLink" translate="label title">
                <label>EN-NORMS</label>
                <url>en-norms</url>  <!-- can use full url also -->
                <title>EN-NORMS</title>
                <prepare>true</prepare> <!-- set true if adding base url param -->
                <urlParams helper="core/url/getHomeUrl"/> 
                <position>26</position>
                <liParams/>
                <aParams>class="top-link-videos"</aParams>
                <beforeText></beforeText>
                <afterText></afterText>
            </action>
            <action method="addLink" translate="label title">
                <label>VIDEOS</label>
                <url>videogallery</url>  <!-- can use full url also -->
                <title>VIDEOS</title>
                <prepare>true</prepare> <!-- set true if adding base url param -->
                <urlParams helper="core/url/getHomeUrl"/> 
                <position>26</position>
                <liParams/>
                <aParams>class="top-link-videos"</aParams>
                <beforeText></beforeText>
                <afterText></afterText>
            </action>
            <action method="addLink" translate="label title">
                <label>CONTACT US</label>
                <url>contacts</url>  <!-- can use full url also -->
                <title>CONTACT US</title>
                <prepare>true</prepare> <!-- set true if adding base url param -->
                <urlParams helper="core/url/getHomeUrl"/> 
                <position>27</position>
                <liParams/>
                <aParams>class="top-link-contact"</aParams>
                <beforeText></beforeText>
                <afterText></afterText>
            </action>

There is also a file called top.links.phtml which looks like this

<?php if ($toplinks && is_array($toplinks)): ?>
    <div class="nav-container">
        <ul id="nav">
            <?php echo $this->getChildHtml() ?>
            <?php foreach ($toplinks as $_toplink): ?>
                <li<?php if ($_toplink['first'] || $_toplink['last']): ?> class="<?php if ($_toplink['first']): ?>first<?php endif; ?><?php if ($_toplink['last']): ?> last<?php endif; ?>"<?php endif; ?> <?php echo $_toplink['liParams'] ?>><?php echo $_toplink['beforeText'] ?><a <?php echo $_toplink['aParams'] ?>><?php echo $_toplink['innerText'] ?></a><?php echo $_toplink['afterText'] ?></li>
            <?php endforeach; ?>
        </ul>
    </div>
<?php endif; ?>

I'm not sure what steps I need to be taking to accomplish these changes, I can create the drop-down menu in css but not sure how to implement this within magento.

Thanks

1 Answer 1

2

The core implementation of Magento only does a single-level of navigation (that is either a horizontal or vertical bar, no sub-menus). To change this you need to override the Link block to allow addition of sublinks referencing a parent and then also adjust the template to create the drop-down markup for the links defined in the XML.

The Enterprise Edition, and I believe Professional Edition, have a tool called the CMS Page Hierarchy which allows you to create a real tree of pages which you can read to generate your navigation.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.