0
Ich arbeite derzeit an http://jonathan.ohrstrom.nu und ich versuche, die Links auf die richtige Funktion mit einem responsiven Design zu bekommen. Wenn das Fenster weniger als 1000 Pixel breit ist, verschwinden die Links und stattdessen erscheint ein Menü-Knopf; Erstellen eines Dropdown-Menüs.Responsive Menü Probleme
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
var x = document.getElementById("topnav");
if (x.className === "menuList") {
x.className += " responsive";
} else {
x.className = "menuList";
}
}.menu_wrapper {
\t width: 100%;
\t height: 70px;
\t background-color: rgba(45, 45, 45, .9);
\t left: 0;
\t top: 0;
\t position: fixed;
\t z-index: 99;
\t box-shadow: 0 3px 0 rgba(229, 160, 0, .9);
}
.menu_content {
\t width: 1000px;
\t margin-left: auto;
\t margin-right: auto;
\t line-height: 70px;
\t color: #a0a0a0;
\t font-weight: 400;
\t font-family: 'Roboto', sans-serif;
\t text-transform: uppercase;
}
.menu_logo {
\t float: left;
\t font-size: 18px;
}
a.logotyp, a.logotyp:visited {
\t color: white;
\t transition: .1s;
\t text-decoration: none;
}
a.logotyp:hover {
\t color: #a0a0a0;
}
ul.menuList {
\t list-style-type: none;
\t margin: 0;
\t padding: 0;
\t overflow: hidden;
}
ul.menuList li.icon {
\t display: none;
}
ul.menuList li {
\t float: right;
\t display: inline;
\t margin: 0 10px;
}
ul.menuList li a {
\t color: #a0a0a0;
\t transition: .1s;
\t text-decoration: none;
}
ul.menuList li a:hover {
\t color: #e5a000;
}
/* RESPONSIVE MENU */
@media screen and (max-width:1000px) {
ul.menuList li {display: none;}
ul.menuList li.icon {
float: right;
display: inline-block;
}
}
@media screen and (max-width:1000px) {
ul.menuList.responsive {position: relative;}
ul.menuList.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.menuList.responsive li {
float: none;
display: inline;
}
ul.menuList.responsive li a {
display: block;
text-align: right;
}
}<!-- MENU -->
\t <div class="menu_wrapper">
\t
\t \t <div class="menu_content">
\t \t \t
\t \t \t <div class="menu_logo">
\t \t \t \t <a href="#top" class="logotyp"></ECORND></a>
\t \t \t </div>
\t \t \t
\t \t \t <div class="menu_links">
\t \t \t \t <ul class="menuList" id="topnav">
\t \t \t \t \t <li><a href="#kontakt">Kontakt</a></li>
\t \t \t \t \t <li><a href="#projekt">projekt</a></li>
\t \t \t \t \t <li><a href="#tjänster">Tjänster</a></li>
\t \t \t \t \t <li><a href="#about">info</a></li>
\t \t \t \t \t <li><a href="#top">hem</a></li>
\t \t \t \t \t <li class="icon">
\t \t \t \t \t \t <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
\t \t \t \t \t </li>
\t \t \t \t </ul>
\t \t \t </div>
\t \t \t
\t \t </div>
\t
\t </div>Aber wenn Sie auf der Website suchen, wird die Drop-Down nicht wirklich gut funktionieren und die Drop-Down-Taste wird im Anschluss an die Fensterbreite nicht .. Was mache ich falsch?
HINWEIS:
ul.menuList li.icon {
float: right;
}
hinzufügen unten an style.css Linie nicht: ich die meisten der Code aus w3school der ansprechenden Tutorial diese Art bekam
Dank! Der Dropdown-Button folgt nun der Breite des Browsers! Das einzige Problem ist das Drop-Down-Menü, es folgt nicht der Breite, es ist zu weit oben und der Text schwebt nach rechts, so dass einige Wörter nicht zu sehen sind (ich kann wahrscheinlich die letzte selbst beheben) –
EDIT: Ich überschätzte meine Fähigkeiten und versuchte, den Drop-down-Text nach rechts auszurichten, so dass der ganze Text nach rechts ging. Auch der Dropdown-Button bewegt sich nach rechts, wenn er aus irgendeinem Grund angeklickt wird –
hmmm, alles Gute. ! – shyamm