magento 侧边栏菜单的生成制作！！3层目录！！

 

按照下面的步骤进行，下面是地址，不过有一些我给去掉了

 

 

按照下面的方式来，需要添加js段：

 

function toggleMenu(el, over)
{
    if (Element.childElements(el)) {
    var uL = Element.childElements(el)[1];
    var iS = true;
    }
    if (over) {
        Element.addClassName(el, 'over');
       
        if(iS){ uL.addClassName('shown-sub')};
    }
    else {
        Element.removeClassName(el, 'over');
        if(iS){ uL.removeClassName('shown-sub')};
    }
}

ieHover = function() {
    var items, iframe;
    items = $$('#nav ul', '.truncated_full_value .item-options', '.tool-tip');
    $$('#checkout-step-payment', '.tool-tip').each(function(el) {
        el.show();
        el.setStyle({'visibility':'hidden'})
    })
    for (var j=0; j<items.length; j++) {
        iframe = document.createElement('IFRAME');
        iframe.src = BLANK_URL;
        iframe.scrolling = 'no';
        iframe.frameBorder = 0;
        iframe.className = 'hover-fix';
        iframe.style.width = items[j].offsetWidth+"px";
        iframe.style.height = items[j].offsetHeight+"px";
        items[j].insertBefore(iframe, items[j].firstChild);
    }
    $$('.tool-tip', '#checkout-step-payment').each(function(el) {
        el.hide();
        el.setStyle({'visibility':'visible'})
    })
}
Event.observe(window, 'load', ieHover);

OK添加在js/varien/menu.js中就可以！

然后按照下面的步骤来，出来一个侧边栏

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

转载地址：http://www.magentocommerce.com/wiki/4_-_themes_and_template_customization/navigation/how_to_create_a_vertical_left_hand_menu

 

 

How to create a vertical left hand menu

1

     <reference name="left " >

          <block type="catalog/navigation" name="catalog.left nav" after="currency" template="catalog/navigation/left .phtml" />

    </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:

<div class ="vertical-nav-container box base-mini" >

<div class = "vertical-nav" >

<!--<div class = "head" >-->

<!--<h4>-->

<div class = "block block-cart" >

<div class = "block-title" >

<strong><span><?php echo $this ->__ ( 'Categories' ) ?></span></strong>

</div><!-- End block block-cart-->

<div class = "block-content" >

<?php echo $this ->__ ( 'Category Navigation:' ) ?></h4>

<ul id= "nav_vert" >

<?php foreach ( $this -> getStoreCategories ( ) as $_category ) : ?>

<?php echo $this -> drawItem ( $_category ) ?>

<?php endforeach ?> </ul>

</div>

</div><!-- End Of vertical-nav-->

<?php echo $this -> getChildHtml ( 'topLeft Links' ) ?>

</div></div><!-- End Of vertical-nav-container box base-mini-->

2)

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.     }

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.left nav" 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