JavaScriptレスポンシブナビについて

Question

http://one-text.tk/template/

現在上記ページ(テンプレート)を編集しているのですが...

右上の MENU をクリックしたらメニューが出てくるJSを調整中です。

該当のJSのコードを見ていると無駄な部分があるように思えます。

例えば以下のコードの部分です。

		init: function()
			lib.add(window,"load",function(){
				lib.BodyClassName = document.body.className;
				var tObj = document.getElementsByTagName('nav');
				var nav = document.createElement('nav');
				nav.id = 'SlideNav';
				nav.className = 'close';
				nav.onclick = function(){
					lib.toggle();
				};

				var ul = document.createElement('ul');

				var li = document.createElement('li');
				var elm = document.createElement('a');
 				elm.innerHTML = "Test"  ;
				elm.href = "#test";
				li.appendChild(elm);
				ul.appendChild(li);

				var li = document.createElement('li');
				var elm = document.createElement('a');
				elm.innerHTML = "Yahoo!" ;
				elm.href = "http://yahoo.co.jp/" ;
				li.appendChild(elm);
				ul.appendChild(li);

				var li = document.createElement('li');
				var elm = document.createElement('a');
				elm.innerHTML = "Google" ;
				elm.href = "http://google.com/";
				li.appendChild(elm);
				ul.appendChild(li);

				nav.appendChild(ul);
				document.body.appendChild(nav);
				
				var sw = document.createElement('div');
				sw.id = 'ResponsiveNavOverlay';
				sw.className = 'close';
				sw.onclick = function(){
					lib.toggle();
				};
				document.body.appendChild(sw);
			});
		},

上記コードを削除して...

<nav class="close" id="SlideNav"><ul><li><a href="#test">Test</a></li><li><a href="http://yahoo.co.jp/">Yahoo!</a></li><li><a href="http://google.com/">Google</a></li></ul></nav>
<div class="close" id="ResponsiveNavOverlay"></div>

上記HTMLを直接書き込むと同じ動作はしないのでしょうか？

ご回答よろしくお願いします。

Answer 1

恐らくJavaScriptはDOM生成後に動く仕組みかな？
だとすると、HTMLで直書きするのと、JavaScriptで動的に生成するのでは、
単純に生成のタイミングが違ってきますんで、そこに注意しておけば、
直書きでもいいのかも。

Comments

[pac894398]

今回の場合は...
JavaScriptの読み込みが終わっていないににメニューがあるだけで、
機能には影響がないという認識で大丈夫でしょうか？

[Seiji_Ogawa]

HTMLが無いのにJavaScriptが特定のHTML指定してたらエラーになるけど、
今回のHTML直書きはその逆なので、問題無いと思いますよ。
大丈夫だと思いますー。

[pac894398]

http://one-text.tk/template2/
直してみました。

メニューオープンは正常に動作するのですが、
クローズが動作しなくなりました。

私には原因が分からないにでアドバイスいただけないでしょうか？

お手数ですがよろしくお願いします。

[Seiji_Ogawa]

あれ？
this.lib.init();
でエラーでてるんですけど、
init()がないですよ。

[pac894398]

this.lib.init(); を削除すればいいのでしょうか？

[pac894398]

削除してももんだが解決しませんでした...
どのように直せばいいのでしょうか...?
JS始めたばかりなので教えていただけると幸いです。

[pac894398]

<div class="close" id="ResponsiveNavOverlay" onclick="lib.toggle();"></div>　にしたらできました。
ありがとうございました！

[Seiji_Ogawa]

時間が取れなくて返事できませんでした。
解決したようで何よりですー。