这是带有CSS和JS的简单HTML。带有图标的圆形菜单:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet"href=
"https://cdnjs.cloudfare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
</head>
<body>
<nav class="circular-menu">
<div class="circle">
<a href="#" class="fa fa-home fa-2x"></a>
<a href="#" class="fa fa-facebook fa-2x"></a>
<a href="#" class="fa fa-instagram fa-2x"></a>
<a href="#" class="fa fa-linkedin fa-2x"></a>
<a href="#" class="fa fa-skype fa-2x"></a>
<a href="#" class="fa fa-map-marker fa-2x"></a>
<a href="#" class="fa fa-envelope fa-2x"></a>
<a href="#" class="fa fa-user fa-2x"></a>
</div>
<a href="" class="menu-button fa fa-bars fa-2x"></a>
</nav>
<script src="js/index.js"></script>
</body>
</html>
它工作正常,但是我想要的是用户单击图标时的onclick弹出窗口或onclick工具提示。 Onclick弹出窗口或onclick工具提示必须响应。
答案 0 :(得分:0)
这是您想要的吗?很脏但是有个主意
var items = document.querySelectorAll('.circle a');
for(var i = 0, l = items.length; i < l; i++) {
items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
}
document.querySelector('.menu-button').onclick = function(e) {
e.preventDefault(); document.querySelector('.circle').classList.toggle('open');
}
$('.demo').tooltip({
trigger: 'click',
placement: 'bottom'
});
function setTooltip(btn, message) {
btn.tooltip('hide')
.attr('data-original-title', message)
.tooltip('show');
}
function hideTooltip(btn) {
setTimeout(function() {
btn.tooltip('hide');
}, 1000);
}
// Clipboard
var clipboard = new Clipboard('.demo');
clipboard.on('success', function(e) {
var btn = $(e.trigger);
setTooltip(btn, 'Copied');
hideTooltip(btn);
});
@import "https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";
body {
background: url() no-repeat top center fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: 338px 151px;
background-position: top center;
max-width:100%;
height:auto;
}
.circular-menu {
width: 250px;
height: 250px;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
margin: auto;
}
.circle {
width: 250px;
height: 250px;
opacity: 0;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
margin: auto;
-webkit-transform: scale(0);
-moz-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.open.circle {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
}
.circle a {
text-decoration: none;
color: black;
display: block;
height: 40px;
width: 40px;
line-height: 70px;
margin-left: -15px;
margin-top: -40px;
position: absolute;
}
.circle a:hover {
color: gray;
}
.menu-button {
position: absolute;
top: calc(50% - 30px);
left: calc(50% - 30px);
text-decoration: none;
text-align: center;
color: #444;
border-radius: 50%;
display: block;
height: 40px;
width: 40px;
line-height: 40px;
padding: 10px;
background: #dde;
}
.menu-button:hover {
background-color: #eef;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="circular-menu">
<div class="circle">
<a href="#" data-clipboard-text="1" class="demo fa fa-home fa-2x"></a>
<a href="#" data-clipboard-text="1" class="demo fa fa-facebook fa-2x"></a>
<a href="#" data-clipboard-text="1" class="demo fa fa-instagram fa-2x"></a>
<a href="#" data-clipboard-text="1" class="demo fa fa-linkedin fa-2x"></a>
<a href="#" data-clipboard-text="1" class="demo fa fa-skype fa-2x"></a>
<a href="#" data-clipboard-text="1" class="demo fa fa-map-marker fa-2x"></a>
<a href="#" data-clipboard-text="1" class="demo fa fa-envelope fa-2x"></a>
<a href="#" data-clipboard-text="1" class="demo fa fa-user fa-2x"></a>
</div>
<a href="" class="menu-button fa fa-bars fa-2x"></a>
</nav>
<script src="js/index.js"></script>
</body>
</html>