时间戳

首页 > 解决方案 > 响应式下拉菜单

javascript - 响应式下拉菜单

问题描述

我在左侧有一个导航 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

标签： javascripthtmlcss

解决方案

在这里，我只使用一个菜单而不是两个菜单来回答您在移动设备和桌面上的徽标/菜单定位和顺序，并将徽标作为第一个列表项。请参阅整个代码中的注释。

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

推荐阅读