Question

我要求在页面中设置圆形圆形菜单如下图所示，其动态菜单，图标可以根据一个要求生成。

任何人都可以告诉我如何实现这一目标。

请参阅下面的工作示例：http://jsfiddle.net/6cygbd37/1/

＆＃13;

Battle#1

＆＃13;

/*--CSS--*/
 .block {
    border: 1px solid red;
    text-align: center;
    vertical-align: middle;
}
.circle {
    background: red;
    border-radius: 200px;
    color: white;
    height: 200px;
    font-weight: bold;
    width: 200px;
    display: table;
    margin: 20px auto;
}
.circle p {
    vertical-align: middle;
    display: table-cell;
}

＆＃13;

这是我得到帮助互联网的工作代码，请帮助实现以下格式

Answer 1

你在找这样的东西吗？

＆＃13;

.main-block {
    width: 400px;
    height: 400px;
    border: 1px solid #000;
}
.set {
    display: block;
    width: 100%;
    height: 20%;
}
.item,
.dummy {
    display: inline-block;
    width: 20%;
    height: 100%;
    box-sizing: border-box;
    float: left;
}
.item {
    border: 1px solid #f00;
    border-radius: 50%;
}

＆＃13;

<div class="main-block">
    <div class="set">
        <div class="dummy"></div>
        <div class="dummy"></div>
        <div class="item"></div>
        <div class="dummy"></div>
        <div class="dummy"></div>
    </div>
    <div class="set">
        <div class="dummy"></div>
        <div class="item"></div>
        <div class="dummy"></div>
        <div class="item"></div>
        <div class="dummy"></div>
    </div>
    <div class="set">
        <div class="item"></div>
        <div class="dummy"></div>
        <div class="dummy"></div>
        <div class="dummy"></div>
        <div class="item"></div>
    </div>
    <div class="set">
        <div class="dummy"></div>
        <div class="item"></div>
        <div class="dummy"></div>
        <div class="item"></div>
        <div class="dummy"></div>
    </div>
</div>

＆＃13;

Answer 2

可以尝试使用flexbox，它也是响应式的。

.all-circles .row{
    display: flex;
    flex-wrap: wrap;
}

.all-circles .row .block{
    flex-basis: 100%;
}

.all-circles .row .block+.block{
    flex-basis: 50%;
    box-sizing: border-box;
}

.all-circles .row .block+.block{
    flex-basis: 50%;
    box-sizing: border-box;
}

.all-circles .row .block.r2,
.all-circles .row .block.r6{
    padding-left: 20%;
}

.all-circles .row .block.r3,
.all-circles .row .block.r7{
    padding-right: 20%;
}

.all-circles .row .block.r4{

}

.all-circles .row .block.r5{

}

工作示例 here

Answer 3

我找到了解答问题的答案。

<!DOCTYPE html>
<html>  
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <style>
        #parent {
            position: relative;
            top: 200px;
            left: 200px;
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        #parent div {
            position: absolute;
            -webkit-transition: all 2s linear;
            -moz-transition: all 2s linear;
            transition: all 2s linear;
            height: 80px;
            width: 80px;
            border-radius: 100px;
            background-image: url("https://cdn4.iconfinder.com/data/icons/e-commerce-and-business/104/New_Latest_Breaking-64.png");
            background-repeat: no-repeat;
            align-content:  stretch;
        }
    </style>
</head>

<body>
        <div id="parent">
            <div> item1 </div>
            <div> item2 </div>
            <div> item3 </div>
            <div> item4 </div>
            <div> item5 </div>
            <div> item6 </div>
            <div> item7 </div>
            <div> item8 </div>
            <div> item9 </div>            
        </div>

    <script>
        var type = 1, //circle type - 1 whole, 0.5 half, 0.25 quarter
            radius = '12em', //distance from center
            start = -90, //shift start from 0
            $elements = $('#parent >div'), numberOfElements = (type === 1) ? $elements.length : $elements.length - 1,
                        slice = 360 * type / numberOfElements;

        $elements.each(function (i) {
            var $self = $(this)
                , rotate = slice * i + start
                , rotateReverse = rotate * -1;

            $self.css({
                'transform': 'rotate(' + rotate + 'deg) translate(' + radius + ') rotate(' + rotateReverse + 'deg)'
            });
        });
    </script>

</body>

</html>

需要帮助使用css设计页面

3 个答案:

我找到了解答问题的答案。