纯css书签导航按钮

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

类似书签式的立体导航，瞬间就觉得这个设计真的不错。于是自己就开始思考。如何能用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书签导航按钮相关推荐

css制作动态按钮导航栏,巧妙使用checkbox制作纯css动态导航栏
前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...
纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）
原文:纯CSS实现下拉菜单及下拉容器等(纯CSS实现导航条及导航下拉容器) 虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考希望大家可以指导批评~~ 首先我们以列表ul ...
html导航去下划线,纯CSS实现导航栏下划线跟随的示例代码
本篇文章主要介绍了纯CSS实现导航栏下划线跟随的示例代码,分享给大家,具体如下: 效果: 代码: html: aaaa bbbbbbb cccc dddd eeee css: ul { padding ...
纯CSS自定义button按钮的点击特效
纯css自定义button按钮的点击特效,实现背景变化效果图如下: 代码如下: <!DOCTYPE html> <html> <head><meta cha ...
纯css实现导航处hot小图标实现
先上效果图: 纯css实现导航处hot小图标实现 css代码: .shop{ position: relative; } .shop a:after{ background-color: red; b ...
如何在html中加入动画效果,纯css如何实现按钮的水滴动画效果？
纯css如何实现按钮的水滴动画效果?下面本篇文章就来给大家介绍一下使用纯css实现Material Design中按钮的水滴动画效果.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...
html导航页面转换,纯CSS实现导航栏Tab切换效果
不用 Javascript,使用纯 CSS 方案,实现类似下图的导航栏切换: CSS 的强大之处有的时候超乎我们的想象,Tab 切换,常规而言确实需要用到一定的脚本才能实现.下面看看如何使用 CSS ...
纯css导航下拉_纯CSS标签导航
纯css导航下拉 The appearence of "tab" navigation is relatively easy to create, but making a tab ...
纯CSS实现3D按钮效果
今天分享一个用纯CSS实现的3D按钮. css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改box-shadow和top值. 让人感觉有一种按钮被按下的感觉.css代码 ...

纯css书签导航按钮

纯css书签导航按钮相关推荐

最新文章

热门文章