本文共 8039 字,大约阅读时间需要 26 分钟。
按照下面的步骤进行,下面是地址,不过有一些我给去掉了
按照下面的方式来,需要添加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
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" >-->
<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>
<?php foreach ( $this ->
getStoreCategories ( ) as $_category ) :
?> <?php echo $this ->
drawItem ( $_category ) ?> <?php endforeach ?> </ul>
</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
: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 a
:hover { color :#
444 ;
} -
-
#nav li
.active { margin
:0 7px 10px
0 ; border
:1px solid #bbb;
background :#ececec;
} -
-
/************ 1ST LEVEL ************/ -
-
-
#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
: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;
} -
-
-
#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 ************/ -
-
-
-
/**********************************************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 */ -
-
-
-
-
-
-
-
-
-
-
-
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;
} -
-
-
-
-
-
-
-
padding
:5px 12px 6px 8px;
-
-
-
-
-
-
font-family
:Trebuchet MS;
-
-
-
-
#nav_vert li
.over a, #nav_vert a
:hover { color :#CCCCCC;
} -
-
-
-
/************ 1ST LEVEL RESET ************/ -
-
#nav_vert ul li, #nav_vert ul li
.active { -
-
-
-
-
-
-
-
-
-
-
-
-
-
#nav_vert ul a, #nav_vert ul a
:hover { -
-
-
-
-
-
-
-
-
-
#nav_vert ul li a
{ font-weight
:normal !important;
} -
-
-
-
/************ 2ND LEVEL ***********/ -
-
-
-
-
-
-
-
-
-
-
-
-
-
border
:1px solid #
666666 ;
-
-
-
-
-
-
-
-
-
-
#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;
} -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
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" /> -
You are done good luck with all the steps you will learn alot thru all of this