网站右侧导航条的玩法

最近心情很不好，各种工作生活上面的事情，让我很是受伤，刚出来工作感觉程序员确实是个神奇的行业，一个个都觉得自己的智商挺高的，哎，每天起早贪黑的上下班，还天天受气，真是日了够了，一个人一座城，一行代码到天明。

或许真的老了，我居然前所未有的想拥有一个属于自己的家，渴望能吃到几口热喷喷的饭菜，能和最爱的人说上几句掏心掏肺的话，能一起见证风风雨雨。然而并没有什么用，就像js设计模式里面说的一个例子一样，追一个女孩子最好的办法是送她一辆宝马，其他都是次要的。呵呵

我差点一气之下辞职，我也不想和一群不喜欢的人打交道，联调什么后台什么接口，想了很久很久，可我发现我始终有对前端的热爱，虽然也菜鸟，虽然很受伤，虽然一切被虐，就随它吧，不管今天多么受伤，我是真喜欢折腾一些前端的技术，虽然不喜欢整什么框架什么逻辑什么这什么那。热爱你说热爱的，准没错

不说了，周末玩了一下导航效果，是w3ctech第二届css大会官网上面的导航效果，自己做了一下改进，demo：
http://codepen.io/tianzi77/pen/doaEaq

样子就如这样吧

hover的时候有一个动画渐变的过程

html结构：

    <ul id="nav"><li><a href="" target="_blank">山穷水尽</a></li><li class="active"><a href="" data-section="about"><span data-letters="转眼迷归路">转眼迷归路</span></a></li><li><a href="" data-section="speakers">再也不会</a></li><li><a href="" data-section="schedule">自作多情</a></li><li><a href="" data-section="location">By</a></li><li><a href="" data-section="sponsors">TZ</a></li><li><a href="/?l=en">TZ</a></li></ul>

css样式：

        body {background: -webkit-linear-gradient(top left, #abcdef, lightyellow);}ul,li,a {margin: 0;padding: 0;}#nav {position: fixed;top: 15%;right: 2em;border-radius: 2px;background: black;z-index: 100;}ul {list-style: none;}a {text-decoration: none;}#nav li {width: 1.3em;padding: 10px 0;line-height: 1;margin: 0 4px;-webkit-transition: all 0.3s ease-in-out;border-top: 1px solid #abcdef;}#nav li:first-child {border: none;}#nav a {color: rgba(255, 255, 255, 0.5);-webkit-transition: all 0.5s linear;}#nav a:hover {color: #fff;}li:hover {background: -webkit-linear-gradient(left bottom, lightpink, lightblue);border-radius: 30%;border: none;}

网站右侧导航条的玩法相关推荐

前端——用div画菜鸟网站首页导航条“小三角”
今天学到一个新的知识点--用div来画"三角". 之前本帅博主写过一篇<前端--菜鸟网站横向CSS导航条菜单:带小三角形>,里面也有介绍如何制作小三角形,不过它是用的现 ...
京东网站顶部导航条（练习） HTML+CSS
作为初学者写的比较简单,很多地方不完善.还是记录一下吧. 目录一效果图二 HTML 三 CSS 一效果图二 HTML <!DOCTYPE html> <html lang=&q ...
html div挤下去了,网站固定导航条挤动下面的DIV_html/css_WEB-ITnose
这是导航栏CSS width: 1336px; background: #333; margin-top: 0px; font-size: 20px; z-index:9999; 这是下面div的CS ...
html 网站右侧导航,页面右侧固定导航.html
window.onload = function () { var pos = $('#div1').offset();// offset() 获得div1当前的位置,左上角坐标(x,y) $(win ...
bootstrap实现仿bilibili右侧导航条
B站效果: 简单模仿: html代码如下 <div class="side-nav" role="navigation&qu ...
淘客漏洞群用的什么机器人_大双淘客第35期：如何在社群里开课分享首单礼金玩法的流程...
我是大双,六年社群淘客,有的人在你还不懂得用优惠券省钱时,已经通过优惠券贝兼钱了.今天来给大家分享一下淘客新手如何把首单礼金玩法分享给会员,增加社群单产. 最近首单礼金很火,有些小伙伴就直接搭建社群挂 ...
通过Ajax解析和jQuery写了一个小小的导航条
最近在用ajax和jquery做开发,所以闲来无事写了些小导航条,通过ajax解析XML文件动态的创建WEB网站的导航条. <link href="css/style.css" ...
白杨SEO：从5118站长工具备案内参发现百度SEO批量建站优化玩法
前言:这是公众号白杨SEO原创第358篇.为什么想到写这个?本来想写一个SEO工具的,但在用5118备案查询时,发现了一个SEO批量建站站群玩法.它的相关关键词排名还不错,特意拆解分享出来,供参考学习 ...
amazeui学习笔记--css（常用组件10）--导航条Topbar
amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...

网站右侧导航条的玩法

网站右侧导航条的玩法相关推荐

最新文章

热门文章