javascript - 响应式下拉菜单

Question

我在左侧有一个导航 ul，在中间有一个 Logo ，在右侧有另一个 ul，如下所示:

Home    Works    Podcast                  Logo                 Journal    About    Contact 

悬停时有一个关于作品和关于的下拉菜单，我现在想做两件事:

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

Logo                                                                     Menu

2 - 在菜单上单击它应该打开新的移动菜单但是如何使下拉菜单在移动设备上工作因为移动设备上没有悬停 以及如何使导航垂直，因为我在左侧有 ul，在右侧有 ul，在中间有 Logo ，我希望它像这样

Home
Works
Podcast
Journal
About
Contact

这是一支密码笔，对不起，我知道我要更多了:

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

Answer 1

我在这里回答您 Logo /菜单定位和订单在移动和桌面上只使用一个菜单而不是两个菜单并将 Logo 作为第一个列表项。请查看整个代码中的注释。

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