js導航製作實例（導航網頁製作方法）

本文目錄一覽：

• 1、如何用JS實現 網站導航的切換
• 2、如何用JS做固定在網頁中的導航條
• 3、如何用JS或CSS製作網站導航條

如何用JS實現 網站導航的切換

1.首先將以下代碼插入到你body需要設置導航的地方

div id=”navmenu”

ul id=”navi”

lia href=”index.htm” _fcksavedurl=”index.htm”梧桐首頁

/a/li

lia href=”index1.htm” _fcksavedurl=”index1.htm”網站優化

/a/li

/ul

/div

script type=”text/javascript” language=”javascript”

var nav = document.getElementById(“navi”);

var links = nav.getElementsByTagName(“li”);

var lilen = nav.getElementsByTagName(“a”); //判斷地址

var currenturl = document.location.href;

var last = 0;

for (var i=0;ilinks.length;i++)

{

var linkurl = lilen[i].getAttribute(“href”);

if(currenturl.indexOf(linkurl)!=-1)

{

last = i;

}

}

links[last].className = “navon”; //高亮代碼樣式

/script

2.然後將以下CSS代碼添加到你網站的CSS文件中

#navmenu{ width:980px;}

#navmenu ul{ padding:0px; margin:0px;}

#navmenu ul li{ float:left; width:80px; list-style:none;

text-align:center; height:30px; line-height:30px;}

.navon{ background:#000000;} .navon a{ color:#ffffff;}

看下這個吧，JS跟簡單。但是沒有JS，更沒有DW，寫不了。

如何用JS做固定在網頁中的導航條

使元素固定在網頁中，不需要用到JS的，只需要用到CSS樣式就可以了。

使用css 中的   position:fixed;  fixed是相對於瀏覽器的定位，設置了這個樣式的元素將不會隨頁面滾動而改變位置，固定在屏幕中。

如 ：

.classname {

position:fixed;

left:0;

top:0;

z-index:9999;

}

如何用JS或CSS製作網站導航條

下載碩思網頁菜單，有中文破解版得，全圖文傻瓜操作，自動生成js代碼，你只要把代碼放入網頁中就行了