Archive for the ‘ jQuery ’ Category

Display slide cart on mousehover of shopping cart image in right sidebar using prototype in Magento

First add following code in page/html/header.phtml

<div class=”ma-easycart” style=”right: 0px; top: 200px; display: none;” id=”cart_item1″>
<?php echo $this->getLayout()->createBlock(‘checkout/cart_sidebar’)->setTemplate(‘checkout/cart/sidebar.phtml’)->toHtml(); ?>
</div>

<div class=”ma-easysidebar” style=”right: 0px; background-position: 100% 0px; top: 200px; display: block;” id=”cart_icon_area”></div>
<script type=”text/javascript”>
//<![CDATA[
$(“cart_icon_area”).observe(‘mouseover’, function() {
$(‘cart_item1’).setStyle({ display: ‘block’ });
$(this).setStyle({ display: ‘none’ });
});

$(“cart_icon_area”).observe(‘mouseout’, function() {
$(‘cart_item1’).setStyle({ display: ‘none’ });
$(this).setStyle({ display: ‘block’ });
});

$(“cart_item1”).observe(‘mouseover’, function() {
$(this).setStyle({ display: ‘block’ });
$(‘cart_icon_area’).setStyle({ display: ‘none’ });
});
$(“cart_item1”).observe(‘mouseout’, function() {
$(this).setStyle({ display: ‘none’ });
$(‘cart_icon_area’).setStyle({ display: ‘block’ });
});

//]]>
</script>

Now add following css code into ma-easycart.css  which is created in skin\frontend\default\default\css path.

.ma-easycart {
    display: none;
    min-height: 120px;
    position: fixed;
    width: 200px;
}
.ma-easysidebar {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("../images/mamycart.png");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto auto;
    height: 120px;
    position: fixed;
    width: 28px;
}

Now add following code in page.xml just after <action method=”addCss”><stylesheet>css/styles.css</stylesheet></action>

<action method=”addCss”><stylesheet>css/ma-easycart.css</stylesheet></action>

Now copy following images into skin\frontend\default\default\images path. 

mamycart

Thats it…!!!

Advertisements

Display slide cart on onclick of shopping cart link in header in Magento

First add following code in head.phtml at last.

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”&gt;
</script>

<script type=”text/javascript”>

jQuery.noConflict();

var c = jQuery ;
c(document).ready(function(){

c(‘.ma-shoppingcart’).click(function(){

c(‘.ma-topcart’).slideToggle();
});

});

</script>

Now add following code in page/html/header.phtml

<? $base_url=Mage::getUrl()?>
<?php
$count = $this->helper(‘checkout/cart’)->getSummaryCount(); //get total items in cart
$total = $this->helper(‘checkout/cart’)->getQuote()->getGrandTotal(); //get total price
//if(!$count){$count=0;}
if($count){$items= $count;}else{$items=0;}
$total=number_format($total, 2);
?>

<div class=”ma-shoppingcart” id=”ma-shoppingcart”>
<div class=”cart-item”>Shopping Cart</div>
<span class=”ma-inactive”><?php
if($items > 1){echo ” (“.$items. ” Items)”;}
else if ($items == 1){echo ” (“.$items. ” Item)”;}
else {echo ” (0 Item)”;}
?></span>
</div>

<div class=”ma-topcart” style=”display: none;” id=”ma-topcart”>
<?php echo $this->getLayout()->createBlock(‘checkout/cart_sidebar’)->setTemplate(‘checkout/cart/sidebar.phtml’)->toHtml(); ?>
</div>

Now add following css code into ma-easycart.css  which is created in skin\frontend\default\default\css path.

.ma-topcart {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #FFFFFF;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    margin-bottom: 0;
    margin-left: 30px;
    margin-right: 0;
    margin-top: -10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 15px;
    position: absolute;
    text-align: left;
    width: 220px;
    z-index: 990;
}
.ma-topcart .mini-products-list .product-details {
    margin-left: 65px;
}
.ma-topcart .mini-products-list .product-image {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-bottom-color: #EFEFEF;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color-ltr-source: physical;
    border-left-color-rtl-source: physical;
    border-left-color-value: #EFEFEF;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-left-style-value: solid;
    border-left-width-ltr-source: physical;
    border-left-width-rtl-source: physical;
    border-left-width-value: 1px;
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    border-right-color-value: #EFEFEF;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
    border-right-style-value: solid;
    border-right-width-ltr-source: physical;
    border-right-width-rtl-source: physical;
    border-right-width-value: 1px;
    border-top-color: #EFEFEF;
    border-top-style: solid;
    border-top-width: 1px;
}
.ma-topcart a.details {
    font-size: 11px;
}
.ma-topcart .btn-remove, .ma-topcart .btn-edit {
    float: right;
}
.ma-topcart .btn-remove, .ma-topcart .block .btn-edit {
    margin-bottom: 2px;
    margin-left: 5px;
    margin-right: 0;
    margin-top: 1px;
}
.ma-topcart .product-name a {
    font-size: 12px;
}
.ma-topcart li {
    border-bottom-color: #FFFFFF;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    padding-bottom: 7px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 7px;
}
.ma-topcart .summary {
    margin-top: 5px;
}
.ma-topcart {
    display: none;
}
.ma-shoppingcart {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #FFFFFF;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    color: #5C991F;
    font-weight: bold;
    margin-bottom: 0;
    margin-left: 30px;
    margin-right: 0;
    margin-top: -55px;
    padding-bottom: 0;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 5px;
    position: absolute;
    z-index: 900;
}
.ma-shoppingcart span:hover {
    cursor: pointer;
}
.ma-shoppingcart .ma-inactive {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
   /* background-image: url("../images/down.png");  */
    background-origin: padding-box;
    background-position: 100% 60%;
    background-repeat: no-repeat;
    background-size: auto auto;
}
.ma-shoppingcart span {
    font-size: 18px;
    padding-right: 30px;
}
.ma-shoppingcart .ma-active {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("../images/up.png");
    background-origin: padding-box;
    background-position: 100% 60%;
    background-repeat: no-repeat;
    background-size: auto auto;
}
.ma-shoppingcart .cart-item {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("../images/cart.png");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto auto;
    padding-left: 28px;
}

Now add following code in page.xml just after <action method=”addCss”><stylesheet>css/styles.css</stylesheet></action>

<action method=”addCss”><stylesheet>css/ma-easycart.css</stylesheet></action>

Thats it…!!!

Display slide login form on onclick of login link in header in Magento

First add following code in head.phtml at last.

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”&gt;
</script>

<script type=”text/javascript”>

jQuery.noConflict();

var c = jQuery ;
c(document).ready(function(){

<?php
if (!$this->helper(‘customer’)->isLoggedIn() )
{ ?>
c(“li:last a”, “ul.links”).remove();
c(“li:last”, “ul.links”).addClass(“ma-login”);
c(‘ul.links li.last’).append(‘<a class=”login-show” href=”javascript:void(0);”>Log In</a>’);
c(‘.ma-login’).click(function(){
c(‘.ma-quicklogin’).slideToggle();
});
<?php } ?>

});

</script>

 

Now add following code in page/html/header.phtml just after  <?php echo $this->getChildHtml(‘topLinks’) ?>

<div class=”ma-quicklogin” style=”display: none;”>
<form method=”post” action=”<?php echo $base_url;?>customer/account/loginPost/”>
<div class=”ma-content-login”>
<div class=”ma-user”>
<div class=”ma-label”><label for=”mini-login”>Email:</label></div>
<input type=”text” class=”input-text” id=”mini-login” name=”login[username]”>
</div>
<div class=”ma-pass”>
<div class=”ma-label”><label for=”mini-password”>Password:</label></div>
<input type=”password” class=”input-text” id=”mini-password” name=”login[password]”>
</div>
<div class=”actions”>
<button class=”button” type=”submit”><span><span>Login</span></span></button>
<?php /* <button class=”button btn-cancel” type=”submit”><span><span>Cancel</span></span></button> */ ?>
</div>
<div class=”ma-register”><a title=”register” href=”<?php echo $base_url;?>customer/account/create/”>Register</a></div>
<div class=”ma-forgotpass”> <a title=”forgot your password” href=”<?php echo $base_url;?>customer/account/forgotpassword/”>Forgot Your Password?</a></div>
</div>
</form>
</div>

Now add following css code into ma-quicklogin.css  which is created in skin\frontend\default\default\css path.

.ma-quicklogin {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #FFFFFF;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    border-bottom-color: #CDCDCD;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color-ltr-source: physical;
    border-left-color-rtl-source: physical;
    border-left-color-value: #CDCDCD;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-left-style-value: solid;
    border-left-width-ltr-source: physical;
    border-left-width-rtl-source: physical;
    border-left-width-value: 1px;
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    border-right-color-value: #CDCDCD;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
    border-right-style-value: solid;
    border-right-width-ltr-source: physical;
    border-right-width-rtl-source: physical;
    border-right-width-value: 1px;
    border-top-color: #CDCDCD;
    border-top-style: solid;
    border-top-width: 1px;
    display: none;
    line-height: 30px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    position: absolute;
    right: 20px;
    text-align: left;
    top: 75px;
    width: 155px;
    z-index: 999;
}

.header .header .links li.ma-login {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
}
.ma-quicklogin .ma-user, .ma-quicklogin .ma-pass, .ma-quicklogin .actions, .ma-quicklogin .ma-forgotpass, .ma-quicklogin .ma-register {
    clear: both;
    float: left;
}
.ma-quicklogin .actions {
    padding-bottom: 4px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 10px;
}
.ma-quicklogin .actions .button {
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 15px;
    padding-top: 0;
}
.ma-quicklogin .actions .button {
    float: left;
}
.ma-quicklogin .ma-label {
    float: left;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 6px;
    padding-top: 0;
    width: 60px;
}
.ma-quicklogin .input-text {
    clear: both;
    float: left;
    width: 150px;
}
.ma-quicklogin .ma-forgotpass, .ma-quicklogin .ma-register {
    line-height: 25px;
}
ul.ma-account {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #FFFFFF;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    border-bottom-color: #CDCDCD;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color-ltr-source: physical;
    border-left-color-rtl-source: physical;
    border-left-color-value: #CDCDCD;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-left-style-value: solid;
    border-left-width-ltr-source: physical;
    border-left-width-rtl-source: physical;
    border-left-width-value: 1px;
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    border-right-color-value: #CDCDCD;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
    border-right-style-value: solid;
    border-right-width-ltr-source: physical;
    border-right-width-rtl-source: physical;
    border-right-width-value: 1px;
    border-top-color: #CDCDCD;
    border-top-style: solid;
    border-top-width: 1px;
    padding-bottom: 15px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 8px;
    position: absolute;
    text-align: left;
    visibility: hidden;
}
.header ul.ma-account li {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    display: block;
    float: none;
    padding-bottom: 0;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 0;
}
.header ul.ma-account li a {
    -moz-text-blink: none;
    -moz-text-decoration-color: -moz-use-text-color;
    -moz-text-decoration-line: none;
    -moz-text-decoration-style: solid;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #FFFFFF;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    border-bottom-color: #CDCDCD;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    color: #000000;
    display: block;
    padding-bottom: 3px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 3px;
    width: 150px;
}
.header ul.ma-account a:hover {
    color: #EA7900;
}
.header .links li.ma-login {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
}

Now add following code in page.xml just after <action method=”addCss”><stylesheet>css/styles.css</stylesheet></action>

<action method=”addCss”><stylesheet>css/ma-quicklogin.css</stylesheet></action>

 

Thats it…!!!

 

Add Categories in Left/Right sidebar in Magento

First add following code into dropdown.js which is created in js/vertical_menu path.

function toggleMenu(el, over)
{
if (over) {
Element.addClassName(el, ‘over’);
}
else {
Element.removeClassName(el, ‘over’);
}
}

var mainNav = function() {

var main = {
obj_nav : $(arguments[0]) || $(“ma-dropdown”),

settings : {
show_delay : 0,
hide_delay : 0,
_ie6 : /MSIE 6.+Win/.test(navigator.userAgent),
_ie7 : /MSIE 7.+Win/.test(navigator.userAgent)
},

init : function(obj, level) {
obj.lists = obj.childElements();
obj.lists.each(function(el,ind){
main.handlNavElement(el);
if((main.settings._ie6 || main.settings._ie7) && level){
main.ieFixZIndex(el, ind, obj.lists.size());
}
});
if(main.settings._ie6 && !level){
document.execCommand(“BackgroundImageCache”, false, true);
}
},

handlNavElement : function(list) {
if(list !== undefined){
list.onmouseover = function(){
main.fireNavEvent(this,true);
};
list.onmouseout = function(){
main.fireNavEvent(this,false);
};
if(list.down(“ul”)){
main.init(list.down(“ul”), true);
}
}
},

ieFixZIndex : function(el, i, l) {
if(el.tagName.toString().toLowerCase().indexOf(“iframe”) == -1){
el.style.zIndex = l – i;
} else {
el.onmouseover = “null”;
el.onmouseout = “null”;
}
},

fireNavEvent : function(elm,ev) {
if(ev){
elm.addClassName(“over”);
elm.down(“a”).addClassName(“over”);
if (elm.childElements()[1]) {
main.show(elm.childElements()[1]);
}
} else {
elm.removeClassName(“over”);
elm.down(“a”).removeClassName(“over”);
if (elm.childElements()[1]) {
main.hide(elm.childElements()[1]);
}
}
},

show : function (sub_elm) {
if (sub_elm.hide_time_id) {
clearTimeout(sub_elm.hide_time_id);
}
sub_elm.show_time_id = setTimeout(function() {
if (!sub_elm.hasClassName(“shown-sub”)) {
sub_elm.addClassName(“shown-sub”);
}
}, main.settings.show_delay);
},

hide : function (sub_elm) {
if (sub_elm.show_time_id) {
clearTimeout(sub_elm.show_time_id);
}
sub_elm.hide_time_id = setTimeout(function(){
if (sub_elm.hasClassName(“shown-sub”)) {
sub_elm.removeClassName(“shown-sub”);
}
}, main.settings.hide_delay);
}

};
if (arguments[1]) {
main.settings = Object.extend(main.settings, arguments[1]);
}
if (main.obj_nav) {
main.init(main.obj_nav, false);
}
};

document.observe(“dom:loaded”, function() {
//run navigation without delays and with default id=”#nav”
//mainNav();

//run navigation with delays
mainNav(“ma-dropdown”, {“show_delay”:”100″,”hide_delay”:”100″});
});

 

Now add following code in page.xml just after <action method=”addJs”><script>mage/cookies.js</script></action>

<action method=”addJs”><script>vertical_menu/dropdown.js</script></action>

 

Now add following code into catalog.xml in <default> tag in <reference name=”left”> or <reference name=”right”>

<block type=”catalog/navigation” name=”catalog.leftnav.nav” after=”-” template=”catalog/navigation/left_nav.phtml”/>

 

Now add following code in catalog/navigation/left_nav.phtml

<div class=”block block-verticalmenu”>
<div class=”block-title”>
<strong><span><?php echo $this->__(‘Categories’) ?></span></strong>
</div><!–End block block-cart–>
<div class=”block-content”>
<ul id=”ma-dropdown” class=”dropdown”>
<?php foreach ($this->getStoreCategories() as $_category): ?>
<?php echo $this->drawItem($_category) ?>
<?php endforeach ?> </ul>
</div><!–End Of vertical-nav–>
<?php echo $this->getChildHtml(‘topLeftLinks’) ?>
</div><!–End Of vertical-nav-container box base-mini–>

 

Now add following css code into dropdow.css  which is created in skin\frontend\default\default\css path.

/*———– dropdown menu ———–*/
#ma-dropdown {
width: 193px;
}
/* All Levels */ /* Style consistent throughout all nav levels */
#ma-dropdown li {
position:relative;
text-align:left;
border-bottom: 1px solid #cdcdcd;
}
#ma-dropdown li.last {
border: none;
}
#ma-dropdown li.over {
z-index:998;
}
#ma-dropdown a,
#ma-dropdown a:hover {
display:block;
line-height:1.3em;
text-decoration:none;
}
#ma-dropdown span {
display:block;
cursor:pointer;
white-space:nowrap;
}
#ma-dropdown li ul span {
white-space:normal;
}
#ma-dropdown ul li.parent a {
}
#ma-dropdown ul li.parent li a {

}
/* 0 Level */
#ma-dropdown li.active a {
color:#d96708;
}
#ma-dropdown a {
padding:6px 10px;
color:#464646;
font-weight:bold;
}
#ma-dropdown li.over a,
#ma-dropdown a:hover {
color:#d96708;
}
/* 1st Level */
#ma-dropdown ul li,
#ma-dropdown ul li.active {
margin:0;
}
#ma-dropdown ul li.last {
background:#ecf3f6;
padding-bottom:0;
}
#ma-dropdown ul a,
#ma-dropdown ul a:hover {
background:none;
}
#ma-dropdown ul li a {
font-weight:normal !important;
}
/* 2nd Level */
#ma-dropdown ul,
#ma-dropdown div {
position:absolute;
width:193px;
top:-1px;
left:-10000px;
border:1px solid #cdcdcd;
}
#ma-dropdown div ul {
position:static;
width:auto;
border:none;
}
/* 3rd+ Level */
#ma-dropdown ul ul,
#ma-dropdown ul div {
top:-1px;
}
#ma-dropdown ul li a { background:#fff; }
#ma-dropdown ul li a:hover { background:#d5e4eb; }
#ma-dropdown ul li a,
#ma-dropdown ul li a:hover { color:#2f2f2f !important; }
#ma-dropdown ul span,
#ma-dropdown ul li.last li span { }
/* Show menu */
#ma-dropdown li ul.shown-sub,
#ma-dropdown li div.shown-sub { left:193px; z-index:999; }
#ma-dropdown li .shown-sub ul.shown-sub,
#ma-dropdown li .shown-sub li div.shown-sub { left:193px; }
/********** Navigation > */

Add Category Accordion in Left/Right Sidebar in Magento

First add following code in head.phtml at last.

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”&gt;
</script>

<script type=”text/javascript”>

jQuery.noConflict();

var c = jQuery ;
c(document).ready(function(){

(function(c){
c.fn.extend({
accordion: function() {
return this.each(function() {

var cul = c(this);

if(cul.data(‘accordiated’))
return false;

c.each(cul.find(‘ul, li>div’), function(){
c(this).data(‘accordiated’, true);
c(this).hide();
});

c.each(cul.find(‘span.head’), function(){
c(this).click(function(e){
activate(this);
return void(0);
});
});

var active = (location.hash)?c(this).find(‘a[href=’ + location.hash + ‘]’)[0]:”;

if(active){
activate(active, ‘toggle’);
c(active).parents().show();
}

function activate(el,effect){
c(el).parent(‘li’).toggleClass(‘active’).siblings().removeClass(‘active’).children(‘ul, div’).slideUp(‘fast’);
c(el).siblings(‘ul, div’)[(effect || ‘slideToggle’)]((!effect)?’fast’:null);
}

});
}
});
})(c);

c(“ul.accordion li.parent”).each(function(){
c(this).append(‘<span class=”head”><a href=”javascript:void(0)”></a></span>’);
});

c(‘ul.accordion’).accordion();

c(“ul.accordion li.active”).each(function(){
c(this).children().next(“ul”).css(‘display’, ‘block’);
});

});

</script>

Now add following code into catalog.xml in <default> tag in <reference name=”left”> or <reference name=”right”>

<block type=”catalog/navigation” name=”catalog.leftnav.accordion” after=”currency” template=”catalog/navigation/accordion.phtml”/>

Now add following code in catalog/navigation/accordion.phtml

<div class=”block block-verticalmenu”>
<div class=”block-title”>
<strong><span><?php echo $this->__(‘Categories’) ?></span></strong>
</div><!–End block block-cart–>
<div class=”block-content”>
<ul id=”ma-accordion” class=”accordion”>
<?php foreach ($this->getStoreCategories() as $_category): ?>
<?php echo $this->drawItem($_category) ?>
<?php endforeach ?> </ul>
</div><!–End Of vertical-nav–>
<?php echo $this->getChildHtml(‘topLeftLinks’) ?>
</div><!–End Of vertical-nav-container box base-mini–>

Now add following css code into dropdow.css  which is created in skin\frontend\default\default\css path.

/* ======================================================================================= */
/*——Accordion ———*/
.accordion {
list-style-type: none;
padding: 0;
}
.accordion ul {
padding: 0;
margin: 0;
float: left;
display: block;
width: 100%;
}
.accordion li {
background: #ccc;
cursor: pointer;
list-style-type: none;
padding: 0;
margin: 0;
float: left;
display: block;
width: 100%;
position: relative;
}
.accordion li.active>a {
/*background: url(‘../images/close.gif’) no-repeat center right;*/
}
.accordion li div {
padding: 20px;
background: #aef;
display: block;
clear: both;
float: left;
width: 360px;
}
.accordion a {
text-decoration: none;
border-bottom: 1px solid #fff;
/*font: bold 1.1em/2em Arial, sans-serif;*/
font-size: 1.1em;
line-height: 28px;
font-weight: bold;
color: #222;
padding: 0 10px;
display: block;
cursor: pointer;
}
.accordion li.active a, .accordion a:hover {
color: #E26703;
}

.accordion ul a {
color: #222 !important;
}
.accordion ul a:hover, .accordion ul li.active a {
color: #E26703 !important;
}

.accordion ul ul a, .accordion ul li.active ul a {
color: #222 !important;
}
.accordion ul ul a:hover, .accordion ul ul li.active a, .accordion ul li.active ul a:hover {
color: #E26703 !important;
}

.accordion ul ul ul a, .accordion ul ul li.active ul a {
color: #222 !important;
}
.accordion ul ul ul a:hover, .accordion ul ul ul li.active a, .accordion ul ul li.active ul a:hover {
color: #E26703 !important;
}

.accordion ul ul ul ul a, .accordion ul ul ul li.active ul a {
color: #222 !important;
}
.accordion ul ul ul ul a:hover, .accordion ul ul ul ul li.active a, .accordion ul ul ul li.active ul a:hover {
color: #E26703 !important;
}

.accordion li.parent>a {
/*background: url(‘../images/open.gif’) no-repeat center right;*/
}

.accordion li ul li {
background: none repeat scroll 0 0 #ddd;
font-size: 0.9em;
}
.accordion li.active>ul {

}

.accordion ul a {
padding-left: 25px;
}
.accordion ul ul a {
padding-left: 40px;
}
.accordion ul ul ul a {
padding-left: 55px;
}
.accordion ul ul ul ul a {
padding-left: 70px;
}
.accordion ul ul ul ul ul a {
padding-left: 85px;
}

/*———– button accordion ————-*/
.accordion span.head {
position: absolute;
top: 7px;
right: 8px;
}
.accordion span.head a {
background: url(../images/menu_down.png) no-repeat;
color:#333333;
display:block;
height:15px;
padding:0;
width:15px;
border: 0;
}
.accordion span.head a:hover, .accordion li.active>span.head a {
background: url(../images/menu_up.png) no-repeat;
}
.accordion li.selected span.head a {
background: url(../images/menu_up.png) no-repeat;
}
.accordion li.selected span.head a:hover {
background: url(../images/menu_down.png) no-repeat;
}

Now add following code in page.xml just after <action method=”addCss”><stylesheet>css/styles.css</stylesheet></action>

<action method=”addCss”><stylesheet>css/dropdown.css</stylesheet></action>

Now copy following images into skin\frontend\default\default\images path. 

menu_down     menu_up

Thats it..!!!

Image Preview

Put below code into app/design/frontend/[your package]/[your theme]/template/page/html/head.phtml

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
    $j = jQuery.noConflict();
</script>
<script type="text/javascript">    
    xOffset = 10;
    yOffset = 30;
        $j("a.preview").hover(function(e){

            this.t = this.title;
            this.title = "";    
                        var w = (this.t != "") ? "<br/>" + this.t : "";
                            w = "<div class='ma-prev-name'>" + w + "</div>";

                        $j("body").append("<div id='preview'><img src='"+ this.rel +"' alt='Image preview' />"+ w +"<div class='ma-prev-des'>"+$j(this).next().text()+"</div></div>");
            $j("#preview")
                .css("top",(e.pageY - xOffset) + "px")
                .css("left",(e.pageX + yOffset) + "px")
                .fadeIn("fast");                        
        },
        function(){
            this.title = this.t;    
            $j("#preview").remove();
        });    
        $j("a.preview").mousemove(function(e){
            $j("#preview")
                .css("top",(e.pageY - xOffset) + "px")
                .css("left",(e.pageX + yOffset) + "px");
        });

</script>

Now in  app/design/frontend/[your package]/[your theme]/template/catalog/product/list.phtml, replace below code

<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>">
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135"
 alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></a>

To

<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>"
 id="product-image" rel="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(250); ?>">
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135" 
alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></a>
                <div><?php //echo $_product->getShortDescription()?></div>

Now add below code into skin/frontend/[your package]/[your theme]/css/imagepreview.css

#preview { position:absolute; display:none; background: #fff; color: #000; } /*Description for preview. You cant'n edit */ 
.ma-prevdes { display:none; } #preview img { } 
.ma-prev-name { margin-top: -20px; font-weight: bold; font-size: 15px; } 
.ma-prev-des { text-align: left; }

Last,  add below code into app/design/frontend/[your package]/[your theme]/layout/page.xml just after <action method=”addCss”><stylesheet>css/styles.css</stylesheet></action>

<action method="addCss"><stylesheet>css/imagepreview.css</stylesheet></action>

How to slide up-down of all sidebar and apply block-active class in Magento

Put below code into app/design/frontend/[your package]/[your theme]/template/page/html/head.phtml

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
    $j = jQuery.noConflict();
</script>
<script type="text/javascript">
    $j(document).ready(function(){
         $j('.block .block-title').children().addClass("block-active");
                $j('.block .block-title').click(function(){
                    $j(this).closest('.block').find('.block-content').not(':animated').slideToggle();
                    $j(this).children().toggleClass("block-active");
                });
    });
</script>