css3下拉菜单控件的样式|CSS3下拉菜单控件的样例(使用Font Awesome字体图标)例子

更新时间:2020-09-02    来源:css3教程    手机版     字体:

【www.bbyears.com--css3教程】

下面时一个带图标的下拉列表框样例,点击右侧的向下箭头可以打开或者收缩菜单。其中图标使用的是 Font Awesome 字体图标。Font Awesome字体图标的用法可以查看我前面写的文章:CSS3 - 在html页面中使用Font Awesome字体图标

原文:CSS3 - 下拉菜单控件的样例(使用Font Awesome字体图标)



   
    hangge.com
   
   
    <script>
        function menuOpenClose() {
            var menu = document.getElementById("menu");
            var c = menu.className;
            //有more属性
            if(c != null && c.indexOf("open") > -1){
                menu.className = c.replace("open", "");
            }else{
                menu.className = c + " open";
            }
        }
    </script>


   
      User
              onclick="menuOpenClose()">