代码之家 › 专栏 › 技术社区 › Jinsoo Kang

我将顶部导航宽度设置为0以隐藏菜单,但为什么每个菜单链接仍然保留?

navigation menu css html javascript

Jinsoo Kang · 技术社区 · 6 年前

我的网站上有一个顶部导航栏;在笔记本电脑等大屏幕上,每个菜单水平浮动。在平板电脑或智能手机等小屏幕上,只有当您单击上面的按钮时,每个菜单才会从屏幕左侧隐藏并打开,这看起来像三行水平线。我通过设置顶部导航栏0的宽度来实现这一点,所以看不到。

但是,我不知道为什么链接仍然存在,当你试图点击按钮时,你不仅可以抓取按钮,还可以抓取所有菜单。如果有人帮我一点,我会非常感激的。谢谢您!

HTML

<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0">
    <title>untitled</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
    <div id="wrapper">
    <header>
        <nav>
            <a href="#" onclick="openNav()" class="openbtn">
                <svg>
                    <path d="M0,5 15,5" stroke="#fff" stroke-width="2"/>
                    <path d="M0,10 15,10" stroke="#fff" stroke-width="2"/>
                    <path d="M0,15 15,15" stroke="#fff" stroke-width="2"/>
                </svg>
            </a>
            <a href="index.html"><img class="logo_pc" src="img/logo.png"><img class="logo_mobile" src="img/logo_white.png"></a>
            <ul class="topnav" id="myTopnav">
                <li><a href="javascript:void(0)" onclick="closeNav()" class="closebtn">&times;</a></li>
                <li><a href="about.html" onclick="closeNav()">about</a></li>
                <li><a href="work.html" onclick="closeNav()">work</a></li>
                <li><a href="art.html" onclick="closeNav()">art</a></li>
                <li><a href="contact.html" onclick="closeNav()">contact</a></li>
            </ul>
        </nav>
    </header>
<script>
    function openNav() {
        document.getElementById("myTopnav").style.width = "100%";}

    function closeNav() {
        document.getElementById("myTopnav").style.width = "0";}
</script>
</div>
</body>
</html>

CSS

#wrapper{
    width: 95%;
    margin: 0 auto;
}

/* Navigation Container */
nav{
    position: fixed;
    top: 0;
    z-index: 99999;                         
    width: 95%;
    height: 65px;
    background-color: #fff;
}

/* Top Logo */
.logo_pc{
    float: left;
    margin-top: 15px;
    margin-left: 15px;
    padding: 0;
    width: 100px;
    height: 33px;
}

.logo_mobile{
    display: none;
    position:absolute;
    top:0;
    left:42%;
    margin-top: 12px;
    padding: 0;
    width: 80px;
    height: 26px;
}

/* Top Navigation Bar */
.topnav{
    float: right;
    list-style-type: none;
    overflow: hidden;
}

.topnav li{
    float:left;
}

.topnav li a{
    display: block;
    margin-left:25px;
    padding: 10px;
    text-align: center;
    color:#003366;
}

.topnav li a:hover{
    text-decoration: none;
    color:#cccccc;
}

.openbtn{
    display: none;
    margin-top: 15px;
    margin-left: 15px;
}

.topnav .closebtn{
    display: none;
    position: absolute;
    top:0;
    right: 5px;
    color: #fff;
}

@media screen and (max-width:868px){ 

    /* Top Logo */
    .logo_pc{
        display: none;
    }
    .logo_mobile{
        display: block;
    }
    /* Top Navigation */    
   #wrapper{
        width: 100%;
    }
    nav{
        width: 100%;
        height: 50px;
        background-color: #003366;
    } 
    .topnav{
        float: none;
        width: 0;
        height: 100%;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        overflow-x: hidden;
        margin:0;
        padding:30px 0px 0px 0px;
        background-color: rgba(0,0,0,0.9);
        transition: 0.5s width ease-in-out;
    }
    .topnav li{
        float: none;
    }
    .topnav li a{
        display: block;
        text-align: center;
        color: #fff;
    }  
    .openbtn,
    .topnav .closebtn{
        display: block;
    }
}

0 回复 | 直到 6 年前