0
안녕하세요 navbar에 문제가 있습니다. html5 css3 및 php 7.1을 사용합니다. CSS에서 실패했지만 생각하지 못했습니다. 감사합니다. 당신의 대답에 대해 모두에게 많은, 나는 기다린다. 이 navbar를 반응 형 navbar로 변환 할 수 없습니다. 누군가 나를 도울 수 있습니까? 간단한 navbar를 반응 형 navbar로 변환 할 수 없습니다
이
는 CSS입니다 :#wrap {
\t margin: 0 auto;
\t position: fixed;
top: 0;
width: 100%;
\t border-bottom: 3px solid red;
\t z-index: 98;
}
.inner {
\t margin: 0 auto;
\t max-width: 940px;
\t padding: 0 40px;
}
.relative {
\t position: relative;
}
.right {
\t float: right;
}
.left {
\t float: left;
}
/* HEADER */
#wrap > header {
\t background: rgba(51,51,51,0.9);
\t position: static;
\t padding-bottom: 20px;
}
.logo {
\t display: inline-block;
\t font-size: 0;
\t padding-top:15px;
}
#navigation {
\t position: absolute;
\t right: 40px;
\t bottom: 0px;
}
#menu-toggle {
\t display: none;
\t float: right;
}
/* HEADER > MENU */
#main-menu {
\t float: right;
\t font-size: 0;
\t margin: 20px -170px;
}
#main-menu > li {
\t display: inline-block;
\t margin-left: 50px;
\t padding: 2px 0;
}
#main-menu > li.parent {
}
#main-menu > li.parent > a {
}
#main-menu > li > a {
\t color: #eee;
\t font-size: 14px;
\t line-height: 0px;
\t padding: 10px 0;
\t transition: .5s;
\t text-decoration:none;
}
#main-menu > li:hover > a,
#main-menu > li.current-menu-item > a {
\t color: #db2323;
}
/* HEADER > MENU > DROPDOWN */
#main-menu li {
\t position: relative;
}
ul.sub-menu { /* level 2 */
\t display: none;
\t left: 0px;
\t top: 100%;
\t list-style:none;
\t position: absolute;
\t padding-top: 10px;
\t border-radius: 0 0 20px 20px;
\t width: 150px;
\t z-index: 99;
}
ul.sub-menu ul.sub-menu { /* level 3+ */
\t margin-top: -1px;
\t padding-top: 0;
\t border: 1px solid white;
\t left: 149px;
\t top: 0px;
}
ul.sub-menu > li > a {
\t background-color: #333;
\t border-top: 1px solid #444;
\t color: #bbb;
\t display: block;
\t font-size: 12px;
\t line-height: 0px;
\t padding: 10px 12px;
}
ul.sub-menu > li > a:hover {
\t background-color: #2a2a2a;
\t color: #fff;
}
ul.sub-menu ul.sub-menu > li:first-child {
\t border-top: 1px solid #444;
}
ul.sub-menu > li:last-child > a {
\t border-radius: 0 0 5px 5px;
}
ul.sub-menu > li > a.parent {
\t background-image: url(../images/arrow.png);
\t background-size: 5px 9px;
\t background-repeat: no-repeat;
\t background-position: 95% center;
}
#main-menu li:hover > ul.sub-menu {
\t display: block; /* show the submenu */
\t height: 20px;
\t opacity: 0.9;
}
@media all and (max-width: 700px) {
\t #navigation {
\t \t position: static;
\t \t margin-top: 20px;
\t }
\t #menu-toggle {
\t \t display: block;
\t }
\t #main-menu {
\t \t display: none;
\t \t float: none;
\t }
\t #main-menu li {
\t \t display: block;
\t \t margin: 0;
\t \t padding: 0;
\t }
\t #main-menu > li {
\t \t margin-top: -1px;
\t }
\t #main-menu > li:first-child {
\t \t margin-top: 0;
\t }
\t #main-menu > li > a {
\t \t background-color: #333;
\t \t border: 1px solid #444;
\t \t color: #bbb;
\t \t display: block;
\t \t font-size: 14px;
\t \t padding: 12px !important;
\t \t padding: 0;
\t }
\t #main-menu li > a:hover {
\t \t background-color: #444;
\t }
\t #main-menu > li.parent {
\t \t background: none !important;
\t \t padding: 0;
\t }
\t #main-menu > li:hover > a,
\t #main-menu > li.current-menu-item > a {
\t \t border: 1px solid #444 !important;
\t \t color: #fff !important;
\t }
\t ul.sub-menu {
\t \t display: block;
\t \t margin-top: -1px;
\t \t margin-left: 20px;
\t \t height: auto;
\t \t position: static;
\t \t padding: 0;
\t \t width: inherit;
\t }
\t ul.sub-menu > li:first-child {
\t \t border-top: 1px solid #444 !important;
\t }
\t ul.sub-menu > li > a.parent {
\t \t background: #333 !important;
\t }
}
.slideDown{
\t animation-name: slideDown;
\t -webkit-animation-name: slideDown; \t
\t animation-duration: 1s; \t
\t -webkit-animation-duration: 1s;
\t animation-timing-function: ease; \t
\t -webkit-animation-timing-function: ease; \t
\t visibility: visible !important; \t \t \t \t \t \t
}
@keyframes slideDown {
\t 0% {
\t \t transform: translateY(-50%);
\t }
\t 50%{
\t \t transform: translateY(8%);
\t }
\t 65%{
\t \t transform: translateY(-4%);
\t }
\t 80%{
\t \t transform: translateY(4%);
\t }
\t 95%{
\t \t transform: translateY(-2%);
\t } \t \t \t
\t 100% {
\t \t transform: translateY(0%);
\t } \t \t
}
@-webkit-keyframes slideDown {
\t 0% {
\t \t -webkit-transform: translateY(200%);
\t }
\t 50%{
\t \t -webkit-transform: translateY(8%);
\t }
\t 65%{
\t \t -webkit-transform: translateY(-4%);
\t }
\t 80%{
\t \t -webkit-transform: translateY(4%);
\t }
\t 95%{
\t \t -webkit-transform: translateY(-2%);
\t } \t \t \t
\t 100% {
\t \t -webkit-transform: translateY(0%);
\t } \t
}<div id="wrap">
<header>
<div class="inner relative">
<img src="images/svapo.png" width="35%" style="margin-top:20px;margin-left: -200px" alt="fresh design web">
<a id="menu-toggle" class="button dark" href="#"><i class="icon-reorder"></i></a>
<nav id="navigation">
<ul id="main-menu">
<li><a href="/"><i class="fa fa-home"></i> Home</a></li>
<li><a href="/forum/"><i class="fa fa-comments-o"></i> Forum</a></li>
<li class="parent">
<a href=""><i class="fa fa-language"></i> Regolamento <i class="fa fa-arrow-circle-o-down" style="font-size:12px;"></i></a>
<ul class="sub-menu slideDown">
<li><a href=""><i class="fa fa-language"></i> Italiano</a></li>
<li><a href=""><i class="fa fa-language"></i> Englese</a></li>
<li><a href=""><i class="fa fa-language"></i> Automatico</a></li>
</li>
</ul>
</li>
<li class="parent">
<a href=""><i class="fa fa-language"></i> Ban MC <i class="fa fa-arrow-circle-o-down" style="font-size:12px;"></i></a>
<ul class="sub-menu slideDown">
<li><a href="/ban/bans.php"><i class="fa fa-legal"></i> Bans</a></li>
<li><a href="/ban/kicks.php"><i class="fa fa-sign-out"></i> Kicks</a></li>
<li><a href="/ban/mutes.php"><i class="fa fa-close"></i> Mutes</a></li>
</li>
</ul>
</li>
<li><a href="http://csgo.svapomc.com/sb/"><i class="fa fa-gavel"></i> Ban CS:GO</a></li>
<li><a href="/rank/stats/"><i class="fa fa-line-chart"></i> Stats ts3</a></li>
<li><a href="/forum/index.php?/staff/"><i class="fa fa-users"></i> Staff</a></li>
</ul>
</nav>
<div class="clear"></div>
</div>
</header>
</div>감사합니다 ...
좋습니다. 시도해 보겠습니다. 감사합니다. – Lafa