0

我为我的网站创建了一个简单的悬停导航栏。但是，它没有响应，并希望使其像下面的示例图像一样响应。

这是一个示例全屏导航栏

在此处输入图像描述

这是重新调整导航栏大小的示例

在此处输入图像描述

示例源代码实际上源自本网站

我已经非常密切地关注了，但我无法弄清楚为什么它对我来说不能正常工作。

这是我的 HTML 标记代码

<!DOCTYPE html>

<html lang="en">
<head id="Head1" runat="server">

<title>iPolice</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<asp:ContentPlaceHolder ID="head" runat="server" >
</asp:ContentPlaceHolder>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="normalize.css" type="text/css">

<nav class="clearfix">
<div id="navbarwidth">
<ul id="nav" class="clearfix">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Department</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="Login.aspx">Login</a></li> 
</ul>
    <a href="#" id="pull">Menu</a>
</div>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
    $(function () {
        var pull = $('#pull');
        menu = $('nav ul');
        menuHeight = menu.height();

        $(pull).on('click', function (e) {
            e.preventDefault();
            menu.slideToggle();
        });

        $(window).resize(function () {
            var w = $(window).width();
            if (w > 320 && menu.is(':hidden')) {
                menu.removeAttr('style');
            }
        });
    });
</script>

这是我的 CSS 中的媒体查询代码

@media screen and (max-width: 600px) {  
nav {   
    height: auto;  
}  
nav ul {  
    width: 100%;  
    display: block;  
    height: auto;  
}  
nav li {  
    width: 50%;  
    float: left;  
    position: relative;  
}  
nav li a {  
    border-bottom: 1px solid #576979;  
    border-right: 1px solid #576979;  
}  
nav a {  
    text-align: left;  
    width: 100%;  
    text-indent: 25px;  
}  
}  

@media only screen and (max-width : 480px) {  
nav {  
    border-bottom: 0;  
}   
nav ul {  
    display: none;  
    height: auto;  
}  
nav a#pull {  
    display: block;  
    background-color: #283744;  
    width: 100%;  
    position: relative;  
}  
nav a#pull:after {  
    content:"";  
    background: url('nav-icon.png') no-repeat;  
    width: 30px;  
    height: 30px;  
    display: inline-block;  
    position: absolute;  
    right: 15px;  
    top: 10px;  
}  
}  

@media only screen and (max-width : 320px) {  
nav li {  
    display: block;  
    float: none;  
    width: 100%;  
}  
nav li a {  
    border-bottom: 1px solid #576979;  
}  
}

我在本教程中唯一没有遵循的是设计部分。我有自己的导航栏。那是我试图让它响应的导航栏

/*navbar*/
#navbarwidth {
width:70%;
position:fixed;
text-align: center;
flex-align:center;
margin:0%;
top:70px;
left:15%;
}



#nav {
background: #292929;
background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px);
background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%,   #3c3c3c), to(#292929));
position:absolute;
left:0%;
top:0%;
margin: 0px;
padding: 0;
border: 1px yellow;
border-bottom: none;
width:100%;
}
#nav li a, #nav li {
text-align: center;
display: inline-block;
min-width: 70px;
}
#nav li {
list-style: none;
}
#nav li a {
padding: 1em 2em;
text-decoration: none;
color: #5FFB17;
border-right: 0px solid #3c3c3c;
border-left: 0px solid #292929;
border-bottom: 0px solid #232323;
border-top: 0px solid #545454;
}
#nav li a:hover {
background: #2a0d65;
background: -moz-linear-gradient(top, #11032e, #2a0d65);
background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
}

这就是我的全屏导航栏的样子

在此处输入图像描述

当我减小浏览器的大小时会发生这种情况

在此处输入图像描述

4

0 回答 0