JavaScript CSS 메뉴 기능 개선된 버전_탐색 메뉴

개선된 버전에서는 이 문제를 최적화하여 간단한 Javascript 코드를 통해 메뉴를 추가할 수 있습니다. 동시에 HTML 페이지를 매우 간결하게 만들어 단 두 줄의 코드만 작성하면 됩니다! O(∩_∩)O
1. 전제조건은 HTML 페이지에 CSS 파일과 JavaScript 파일을 도입하는 것입니다.

코드 복사 코드는 다음과 같습니다.

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("새로 만들기");
m1.add(m11)
m1.add(new MenuItem("열기","alert('open) file');"));
var m12 = new MenuItem("저장");
m1.add(m12);
m1.add(new MenuItem("다른 이름으로 저장"));
m1.add(new MenuItem(" 닫기"));
m1.add(new MenuItem(""))

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

root.toString();
}


참고:
1) var root = new Root(); root.toString();

고정 형식
2) 메뉴 선언:
var m1 = new Menu("File","alert(this.innerText);")
표시되는 이름 메뉴는 "File"이고 onclick 이벤트는 다음과 같습니다.
root.add(m1)
첫 번째 수준 메뉴(즉, 페이지에 처음 표시되는 메뉴) 루트 아래에 배치되고 add() 메소드를 통해
var m11 = new MenuItem( "New"");
m1.add(m11);
"File"의 하위 메뉴 "New"를 선언합니다.
m1.add(new MenuItem("Open","alert('open file' );"))
"File"의 하위 메뉴 "Open"을 선언합니다.
메뉴 추가 기능을 완료할 수 있습니다. 위의 코드를 통해.
코드 파일:
<1> menu.css




코드 복사

코드는 다음과 같습니다. #menubar { font-family:verdana;

font-size:12px;

margin:1px
}
#menubar li {
float :left;
위치:상대적;
text-align:left;
}
/* 각 메뉴 항목 스타일 */
#menubar li a {
border-style:none ;
색상:블랙;
폭:150px;
라인 높이:20px; text-꾸밈 :none;
}
/* 기본값을 표시하는 첫 번째 수준 메뉴 */
#menubar .menuMain{
border-color:#C0C0C0
border-width:1px ;
border-style:solid;
}
/* 마우스를 놓았을 때의 첫 번째 레벨 */
#menubar li a:hover{
background-color:#efefef; 🎜>text -design:underline;
}
/* 두 번째 수준 메뉴 블록 스타일 */
#menubar li ul{
background-color:#efefef
border-style: 없음;
위치:절대;
왼쪽:-40px
너비: 150px; }
/* 마우스를 올렸을 때의 하위 메뉴 항목 스타일 */
#menubar li ul li a:hover {
text-design:underline
padding-left:20px; }
/* 세 번째 이상의 메뉴 블록 스타일 */
#menubar li ul li ul {
display:none;
position:absolute
top:0px; 왼쪽:150px
여백-왼쪽:0;
너비:150px;


<2>menu.js




코드 복사


코드는 다음과 같습니다.

var MenuConfig = {
defaultText : "메뉴 항목",
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);
반환;
}
var df; // DocumentFragment
var r = node.ownerDocument.createRange();
r.selectNodeContents(노드);
r.collapse(false);
df = r.createContextualFragment(sHTML);
node.appendChild(df);
}
}

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

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


/******************************************
* 기능 이름: MenuAbstractNode
* 설명： MenuAbstractNode 클래스
* @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;
}

/******************************************
* 기능 이름: toString
* 설명： HTML 코드 생성
* @param
* @param
* @Return：
************************ **********************/
MenuAbstractNode.prototype.toString = function(){
var str = "

if(this.type=="메뉴"){
str = str " class="" this.cssStyle """;
}
str = str " onclick="" this.action "">" this.text "";

var sb = [];

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

" sb.join("") "

"
}

return str "

" ;
}

/******************************************
* 기능명 : 메뉴
* 설명： 메뉴 클래스
* @param {String} pText
* @param {String} pAction
* @param {String} pCssStyle
* @Return：
**** ***************************************/
기능 메뉴(pText, pAction,pCssStyle){
this.base = MenuAbstractNode;
this.base(pText,pAction);

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

Menu.prototype = new MenuAbstractNode;

/******************************************
* 기능 이름: MenuItem
* 설명： MenuItem 클래스
* @param {String} pText
* @param {String} pAction
* @Return：
**************** *****************************/
function MenuItem(pText, pAction){
this.base = MenuAbstractNode;
this.base(pText,pAction);
this.type = "메뉴항목";
}

MenuItem.prototype = new MenuAbstractNode;


/******************************************
* 기능 이름: 루트
* 설명： 루트 클래스
* @Return：
********************************** *********/
function Root(){
this.id = "menubar";
this.childNodes=[];
}

Root.prototype = new MenuAbstractNode;

Root.prototype.toString = function(){
document.write("

< /ul>

");
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("파일","alert(this.innerText);");
root.add(m1);
var m11 = new MenuItem("New","alert(this.innerText);");
m1.add(m11);
m1.add(new MenuItem("열기","alert('파일 열기');"));
var m12 = new MenuItem("저장");
m1.add(m12);
m1.add(new MenuItem("다른 이름으로 저장"));
m1.add(new MenuItem("닫기"));
m1.add(new MenuItem(""));

var m2 = new Menu("편집");
root.add(m2);
var m22 = new MenuItem("모두 선택");
m2.add(m22);
m2.add(new MenuItem("잘라내기"));
m2.add(new MenuItem("복사"));
m2.add(new MenuItem("붙여넣기"));

var m3 = new Menu("보기");
var m33 = new MenuItem("목록 보기");
m33.add(new MenuItem("함수 목록"));
m3.add(m33);
m3.add(new MenuItem("도구 모음"));
root.add(m3);
root.toString();
}