JQuery手风琴下拉菜单在DTcms中的应用

View: Share:

随着互联网时代的高速发展,网络服务也进行着一番革新,html5和css3已经成为主流,人们对网站的需求不仅仅局限于网站的功能,而今更注重网站的效果和用户体验。最近接了一个外贸的英文网站,客户要求需要产品类别需要二级分类,而且指定需要采用“手风琴”的前端效果,于是我在互联网上搜索相关效果并做了修改和完善,整理出来分享给有需要的小伙伴们,下面我就给大家介绍一下,jquery手风琴下拉菜单在dtcms中的应用。

本jquery手风琴菜单效果的优势:

#menu > li 中,如果没有子菜单ul,一级菜单就可以直接链接跳转,反之就点击一级菜单,执行下来展开二级菜单的效果,在dtcms程序中,必须判断一级类别下是否存在二级分类。

<%if(category_list2.Rows.Count>0)%>
    ...
<%/if%>

在dtcms模板中的写法如下:

<ul id="menu">
    <%set DataTable category_list1=get_category_child_list("product", 0)%>
    <%foreach(DataRow cdr1 in category_list1.Rows)%>
    <li>
        <a href="<%linkurl("product",{cdr1[id]})%>">
            <span data-title="{cdr1[title]}">{cdr1[title]}</span>
            <i class="fa fa-chevron-right"></i>
        </a>
        <%set DataTable category_list2=get_category_child_list("product", {strtoint({cdr1[id]})})%>
        <%if(category_list2.Rows.Count>0)%>
        <ul>            
            <%loop cdr2 category_list2%>
            <li>
                <a href="<%linkurl("product",{cdr2[id]})%>">
                    <span data-title="{cdr2[title]}">{cdr2[title]}</span>
                </a>
            </li>
            <%/loop%>
        </ul>
        <%/if%>
    </li>
    <%/foreach%>
</ul>

你的浏览器版本过低,可能导致网站不能正常访问!
为了你能正常使用网站功能,请使用这些浏览器。


Chrome

Firefox

Safari

IE9及以上