VenShop新版网店系统发布,支持电脑版 + 手机版 + APP + 微店

极致搜索引擎优化,自动推送百度 对接微信公众号,支持微信支付/支付宝/银联收款 短信验证码/通知功能,实时物流跟踪功能 老用户享受7折/买二送一等活动

付款方式 | 联系方式 | 网站地图 | 客服热线:17091006015


:783940、729220
技术中心
经典下拉菜单制作方法(网页下拉菜单代码) 作者:钟宏声  网站:凡人网络
说起网页上的下拉菜单,最最经典的就是微软风格的下拉菜单。凡是去过www.microsoft.com网站的看官都对这个简洁明快的下拉菜单垂涎不已。然而无奈的是复杂的代码让人望而生畏,记得论坛上经常有人询问这种菜单怎么做。现在我们就来介绍这个菜单如何制作。第一种方法我们使用smartmenu。他可以制作一个始终浮动在屏幕顶端的下拉菜单。


去看看微软的经典菜单

源代码名称:Smart Menu (跨浏览器版)
作者:Constantin Kuznetsov Jr.
类型:外部js文件
制作方法:菜单源文件下载

第1步:将下列代码复制到网页的标签之间:



第2步:将下面的代码复制到标签的右边,位置紧挨着标签:



第3步:添加菜单的内容。编辑menucontext.js文件,所有的菜单选项都在这里设置。默认的menucontext.js里面的内容,比较复杂我现在把代码精简出来。给大家做一个说明。整个代码如下: function showToolbar()
{
// AddItem(id, text, hint, location, alternativeLocation);
// AddSubItem(idParent, text, hint, location);
//主菜单定义
menu = new Menu();
menu.addItem("multimedia", "多媒体", "多媒体软件", null, null);
menu.addItem("image", "图像处理", "图像处理软件", null, null);


//多媒体子菜单定义
menu.addSubItem("multimedia", "凡人网络", "凡人网络", "http://www.venshop.com");
menu.addSubItem("multimedia", "我要网上开店", "我要网上开店", "http://www.venshop.com");

//图像处理子菜单定义
menu.addSubItem("image", "开店系统", "开店系统", "http://www.venshop.com");
menu.addSubItem("image", "网上开店系统", "网上开店系统", "http://www.venshop.com");
menu.addSubItem("image", "网上购物系统", "网上购物系统", "http://www.venshop.com");


//结束菜单定义
menu.showMenu();
}


  上面的例子中制作的是一个有两个主菜单的菜单。一个主菜单为多媒体,一个主菜单为图像处理。主要靠两个命令来制作Additem为添加主菜单项目。格式为AddItem(菜单标记, 文本说明, 文本提示, 位置,替换位置)。AddSubItem为添加子菜单项目,idparent为主菜单的菜单标记,其余同前。

  第4步:上传菜单文件。将 menu.js和menucontext.js文件上传到和网页文件同一目录下。这样就完成了所有的操作。



菜单安装的一些善后工作:

  安装了菜单之后,如果需要将菜单完全与网页顶部和左边紧密结合的话,你可以把标签修改成为。


  或许大家会对菜单里的文字感到不满意。你可以把制作菜单第一步的CSS代码进行修改。比如

  将里面的字体大小换成了10.5磅的话,中文字就会简洁干净多了。

  同样如果对菜单的表格感到不满意的话,可以修改menu.js文件中的代码例如:

function Menu()
{
this.bgColor = "#008080";
if (ie) this.menuFont = "bold xx-small Verdana";
if (n) this.menuFont = "bold x-small Verdana";
// this.fontColor = "white";
this.addItem = addItem;
this.addSubItem = addSubItem;
this.showMenu = showMenu;
this.mainPaneBorder = 0;
this.subMenuPaneBorder = 0;

  this.bgcolor 修改的是菜单属性
  this.mainPaneBorder 修改的是主菜单的边框宽度
  this.subMenuPaneBorder 修改的是子菜单的边框宽度。

  修改完毕文件之后重新上传js文件即可。只要修改的好就可以发挥成为多种风格了。
转载请注明出自:凡人网络VenShop.Com
发现内容有误 / 侵犯您的版权 ↑相关文章:

关于我们 | 汇款方式 | 建站流程 | 联系方法 | 常见问题 | 新闻公告 | 加入收藏 | 留言本站

客服热线:022-85194902 邮箱:fuwu@venshop.com
®天津盈商科技有限公司版权所有 Powered By :TianJin YingShang KeJi Co.,Ltd.
软件著作权证书登记号:2006SRBJ0621   软著登字第BJ4429号
津ICP备17001798号
Copyright © 2002-2021 VENSHOP.COM. All Rights Reserved.