CSS JavaScript でメニュー機能を実装、version_navigation メニューを改善
May 16, 2016 pm 06:57 PM
css
javascript
メニュー
改良版ではこの問題が最適化され、単純な Javascript コードを通じてメニューを追加できるようになりました。同時に、HTML ページは非常に簡潔になり、コードを 2 行記述するだけで済みます。 O(∩_∩)O
1. 前提条件は、CSS ファイルと JavaScript ファイルを HTML ページに導入することです。次のように:
コードをコピー コードは次のとおりです:
<!DOCTYPE HTML PUBLIC "-// W3C//DTD HTML 4.0 移行版//EN">
<リンク タイプ> ="text/ css" rel="stylesheet" href="menu.css">
</HEAD>
<div><script src=" js"> </script></div>
</BODY>
</HTML>
JavaScript ファイルの紹介: <script src="menu.js"></script>
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(new MenuItem("Open","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);"); var root = new Root();
var m1 = new Menu("File","alert(this.innerText);"); root.add(m1);
var m11 = new MenuItem("New");
m1.add(new MenuItem("Open","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) メニューを宣言します:
表示される名前メニューは「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' );"));
「ファイル」のサブメニュー「開く」を宣言
メニュー追加機能が完成上記のコードを通して。
コード ファイル:
<1> menu.css
コードをコピー
コードは次のとおりです: #menubar { font-family:verdana; margin:1px; }
float :left; position:relative;
text-align:left;
}
/* 各メニュー項目のスタイル */
#menubar li a {
border-style:none ;
カラー:ブラック;
幅:150ピクセル;
パディング左:10ピクセル; text-decoration :none;
}
/* デフォルトを表示する最初のレベルのメニュー */
#menubar .menuMain{
border-color:#C0C0C0;
border-width:1px ;
border-style:solid;
/* マウスをオンにしたときの最初のレベルのスタイル */
#menubar li a:hover{
background-color:#efefef; 🎜>text -decoration:underline;
}
/* 第 2 レベルのメニュー ブロック スタイル */
#menubar li ul{
background-color:#efefef;
border-style:なし;
表示: なし;
上: 20 ピクセル;
幅: 150 ピクセル; }
/* マウスをオンにしたときのサブメニュー項目のスタイル */
#menubar li ul li a:hover {
text-decoration:underline;
padding-left:20px; }
/* 3 番目以上のレベルのメニュー ブロック スタイル */
#menubar li ul li ul {
position:absolute;
left:150px;
margin-top:0;
width:150px;
コードをコピーします
コードは次のとおりです:
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 = "<li id="" this.id "" onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#"";
if(this.type=="Menu"){
str = str " class="" this.cssStyle """;
}
str = str " onclick="" this.action "">" this.text "</a>";
var sb = [];
for (var i = 0; i < this.childNodes.length; i ) {
sb[i] = this.childNodes[i].toString();
}
if(sb.length>0){
str = str "<ul>" sb.join("") "</ul>"
}
return str "</li>" ;
}
/******************************************
* 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("<div id='menu'><ul id="" root.id ""> </ul> </div>");
for(var i=0; i<this.childNodes.length; i ){
MenuHandler.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();
}
text-align:left;
}
/* 各メニュー項目のスタイル */
#menubar li a {
border-style:none ;
カラー:ブラック;
幅:150ピクセル;
パディング左:10ピクセル; text-decoration :none;
}
/* デフォルトを表示する最初のレベルのメニュー */
#menubar .menuMain{
border-color:#C0C0C0;
border-width:1px ;
border-style:solid;
/* マウスをオンにしたときの最初のレベルのスタイル */
#menubar li a:hover{
background-color:#efefef; 🎜>text -decoration:underline;
}
/* 第 2 レベルのメニュー ブロック スタイル */
#menubar li ul{
background-color:#efefef;
border-style:なし;
表示: なし;
上: 20 ピクセル;
幅: 150 ピクセル; }
/* マウスをオンにしたときのサブメニュー項目のスタイル */
#menubar li ul li a:hover {
text-decoration:underline;
padding-left:20px; }
/* 3 番目以上のレベルのメニュー ブロック スタイル */
#menubar li ul li ul {
position:absolute;
left:150px;
margin-top:0;
width:150px;
コードをコピーします
コードは次のとおりです:
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 = "<li id="" this.id "" onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#"";
if(this.type=="Menu"){
str = str " class="" this.cssStyle """;
}
str = str " onclick="" this.action "">" this.text "</a>";
var sb = [];
for (var i = 0; i < this.childNodes.length; i ) {
sb[i] = this.childNodes[i].toString();
}
if(sb.length>0){
str = str "<ul>" sb.join("") "</ul>"
}
return str "</li>" ;
}
/******************************************
* 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("<div id='menu'><ul id="" root.id ""> </ul> </div>");
for(var i=0; i<this.childNodes.length; i ){
MenuHandler.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();
}
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

人気の記事
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?
3週間前
By DDD
レポ:チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか(黄色のクリスタル)
1週間前
By 尊渡假赌尊渡假赌尊渡假赌

人気の記事
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?
3週間前
By DDD
レポ:チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか(黄色のクリスタル)
1週間前
By 尊渡假赌尊渡假赌尊渡假赌

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック
Gmailメールのログイン入り口はどこですか?
7281
9


Java チュートリアル
1622
14


CakePHP チュートリアル
1341
46


Laravel チュートリアル
1258
25


PHP チュートリアル
1205
29

