时间戳

首页 > 解决方案 > 浮动汉堡菜单 css

html - 浮动汉堡菜单 css

问题描述

我是 CSS 新手，我有纯汉堡 CSS 菜单

问题是菜单是页面的一部分absolute，我希望它float在页面滚动时始终显示，位置就在标题下方：

在此处输入图像描述

期望的结果：

在此处输入图像描述

当菜单打开时，占用页面空间并在菜单底部显示一个图标：

rmx

片段：

*{
    box-sizing: border-box;
}
body{
    font-family: 'Montserrat', sans-serif;
    margin:0px;
}

.section-title{
    color: #2ddf5c;
    }


.main-header{
display: flex;
align-items: center;
justify-content: space-evenly;
width:100%;
/* background: #2ddf5c; */
padding: 16px;
}

.main-header > div{
    vertical-align: middle;
}

.main-header__brand{
color: #7B8F34;
text-decoration: none;
font-weight: bold;
font-size: 20px;
}

.main-nav__searchbar_container {
  display: flex;
  width: 100%;
  padding: 8px 8px 8px 40px;
  overflow: hidden;
  vertical-align: middle;
  white-space: nowrap;
}

.main-nav__searchbar_container input.main-nav__searchbar{
    width:100%;
    height: 50px;
  /* background: #2b303b; */
  border: none;
  font-size: 10pt;
  float: left;
  /* color: #fff; */
  padding-left: 15px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.main-nav__searchbar_container input.main-nav__searchbar::-webkit-input-placeholder{
    color: #65737e;
}

.main-nav__searchbar_container input.main-nav__searchbar:-moz-placeholder{ /*Frefox 18 */
    color: #65737e;
}
.main-nav__searchbar_container input.main-nav__searchbar::-moz-placeholder{/*Frefox 19 */
    color: #65737e;
}
.main-nav__searchbar_container input.main-nav__searchbar:-ms-input-placeholder{
    color: #65737e;
}
.main-nav__searchbar_container button.icon{
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border: none;
    background: #4f5b66;
    height: 50px;
    width: 50px;
    color: #ffffff;
    opacity: 0;
    font-size: 10pt;
    -webkit-transition: all .55s ease;
    -moz-transition: all .55s ease;
    -ms-transition: all .55s ease;
    -o-transition: all .55s ease;
    transition: all .55s ease;
  }

  .main-nav__searchbar_container:hover button.icon,
  .main-nav__searchbar_container:active button.icon,
  .main-nav__searchbar_container:focus button.icon{
      outline: none;
      opacity: 1;
      margin-left: -50px;
  }

.main-nav__searchbar_container:hover button.icon:hover{
    background: red;
    cursor: pointer;
}

input.main-nav__searchbar:hover{
    border: 2px solid #4f5b66;
}
.main-nav__searchbar{
    display: flex;
    width: 100%;
    /* margin: 8px; */
    /* padding: 8px; */
    border: 2px solid;
    border-radius: 4px;
    outline: none;
    transition: .3s;
}

.main-nav{
  display: flex;
  width: 100%;
  text-align: right;
  margin: 0 10px;
}

.main-nav__items{
display: flex;
margin:8px;
padding:8px;
list-style: none;
}
.main-nav__item{
    display: inline-block;
}

.main-nav__social{
    display:block;
    width: 35px;
    height: 35px;
    margin-left: 10px;
    padding: 4px;
}



#main-slider {
    width: 100%;
    height: 528px;
    /* border-radius: 0% 0% 50% 50% / 0% 0% 20% 20%; */
    border-bottom-right-radius: 50% 25%;
  border-bottom-left-radius: 50% 25%;
    position: relative;
}


/* menu icon */

.main .menu-icon {
  cursor: pointer;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.main .menu-icon .nav-icon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.main .menu-icon .nav-icon:before,
.main .menu-icon .nav-icon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.main .menu-icon .nav-icon:before {
  top: 5px;
}

.main .menu-icon .nav-icon:after {
  top: -5px;
}

/* menu btn */

.main .menu-btn {
  display: none;
}

.main .menu-btn:checked ~ .menu {
  /* max-height: 240px; */
  display: block;
}

.main .menu-btn:checked ~ .menu-icon .nav-icon {
  background: transparent;
}

.main .menu-btn:checked ~ .menu-icon .nav-icon:before {
  transform: rotate(-45deg);
  top:0;
}

.main .menu-btn:checked ~ .menu-icon .nav-icon:after {
  transform: rotate(45deg);
  top:0;
}



@media (min-width: 48em) {
  
  .main li a {
    padding: 20px 30px;
  }
  .main .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  
}
   <header class="main-header">
            <div>
                <a href="index.html" class="main-header__brand">
                    uHost
                </a></div><nav class="main-nav">
                    <div class=main-nav__searchbar_container><input type="text" placeholder="Search" class="main-nav__searchbar">
                    <button class="icon"><i class="fas fa-search" aria-hidden="true"></i></button>
                    </div>
                <ul class="main-nav__items">
                    <li class="main-nav__item"> 
                        <img class="main-nav__social" src="navbar-icons/social-media__icons/facebook.svg" alt="facebook">
                    </li>
                    <li class="main-nav__item">
                        <img class="main-nav__social" src="navbar-icons/social-media__icons/instagram-bosquejado.svg" alt="instagram">
                    </li>  
                </ul>
            </nav>
        </header>
        <div class="main">
          <input class="menu-btn" type="checkbox" id="menu-btn" />
            <label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
            <ul class="menu">
                <li><a href="#test1">Test1</a></li>
                <li><a href="#test2">Test2</a></li>
                <li><a href="#test3">Test3</a></li>

            </ul>
          </div>
        <main> 
          
            <section>
                <div class="slider-wrapper">
                  <img id="main-slider" src="https://via.placeholder.com/1365x528?text=Slider">
                </div>
              </section>

我尝试position:fixed改变position: absolute

.main .menu-icon .nav-icon:before,
.main .menu-icon .nav-icon:after

类，但它不起作用，hamb菜单栏消失，打开时出现一些奇怪的效果

问候

标签： htmlcss

解决方案

为此，您需要制作一个外部容器。例如：

<nav id="outer-nav"></nav>
<div id="container">
    <div class="slider"></div>
    <div id="hamburger-menu">
        <div id="hamburger-menu-container">
            <div id="hamburger-menu-items">
                <ul>
                    <li>etc</li>
                </ul>
            </div>
        </div>
    </div>
</div>

现在我们有了外部容器，我们可以创建如下所示的 CSS：

#container {
    position:relative;
    min-height: 800px;
}

#hamburger-menu {
    position:absolute;
    left: 0; 
    right: 0;
    top: 0;
    bottom: 0;
}

#hamburger-menu-container {
    position: relative;
}

汉堡菜单现在将拉伸标题允许的整个距离。并且当您在汉堡菜单中添加更多内容时，您可以使用绝对定位将它们放置在菜单的不同区域。

例如：

#hamburger-menu-items {
    position: absolute;
    top: 100px;
}

#hamburger-something-else {
    position: absolute;
    bottom: 100px;
}

我还没有完全测试过，但应该可以。否则请告诉我:)

推荐阅读