ecshop商品分类滑动门效果的实现

科长

鼠标滑过顶部的导航菜单之后，出现所有一级分类菜单列表,今天跟大家分享一下用ECSHOP实现菜单滑动门的方法。
希望能够帮助大家更深入的了解ecshop，对学习ecshop开发的朋友有所启发。

实现步骤：

在需要显示的页面中调用函数，这样我们就可以先在需要显示的页面的文件中加入如下代码(只要不是在包含的函数和过程中就可以)：


代码如下：

$smarty->assign('topcategories', get_categories_tree('0'));

去掉了一级分类树，并smarty赋值给 topcategories 变量，这样在前台调用会很方便。

在前台中使用代码，如下：

1. <div id="cpmenu" class="dropmenu">
   
2.      <ul>
   
3.         <!--{foreach from=$topcategories item=cat}-->
   
4.            <li><a href="{$cat.url}">{$cat.name|escape:html}</a></li>
   
5.         <!--{/foreach}-->
   
6.      </ul>
   
7. </div>

复制代码

这样就把顶级菜单显示到ID位cpmenu的层中。

下面一个简单JS实现滑动门的效果代码如下：

1. <script type="text/javascript">
   
2.         <!--
   
3.         function checkSearchForm()
   
4.         {
   
5.             if(document.getElementById('keyword').value)
   
6.             {
   
7.                 return true;
   
8.             }
   
9.             else
   
10.             {
    
11.                 alert("{$lang.no_keywords}");
    
12.                 return false;
    
13.             }
    
14.         }
    
15.         -->
    
16. </script>

复制代码

通过在Products的超链接，我们加入事件代码对齐延迟半秒显示，代码如下：

1. <a id="products" href="javascript:viod(0);"
   
2. onMouseOver="setTimeout(function(){displaymenu()},500);">Products</a>

复制代码

在菜单的上下元素中加入hidemenu来隐藏菜单，这样就实现了鼠标移出时菜单是隐藏的，好了这样就实现了ECSHOP顶部滑动门的效果。