Question

我为我的网站构建了一个自适应的导航菜单。我在这里遇到的问题很少，因为我不熟悉网页设计。

标题左侧有一个徽标，右侧有菜单。当分辨率小于750像素时，媒体查询将启动并启动移动设计。

我想要的是什么：

完整的导航栏应该消失，只有黑色箭头应该保持在同一位置，并且标有（在左侧）同一行。
一旦用户点击黑色箭头，就应该展开自适应菜单。
项目（li元素）应位于屏幕的左下角。
徽标应始终与黑色箭头位于同一行。

发生了什么：

一旦我重新调整屏幕大小（分辨率＆lt; = 750px），默认情况下会展开导航栏（不是通过点击触发）。
徽标会跳到下一行并位于箭头下方。
未与左侧对齐的物品（有点卡在中间）
我无法控制徽标的位置（边距和填充都不影响其位置）。

这是移动查询CSS代码：

   @media screen and (max-width: 750px){
   nav ul{
       max-height: 0px;
   }

    .showing{
        max-height: 15em;
    }

    nav ul li{
        box-sizing: border-box;
        width: 100%;
        padding: 5px;
        text-align: left;
    }

    .nav_arr{
    display: none;
    }

    nav li:before {
        content: "";
        padding: 0px;
    }

    .handle{
        display: block;
        padding-bottom: 0px;
    }

}

请告知

Answer 1

1。）您已经在html showing中添加了课程<ul class="showing">，因此导航会在默认情况下展开。删除该类以使其工作。

2。）由于导航的边缘，徽标被移动到下一行。添加

.nav_menu {
  margin-right: 5px;
}

到您的媒体查询。

3。）你的意思是哪个“项目”？

4.。）给徽标填充，对我有用..

#logo {
    padding: 5px;
}

Working Fiddle

<强>更新

我用缺少的样式更新了你的小提琴。我还将HTML中的handle元素移出nav元素，以便更灵活。但这不应该给你带来任何麻烦，因为它只是在响应版本中使用。

顺便说一句：您无法更改徽标的位置，因为您定位了CSS中的课程.logo，但您的徽标的ID为#logo ..

Working Fiddle 2

默认情况下展开CSS响应式导航菜单

1 个答案: