实现Magento侧边栏菜单三层目录方法_magento教程_php教程

按照下面的步骤进行，实现Magento侧边栏菜单三层目录方法，下面是地址，不过有一些好模板给去掉了

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

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

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

英文原版

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:

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

</div>

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

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

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

<?php endforeach ?> </ul>

</div>

</div>

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

</div></div>

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>

(责任编辑：好模板)