圆形的雷达菜单带右键移位特效【原创

来源:https://www.sucaihuo.com/js/2366.html 2017-07-09 23:09浏览(714) 收藏

一款带右键移位特效的圆形雷达菜单,每一个菜单都有自己的图标,可以自由选择菜单显示的个数,没有菜单的鼠标悬停内容介绍都可以自由设置,字体、颜色、图标等均可自由设置调整,鼠标右键单击任意位置时,整体菜单会有一个位移的变化,效果挺棒的,喜欢的小伙伴们请收下把。
圆形的雷达菜单带右键移位特效
分类:导航菜单 > 图标导航 难易:初级
查看演示 下载资源 下载积分: 60 积分

页面的head部分需要引入3个CSS样式文件,有2个是远程调用的,代码如下:

<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link type="text/css" rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic.min.css'>
<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分由多个图标菜单组成,还有一个select来控制菜单的显示个数,部分代码如下:

<li class="radial-menu__menu-item">
  <div class="radial-menu__menu-link-bg"></div>
  <div class="radial-menu__menu-icon">
    <span class="oi" data-glyph="bold" title="Bold" aria-hidden="true"></span>
  </div>
  <div class="radial-menu__menu-content">
    <div class="radial-menu__menu-content-wrapper">
      <h6 class="radial-menu__menu-content-title">
        粗体
      </h6>
      <p class="radial-menu__menu-content-description">
        Make text bold
      </p>
    </div>
  </div>
  <a href="javascript:void(0);" class="radial-menu__menu-link"></a>
</li>

<div class="menu-items-select">
  <label class="menu-items-select__label" for="menu-items-to-show">菜单显示个数</label>
  <select class="menu-items-select__select" name="menu-items-to-show" id="menu-items-to-show">
    <option value="3">3个</option>
    <option value="4">4个</option>
    <option value="5">5个</option>
    <option value="6">6个</option>
    <option value="7">7个</option>
    <option value="8">8个</option>
    <option value="9">9个</option>
    <option value="10" selected>10个</option>
    <option value="11">11个</option>
    <option value="12">12个</option>
    <option value="13">13个</option>
    <option value="14">14个</option>
    <option value="15">15个</option>
  </select>
</div>

页面的底部需要引入一个JS文件,用来响应菜单的各种事件,代码如下:

<script type="text/javascript" src="js/index.js"></script>
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/js/2366.html
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2