ECSHOP实现顶部弹出所有一级分类的滑动门
今天青岛SEO跟大家分享一下用ECSHOP实现菜单滑动门的方法。
先看效果： http://www.marinehardwarestore.com
顶部的导航菜单中 Products 鼠标滑过之后，出现所有一级分类菜单列表。
实现方法如下：
首先在需要显示的页面中调用函数，比如需要在goods.php中显示该菜单，那默认状态先调用不出来。这样我们就可以先在goods.php文件中加入如下代码，位置自己选择，只要不是在包含的函数和过程中就可以。
代码如下：
$smarty->assign('topcategories', get_categories_tree('0')); // 顶级分类树
这样，我们就去的了一级分类树，并smarty赋值给 topcategories 变量以便在前台调用。
然后我们在前台中使用代码调出，如下：
<div id="cpmenu" class="dropmenu">
<ul>
<!--{foreach from=$topcategories item=cat}-->
<li><a href="{$cat.url}">{$cat.name|escape:html}</a></li>
<!--{/foreach}-->
</ul>
</div>
这样就把顶级菜单显示到ID位cpmenu的层中。我们可以编写一个简单那的JS来实现滑动门的效果，JS代码如下：
<script type="text/javascript">
<!--
function checkSearchForm()
{
if(document.getElementById('keyword').value)
{
return true;
}
else
{
alert("{$lang.no_keywords}");
return false;
}
}
-->
</script>
然后我们可以通过在Products的超链接中加入事件代码，对齐延迟半秒显示，代码如下：
<a id="products" href="javascript:viod(0);" onMouseOver="setTimeout(function(){displaymenu()},500);">Products</a>
同时，为了在鼠标移出时隐藏菜单，我们还需要在菜单的上下元素中加入hidemenu来隐藏菜单。
这样，我们就实现了ECSHOP顶部滑动门的效果。