Question

我在左侧有一个导航ul，在中间有徽标，在右侧还有另一个ul，就像这样：

Home    Works    Podcast                  Logo                 Journal    About    Contact

悬停时在作品上有一个下拉菜单，我现在想做两件事：

1-在移动版本上，我想像这样将导航更改为菜单图标

Logo                                                                     Menu

2-在菜单上单击它应该会打开用于移动设备的新菜单，但是由于在移动设备上没有悬停功能，因此如何使下拉菜单在移动设备中起作用以及如何使导航方向为垂直方向，因为我在左边有ul，在右边有ul，中间有徽标，所以我希望这样

Home
Works
Podcast
Journal
About
Contact

这是一支电笔，抱歉，我知道我要更多：

https://codepen.io/anon/pen/jQzYye

Answer 1

在这里，我仅使用一个菜单而不是两个菜单来回答徽标/菜单在手机和台式机上的位置和顺序，并将徽标作为第一个列表项。请查看整个代码中的注释。

html：

<header id="header">
        <nav class="site-navigation">
            <ul>
        <!-- move logo into li at start of list, ditch the div: -->
        <li class="logo"><h1>Humane</h1></li>
                <li class="left-menu-item active"><a href="">Home</a></li>
                <li class="left-menu-item"><a href="">Works</a>
                    <ul>
                        <li><a href="">Metro</a></li>
                        <li><a href="">Text</a></li>
                        <li><a href="">Columns</a></li>
                        <li><a href="">Full Width</a></li>
                        <li><a href="">Box</a></li>
                    </ul>
                </li>
                <li class="left-menu-item"><a href="">Podcast</a></li>
                <li class="right-menu-item"><a href="">Journal</a></li>
                <li class="right-menu-item"><a href="">About</a>
                    <ul>
                        <li><a href="">Agency</a></li>
                        <li><a href="">Freelancer</a></li>
                    </ul>
                </li>
                <li class="right-menu-item"><a href="">Contact</a></li>
            </ul>
        </nav>
    </header>

css：

body {
  max-width: 1600px;
  margin: 0 auto;
}
#header {
    padding: 120px 0;
}

.site-navigation ul {
    list-style: none;
    padding: 0;
}

.site-navigation ul li a {
    color: #A3A3A3;
    text-decoration: none;
    display: block;
}
.site-navigation ul li a:hover {
    font-weight: bold;
    color: black;
}
.site-navigation ul li a::after {
    content: '';
    display: block;
    width: 0;
    height: 1px;
    background: #39393B;
    transition: width .3s;
}
.site-navigation ul li a:hover::after {
    width: 100%;
    transition: width .3s;
}

.site-navigation ul li ul  {
    position: absolute;
    visibility: hidden; /* hides sub-menu */
    opacity: 0;
    z-index: -1;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}
.site-navigation ul li ul li {
    padding: 20px 0;
}
.site-navigation ul li:hover ul  {
    visibility: visible; /* shows sub-menu */
    opacity: 1;
    z-index: 1;
}
.active {
    border-bottom: 1px solid #39393B;
}

@media only screen and (max-width : 1019px) {

}


@media only screen and (min-width : 1020px) {
  /* add ul so flex is on ul and move into desktop only media query */
  .site-navigation ul { 
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
   /* move into desktop only media query */
  .site-navigation ul li { 
    display: inline-block;
}
 /* move into desktop only media query */
.site-navigation ul li:not(:first-child) {
    margin-left: 2em;
}
  /* add flex order in your media query for desktop only */
.site-navigation ul li.left-menu-item {
    order:1; /* add this */
}
/* add flex order in your media query for desktop only */
.site-navigation ul li.logo {
    order:2; /* add this */
}
/* add flex order in your media query for desktop only */
.site-navigation ul li.right-menu-item {
    order:3; /* add this */
}
}

链接：https://codepen.io/carolmckayau/pen/zMWWXX

响应式下拉菜单

1 个答案: