css3实例教程 一款纯css3实现的环形导航菜单


Posted in HTML / CSS onOctober 20, 2014

之前为大家介绍了好几款导航菜单,今天要给大家带来一款纯css3实现的环形导航菜单。该导航比较新鲜,列表图标位于中间,单击列表图标的时候,各项分布于列表图表的四周。形成一个环形。效果图如下:

实现的代码。

html代码:

复制代码
代码如下:
<div class="container">
<h1>
Cool Open/Close menu in full CSS</h1>
<input type="checkbox" id="menu_opener_id" class="menu_opener">
<label for="menu_opener_id" class="menu_opener_label">
</label>
<div class="barre_hamburger">
</div>
<a href="#" class="link_one link_general"></a><a href="#" class="link_two link_general">
</a><a href="#" class="link_three link_general"></a><a href="#" class="link_four link_general">
</a></input>
</div>

css代码:

[code]body
        {
            background: #34495e;
        }
       
        .container
        {
            width: 550px;
            display: block;
            margin: auto;
            position: relative;
        }
       
        h1
        {
            text-align: center;
            font-family: 'Roboto' , sans-serif;
            font-weight: 400;
            color: #f1c40f;
        }
       
        .menu_opener
        {
            display: none;
        }
       
        .menu_opener:checked ~ .link_one
        {
            top: 65px;
        }
        .menu_opener:checked ~ .link_two
        {
            left: 385px;
        }
        .menu_opener:checked ~ .link_three
        {
            top: 385px;
        }
        .menu_opener:checked ~ .link_four
        {
            left: 65px;
        }
        .menu_opener:checked ~ .barre_hamburger
        {
            opacity: 0;
        }
        .menu_opener:checked ~ .menu_opener_label:after
        {
            transform: rotate(45deg);
            top: 70px;
        }
        .menu_opener:checked ~ .menu_opener_label:before
        {
            transform: rotate(-45deg);
            top: 70px;
        }
       
        .menu_opener_label
        {
            background: #f1c40f;
            width: 150px;
            height: 150px;
            display: block;
            cursor: pointer;
            border-radius: 50%;
            position: absolute;
            top: 200px;
            left: 200px;
            z-index: 10;
        }
        .menu_opener_label:after
        {
            position: absolute;
            top: 50px;
            left: 50px;
            background: #000;
            content: "";
            width: 50px;
            height: 10px;
            -webkit-transition: all 0.4s ease;
            transition: all 0.4s ease;
        }
        .menu_opener_label:before
        {
            position: absolute;
            top: 90px;
            left: 50px;
            background: #000;
            content: "";
            width: 50px;
            height: 10px;
            -webkit-transition: all 0.4s ease;
            transition: all 0.4s ease;
        }
       
        .barre_hamburger
        {
            width: 50px;
            height: 10px;
            position: absolute;
            top: 270px;
            left: 250px;
            background: #000;
            z-index: 20;
            -webkit-transition: all 0.4s ease;
            transition: all 0.4s ease;
        }
       
        .link_general
        {
            width: 100px;
            height: 100px;
            display: block;
            border-radius: 50%;
            position: absolute;
            top: 225px;
            left: 225px;
            background: #ecf0f1;
            -webkit-transition: all 0.4s ease;
            transition: all 0.4s ease;
        }
       
        .link_one
        {
            background: url("home.png") #f1c40f no-repeat center center;
        }
       
        .link_two
        {
            background: url("mail.png") #f1c40f no-repeat center center;
        }
       
        .link_three
        {
            background: url("set.png") #f1c40f no-repeat center center;
        }
       
        .link_four
        {
            background: url("start.png") #f1c40f no-repeat center center;
        }

[code]

HTML / CSS 相关文章推荐
用CSS3将你的设计带入下个高度
Aug 08 HTML / CSS
彻底弄明白CSS3的Media Queries(跨平台设计)
Jul 27 HTML / CSS
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
Jan 06 HTML / CSS
如何在网站上添加谷歌定位信息
Apr 16 HTML / CSS
使用HTML5 Canvas API中的clip()方法裁剪区域图像
Mar 25 HTML / CSS
HTML5本地存储之Web Storage应用介绍
Jan 06 HTML / CSS
五个2015 年最佳HTML5 框架
Nov 11 HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
Feb 29 HTML / CSS
浅析border-radius如何兼容IE
Apr 19 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
Jan 29 HTML / CSS
HTML5轻松实现全屏视频背景的示例
Apr 23 HTML / CSS
canvas版人体时钟的实现示例
Jan 29 HTML / CSS
在HTML5中如何使用CSS建立不可选的文字
Oct 17 #HTML / CSS
布局和排版教程 纯css3实现图片三角形排列
Oct 17 #HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 #HTML / CSS
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
Oct 11 #HTML / CSS
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
Oct 10 #HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
Oct 08 #HTML / CSS
一款纯css3实现的动画加载导航
Oct 08 #HTML / CSS
You might like
windows下zendframework项目环境搭建(通过命令行配置)
2012/12/06 PHP
如何使用PHP计算上一个月的今天
2013/05/23 PHP
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
js模仿php中strtotime()与date()函数实现方法
2015/08/11 Javascript
jquery实现图片预加载
2015/12/25 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
浅谈JS函数定义方式的区别
2016/10/30 Javascript
原生JS改变透明度实现轮播效果
2017/03/24 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
vue+elementUi 实现密码显示/隐藏+小图标变化功能
2020/01/18 Javascript
Vue将props值实时传递 并可修改的操作
2020/08/09 Javascript
axios封装与传参示例详解
2020/10/18 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
2020/10/30 Javascript
解决pycharm双击但是无法打开的情况
2020/10/31 Javascript
[05:59]2018DOTA2国际邀请赛寻真——只为胜利的Secret
2018/08/13 DOTA
python删除指定类型(或非指定)的文件实例详解
2015/07/06 Python
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
浅谈python jieba分词模块的基本用法
2017/11/09 Python
Python cookbook(数据结构与算法)通过公共键对字典列表排序算法示例
2018/03/15 Python
python基础教程项目三之万能的XML
2018/04/02 Python
Python操作Excel插入删除行的方法
2018/12/10 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
决策树剪枝算法的python实现方法详解
2019/09/18 Python
Python collections模块的使用方法
2020/10/09 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
阿里巴巴Oracle DBA笔试题答案-备份恢复类
2013/11/20 面试题
中文专业毕业生自荐书范文
2014/01/04 职场文书
第28个世界无烟日活动总结
2015/02/10 职场文书
小兵张嘎观后感300字
2015/06/03 职场文书
有关朝花夕拾的读书笔记
2015/06/29 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
送给自己的励志语句:要安静的优秀,悄无声息的坚强
2019/11/26 职场文书
总结一些Java常用的加密算法
2021/06/11 Java/Android