ExtJS实际可折叠伸缩的菜单面板

最新推荐文章于 2021-05-12 18:37:08 发布

原创最新推荐文章于 2021-05-12 18:37:08 发布 · 961 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #公告 #CSS #BBS #HTML

本文介绍了一个基于HTML、CSS和JavaScript实现的知识导航系统。该系统包含知识导航、公告、待解决问题等多个模块，并通过不同的面板进行展示。通过自定义样式和交互效果，提升了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML:
   <ul id="knowledgemenu " class="x-hidden mymenu" （这里的class用来隐藏面板内容的）>
      <li><a id="knowledge" class="menubar ">知识导航</a></li>
      <li><a id="bbs"    class="menubar">公告</a></li>
      <li><a id="question"    class="menubar">待解决问题</a></li>
      <li><a id="sloved"    class="menubar">已解决问题</a></li>
      <li><a id="knownw"   class="menubar">知识贡献</a></li>
      <li><a id="tagslist"    class="menubar">Tags</a></li>
    </ul>
    <ul id="libmenu " class="x-hidden mymenu">
      <li><a id="knownlist" class="menubar ">文章库</a></li>
      <li><a id="booklist" class="menubar">图书库</a></li>
      <li><a id="A1" class="menubar">软件库</a></li>
    </ul>
CSS:

.menubar {
border-bottom: 1px solid #AACCF6;
color: #222222;
cursor: pointer;
display: block;
height: 20px;
width: 50px;
line-height: 17px;
outline-color: -moz-use-text-color;
outline-style: none;
outline-width: 0;
padding: 3px;
text-align: center;
text-decoration: none;
white-space: nowrap;
}

.menubar:hover { //鼠标悬停上时触发
background: #EBF3FD url(../item-over.gif) repeat-x scroll left bottom;
text-decoration: none;
}

JS:
    var knowledgemenu = new Ext.Panel({
                 title: '翰维知道',
                 contentEl:'knowledgemenu', //DOM标签ID    (contentEL可以换成html)
                 border:false,
                    iconCls:'nav'
                });
    var libmenu = new Ext.Panel({
                 title: '专题',
                 contentEl:'libmenu',
                 border:false,
                    iconCls:'nav'
                });
    var westPanel=new Ext.Panel({
                    region:'west',
                    el:'west',
                    title:'功能菜单',
                    collapsible: true ,    //本窗口伸缩
                    //collapseMode:'mini',
                    split:true,
                    width: 175,
                    minSize: 175,
                    maxSize: 175,
                    margins:{left: 10, top: 0, right: 0, bottom: 0},
                    layout:'accordion',   //子窗口为折叠
                    layoutConfig:{
                        animate:true
                       // fill :false
                    },
                    items:[knowledgemenu, libmenu]
    });

http://www.blogjava.net/algz/articles/278217.html