锋芒拍摄关于风景、人像、纪实、建筑、星野、深空天体的摄影作品都会在这里展示给大家欣赏!

Z-blog导航栏修改为下拉式导航栏的一种方法

09 07月
作者: 网络 |分类:网站资料 | 转载时间:2019年07月09日
【特别声明】 本文摘自网络,原文 作者/网站: 网络

注:本文以林肆的最新asp模板simline为例

由于本站的分类比较多,都排在以前的导航栏上有点拥挤,而且多的情况下会出现错位的情况,所以想寻找有没有修改的办法,所以我开始在网站寻找方法,重要在z-blog论坛上http://bbs.rainbowsoft.org/thread-80894-1-1.html找到个方法。首先谢谢他,给我了灵感和方法,但和他有点不同,我只是改了下css和导航栏模块代码,对于模板并没有修改,由于自己也是个新手,所以到处尝试,弄了半天时间。终于弄成现在的效果,希望对大家有所帮助。

1)之前的没有下拉效果:

Z-blog导航栏修改为下拉式导航栏的一种方法

 

(2)修改成功后的效果:

Z-blog导航栏修改为下拉式导航栏的一种方法

 

过程:

1.修改对应模板下的css文件。

找到css文件的导航栏的下面的代码如下:(所有的#nav全部换成下面的代码)

CSS" style="color: black; background-color: rgb(207, 207, 207); display: inline-block; position: absolute; bottom: auto; left: auto; top: 0px; right: 0px; width: auto; height: auto; font-size: 0.9em; border-radius: 0px 0px 0px 5px; padding: 0px 0.5em; text-shadow: none; z-index: 1; box-shadow: none; transform: none;"> CSS
#nav{background:#777;height:28px;width:940px;line-height:35px;font-weight:normal;margin:0 auto;}
#nav ul{height:28px;width:720px;float:left;}
#nav li{float:left; line-height:28px;position:relative;line-height:30px\9;}
#nav a{padding:0px 25px; display:block;color:#f8f8f8;font-weight:normal;}
#nav a:hover{height:28px\9;background:#555;text-decoration:none;}

替换代码是:

CSS" style="color: black; background-color: rgb(207, 207, 207); display: inline-block; position: absolute; bottom: auto; left: auto; top: 0px; right: 0px; width: auto; height: auto; font-size: 0.9em; border-radius: 0px 0px 0px 5px; padding: 0px 0.5em; text-shadow: none; z-index: 1; box-shadow: none; transform: none;"> CSS
/* ASP版代码 */
#nav{background:#777;height:28px;width:974px;font-weight:normal;margin:0 auto;}/*设置导航条长度(从左边到搜索框的距离width)*/
#nav ul{height:28px;width:760px;float:left;}
#nav a{padding:0px 0px; display:block;color:#f8f8f8;font-weight:normal;}
#nav a:hover{background:#555;text-decoration:none;}
/*子导航竖排*/
#nav li {position: relative;height: 100%;color:#fff;width:102px; text-align:center;font:'Microsoft Yahei';
            float: left; line-height:28px;} 
#nav ul ul {visibility:hidden;padding:0px 0px;width: auto;white-space:nowrap;font: 14px  'Microsoft Yahei',
            Verdana, Arial, Helvetica, sans-serif;} 
#nav ul li:hover ul,
#nav ul a:hover ul{visibility:visible; margin:auto;} 
#nav ul ul li a{width:102px;margin:0;padding:0px 0px;color:#f8f8f8;font-weight:normal;line-height:28px;background:#777777;}

/* PHP版代码*/
    body>header nav{max-width:100%;background:#3A6EA5;height:28px;;font-weight:normal;margin:0 auto;}/*设置导航条长度(从左边到搜索框的距离width)*/
    body>header nav ul{height:28px;width:760px;float:left;}
    body>header nav a{padding:0px 0px; display:block;color:#f8f8f8;font-weight:normal;}
    body>header nav a:hover{background:#555;text-decoration:none;}
    /*子导航竖排*/
    body>header nav li {position: relative;height: 100%;color:#fff;width:102px; text-align:center;font:'Microsoft Yahei';
                                float: left; line-height:28px;} 
    body>header nav ul ul {visibility:hidden;padding:0px 0px;width: auto;white-space:nowrap;
                                    font: 14px  'Microsoft Yahei',Verdana, Arial, Helvetica, sans-serif;} 
    body>header nav ul li:hover ul,
    body>header nav ul a:hover ul{visibility:visible; margin:auto;} 
    body>header nav ul ul li a{width:102px;margin:0;padding:0px 0px;color:#f8f8f8;font-weight:normal;line-height:28px;background:#777777;}

保存退出MD软件。【上面的代码可以自己根据自己的模板自行修改参数】

2.修改导航栏模块代码:[例子]

Z-blog导航栏修改为下拉式导航栏的一种方法

 

比如我的以前的模板代码如下:

Markup
<li id="menu-1"><a href="https://www.tusay.net/">首页</a></li>

<li id="menu-cate-15"><a href="https://www.tusay.net/catalog.asp?cate=15">XP</a></li>

<li id="menu-cate-16"><a href="https://www.tusay.net/catalog.asp?cate=16">Win 7</a></li>

<li id="menu-cate-17"><a href="https://www.tusay.net/catalog.asp?cate=17">多系统</a></li>

<li id="menu-cate-18"><a href="https://www.tusay.net/catalog.asp?cate=18">网络连接</a></li>

<li id="menu-cate-19"><a href="https://www.tusay.net/catalog.asp?cate=19">故障处理</a></li>

<li id="menu-cate-20"><a href="https://www.tusay.net/catalog.asp?cate=20">其他</a></li>

<li id="menu-page-18"><a href="https://www.tusay.net/link.html">链接</a></li>

<li id="menu-page-19"><a href="https://www.tusay.net/guestbook.html">留言</a></li>

<li id="menu-cate-21"><a href="https://www.tusay.net/catalog.asp?cate=21">系统网络</a></li>

现在你要把xp,win7,win7-xp,系统网络四个栏作为子栏目,那么就只需要更改代码添加<ul></ul>即可。如下面的代码红色部分。

Markup
<li id="menu-1"><a href="https://www.tusay.net/">首页</a></li>

<li id="menu-cate-21"><a href="https://www.tusay.net/catalog.asp?cate=21">系统网络</a>

	<ul>

		<li id="menu-cate-15"><a href="https://www.tusay.net/catalog.asp?cate=15">XP</a></li>

		<li id="menu-cate-16"><a href="https://www.tusay.net/catalog.asp?cate=16">Win 7</a></li>

		<li id="menu-cate-17"><a href="https://www.tusay.net/catalog.asp?cate=17">多系统</a></li>

		<li id="menu-cate-18"><a href="https://www.tusay.net/catalog.asp?cate=18">网络连接</a></li>

	</ul>

</li>

<li id="menu-cate-19"><a href="https://www.tusay.net/catalog.asp?cate=19">故障处理</a></li>

<li id="menu-cate-20"><a href="https://www.tusay.net/catalog.asp?cate=20">其他</a></li>

<li id="menu-page-18"><a href="https://www.tusay.net/link.html">链接</a></li>

<li id="menu-page-19"><a href="https://www.tusay.net/guestbook.html">留言</a></li>

说明:

Markup
<li><ul>...</ul><l/i>

把需要做子栏的项目包起来,成列显示。

修改完成后,提交下,然后文件重建下就可以了。


浏览64 评论0
返回
目录
返回
首页
标签:ZBlog 导航栏
ZBlogPHP文章缩略图调用方法,超详细 zblog模板修改

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。