CSS JavaScript 메뉴 기능 개선 버 전 구현

3358 단어 CSSJavaScript메뉴
개선 버 전 은 이 문 제 를 최적화 시 켰 습 니 다.간단 한 자바 script 코드 를 통 해 메뉴 를 추가 할 수 있 습 니 다.동시에 HTML 페이지 를 매우 간결 하 게 만 들 고 코드 를 두 줄 만 쓰 면 됩 니 다!O(∩_∩)O 1.전 제 를 사용 하여 HTML 페이지 에 CSS 파일 과 자바 스 크 립 트 파일 을 도입 합 니 다.CSS 파일 도입:,menu.css 코드 참조 후 자 바스 크 립 트 파일 도입:2.메뉴 코드 정의:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE>Menu</TITLE> 
<link type="text/css" rel="stylesheet" href="menu.css"> 
</HEAD> 
<BODY> 
<div><script src="menu.js"></script></div> 
</BODY> 
</HTML>
설명:1)var root=new Root();root.toString(); 고정 형식 2)설명 메뉴:var m1=new Menu("File","alert(this.innerText);");메뉴 에 표 시 된 이름 은"File"이 고 onclick 이 벤트 는 alert(this.innerText)입 니 다.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  

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(); 
}
<2>menu.js 

#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; 
}
javascript 리 턴 이 TAB 스 크 립 트 로 바 뀌 었 습 니 다.
cocoscreater 프 리 캐 스 트 prefab 상세 설명

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage