Hi,
I’m very new to EKM PowerShop and I have absolutely no knowledge of JavaScript (and can mostly muddle by with HTML & CSS)
I am looking into getting the code from one template with a menu over the top, and insert in into a different template that does not have one.
Now, I’m wanting to know what this code I have taken from the template actually does, because no menu appeared. I could have put it in the wrong place of course, but I thought I’d check if I have the right bit first.
It could be entirely in CSS and I’ve just got it completely wrong…
These are the parts I pulled (as they were the pieces that had the word navigation in them.
I can post the whole template HTML if I have got it completely wrong…
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
var $j = jQuery;
$j(function(){
$j('#navigation>ul li:has(ul)').addClass('dropable').bind('mouseover', function(){
$j(this).find('ul').slideDown();
$j(this).addClass('hovering');
}).bind('mouseleave', function(){
$j(this).find('ul').stop(true, true).hide();
$j(this).removeClass('hovering');
});
});
function MM_jumpMenu(targ,selObj,restore){//v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
function sameHeight(c, scope){
if (scope){
$j(scope).each(function(){
var set = $j(this).find(c);
sameHeight(set);
});
}
else {
var h = 0;
$j(c).each(function(){
var th = $j(this).height()
h = (th > h)? th : h;
});
$j(c).height(h);
}
}
// CENTERED IMAGE SCRIPT
function centreImg(c){
$j(c).each(function(){
var imgHeight = $j(this).find('img').height();
var boxHeight = $j(this).height();
var padTop = Math.floor((boxHeight - imgHeight) / 2);
$j(this).find('img').css('marginTop', padTop);
});
}
window.doSameHeight = function(){
sameHeight('.product-image', '.product-row');
sameHeight('.product-name', '.product-row');
sameHeight('.product-desc', '.product-row');
sameHeight('.product-price', '.product-row');
/*sameHeight('.product-cart', '.product-row');*/
sameHeight('.product-image', '.category-row');
sameHeight('.product-name', '.category-row');
centreImg('.category-row .product-image');
centreImg('.product-row .product-image');
centreImg('.wrapper .logo');
}
$j(window).bind('load', function(){
window.doSameHeight();
});
</script>
Or this bit has navigation listed as well… but isn’t JavaScript
/*NAVIGATION*/
.main-menu {clear: both; background-color:[ekm:colour_5][/ekm:colour_5];}
#navigation {width: 100%;}
#navigation ul {list-style: none; margin: 0px; padding: 0px;}
#navigation li {float: left;}
#navigation li a {padding: 10px; color: [ekm:colour_6][/ekm:colour_6]; font-family: "Open Sans", sans-serif; font-size: 16px; text-decoration: none; display: block; margin: 0;}
#navigation li:first-child a {padding-left: 10px;}
#navigation li a:hover, #navigation li:hover {color:[ekm:colour_8][/ekm:colour_8]; background-color: [ekm:colour_7][/ekm:colour_7]; text-decoration: none;}
#navigation li:hover {border: none;}
#navigation li:hover > a {color: [ekm:colour_8][/ekm:colour_8]; display: block; background-color: [ekm:colour_7][/ekm:colour_7] }
#navigation li ul {position: absolute; display: none; width: 200px; z-index: 5000; margin: 0 0 0 0; padding: 0; background-color:[ekm:colour_7][/ekm:colour_7];}
#navigation li ul li {float: none; font-size: 18px; padding: 0;}
#navigation li ul li:hover {padding: 0;}
#navigation li ul li a {color: [ekm:colour_8][/ekm:colour_8]; font-size: 13px; padding: 8px 10px;}
#navigation li ul li a:hover {background: [ekm:colour_5][/ekm:colour_5]; color: [ekm:colour_6][/ekm:colour_6]; border: none;}