首页 > web前端 > js教程 > JavaScript CSS菜单功能 改进版_导航菜单

JavaScript CSS菜单功能 改进版_导航菜单

WBOY
发布: 2016-05-16 18:57:19
原创
1088 人浏览过

改进版本优化了这个问题,通过简单的Javascript代码就可以增加菜单。同时使得HTML页面非常简洁,只需要写2行代码即可!O(∩_∩)O
1.使用前提,在HTML页面中引入一个CSS文件,和一个JavaScript文件。如下: 

复制代码 代码如下:




Menu







引入CSS文件: ,menu.css代码见后
引入JavaScript文件:
2.定义菜单代码如下:
复制代码 代码如下:

if (document.getElementById){
var root = new Root();

var m1 = new Menu("File","alert(this.innerText);");
root.add(m1);
var m11 = new MenuItem("New");
m1.add(m11);
m1.add(new MenuItem("Open","alert('open file');"));
var m12 = new MenuItem("Save");
m1.add(m12);
m1.add(new MenuItem("Save As"));
m1.add(new MenuItem("Close"));
m1.add(new MenuItem(""));

var m2 = new Menu("Edit");
root.add(m2);

root.toString();
}

说明:
1) var root = new Root();
root.toString();
固定格式
2)声明菜单:
var m1 = new Menu("File","alert(this.innerText);");
菜单显示的名称为“File”,onclick事件为alert(this.innerText);
root.add(m1);
第一级菜单(即页面初始显示的菜单)放到root之下,通过add()方法
var m11 = new MenuItem("New"");
m1.add(m11);
声明“File”的子菜单“New”
m1.add(new MenuItem("Open","alert('open file');"));
声明“File”的子菜单“Open”
通过上面的代码即可完成菜单的添加功能。
代码文件:
menu.css
复制代码 代码如下:

#menubar {
font-family:verdana;
font-size:12px;
margin:1px;
}
#menubar li {
float:left;
position:relative;
text-align:left;
}
/* each menu item style */
#menubar li a {
border-style:none;
color:black;
display:block;
width:150px;
height:20px;
line-height:20px;
padding-left:10px;
text-decoration:none;
}
/* the first level menu which displays default */
#menubar .menuMain{
border-color:#C0C0C0;
border-width:1px;
border-style:solid;
}
/* the first leve style when mouse on it */
#menubar li a:hover{
background-color:#efefef;
text-decoration:underline;
}
/* the second level menu block style */
#menubar li ul{
background-color:#efefef;
border-style:none;
display:none;
position:absolute;
top:20px;
left:-40px;
margin-top:2px;
width:150px;
}
/* the sub menu item style when mouse on it */
#menubar li ul li a:hover {
text-decoration:underline;
padding-left:20px;
}
/* the third or more level menu block style */
#menubar li ul li ul {
display:none;
position:absolute;
top:0px;
left:150px;
margin-top:0;
margin-left:0;
width:150px;
}

menu.js
复制代码 代码如下:

var MenuConfig = {
defaultText : "Menu Item",
defaultAction : "javascript:void(0);" ,
defaultMenuCssStyle : "menuMain"
};

var MenuHandler = {
idCounter : 0,
idPrefix : "menu-",
getId : function(){ return this.idPrefix + this.idCounter++ ;},
insertHTMLBeforeEnd : function(node, sHTML){
if(node.insertAdjacentHTML != null){
node.insertAdjacentHTML('BeforeEnd',sHTML);
return;
}
var df; // DocumentFragment
var r = node.ownerDocument.createRange();
r.selectNodeContents(node);
r.collapse(false);
df = r.createContextualFragment(sHTML);
node.appendChild(df);
}
}

function displaySubMenu(li){
var subMenu = li.getElementsByTagName('ul')[0];
if(subMenu)
subMenu.style.display = 'block';
}

function hideSubMenu(li){
var subMenu = li.getElementsByTagName('ul')[0];
if(subMenu)
subMenu.style.display = 'none';
}


/******************************************
* Funciont Name: MenuAbstractNode
* Description: MenuAbstractNode class
* @param {String} pText
* @param {String} pAction
* @Return:
*******************************************/
function MenuAbstractNode(pText, pAction){
this.text = pText || MenuConfig.defaultText;
this.action = pAction || MenuConfig.defaultAction;
this.id = MenuHandler.getId();

this.childNodes = [];
}

MenuAbstractNode.prototype.add = function(node){
this.childNodes[this.childNodes.length] = node;
}

/******************************************
* Funciont Name: toString
* Description: generate HTML code
* @param
* @param
* @Return:
*******************************************/
MenuAbstractNode.prototype.toString = function(){
var str = "

  • if(this.type=="Menu"){
    str = str + " class=\"" + this.cssStyle + "\"";
    }
    str = str + " onclick=\""+this.action+"\">"+this.text+"
    ";

    var sb = [];

    for (var i = 0; i sb[i] = this.childNodes[i].toString();
    }
    if(sb.length>0){
    str = str + "
      " + sb.join("") + "
    "
    }

    return str + "
  • " ;
    }

    /******************************************
    * Funciont Name: Menu
    * Description: Menu class
    * @param {String} pText
    * @param {String} pAction
    * @param {String} pCssStyle
    * @Return:
    *******************************************/
    function Menu(pText, pAction,pCssStyle){
    this.base = MenuAbstractNode;
    this.base(pText,pAction);

    this.type = "Menu";
    this.cssStyle = pCssStyle || MenuConfig.defaultMenuCssStyle;
    }

    Menu.prototype = new MenuAbstractNode;

    /******************************************
    * Funciont Name: MenuItem
    * Description: MenuItem class
    * @param {String} pText
    * @param {String} pAction
    * @Return:
    *******************************************/
    function MenuItem(pText, pAction){
    this.base = MenuAbstractNode;
    this.base(pText,pAction);
    this.type = "MenuItem";
    }

    MenuItem.prototype = new MenuAbstractNode;


    /******************************************
    * Funciont Name: Root
    * Description: Root class
    * @Return:
    *******************************************/
    function Root(){
    this.id = "menubar";
    this.childNodes=[];
    }

    Root.prototype = new MenuAbstractNode;

    Root.prototype.toString = function(){
    document.write("");
    for(var i=0; iMenuHandler.insertHTMLBeforeEnd(document.getElementById(root.id), this.childNodes[i].toString());
    }
    }

    if (document.getElementById){
    var root = new Root();

    var m1 = new Menu("File","alert(this.innerText);");
    root.add(m1);
    var m11 = new MenuItem("New","alert(this.innerText);");
    m1.add(m11);
    m1.add(new MenuItem("Open","alert('open file');"));
    var m12 = new MenuItem("Save");
    m1.add(m12);
    m1.add(new MenuItem("Save As"));
    m1.add(new MenuItem("Close"));
    m1.add(new MenuItem(""));

    var m2 = new Menu("Edit");
    root.add(m2);
    var m22 = new MenuItem("Select All");
    m2.add(m22);
    m2.add(new MenuItem("Cut"));
    m2.add(new MenuItem("Copy"));
    m2.add(new MenuItem("paste"));

    var m3 = new Menu("View");
    var m33 = new MenuItem("View List");
    m33.add(new MenuItem("Function List"));
    m3.add(m33);
    m3.add(new MenuItem("Tool Bar"));
    root.add(m3);
    root.toString();
    }
    相关标签:
    来源:php.cn
    本站声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板