0
我一直在制作此模板页面，并希望它能够在某个屏幕尺寸以下，在按下菜单按钮时导航栏变为可扩展。我有媒体工作，但jQuery不会使菜单滑出。我现在只是担心功能，并可以在以后处理美观。另外，我使用了JQuery，因为我发现它更容易处理（它可能不是必需的，但我更喜欢它，因为它节省了我的时间）。导航栏不会滑出
$(document).ready(function() {
\t $('.nav_li_small').hide();
\t $('#menu').click(function() {
\t \t $('.nav_ul_small').animate({width: '100%'}, 200);
\t \t $('.nav_li_small').show();
\t });
});body {
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQmnAiwrvrJIdXGctU8ria4DrIWLxr3ozVposlXByZJUcg_65BB);
background-repeat: no-repeat;
\t background-size: 100vw 100vh;
\t background-color: #cccccc !important;
\t border-top:0px;
\t margin-top:0px;
\t margin-right:0px;
\t margin-bottom:0px;
\t margin-left:0px;
}
.container-fluid {
\t position: relative;
\t background-color: #fff;
\t height: 0px;
}
.no-gutter > [class*='col-'] {
\t padding-right:0;
\t padding-left:0;
}
.name {
\t
}
#company_name {
\t font-size: 35px;
\t font-family: 'Raleway', sans-serif;
\t position: absolute;
\t color: #fff;
\t padding: 20px;
}
.head_bar {
\t position: absolute;
\t width: 100%;
}
.head_small {
\t display: none;
}
.nav_ul {
\t float: right !important;
\t position: absolute;
\t list-style-type: none;
\t padding: 30px;
}
.nav_li {
\t font-size: 18px;
\t font-family: 'Raleway', sans-serif;
\t color: #fff;
\t padding: 20px;
\t display: inline-flex;
}
.nav_li a {
\t color: #fff;
}
.nav_li a:hover {
\t color: #fff;
\t border-bottom: 3px solid white;
\t text-decoration: none;
}
.nav_ul_small {
\t position: absolute;
\t list-style-type: none;
padding: 0px;
\t height: 100vh;
\t background-color: gray;
\t z-index: 2;
}
.nav_li_small {
\t font-size: 13px;
\t font-family: 'Raleway', sans-serif;
\t color: #fff;
\t padding: 10px;
\t z-index: 3;
}
.nav_li_small a {
\t color: #fff;
}
.nav_li_small a:hover {
\t color: #fff;
\t border-bottom: 3px solid white;
\t text-decoration: none;
}
#company_name_small {
\t text-align: center;
\t font-size: 35px;
\t font-family: 'Raleway', sans-serif;
\t position: absolute;
\t color: #fff;
\t padding: 10px;
\t left: 0;
}
@media only screen and (max-width: 940px) {
\t .head_bar{ display: none; }
\t .head_small { display: inline; }
}
.active {
\t border-bottom: 3px solid white;
}
.content {
\t position: relative;
\t top: 40vh;
}
.content_box {
\t background-color: #fff;
\t color: #000;
\t font-size: 18px;
\t font-family: 'Raleway', sans-serif;
\t padding: 10px !important;
\t box-shadow: 0 0 5px #312424;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
\t <link rel = "stylesheet" type = "text/css" href = "Home.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
\t <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
\t <script src = "Home.js"></script>
</head>
<body>
\t <div class = "container-fluid">
\t \t <div class = "row no-gutter head_bar">
\t \t \t <h2 id = "company_name" class = "col-xs-3">Welcome</h2>
\t \t \t <ul class = "col-xs-9 nav_ul" align = "right">
\t \t \t \t <li class = "nav_li"><a href = "" class = "active">Home</a></li>
\t \t \t \t <li class = "nav_li"><a href = "">About Us</a></li>
\t \t \t \t <li class = "nav_li"><a href = "">Contact</a></li>
\t \t \t \t <li class = "nav_li"><a href = "">Portfolio</a></li>
\t \t \t </ul> \t \t \t
\t \t </div>
\t \t <div class = "row no-gutter head_small">
\t \t \t <h2 id = "company_name_small" class = "col-xs-12">Welcome</h2>
\t \t </div>
\t \t <div class = "row no-gutter head_small"> \t
\t \t \t <button id = "menu">Menu</button>
\t \t \t <ul class = "nav_ul_small">
\t \t \t \t <li class = "nav_li_small"><a href = "" class = "active">Home</a></li>
\t \t \t \t <li class = "nav_li_small"><a href = "">About Us</a></li>
\t \t \t \t <li class = "nav_li_small"><a href = "">Contact</a></li>
\t \t \t \t <li class = "nav_li_small"><a href = "">Portfolio</a></li>
\t \t \t </ul> \t \t \t
\t \t </div>
\t \t <div class = "row no-gutter content">
\t \t \t <span class = "col-xs-2"></span>
\t \t \t <div class = "col-xs-8 content_box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum ex sed erat dignissim convallis. Vestibulum ut volutpat leo, sit amet iaculis ex. Pellentesque vitae pulvinar lorem. Nulla vel enim at neque rutrum convallis. Praesent varius non dui eu molestie. Pellentesque tincidunt, sapien sed placerat pulvinar, mi magna mollis justo, sed aliquam ante sem at ante. Donec laoreet rhoncus velit, vitae interdum nisi rutrum in. Pellentesque non lectus et nunc eleifend luctus in et nisi. Duis sit amet enim a enim vestibulum pulvinar nec vitae erat. Donec gravida mattis suscipit. Donec elementum porta volutpat. Maecenas scelerisque, nisi a pharetra gravida, felis risus egestas magna, id dictum nulla est eget dui. Integer in tempus sapien.<br><br>In eget nunc non sem dignissim ullamcorper non ut risus. Vestibulum rutrum ipsum nec pellentesque placerat. Nulla aliquam a elit vel molestie. Maecenas maximus, dolor ac rhoncus varius, turpis eros imperdiet libero, nec tempor tortor ex quis ligula. Nulla a molestie lectus, non feugiat diam. Cras tempor eget purus nec sollicitudin. Donec aliquam, neque vel hendrerit dignissim, orci purus dictum justo, a tristique sapien neque sed arcu. Nullam condimentum enim ac tellus bibendum posuere. Proin vel turpis eget tellus hendrerit dignissim id ut nunc. Aenean facilisis tempor magna, id scelerisque orci. In hac habitasse platea dictumst. Donec ac libero laoreet, molestie ex ultricies, hendrerit leo.<br><br>Cras ligula neque, cursus ut urna et, luctus viverra est. Quisque pretium interdum elit in vehicula. Fusce tempus lacus nisl, a tincidunt odio luctus sed. Aenean ut risus eu ipsum interdum tristique at eu est. Fusce euismod est ac est condimentum, id vehicula erat efficitur. Sed eleifend ac risus et gravida. Etiam varius vehicula arcu, at bibendum orci pharetra eu. Ut iaculis convallis aliquam. Nam non fringilla turpis. Donec sodales eros vitae elit maximus interdum. Donec molestie pulvinar elit ac tristique. Praesent convallis elementum dolor ac scelerisque.<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis elementum est ac ex malesuada tempus. In cursus aliquet mauris, nec finibus leo dictum sit amet. Nunc euismod lacus ac nisl aliquet, non ullamcorper mi auctor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam vitae rhoncus urna. Ut lectus odio, ultricies sit amet pellentesque sed, gravida sit amet odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed pretium, velit vitae lobortis mollis, turpis lectus semper nisi, et pharetra nisl eros eu dui. In interdum porta lorem, ut maximus lacus pretium sed. Aliquam placerat turpis at nunc consectetur, eu dapibus risus iaculis. Fusce mi massa, placerat a ullamcorper a, scelerisque et nisl. Pellentesque egestas mollis tempor. Maecenas porttitor tempor nibh eu semper. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam sed enim in neque malesuada sollicitudin. Nulla venenatis risus lectus, a maximus ex semper vitae.<br><br>Sed eu enim maximus dui elementum iaculis a sit amet nibh. In a neque eu leo dapibus sagittis vel a ligula. Integer quis velit leo. Nullam in urna libero. Donec interdum, nisi vel cursus pulvinar, ex est iaculis justo, faucibus fermentum odio massa eu ligula. Donec at mauris tincidunt, consequat sem in, malesuada ipsum. Donec vehicula est vitae nunc euismod, vitae mattis arcu pretium.<br><br>Proin mattis ipsum sit amet mi auctor, vel auctor odio malesuada. In dictum eros et sem vestibulum, eu aliquet ex auctor. Integer mattis auctor dui, non pretium mi. Sed consequat magna vel dui fermentum, in placerat quam tincidunt. Maecenas cursus at mauris eget commodo. Nam convallis erat non sapien tincidunt, sed luctus tellus molestie. Ut pharetra dolor vel tellus vestibulum, sed elementum est posuere.</div>
\t \t \t <span class = "col-xs-2"></span>
\t \t </div>
\t </div>
\t <script src="http://maxcdn.bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>