您的位置：首页 > Web前端 > CSS

纯css书签导航按钮

2015-08-02 18:29 1651 查看

最近在写个网站，发现导航栏怎么写都不好看。后来在看别人的网站的时候发现了一个不错的设计，于是乎就想自己去试试如何写出同样的效果。先贴别人网站导航的效果图。

类似书签式的立体导航，瞬间就觉得这个设计真的不错。于是自己就开始思考。如何能用CSS做出同样的效果呢。首先从三角形开始思考。如何生成一个三角形来产生立体效果。于是就想到了border。代码与效果如下。

<!DOCTYPE html>
<body>
<div class="allow">
</div>
</body>
<style>
.allow{
width:1px;
background:white;
border: 15px solid;
border-color: #111111 #B2DE34 #555555 red ;
}
</style>

通过修改border-left,border-right,border-top,border-bottom可以得到不同的三角形。于是乎就开始写书签导航。实现的代码与效果如下。

<li id="info" class="button margin-padding-clear" >
<div id="info-arrow" class="button-content-arrow"></div>
<div id="info-content" class="button-content">学校信息</div>
<div class="button-content-bottom"></div>
</li>

.button-content-arrow{
width:20px;
height: 0%;
background:white;
border: 15px solid;
border-color: #888888 #B2DE34 #888888 #888888 ;
position: absolute;
right:100px;
top: 10px;
}
.button-content{
width: 100px;
height: 30px;
background-color: #B2DE34;
font-size: small;
line-height: 30px;
text-align: center;
position: absolute;
top: 10px;
right: 0px;
}
.button-content-bottom{
width:10px;
height: 0%;
background:white;
border: 15px solid;
border-color: #fff #fff #fff #58661C;
border-top: 0;
right: -25px;
position: absolute;
top: 40px;
}

继续说下去既然写了导航。那么肯定需要动画效果于是乎这时候就开始遇到问题了。首先这个书签是由3个div拼成的。用整体动画肯定是不行的。于是就考虑到了动画也两步进行。于是得到如下效果。

实现代码如下：

$(".button").click(function(event){
if(isClickId!=this.id$$this!=null){
$("#"+this.id+"-content").stop(true).animate({width:"120px"},100);
$("#"+this.id+"-arrow").stop(true).animate({right:"120px"},100);
$("#"+isClickId+"-content").stop(true).animate({width:"100px"},100);
$("#"+isClickId+"-arrow").stop(true).animate({right:"100px"},100);
isClickId=this.id;
}
});虽然已经实现了效果。但是个人感觉并不理想。因为一个导航需要3个div。代码太冗杂了。因为自己photoshop的技术确实不咋地。所以不想考虑图片实现效果。希望各位大神能不吝赐教一些简单的实现方法。多谢。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css导航书签书签导航书签效果立体导航

相关文章推荐

新的分享

章节导航