带有动画子菜单的垂直圆形导航：仅 CSS3？

Question

我正在创建一个垂直导航，其中列表项是圆圈。子菜单项应从其父项飞出。

我有工作代码，但该代码仅适用于单个子菜单，因为它需要大量使用 'left' 和 'top' 属性来定位子菜单列表项。我敢打赌，如果有更多的子菜单，这看起来会很漂亮，但是根据我的口味，每个菜单都需要过多的 CSS 自定义。

Working demo with 1 submenu.

<nav>
    <ul class="menu">
        <li><a href="/">Home Page</a></li>
        <li><a href="/">About</a>
            <ul>
                <li><a href="/">Our History</a></li>
                <li><a href="/">Our Philosophy</a></li>
                <li><a href="/">Our Mission</a></li>
            </ul>
        </li>
        <li><a href="/">Services</a></li>
        <li><a href="/">Our Team</a></li>
        <li><a href="/">Contact Us</a></li>
    </ul>
</nav>

CSS

/* Circle Menu */
nav {
    width: 10em;
}
.menu a{
    display: block;
    padding:10px;
    width: 100%;
    height: 7.5em;
    border-radius: 750px 750px 750px 750px;
    -moz-border-radius: 750px 750px 750px 750px;
    -webkit-border-radius: 750px 750px 750px 750px;
    background-color: hsl(0, 100%, 72%);
    text-align: center;
    margin-bottom: 1em;
}
.menu li{
    margin-bottom: 1em;
    list-style: none;
}
.menu li ul{
    -webkit-transition:all .35s ease-in;
    -moz-transition:all .35s ease-in;
    -o-transition:all .35s ease-in;
    transition:all .35s ease-in;

    opacity: 0;
    padding: 0;

    display: inline;
    top: -8em;
    position: fixed;
}
.menu li:hover ul{
    -webkit-transition:all .35s ease-in;
    -moz-transition:all .35s ease-in;
    -o-transition:all .35s ease-in;
    transition:all .35s ease-in;

    padding: 0;
    opacity: 1;
}
.menu ul li a{
    width: 100%;
    background-color: hsl(0, 60%, 72%);
}
.menu li ul li {
    -webkit-transition:all .35s ease-in;
    -moz-transition:all .35s ease-in;
    -o-transition:all .35s ease-in;
    transition:all .35s ease-in;

    position:relative;
    left:0;
}
.menu li:hover ul li {
    -webkit-transition:all .35s ease-in;
    -moz-transition:all .35s ease-in;
    -o-transition:all .35s ease-in;
    transition:all .35s ease-in;

    position: relative;
    left: 190px;
}
.menu li ul li:nth-child(1) {
    top: 307px;
    left: 0px;
    -webkit-transition:all .35s ease-in;
    -moz-transition:all .35s ease-in;
    -o-transition:all .35s ease-in;
    transition:all .35s ease-in;
}
.menu li:hover ul li:nth-child(1) {
    top: 150px;
    left: 160px;
    -webkit-transition:all .35s ease-in;
    -moz-transition:all .35s ease-in;
    -o-transition:all .35s ease-in;
    transition:all .35s ease-in;
}
.menu li ul li:nth-child(2) {
    top: 153px;
    left: 0;
    -webkit-transition:all .35s ease-in;
    -moz-transition:all .35s ease-in;
    -o-transition:all .35s ease-in;
    transition:all .35s ease-in;
}
.menu li:hover ul li:nth-child(2) {
    left: 240px;
    -webkit-transition:all .35s ease-in;
    -moz-transition:all .35s ease-in;
    -o-transition:all .35s ease-in;
    transition:all .35s ease-in;
    top: 150px;
}
.menu li ul li:nth-child(3) {
    top: -5px;
    left: 0;
    -webkit-transition:all .35s ease-in;
    -moz-transition:all .35s ease-in;
    -o-transition:all .35s ease-in;
    transition:all .35s ease-in;
}
.menu li:hover ul li:nth-child(3) {
    top: 153px;
    left: 160px;
    -webkit-transition:all .35s ease-in;
    -moz-transition:all .35s ease-in;
    -o-transition:all .35s ease-in;
    transition:all .35s ease-in;
}

---

Demo that breaks because there are 2 submenus.

<nav>
    <ul class="menu">
        <li><a href="/">Home Page</a></li>
        <li><a href="/">About</a>
            <ul>
                <li><a href="/">Our History</a></li>
                <li><a href="/">Our Philosophy</a></li>
                <li><a href="/">Our Mission</a></li>
            </ul>
        </li>
        <li><a href="/">Services</a></li>
        <li><a href="/">Our Team</a>
            <ul>
                <li><a href="/">Jim</a></li>
                <li><a href="/">Karla</a></li>
                <li><a href="/">Manzanita</a></li>
            </ul>
        </li>
        <li><a href="/">Contact Us</a></li>
    </ul>
</nav>

CSS

/* Circle Menu */
nav {
    width: 10em;
}
.menu a{
    display: block;
    padding:10px;
    width: 100%;
    height: 7.5em;
    border-radius: 750px 750px 750px 750px;
    -moz-border-radius: 750px 750px 750px 750px;
    -webkit-border-radius: 750px 750px 750px 750px;
    background-color: hsl(0, 100%, 72%);
    text-align: center;
    margin-bottom: 1em;
}
.menu li{
    margin-bottom: 1em;
    list-style: none;
}
.menu li ul{
    -webkit-transition:all .35s ease-in;
    -moz-transition:all .35s ease-in;
    -o-transition:all .35s ease-in;
    transition:all .35s ease-in;

    opacity: 0;
    padding: 0;

    display: inline;
    top: -8em;
    position: fixed;
}
.menu li:hover ul{
    -webkit-transition:all .35s ease-in;
    -moz-transition:all .35s ease-in;
    -o-transition:all .35s ease-in;
    transition:all .35s ease-in;

    padding: 0;
    opacity: 1;
}
.menu ul li a{
    width: 100%;
    background-color: hsl(0, 60%, 72%);
}
.menu li ul li {
    -webkit-transition:all .35s ease-in;
    -moz-transition:all .35s ease-in;
    -o-transition:all .35s ease-in;
    transition:all .35s ease-in;

    position:relative;
    left:0;
}
.menu li:hover ul li {
    -webkit-transition:all .35s ease-in;
    -moz-transition:all .35s ease-in;
    -o-transition:all .35s ease-in;
    transition:all .35s ease-in;

    position: relative;
    left: 190px;
}
.menu li ul li:nth-child(1) {
    top: 307px;
    left: 0px;
    -webkit-transition:all .35s ease-in;
    -moz-transition:all .35s ease-in;
    -o-transition:all .35s ease-in;
    transition:all .35s ease-in;
}
.menu li:hover ul li:nth-child(1) {
    top: 150px;
    left: 160px;
    -webkit-transition:all .35s ease-in;
    -moz-transition:all .35s ease-in;
    -o-transition:all .35s ease-in;
    transition:all .35s ease-in;
}
.menu li ul li:nth-child(2) {
    top: 153px;
    left: 0;
    -webkit-transition:all .35s ease-in;
    -moz-transition:all .35s ease-in;
    -o-transition:all .35s ease-in;
    transition:all .35s ease-in;
}
.menu li:hover ul li:nth-child(2) {
    left: 240px;
    -webkit-transition:all .35s ease-in;
    -moz-transition:all .35s ease-in;
    -o-transition:all .35s ease-in;
    transition:all .35s ease-in;
    top: 150px;
}
.menu li ul li:nth-child(3) {
    top: -5px;
    left: 0;
    -webkit-transition:all .35s ease-in;
    -moz-transition:all .35s ease-in;
    -o-transition:all .35s ease-in;
    transition:all .35s ease-in;
}
.menu li:hover ul li:nth-child(3) {
    top: 153px;
    left: 160px;
    -webkit-transition:all .35s ease-in;
    -moz-transition:all .35s ease-in;
    -o-transition:all .35s ease-in;
    transition:all .35s ease-in;
}

是否可以仅使用 CSS 为多个子菜单创建我想要的效果，而无需单独定位每个子菜单项？还是我需要使用 JavaScript 为我“自动”定位元素？

Answer 1

您正在以全局方式设置子菜单项的位置，因此每个不同的子菜单都需要计算不同的左侧和顶部值。

如果您将子菜单设置为绝对定位，则坐标将相对于定位的父级，在这种情况下，您会希望您的菜单项成为该父级。​​

我已更改您的 HTML 以将子菜单类设置为二级 ul。

HTML

<nav>
    <ul class="menu">
        <li><a href="/">Home Page</a></li>
        <li><a href="/">About</a>
            <ul class="submenu">
                <li><a href="/">Our History</a></li>
                <li><a href="/">Our Philosophy</a></li>
                <li><a href="/">Our Mission</a></li>
            </ul>
        </li>
        <li><a href="/">Services</a></li>
        <li><a href="/">Our Team</a>
            <ul class="submenu">
                <li><a href="/">Jim</a></li>
                <li><a href="/">Karla</a></li>
                <li><a href="/">Manzanita</a></li>
            </ul>
        </li>
        <li><a href="/">Contact Us</a></li>
    </ul>
</nav>

我对你的 CSS 做了很多简化，但关键问题是现在子菜单 li 以上层 li 为基础。

/* Circle Menu */
nav {
    width: 10em;
}
.menu a{
    display: block;
    width: 7.5em;
    height: 7.5em;
    border-radius: 50%;
    background-color: hsl(0, 100%, 72%);
    text-align: center;
}
.menu li{
    list-style: none;
    position: relative;
    margin: 0em 1em 1em 0em;
    width: 100%;
}
.submenu{
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    padding: 0px;
}

.submenu:hover {
    opacity: 1;

}
.submenu li {
    -webkit-transition:all .35s ease-in;
    -moz-transition:all .35s ease-in;
    -o-transition:all .35s ease-in;
    transition:all .35s ease-in;
    position: absolute;
    width: 100%;
    left: 0px;
    top: 0px;
    height: 100%;
}
.submenu:hover li:nth-child(1) {
    top: -106px;
    left: 160px;
}
.submenu:hover li:nth-child(2) {
    top: -8px;
    left: 270px;
}
.submenu:hover li:nth-child(3) {
    top: 90px;
    left: 160px;
}

fiddle

在此过程中，我损坏了 a 的内部对齐方式（对不起！），但您可以轻松地将其恢复到您需要的位置。

Answer 2

我会尝试使用:nth-child() 轻松地将每个 subNav 定位到您的位置，而不会在编码时杀死自己。

这是 :nth-child() css:

.subNav li:nth-child(1) {
    left: 120%;
    top: 0;
}

.subNav li:nth-child(2) {
    left: 170%;
    top: 100%;
}

.subNav li:nth-child(3) {
    left: 120%;
    top: 200%;
}

最后，提琴：Demo