一款带右键移位特效的圆形雷达菜单,每一个菜单都有自己的图标,可以自由选择菜单显示的个数,没有菜单的鼠标悬停内容介绍都可以自由设置,字体、颜色、图标等均可自由设置调整,鼠标右键单击任意位置时,整体菜单会有一个位移的变化,效果挺棒的,喜欢的小伙伴们请收下把。
页面的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>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791