使用Html在圆形位置添加菜单

Question

您好我正在尝试做这样的事情http://imgur.com/Ilu7ZM5但我试图放置图标而不是图标

我当前的HTML代码是

<div>
 <center> 
  <a href="#"> 
  <button class="btn btn-success btn-lg">a</button></a>
  </center>
  <left><img src="img/arrow.png" alt="" width="250px" height="150px"/></left>
  <br>
  <br>
  <left>
  <a href="#"><button class="btn btn-warning btn-lg"><center>b</center></button></a>
  </left>
  <a href="#" style="float:right">  <button class="btn btn-danger btn-lg">1</button></a>
  <br>
  <br>
  <br>
  <br>
  <center><a href="#">  <button class="btn btn-success btn-lg">2</button></a><br><br></center>
  </div>

我如何实现这一目标？

Answer 1

你走了。演示包括带图标的版本和带文本的版本。请参阅演示链接以获取完整代码，因为下面的屏幕截图中未显示菜单动画。如果您想使用它们，请随意分叉..

图标

<div class="wrap">
 <div class="circle">
   <i class="icon i1 icon-flag"></i>
   <i class="icon i2 icon-heart"></i>
   <i class="icon i3 icon-code"></i>
   <i class="icon i4 icon-coffee"></i>
   <div class="line1"></div>
   <div class="line2"></div>
   <span class="text">Menu</span>
 </div>
</div>

文本

<div class="wrap2">
 <div class="circle">
   <i class="icon i1">A</i>
   <i class="icon i2">B</i>
   <i class="icon i3">C</i>
   <i class="icon i4">D</i>
   <div class="line1"></div>
   <div class="line2"></div>
   <span class="text">Menu</span>
 </div>
</div>

请参阅两个版本的完整CSS代码的链接..没有在此发布，因为它有很多。