0
이 템플릿 페이지를 만들었으므로 특정 화면 크기 아래에서 메뉴 단추를 눌러 Navbar를 확장 할 수 있습니다. 미디어가 작동하지만 jquery가 메뉴를 슬라이드 아웃하지 않습니다. 나는 지금 막 기능에 대해 걱정하고 있으며 나중에 미학을 다룰 수 있습니다. 또한 JQuery를 사용하여 작업하기가 쉬워졌지만 (필 요하지 않을 수도 있지만 시간 절약으로 선호합니다). Navbar가 튀어 나오지 않습니다.
$(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>