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

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

阅读量：5091 次

发布时间：2019-06-13

本文共 8115 字，大约阅读时间需要 27 分钟。

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

按照下面的方式来，需要添加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

</reference>

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

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

<div

class =

"vertical-nav" >

<!--<div

class =

"head" >-->

<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

(

)

$_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-->

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

add the following to the bottom of the css

/**********************************************Vertical Nav ****************************************/
#nav { 
 
float : 
left  ; 
margin-top :15px; 
margin-left  :15px; 
font-size : 
1 .1em; 
}
/************** ALL LEVELS  *************/
/* Style consistent throughout all nav levels */
          #nav li 
{ 
position : 
relative ;text-transform: 
uppercase ; 
text-align : 
left  ;    
}
          #nav li 
.over 
{ 
z-index : 
999 ; 
}
          #nav a, 
          #nav a 
:hover 
{ 
display : 
block ; line- 
height : 
1 .3em; 
text-decoration : 
none ; 
}
          #nav span 
{ 
display : 
block ; 
cursor : 
pointer ; 
white-space : 
nowrap ; 
}
          #nav li ul span 
{ 
white-space : 
normal ; 
}
/************ 0 LEVEL  ***************/
          #nav li 
{ 
float : 
left  ; margin 
:1px  8px 11px 1px; padding 
:3px  8px; 
}
          #nav li 
.active  a 
{ 
color :# 
444 ; 
}
          #nav a 
{ 
float : 
left  ; 
background : 
url
( ../images/nav_top_level_arrow.gif 
)
no-repeat
100 % 
50 %; 
padding-right :11px; 
color :# 
444 ; 
font-weight : 
bold ; 
}
          #nav li 
.over  a, 
          #nav a 
:hover 
{ 
color :# 
444 ; 
}
          #nav li.over, 
          #nav li 
.active 
{ 
 margin 
:0  7px 10px 
0 ; border 
:1px  solid #bbb; 
background :#ececec; 
}
/************ 1ST LEVEL ************/
          #nav ul li, 
          #nav ul li.active, 
          #nav ul li 
.over 
{ 
float : 
none ; 
border : 
none ; 
background : 
none ; 
margin : 
0 ; 
padding : 
0 ; 
padding-bottom :1px; 
text-transform : 
none ; 
}
          #nav ul li 
.parent 
{ 
background : 
url
( ../images/nav_parent_arrow.gif 
)
no-repeat
100 % 
50 %; 
}
          #nav ul li 
.last 
{ 
padding-bottom : 
0 ; 
}
          #nav ul li 
.active 
{ 
margin : 
0 ; 
border : 
0 ; 
background : 
none ; 
}
          #nav ul a, 
          #nav ul a 
:hover 
{ 
float : 
none ; 
padding : 
0 ; 
background : 
none ; 
}
          #nav ul li a 
{ 
 font-weight 
:normal  !important; 
}
/************ 2ND LEVEL ************/
          #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; 
}
/* Show menu */
          #nav li 
.over  > ul 
{ 
left  :-1px; 
}
          #nav li 
.over  > ul li 
.over  > ul 
{ 
left  :100px; 
}
          #nav li 
.over  ul ul 
{ 
left  :-10000px; 
}
          #nav ul li a 
{ 
 padding 
:3px 
0 ; 
color :# 
444 !important; 
}
          #nav ul li a 
:hover 
{ 
 padding 
:3px 
0 ; 
color :#5a7f00 !important; 
}
/************ 3RD+ LEVEL ************/
          #nav ul ul 
{ 
top :5px; 
}
/**********************************************Vertical Nav ****************************************/
              #nav_vert 
{ 
 padding 
:0  8px; 
font-size :1em; 
z-index : 
999 ; 
width :180px; 
background-color : #F6F6F6; 
}
/************** ALL LEVELS *************/
/* Style consistent throughout all nav levels */
              #nav_vert li 
{ 
width :200px; 
list-style : 
none ; 
position : 
relative ; 
text-align : 
left  ; 
background-color : #F6F6F6; 
border-bottom-width : 
thin ; 
border-bottom-style : 
solid ; 
border-bottom-color : #CCCCCC; 
}
              #nav_vert li 
.over 
{ 
z-index : 
999 ; 
}
              #nav_vert li 
.active 
{ 
z-index : 
999 ; 
}
/* to prevent the li separator from showing through on mouseover on li */
              #nav_vert a 
{ 
 line- 
height : 
1 .3em; 
}
              #nav_vert a, #nav_vert a 
:hover 
{ 
display : 
block ; 
text-decoration : 
none ; 
}
              #nav_vert span 
{ 
display : 
block ; 
cursor : 
pointer ; 
color : # 
000 ; 
}
/************ 1ST LEVEL ***************/
              #nav_vert li 
{ 
float : 
left  ; 
background : 
url
( ../images/nav_bg.gif 
)
repeat-x
50 %; 
height :30px; 
margin-right :1px; 
}
              #nav_vert li 
.active  a 
{ 
color :#4c6a16; 
}
              #nav_vert a 
{ 
float : 
left  ; 
              padding 
:5px  12px 6px 8px; 
color :#4c6a16; 
font-weight : 
bold ; 
              font-family 
:Trebuchet  MS; 
font-size :13px; 
}
              #nav_vert li 
.over  a, #nav_vert a 
:hover 
{ 
color :#CCCCCC; 
}
/************ 1ST LEVEL RESET ************/
              #nav_vert ul li, #nav_vert ul li 
.active 
{ 
float : 
none ; 
height : 
auto ; 
background : 
none ; 
margin : 
0 ; 
}
              #nav_vert ul a, #nav_vert ul a 
:hover 
{ 
float : 
none ; 
padding : 
0 ; 
background : 
none ; 
}
              #nav_vert ul li a 
{ 
 font-weight 
:normal  !important; 
}
/************ 2ND LEVEL ***********/
              #nav_vert ul 
{ 
position : 
absolute ; 
width :200px; 
margin-left  :180px; 
top :0px; 
left  :-10000px; 
              border 
:1px  solid # 
666666 ; 
}
/* Show menu */
              #nav_vert li 
.over  ul 
{ 
left  : 
0 ; 
}
              #nav_vert li 
.over  ul ul 
{ 
left  :-10000px; 
}
              #nav_vert li 
.over  ul li 
.over  ul 
{ 
left  :0px; 
}
              #nav_vert ul li a 
{ 
background :#FFFFFF 
/*#ecf3f6*/ ; 
}
              #nav_vert ul li a 
:hover 
{ 
background : #F2F1D2; 
/*#d5e4eb;*/
}
              #nav_vert ul li a span 
{ 
background : 
url
( ../images/nav_divider.gif 
)
repeat-x
0
100 %; 
}
              #nav_vert ul li a, #nav_vert ul li a 
:hover 
{ 
color :#2f2f2f !important; 
}
              #nav_vert ul span, #nav_vert ul li 
.last  li span 
{ 
 padding 
:6px  15px 6px 15px; 
}
              #nav_vert ul li 
.last  span 
{ 
background : 
none ; 
}
/************ 3RD+ LEVEL ************/
              #nav_vert ul ul 
{ 
top :5px; 
}
              #nav_vert ul ul ul 
{ 
left  :-10000px; 
}
              #nav_vert li 
.over  ul li 
.over  ul ul 
{ 
left  :-10000px; 
}
              #nav_vert li 
.over  ul li 
.over  ul li 
.over  ul 
{ 
left  :100px; 
}
/* Fix for the IE bug */
              #nav_vert iframe 
{ 
position : 
absolute ; 
left  : -1px; 
top : 
0 ; 
z-index : 
-1 ; 
              filter: progid:DXImageTransform.Microsoft.Alpha 
( style= 
0 ,opacity= 
0
) ; 
}

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.

<reference name ="left " > 
<!--  <block type="catalog/navigation" name="catalog.left nav" after="currency" template="catalog/navigation/left .phtml"/>  --> 
<block type ="catalog/navigation" before="-" name ="catalog.vertnav" template="catalog/navigation/vert_nav.phtml" /> 
< /reference>