0高度导航栏仍然可见?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (37)

我正在设计一个投资组合网站,并希望在您点击投资组合时将我的工作滑到屏幕上,当您单击菜单图标时导航栏会滑动。我的代码适用于右侧和左侧的导航栏,但是对于底部,它仍然显示块,即使高度为0

不幸的是使用display:none并将其更改为display:block with jquery删除滑动到屏幕上的平滑动画。

html

        <div id="portfolionav" class="portfolionav">
            <a href="javascript:void(0)" class="closebtn" 
             onclick="closeNav2()">&#9755;</a>
            <a href="#">testing</a>
            <a href="#">Services</a>
            <a href="#">Clients</a>
            <a href="#">Contact</a>
        </div>

        <div id=bottom>
            <h1 onclick="openNav2()">PORTFOLIO</h1>
        </div>
css

        .portfolionav {
           height: 0;
           width: 100%;
           position: fixed;
           z-index: 3;
           bottom: 0;
           background-color: #111;
           overflow-x: hidden;
           transition: 0.5s;
           padding-top: 60px;
           display: block;
        }

        .portfolionav a {
           padding: 8px 8px 8px 32px;
           text-decoration: none;
           font-size: 25px;
           color: #818181;
           display: block;
           transition: 0.3s;
        }

        .portfolionav a:hover {
           color: #f1f1f1;
        }

        .portfolionav .closebtn {
           position: absolute;
           bottom: 25px;
           right: 75px;
           font-size: 36px;
           writing-mode: vertical-rl;
        }
javascript

        function openNav2() {
            document.getElementById("portfolionav").style.height = "100vh";
        }

        function closeNav2() {
            document.getElementById("portfolionav").style.height = "0";
        }

提问于
用户回答回答于

扫码关注云+社区

领取腾讯云代金券