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 相关文章推荐
让IE6支持css3,让 IE7、IE8 都支持CSS3
Oct 09 HTML / CSS
CSS3 Flexbox中flex-shrink属性的用法示例介绍
Dec 30 HTML / CSS
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 HTML / CSS
利用CSS3实现文本框的清除按钮相关的一些效果
Jun 23 HTML / CSS
HTML5 progress和meter控件_动力节点Java学院整理
Jul 06 HTML / CSS
html5表单及新增的改良元素详解
Jun 07 HTML / CSS
使用phonegap操作数据库的实现方法
Mar 31 HTML / CSS
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
Aug 28 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
Feb 05 HTML / CSS
浅谈Html5页面打开app的一些思考
Mar 30 HTML / CSS
video实现有声音自动播放的实现方法
May 20 HTML / CSS
萌新HTML5 入门指南(二)
Nov 09 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
mayfish 数据入库验证代码
2010/04/30 PHP
ThinkPHP让分页保持搜索状态的方法
2014/07/02 PHP
jquery给图片添加鼠标经过时的边框效果
2013/11/12 Javascript
jQuery自带的一些常用方法总结
2014/09/03 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
JS实现两表格里数据来回转移的方法
2015/05/28 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
2015/08/26 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
2015/09/17 Javascript
jQuery mobile 移动web(6)
2015/12/20 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
2016/04/13 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
2017/05/12 Javascript
用JS实现简单的登录验证功能
2017/07/28 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
koa router 多文件引入的方法示例
2019/05/22 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
Python线性拟合实现函数与用法示例
2018/12/13 Python
DJango的创建和使用详解(默认数据库sqlite3)
2019/11/18 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
Selenium+BeautifulSoup+json获取Script标签内的json数据
2020/12/07 Python
Office DEPOT法国官网:欧迪办公用品采购
2018/01/03 全球购物
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
时尚孕妇装:Ingrid & Isabel
2019/05/08 全球购物
综合测评自我鉴定
2013/10/08 职场文书
学校食堂采购员岗位职责
2013/12/05 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
个性婚礼策划方案
2014/05/17 职场文书
公司法人授权委托书范本
2014/09/12 职场文书
2015年仓库工作总结
2015/04/09 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
Golang 空map和未初始化map的注意事项说明
2021/04/29 Golang
纯CSS如何禁止用户复制网页的内容
2021/11/01 HTML / CSS