可以下拉的自动生成导航栏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最近还发表过* [分享] 25个时尚杰出的登录表单设计 (23-03-10) [错误] kingcms5.0/5.1漏洞 (19-02-14) [分享] 关于php版自定义模块搜索问题解决 (17-10-21) [使用] 可以下拉的自动生成导航栏menu (13-09-19) [错误] KingCMS 企业版(PHP) 6.0.970(Sp1)几个错误的解决方案 (13-06-20) 随机阅读 [模板] 梦 (18-01-28) [分享] 德阳123地方门户站DIY系列之增加<生活黄页>页面 (13-09-04) [使用] 新做的网站，做完了才搞清楚标签这些 (13-08-06) [疑问] 关于栏目内容调用 (12-05-22) [分享] 团购站点为何会出现倒闭潮 (11-11-19)

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最近还发表过 [分享] 25个时尚杰出的登录表单设计 (23-03-10) [错误] kingcms5.0/5.1漏洞 (19-02-14) [分享] 关于php版自定义模块搜索问题解决 (17-10-21) [使用] 可以下拉的自动生成导航栏menu (13-09-19) [错误] KingCMS 企业版(PHP) 6.0.970(Sp1)几个错误的解决方案 (13-06-20)

随机阅读 [模板] 梦 (18-01-28) [分享] 德阳123地方门户站DIY系列之增加<生活黄页>页面 (13-09-04) [使用] 新做的网站，做完了才搞清楚标签这些 (13-08-06) [疑问] 关于栏目内容调用 (12-05-22) [分享] 团购站点为何会出现倒闭潮 (11-11-19)

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 积分：989 金币：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号