Try the Demo

Magento

  • Home
  • Wiki
  • 4 - Themes And Template Customization
  • Navigation
  • How to create a vertical left hand menu

How to create a vertical left hand menu

Last modified by LJC on Sun, January 9, 2011 17:07
Source|Old Revisions  

Using the modern theme to create a menu like http://www.cl-floraldesigns.co.uk,

Change Log: Revised the directory structure to comply with Magento ver. 1.4.0.1, Redefined the HTML CSS Calls in the vert_nav.phtml file as well as corrected the CSS code. updated By Bill Live Example seen here http://yogavault.com/shop/magento/

Note: This guide shows you how to create and style your own left category menu. To use the existing left category menu on all pages, including the home page, remove “<?php if (!Mage::registry(’current_category’)) return ?>” from .../template/catalog/navigation/left.phtml and move

  1.         <reference name="left">
  2.             <block type="catalog/navigation" name="catalog.leftnav" after="currency" template="catalog/navigation/left.phtml"/>
  3.         </reference>

up from the catalog_category_default content into the default content in layout/catalog.xml

1)

Create vert_nav.phtml in app / design / frontend / base / default /template / catalog / navigation containing this:

  1. <div class="vertical-nav-container box base-mini">
  2. <div class="vertical-nav">
  3.  
  4. <!--<div class="head">-->
  5.  
  6. <!--<h4>-->
  7. <div class="block block-cart">
  8.     <div class="block-title">
  9.         <strong><span><?php echo $this->__('Categories') ?></span></strong>
  10. </div><!--End block block-cart-->
  11.  
  12.  
  13. <div class="block-content">
  14.  
  15. <!--</h4>-->
  16. <!--</div>--><!--End Of head-->
  17.  
  18. <h4 class="no-display">
  19. <?php echo $this->__('Category Navigation:') ?></h4>
  20. <ul id="nav_vert">
  21. <?php foreach ($this->getStoreCategories() as $_category): ?>
  22. <?php echo $this->drawItem($_category) ?>
  23. <?php endforeach ?> </ul>
  24. </div>
  25. </div><!--End Of vertical-nav-->
  26.  
  27. <?php echo $this->getChildHtml('topLeftLinks') ?>
  28.  
  29. </div></div><!--End Of vertical-nav-container box base-mini-->

2)

in app / design / frontend / default / modern / layout / catalog.xml

Use this section to include there is no deletion of code just commented out!!

  1. <!--
  2. Category default layout
  3. -->
  4.  
  5.     <catalog_category_default translate="label">
  6.         <label>Catalog Category (Non-Anchor)</label>
  7.         <reference name="root">
  8.             <action method="setTemplate"><template>page/2columns-left.phtml</template></action>
  9.         </reference>
  10.        
  11.         <reference name="left">
  12.        
  13. <!--  <block type="catalog/navigation" name="catalog.leftnav" after="currency" template="catalog/navigation/left.phtml"/>-->
  14.      
  15.        <block type="catalog/navigation" before="-" name="catalog.vertnav" template="catalog/navigation/vert_nav.phtml"/>
  16.        
  17.         </reference>

.......

3) in skin/frontend/default/modern/css/widgets.css

add the following to the bottom of the css

  1.  
  2. /**********************************************Vertical Nav ****************************************/
  3.  
  4.  
  5. #nav { float:left; margin-top:15px; margin-left:15px; font-size:1.1em; }
  6.  
  7. /************** ALL LEVELS  *************/ /* Style consistent throughout all nav levels */
  8. #nav li { position:relative;text-transform:uppercase; text-align:left;    }
  9. #nav li.over { z-index:999; }
  10. #nav a,
  11. #nav a:hover { display:block; line-height:1.3em; text-decoration:none; }
  12. #nav span { display:block; cursor:pointer; white-space:nowrap; }
  13. #nav li ul span {white-space:normal; }
  14.  
  15. /************ 0 LEVEL  ***************/
  16. #nav li { float:left; margin:1px 8px 11px 1px; padding:3px 8px; }
  17. #nav li.active a { color:#444; }
  18. #nav a { float:left; background:url(../images/nav_top_level_arrow.gif) no-repeat 100% 50%; padding-right:11px; color:#444; font-weight:bold; }
  19. #nav li.over a,
  20. #nav a:hover { color:#444; }
  21. #nav li.over,
  22. #nav li.active { margin:0 7px 10px 0; border:1px solid #bbb; background:#ececec; }
  23.  
  24. /************ 1ST LEVEL ************/
  25. #nav ul li,
  26. #nav ul li.active,
  27. #nav ul li.over { float:none; border:none; background:none; margin:0; padding:0; padding-bottom:1px; text-transform:none; }
  28. #nav ul li.parent { background:url(../images/nav_parent_arrow.gif) no-repeat 100% 50%; }
  29. #nav ul li.last { padding-bottom:0; }
  30. #nav ul li.active { margin:0; border:0; background:none; }
  31. #nav ul a,
  32. #nav ul a:hover { float:none; padding:0; background:none; }
  33. #nav ul li a { font-weight:normal !important; }
  34.  
  35. /************ 2ND LEVEL ************/
  36. #nav ul { position:absolute; width:15em; top:22px; left:-10000px; border:1px solid #bbb; border-bottom:2px solid #999; padding:3px 8px; background:#fcfcfc; font-size:11px; }
  37.  
  38. /* Show menu */
  39. #nav li.over > ul { left:-1px; }
  40. #nav li.over > ul li.over > ul { left:100px; }
  41. #nav li.over ul ul { left:-10000px; }
  42.  
  43. #nav ul li a { padding:3px 0; color:#444 !important; }
  44. #nav ul li a:hover { padding:3px 0; color:#5a7f00 !important; }
  45.  
  46. /************ 3RD+ LEVEL ************/
  47. #nav ul ul { top:5px; }
  48.  
  49.  
  50.     /**********************************************Vertical Nav ****************************************/
  51.  
  52.     #nav_vert { padding:0 8px; font-size:1em; z-index:999; width:180px; background-color: #F6F6F6; }
  53.  
  54.      
  55.  
  56.     /************** ALL LEVELS *************/ /* Style consistent throughout all nav levels */
  57.  
  58.     #nav_vert li {
  59.  
  60.     width:200px;
  61.  
  62.     list-style:none;
  63.  
  64.     position:relative;
  65.  
  66.     text-align:left;
  67.  
  68.     background-color: #F6F6F6;
  69.  
  70.     border-bottom-width: thin;
  71.  
  72.     border-bottom-style: solid;
  73.  
  74.     border-bottom-color: #CCCCCC;
  75.  
  76.     }
  77.  
  78.     #nav_vert li.over { z-index:999; }
  79.  
  80.     #nav_vert li.active { z-index:999; } /* to prevent the li separator from showing through on mouseover on li */
  81.  
  82.     #nav_vert a { line-height:1.3em; }
  83.  
  84.     #nav_vert a, #nav_vert a:hover { display:block; text-decoration:none; }
  85.  
  86.     #nav_vert span { display:block; cursor:pointer; color: #000; }
  87.  
  88.      
  89.  
  90.     /************ 1ST LEVEL ***************/
  91.  
  92.     #nav_vert li { float:left; background:url(../images/nav_bg.gif) repeat-x 50%; height:30px; margin-right:1px; }
  93.  
  94.     #nav_vert li.active a { color:#4c6a16; }
  95.  
  96.     #nav_vert a {
  97.  
  98.      
  99.  
  100.     float:left;
  101.  
  102.     padding:5px 12px 6px 8px;
  103.  
  104.     color:#4c6a16;
  105.  
  106.     font-weight:bold;
  107.  
  108.     font-family:Trebuchet MS;
  109.  
  110.     font-size:13px;}
  111.  
  112.     #nav_vert li.over a, #nav_vert a:hover { color:#CCCCCC; }
  113.  
  114.      
  115.  
  116.     /************ 1ST LEVEL RESET ************/
  117.  
  118.     #nav_vert ul li, #nav_vert ul li.active {
  119.  
  120.      
  121.  
  122.     float:none;
  123.  
  124.     height:auto;
  125.  
  126.     background:none;
  127.  
  128.     margin:0;
  129.  
  130.     }
  131.  
  132.     #nav_vert ul a, #nav_vert ul a:hover {
  133.  
  134.     float:none;
  135.  
  136.     padding:0;
  137.  
  138.     background:none;
  139.  
  140.     }
  141.  
  142.     #nav_vert ul li a { font-weight:normal !important; }
  143.  
  144.      
  145.  
  146.     /************ 2ND LEVEL ***********/
  147.  
  148.     #nav_vert ul {
  149.  
  150.     position: absolute;
  151.  
  152.     width:200px;
  153.  
  154.     margin-left:180px;
  155.  
  156.     top:0px;
  157.  
  158.     left:-10000px;
  159.  
  160.     border:1px solid #666666;
  161.  
  162.     }
  163.  
  164.      
  165.  
  166.      
  167.  
  168.     /* Show menu */
  169.  
  170.     #nav_vert li.over ul { left:0; }
  171.  
  172.     #nav_vert li.over ul ul { left:-10000px; }
  173.  
  174.     #nav_vert li.over ul li.over ul { left:0px; }
  175.  
  176.      
  177.  
  178.     #nav_vert ul li a { background:#FFFFFF/*#ecf3f6*/; }
  179.  
  180.     #nav_vert ul li a:hover { background: #F2F1D2; /*#d5e4eb;*/ }
  181.  
  182.     #nav_vert ul li a span { background:url(../images/nav_divider.gif) repeat-x 0 100%; }
  183.  
  184.     #nav_vert ul li a, #nav_vert ul li a:hover { color:#2f2f2f !important; }
  185.  
  186.     #nav_vert ul span, #nav_vert ul li.last li span { padding:6px 15px 6px 15px; }
  187.  
  188.     #nav_vert ul li.last span { background:none; }
  189.  
  190.      
  191.  
  192.      
  193.  
  194.     /************ 3RD+ LEVEL ************/
  195.  
  196.      
  197.  
  198.     #nav_vert ul ul { top:5px;}
  199.  
  200.     #nav_vert ul ul ul { left:-10000px;}
  201.  
  202.     #nav_vert li.over ul li.over ul ul { left:-10000px;}
  203.  
  204.     #nav_vert li.over ul li.over ul li.over ul { left:100px; }
  205.  
  206.      
  207.  
  208.     /* Fix for the IE bug */
  209.  
  210.      
  211.  
  212.     #nav_vert iframe {
  213.  
  214.     position: absolute;
  215.  
  216.     left: -1px;
  217.  
  218.     top: 0;
  219.  
  220.     z-index: -1;
  221.  
  222.     filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
  223.  
  224.     }

Display on home page

Go to app/design/frontend/base/default/template/catolog/navigation/top.phtml replace top.phtml with this below I have simply Commented out the Top Navigation so if ya want it again its still there

  1. <?php
  2. /**
  3. * Magento
  4. *
  5. * NOTICE OF LICENSE
  6. *
  7. * This source file is subject to the Academic Free License (AFL 3.0)
  8. * that is bundled with this package in the file LICENSE_AFL.txt.
  9. * It is also available through the world-wide-web at this URL:
  10. * http://opensource.org/licenses/afl-3.0.php
  11. * If you did not receive a copy of the license and are unable to
  12. * obtain it through the world-wide-web, please send an email
  13. * to license@magentocommerce.com so we can send you a copy immediately.
  14. *
  15. * DISCLAIMER
  16. *
  17. * Do not edit or add to this file if you wish to upgrade Magento to newer
  18. * versions in the future. If you wish to customize Magento for your
  19. * needs please refer to http://www.magentocommerce.com for more information.
  20. *
  21. * @category    design
  22. * @package     base_default
  23. * @copyright   Copyright (c) 2009 Irubin Consulting Inc. DBA Varien (http://www.varien.com)
  24. * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
  25. */
  26. ?>
  27. <?php
  28. /**
  29. * Top menu for store
  30. *
  31. * @see Mage_Catalog_Block_Navigation
  32. */
  33. ?>
  34. <!--<?php $_menu = ''?>
  35. <?php foreach ($this->getStoreCategories() as $_category): ?>
  36.     <?php $_menu .= $this->drawItem($_category) ?>
  37. <?php endforeach ?>
  38. <?php if ($_menu): ?>
  39. <div class="nav-container">
  40.     <ul id="nav">
  41.         <?php echo $_menu; ?>
  42.     </ul>
  43. </div>
  44. <?php endif; ?>-->

now to put the Nav on the Home page

go to Admin Back End

CMS » Pages » click on Home page line » design

in the Design Box paste this code<br /> NOTE: You need to set the name value in: “<reference name=”“>” to left or right depending on what the page layout is. If it is 2 columns left, then the code below will work great. If it is 2 columns right, then change “left” to “right” and then the block will show up.

  1. <reference name="left">
  2.     <!--  <block type="catalog/navigation" name="catalog.leftnav" after="currency" template="catalog/navigation/left.phtml"/>-->
  3.         <block type="catalog/navigation" before="-" name="catalog.vertnav" template="catalog/navigation/vert_nav.phtml"/>
  4. </reference>

You are done good luck with all the steps you will learn alot thru all of this




 

Explore the Wiki

Magento Developer Certification

Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs