简单实用仿淘宝菜单？

1K228资讯网——每日最新资讯28at.com

第一步.我们找到自己看着符合我们自己店铺风格和创意的店铺或者其他什么网页.然后点击360浏览器右上角的截图.下拉.看到保存全网页为图片的选项.1K228资讯网——每日最新资讯28at.com

将自己需要的页面保存为jpg的格式图片.1K228资讯网——每日最新资讯28at.com

将我们得到的素材加载进入PS里面.这时候我们就需要自己动手将需要的模块取下来了.举个例子.我们看见别人的店招很棒.我也想要这个效果.那么我们固定一个960*150尺寸来裁剪店招(注意:这里的150像素是指不要原来的导航,自己制作导航的高度.如果不想自己只做导航,请参考淘宝标准).裁剪一下.1K228资讯网——每日最新资讯28at.com

得到店招之后我们就可以加工了.替换掉别人的名字.换上自己的思路.更换掉其他的小细节之类的.相信同学们都有自己的想法.1K228资讯网——每日最新资讯28at.com

1K228资讯网——每日最新资讯28at.com

好啦.这就是最简单的方法啦.以后还会继续分享.直到我们完整复制别人的店铺为止!最后.这是我稍微修改的一个范例.记得善用PS里面的图层工具哦.可以更改很多信息呢.祝大家都能成功!1K228资讯网——每日最新资讯28at.com

html:<divclass="high_menu"><pclass="high_menu_title">图书分类<span></span></p><divclass="high_menu_content"><ul><li><ahref="#">数学</a><em>(123)</em></li><li><ahref="#">语文</a><em>(1323)</em></li><li><ahref="#">美术</a><em>(12453)</em></li><li><ahref="#">绘画</a><em>(1232)</em></li><li><ahref="#">动漫</a><em>(413)</em></li><li><ahref="#">摄影</a><em>(1243)</em></li><li><ahref="#">旅游</a><em>(13)</em></li><li><ahref="#">漫画</a><em>(23)</em></li><li><ahref="#">计算机</a><em>(1423)</em></li><li><ahref="#">网络</a><em>(1253)</em></li><li><ahref="#">经济</a><em>(1243)</em></li><li><ahref="#">其他</a><em>(133)</em></li></ul><pclass="high_menu_less">简化></p></div></div>1K228资讯网——每日最新资讯28at.com

1K228资讯网——每日最新资讯28at.com

css:p,ul{margin:0;padding:0;}ul{list-style:none;}div.high_menu{margin:0auto;width:400px;}div.high_menu_content{width:398px;border:1pxsolid#ffc786;}div.high_menup.high_menu_title{padding-left:10px;width:390px;heigth:30px;background:#ff8f0a;line-height:30px;font-weight:bold;color:#302f2e;}div.high_menup.high_menu_titlespan{display:inline-block;margin:12px;float:right;width:0;height:0;border-right:5pxsolid#ff8f0a;border-bottom:5pxsolid#000;border-left:5pxsolid#ff8f0a;}div.high_menu_contentul{padding-left:8px;}div.high_menu_contentulli{float:left;width:130px;}em{font-style:none;color:gray;}div.high_menu_contentp.high_menu_less{padding-left:350px;font-weight:bold;color:red;}1K228资讯网——每日最新资讯28at.com

Js:<scripttype="text/javascript">$(function(){$(".high_menu_title").toggle(function(){$(".high_menu_content").slideUp();$(this).children("span").css({"border-top":"5pxsolid#000","border-bottom":"none"})},function(){$(".high_menu_content").slideDown();$(this).children("span").css({"border-top":"none","border-bottom":"5pxsolid#000"})});$(".high_menu_less").toggle(function(){$("ulli:gt(4):not(:last)").hide();$(this).text("更多>");},function(){$("ulli:gt(4):not(:last)").show();$(this).text("简化>");});});</script>由于都是小效果，所以代码代码都比较简单，大家操作起来也比较方便滴这个就是预览效果了这个呢是点击小三角可以收起来的效果，挺好用的，大家试试看吧??1K228资讯网——每日最新资讯28at.com

本文链接：http://www.28at.com/showinfo-23-18461-0.html简单实用仿淘宝菜单？

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： 淘宝网店如何装修？

下一篇： 淘宝店商品宝贝名字关键字的巧妙运用？