研究了一下csdn的blog后台程序的导航菜单的实现,其特点是每个导航菜单项的宽度不一样,所以,被用作导航条背景的图片不能是一个单一固定长度的图片,所以,csdn采用了一种称之为滑动门的技术,每个菜单项的左边先左对其显示一个半图片,然后右边再右对齐显示另外一个半图片,右边的半个图片显示的多少随菜单项的宽度自动调整,左右两个图分别如下:
左边的图片作为<a>标签的背景图,右边的图片作为<a>标签中内嵌的<span>标签的背景图,下面是整理出来的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#tabsF {
float:left;
width:100%;
font-size:12px;
line-height:normal;
border-bottom:2px solid #666;
margin-top:5px;
}
#tabsF ul {
margin:0;
padding:10px 10px 20px 50px;
list-style:none;
}
#tabsF li {
display:inline;
margin:0;
padding:0;
}
#tabsF a {
float:left;
background: transparent url("http://writeblog.csdn.net/resources/images/tableftF.gif") no-repeat left top;
margin:0;
padding:0 0 0 3px;
text-decoration:none;
}
#tabsF a span {
float:left;
display:block;
margin:0;
background: transparent url("http://writeblog.csdn.net/resources/images/tabrightF.gif") no-repeat right top;
padding:6px 15px 5px 10px;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span {color:#FFF;}
#tabsF a:hover {background-position:0% -42px;}
#tabsF a:hover span {background-position:100% -42px;}
#tabsF #current a {background-position:0% -42px;}
#tabsF #current a span {background-position:100% -42px;}
</style>
</head>
<body>
<div id="tabsF">
<span id="ctl00_menu"></span><ul><li id="current"><a href="Default.aspx"><span>后台首页</span></a></li><li><a href="PostList.aspx"><span>管理文章</span></a></li><li><a href="PostEdit.aspx"><span>写新文章</span></a></li><li><a href="ArticleList.aspx"><span>收藏</span></a></li><li><a href="AdminGroups.aspx"><span>圈子</span></a></li><li><a href="Feedback.aspx"><span>评论</span></a></li><li><a href="EditLinks.aspx"><span>链接</span></a></li><li><a href="EditGalleries.aspx"><span>相册</span></a></li><li><a href="EditKeywords.aspx"><span>关键字</span></a></li><li><a href="Referrers.aspx"><span>访问来源</span></a></li><li><a href="Configure.aspx"><span>配置</span></a></li><li><a href="Preferences.aspx"><span>参数选择</span></a></li><li><a href="http://hi.csdn.net"><span>个人空间</span></a></li></ul>
</div>
</body>
</html>
分享到:
相关推荐
11.广告位功能、精品团购推荐功能、管理员管理、权限组管理、权限节点管理、后台菜单管理、数据库备份、系统设置、网站设置、SEO优化、html静态、邮件等... 分类整理一下,看看这里吧: PHP+MySQL ...
本系统采用MVC架构设计,SQLite数据表有用户表、成员表和活动表,有十多个Activity页面。...主界面可以查看我的活动,修改和...详细设计与讲解可以查看博客:https://blog.csdn.net/qq_42257666/article/details/128511138
114啦后台是大家公认的比较强大的导航网站后台,但是114啦的首页左侧的工具全部都跳转到了114的导航网站上去了,这样的话会让访客认为你的网站不够完善,而且这样的结果就是大大降低了你的网站Pv(Page View)值。导航...
后台具有显示树状导航菜单、保存远程图片到本地、留言审核等控制开关。 13.用户组自由设置功能。并能设置注册用户、收费用户、VIP用户的计费方式和默认有效期。 14.强大的后台文章编辑器的功能。可方便地用...
接下来,本书将介绍如何开发常见的 GUI 模式,例如输入和保存数据、在菜单和对话框中导航以及在后台执行长时间运行的操作。然后,您可以让您的应用程序有效地利用网络资源,并在画布上执行图形操作和相关任务,例如...
ShyPost具有强大的后台管理功能,后台管理菜单采用动态展示,支持滑动切换及菜单折叠,方便管理员的使用。菜单栏目划分合理清晰。产品、新闻、下载等功能均支持多级分类划分,支持审核显示功能。支持图片在线管理...
(2)选择开始菜单中的“所有程序\Apache Tomcat 6.0\Monitor Tomcat”命令,这时在windows的系统托盘中会显示标识Tomcat服务器启动状态的图标,如果显示为,则说明Tomcat服务器没有启动,这时可以在该图标上单击...
mxp/一个比Dreamweaver自带的Jump menu更好的下拉导航菜单 mxp/对Dreamweaver目录下的FtpExtensionsMap.txt文件进行编辑。此文件定义了某类型的文件以二进制或者文本方式ftp mxp/自动将窗口最大化 mxp/由MyComputer....
7.重新设计了网站导航菜单功能,效果更美观; 8.新增产品多图功能,方便客户全方位展示产品图片; 9.增加产品,新闻自动生成静态页面,免去了又要重新生成静态的操作; 10.新增了网站地址功能; 11.可在后台自定义产品属性...
一、程序后台介绍 后台功能: 1、批量生成用户卡号和密码。自毁导出文件功能。 2、会员登录后自动排号,登录25人 自动提示成已返现1人。 后台可自由设置返现参数。3、商家展示管理,二级分类、图片 电话 全后台管理...
首页菜单管理:可以添加,删除菜单信息,打开窗口,是否显示,是否为头部导航或者底部导航栏管理员管理:对超级管理员信息管理,可以进行添加,删除,修改等操作联系方式:E-mail:yang3rui@163.com QQ: 364500483
展开式的商品目录菜单,商品分类式导航,强大精确的搜索功能,让用户很快浏览到自己想要的商品。 2、通用性,实用性强;生活中大部分商品都可以使用本系统来实现电子商务业务。 3、拥有积分商城,积分购买功能;...
36.扩展:重写了微信--菜单配置功能,支持自定义填写URL|关联节点|关联内容|关联逐浪后台调查问卷,更加敏捷便利;37.优化:会员中心修改密码等处的样式,摒弃表格用纯div格式;38.强化:统一访问归集功能,同时支持...