可以下拉的自動生成導航欄menu

12 Next >

fox1383164k	發表于：10-09-02 09:43 [取消收藏] [添加收藏] 樓主 [回復] #Top#
人氣：377 積分：864 金幣：3006	menu.js function menuFix() { var sfEls = document.getElementById("k_menu").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls. ": "") + "sfhover"; } sfEls. ": "") + "sfhover"; } sfEls. ": "") + "sfhover"; } sfEls.onmouseout=function() { this.className=this.className.replace(new RegExp("( ?\|^)sfhover\b"), ""); } } } menu.css /* 下拉導航 / #k_menu {clear:both;display:table;background:url(/template/images/ls.gif) repeat-x;BORDER-TOP: #E7F9FF 2px solid;margin:0;list-style-type:none;text-align:left;padding:5px 0px 0px 0px;width:100%;}/ {king:menu/} 下拉菜單導航/ #k_menu li {float:left;width:70px;margin-left:0px;text-align:left;HEIGHT: 22px;FONT-SIZE: 14px;font-weight: bold;} #k_menu li a {display:block;width:70px;text-align:center;text-decoration:none;color:#FFFFFF;} #k_menu li a:hover{background:#E7F9FF;COLOR: #000;HEIGHT: 22px;} #k_menu li ul {margin:0px;display:table;line-height:22px;list-style-type:none;left:-9999px;width:160px;position:absolute;} #k_menu li ul li {clear:both;width:100px;background:#E7F9FF;} #k_menu li ul li a {display:block;text-align:left;padding-left:10%;width:98%;} #k_menu li ul li a:link {color:#666;text-decoration:none;} #k_menu li ul li a:visited {color:#666;text-decoration:none;} #k_menu li ul li a:hover {width:auto;color:#FFF;text-decoration:none;font-weight:normal;background:#7BC5EA;font-weight:bold;} #k_menu li:hover ul {left:auto;} #k_menu li.sfhover ul {left:auto;} 下面為導航欄的代碼 <LINK href="/template/menu.css" rel=stylesheet> <script type="text/javascript" src="/template/menu.js"></script> <script language="JavaScript">window.k_menu"> {{king:article listid="1,2,3,4,5,6,7,8,9,10,11,12"}} <li> <A href="{king:listpath/}">{king:listname/}</A> <ul> {king:articlelist listid="sub"} <li> <A href="(king:listpath/)">(king:listname/)</A> </li> {/king} </ul> </li> {{/king}} </ul> Ta最近還發表過* [錯誤] kingcms5.0/5.1漏洞 (19-02-14) [分享] 關于php版自定義模塊搜索問題解決 (17-10-21) [使用] 可以下拉的自動生成導航欄menu (13-09-19) [錯誤] KingCMS 企業版(PHP) 6.0.970(Sp1)幾個錯誤的解決方案 (13-06-20) [使用] 列表頁調用本分類下所有子類文章，完美解決分頁問題 (13-03-22) 隨機閱讀 [疑問] 自動分頁后第一頁和第二頁不在同一文件夾下 (12-01-09) [其他] 發個貼中大獎 (11-08-22) [疑問] KC-PHP，用windows主機好還是Linux主機好？ (11-07-17) [其他] pktsandy今天受刺激了......... (10-12-28) [疑問] 留言評論的發布模板地址，在什么地方改？ (10-12-22)

fox1383164k

發表于：10-09-02 09:43 [取消收藏] [添加收藏] 樓主 [回復] #Top#

人氣：377 積分：864 金幣：3006

menu.js

function menuFix() {
        var sfEls = document.getElementById("k_menu").getElementsByTagName("li");
        for (var i=0; i<sfEls.length; i++) {
                sfEls. ": "") + "sfhover";
                }
                sfEls. ": "") + "sfhover";
                }
                sfEls. ": "") + "sfhover";
                }
                sfEls.onmouseout=function() {
                this.className=this.className.replace(new RegExp("( ?|^)sfhover\b"),

"");
}
}
}

menu.css

/* 下拉導航 */
#k_menu {clear:both;display:table;background:url(/template/images/ls.gif) repeat-x;BORDER-TOP: #E7F9FF 2px solid;margin:0;list-style-type:none;text-align:left;padding:5px 0px 0px 0px;width:100%;}/* {king:menu/} 下拉菜單導航*/

#k_menu li {float:left;width:70px;margin-left:0px;text-align:left;HEIGHT: 22px;FONT-SIZE: 14px;font-weight: bold;}
#k_menu li a {display:block;width:70px;text-align:center;text-decoration:none;color:#FFFFFF;}
#k_menu li a:hover{background:#E7F9FF;COLOR: #000;HEIGHT: 22px;}

#k_menu li ul {margin:0px;display:table;line-height:22px;list-style-type:none;left:-9999px;width:160px;position:absolute;}
#k_menu li ul li {clear:both;width:100px;background:#E7F9FF;}
#k_menu li ul li a {display:block;text-align:left;padding-left:10%;width:98%;}

#k_menu li ul li a:link {color:#666;text-decoration:none;}
#k_menu li ul li a:visited {color:#666;text-decoration:none;}
#k_menu li ul li a:hover {width:auto;color:#FFF;text-decoration:none;font-weight:normal;background:#7BC5EA;font-weight:bold;}

#k_menu li:hover ul {left:auto;}
#k_menu li.sfhover ul {left:auto;}

下面為導航欄的代碼

<LINK href="/template/menu.css" rel=stylesheet>
<script type="text/javascript" src="/template/menu.js"></script>
<script language="JavaScript">window.k_menu">
{{king:article listid="1,2,3,4,5,6,7,8,9,10,11,12"}}
<li>
<A href="{king:listpath/}">{king:listname/}</A>
<ul>
{king:articlelist listid="sub"}
<li>
<A href="(king:listpath/)">(king:listname/)</A>
</li>
{/king}
</ul>
</li>
{{/king}}
</ul>

Ta最近還發表過 [錯誤] kingcms5.0/5.1漏洞 (19-02-14) [分享] 關于php版自定義模塊搜索問題解決 (17-10-21) [使用] 可以下拉的自動生成導航欄menu (13-09-19) [錯誤] KingCMS 企業版(PHP) 6.0.970(Sp1)幾個錯誤的解決方案 (13-06-20) [使用] 列表頁調用本分類下所有子類文章，完美解決分頁問題 (13-03-22)

隨機閱讀 [疑問] 自動分頁后第一頁和第二頁不在同一文件夾下 (12-01-09) [其他] 發個貼中大獎 (11-08-22) [疑問] KC-PHP，用windows主機好還是Linux主機好？ (11-07-17) [其他] pktsandy今天受刺激了......... (10-12-28) [疑問] 留言評論的發布模板地址，在什么地方改？ (10-12-22)

fox1383164k	發表于：10-09-02 09:46 沙發 [回復] #Top#
人氣：377 積分：864 金幣：3006	完美支持IE7,IE6,Firefox3 的下拉導航菜單 http://www.adjie.com/club/thread-61888-1-4.html http://www.adjie.com/club/viewthread.php?tid=58281 bluesee兄已經發過類似的貼子，只所以重開主題,因為上面的方面用了js,在ie6,ie7下下拉菜單不顯示，倒是firefox支持的好一些. 說明:不支持單頁面調用，除了首頁是手工寫入的，其它都用自動調用的，也許有人說欄目不多，手工寫就是了,這就隨便了菜單html 復制內容到剪貼板代碼: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html ><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><meta name="keywords" content="{king:keywords code="htmlencode" /}" /><br /><meta name="description" content="{king:description code="htmlencode"/}" /><br /><title>{king:title/}</title><br /><link href="images/cssmenu.css" rel="stylesheet" type="text/css" /><br /></head> <body> <div class="cssmenu"> <ul> <li><a href="/"> 首頁</a></li> {{king:article listid="1,2,3,4,5,6,7,8,9,10,11,12"}} <li> <a href="{king:listpath/}">{king:listname/} <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> {king:articlelist listid="sub"} <li><a href="(king:listpath/)">(king:listname/)</a></li> {/king} </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> {{/king}} </ul> </div> </body> </html> css 復制內容到剪貼板代碼: @charset "utf-8"; /* CSS cssmenu by alljill / {margin:0;padding:0;} .cssmenu {font-size:14px;position:relative;z-index:100; margin:0;padding:0; width:865px;} .cssmenu ul{list-style:none;} .cssmenu li {float:left;position:relative; width:96px;} .cssmenu ul ul {visibility:hidden;position:absolute;left:3px;top:27px;} .cssmenu table {position:absolute; top:0; left:0;} .cssmenu ul li:hover ul, .cssmenu ul a:hover ul{visibility:visible;} .cssmenu a{display:block;border:1px solid #ccc;background:url(/template/images/menubg.gif) repeat-x;padding:4px 15px;margin:1px;color:#339966;text-decoration:none;} .cssmenu a:hover{background:#339966;color:#000;border:1px solid #000;} .cssmenu ul ul{} .cssmenu ul ul li {clear:both;text-align:left;font-size:14px;} .cssmenu ul ul li a{display:block;width:100px;height:15px;margin:0;border:0;border-bottom:1px solid #858585;} .cssmenu ul ul li a:hover{border:0;background:#fafafa;border-bottom:1px solid #fff;}

fox1383164k

發表于：10-09-02 09:46 沙發 [回復] #Top#

人氣：377 積分：864 金幣：3006

完美支持IE7,IE6,Firefox3 的下拉導航菜單
http://www.adjie.com/club/thread-61888-1-4.html
http://www.adjie.com/club/viewthread.php?tid=58281
bluesee兄已經發過類似的貼子，只所以重開主題,因為上面的方面用了js,在ie6,ie7下下拉菜單不顯示，倒是firefox支持的好一些.
說明:不支持單頁面調用，除了首頁是手工寫入的，其它都用自動調用的，也許有人說欄目不多，手工寫就是了,這就隨便了
菜單html
復制內容到剪貼板代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html ><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><meta name="keywords" content="{king:keywords code="htmlencode" /}" /><br /><meta name="description" content="{king:description code="htmlencode"/}" /><br /><title>{king:title/}</title><br /><link href="images/cssmenu.css" rel="stylesheet" type="text/css" /><br /></head>
<body>
<div class="cssmenu">
<ul>
<li><a href="/"> 首頁</a></li>
{{king:article listid="1,2,3,4,5,6,7,8,9,10,11,12"}}
<li>
<a href="{king:listpath/}">{king:listname/}
</a>

<ul>

{king:articlelist listid="sub"}
<li><a href="(king:listpath/)">(king:listname/)</a></li>
{/king}
</ul>

</li>
{{/king}}
</ul>
</div>
</body>
</html>

css
復制內容到剪貼板代碼:

@charset "utf-8";
/* CSS cssmenu by alljill */
*{margin:0;padding:0;}
.cssmenu {font-size:14px;position:relative;z-index:100; margin:0;padding:0; width:865px;}

.cssmenu ul{list-style:none;}
.cssmenu li {float:left;position:relative; width:96px;}
.cssmenu ul ul {visibility:hidden;position:absolute;left:3px;top:27px;}
.cssmenu table {position:absolute; top:0; left:0;}
.cssmenu ul li:hover ul,
.cssmenu ul a:hover ul{visibility:visible;}
.cssmenu a{display:block;border:1px solid #ccc;background:url(/template/images/menubg.gif) repeat-x;padding:4px 15px;margin:1px;color:#339966;text-decoration:none;}
.cssmenu a:hover{background:#339966;color:#000;border:1px solid #000;}
.cssmenu ul ul{}
.cssmenu ul ul li {clear:both;text-align:left;font-size:14px;}
.cssmenu ul ul li a{display:block;width:100px;height:15px;margin:0;border:0;border-bottom:1px solid #858585;}
.cssmenu ul ul li a:hover{border:0;background:#fafafa;border-bottom:1px solid #fff;}

zongxiao08	發表于：11-04-25 17:56 板凳 [回復] #Top#
人氣：145 積分：1089 金幣：3553	演示下就更好了

bleach	發表于：11-06-14 10:10 4樓 [回復] #Top#
人氣：87 積分：32 金幣：1003	好的，收藏了。

dl5541	發表于：12-08-21 12:31 5樓 [回復] #Top#
人氣：65 積分：4106 金幣：11690	頂一下

rzkgj	發表于：12-08-25 00:36 6樓 [回復] #Top#
人氣：5 積分：11 金幣：15	非常好

xurizhaoyang	發表于：12-08-28 11:37 7樓 [回復] #Top#
人氣：12 積分：50 金幣：174	有圖片就更容易了解了。

yxb1024	發表于：12-08-28 23:26 8樓 [回復] #Top#
人氣：22 積分：27 金幣：154	我說看不懂，你們可別笑我。。

jianke593	發表于：13-08-07 11:54 9樓 [回復] #Top#
人氣：3 積分：24 金幣：181	呵呵，收藏了

kingqifu85	發表于：13-09-14 00:00 10樓 [回復] #Top#
人氣：0 積分：0 金幣：10	收藏了

12 Next >

發表回復

帳號	匿名發布審核后可見 [加載完整在線編輯器]
內容
驗證碼	計算題太難?換個簡單點的.

我已認真閱讀服務條款，并遵守具體協議內容

KingCMS 內容管理系統

關于我們聯系我們廣告報價付款方式站點導航

廣州唯眾網絡科技有限公司粵ICP備08008106號