каждый может переделать под свой вкус я лишь добавил меню
добавить в:
catalog/view/theme/default/template/common/header.tpl
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/style.css" />
<script type="text/javascript" src="catalog/view/javascript/jquery-1.3.2.min.js"></script>
сразу ниже <body>
<script type="text/javascript">
$(document).ready(function(){
//hide toolbar and make visible the 'show' button
$("span.downarr a").click(function() {
$("#toolbar").slideToggle("fast");
$("#toolbarbut").fadeIn("slow");
});
//show toolbar and hide the 'show' button
$("span.showbar a").click(function() {
$("#toolbar").slideToggle("fast");
$("#toolbarbut").fadeOut();
});
//show tooltip when the mouse is moved over a list element
$("ul#social li").hover(function() {
$(this).find("div").fadeIn("fast").show(); //add 'show()'' for IE
$(this).mouseleave(function () { //hide tooltip when the mouse moves off of the element
$(this).find("div").hide();
});
});
//don't jump to #id link anchor
$(".facebook, .twitter, .delicious, .digg, .rss, .stumble, .menutit, span.downarr a, span.showbar a").click(function() {
return false;
});
//show quick menu on click
$("span.menu_title a").click(function() {
if($(".quickmenu").is(':hidden')){ //if quick menu isn't visible
$(".quickmenu").fadeIn("fast"); //show menu on click
}
else if ($(".quickmenu").is(':visible')) { //if quick menu is visible
$(".quickmenu").fadeOut("fast"); //hide menu on click
}
});
//hide menu on casual click on the page
$(document).click(function() {
$(".quickmenu").fadeOut("fast");
$(".quickmenu").css({'vivibility': 'hidden'});
});
$('.quickmenu').click(function(event) {
event.stopPropagation(); //use .stopPropagation() method to avoid the closing of quick menu panel clicking on its elements
});
});
</script>
<div id="toolbarbut"> <!-- hide button -->
<span class="showbar"><a href="#">show bar</a></span>
</div>
<div id="toolbar"> <!-- toolbar container -->
<div class="leftside"> <!-- all things in floating left side -->
<ul id="social">
<li><a class="rss" href="#"></a><!-- icon -->
<div id="tiprss" class="tip"><!-- tooltip -->
<ul>
<li><a href="#">580 Readers</a></li>
<li><a href="#"><small>[Subscribe]</small></a></li>
</ul>
</div>
</li>
<li><a class="facebook" href="#"></a>
<div id="tipfacebook" class="tip">
<ul>
<li><a href="#">Share Page</a></li>
<li><a href="#">| Profile</a></li>
</ul>
</div>
</li>
<li><a class="twitter" href="#"></a>
<div id="tiptwitter" class="tip">
<ul>
<li><a href="#">ReTweet</a></li>
<li><a href="#">| Profile</a></li>
</ul>
</div>
</li>
<li><a class="delicious" href="#"></a>
<div id="tipdelicious" class="tip">
<ul>
<li><a href="#">Bookmark</a></li>
<li><a href="#">| Profile</a></li>
</ul>
</div>
</li>
<li><a class="digg" href="#"></a>
<div id="tipdigg" class="tip">
<ul>
<li><a href="#">Digg</a></li>
<li><a href="#">| Profile</a></li>
</ul>
</div>
</li>
<li><a class="stumble" href="#"></a>
<div id="tipstumble" class="tip">
<ul>
<li><a href="#">Stumble</a></li>
<li><a href="#">| Profile</a></li>
</ul>
</div>
</li>
</ul>
</div>
<div class="rightside"> <!-- all things in floating left side -->
<span class="downarr"> <!-- hide button -->
<a href="#"></a>
</span>
<span class="menu_title">
<a class="menutit">Menu</a> <!-- quick menu title -->
</span>
<div class="quickmenu">
<ul>
<?php foreach ($categories as $category) { ?>
<li>
<a href="<?php echo $category['href']; ?>" class="active"><?php echo $category['name']; ?></a>
<?php } ?>
</ul>
</div>
</div>
</div>
проверил хром,мозилу и експлорер и все работает
ПРИМЕР
catalog.zip
