Website für Handy?

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Luca Melop

Neues Mitglied
31 Oktober 2020
13
0
1
20
Guten Tag,

Ich möchte gerne eine Website Demo für das Handy optimieren.
Damit z.B. die Navbar zu einem Burger Button wird usw.
Wie soll ich da anfangen? Was ist wichtig?
Hier mein DemoCode:

HTML:
<!DOCTYPE html>
<html lang="en">

<!--Head-->
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <link rel="stylesheet" href="style.css">
    <script src="java.js"></script>
  </head>
  <body>


    <div id="header">
        <div class="logo">
          <a href="#">Lucam</a>
        </div> 
        <nav>
          <form class="search" action="search.php">
            <input name="q" placeholder="Search..." type="search">
          </form>
          <ul>
            <li>
              <a href="">Home</a>
            </li>
            <li class="dropdown">
                <a href="">About Me</a>
                  <ul>
                    <li><a class="dropdown-text" href="#">Hobby</a></li>                   
                    <li><a class="dropdown-text" href="#">Interessen</a></li>
                  </ul>       
              </li>
            <li class="dropdown">
              <a href="">Contact</a>
                <ul>
                  <li><a class="dropdown-text" href="#">Contact Us</a></li>
                </ul>       
            </li>
            <li>
              <a href="">Portfolio</a>
            </li>
            <li>
              <a href="">Team</a>
            </li>
          </ul>
        </nav>
      </div>

  </body>
</html>

CSS:

CSS:
*, *:before, *:after {
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    margin:0;
    padding:0
}
body {
    background:#bdc3c7;
    line-height:1.5;
    font-family:sans-serif;
    text-transform:uppercase;
    font-size:16px;
    color:#fff
}
a {
    text-decoration:none;
    color:#fff
}
#header {
    background:#1E262D;
    width:100%;
    position:relative
}
#header:after {
    content:"";
    clear:both;
    display:block
}
.search {
    float:right;
    padding:30px
}
input {
    border:none;
    padding:10px;
    border-radius:20px
}
.logo {
    float:left;
    padding:26px 0 26px
}
.logo a {
    font-size:28px;
    display:block;
    padding:0 0 0 20px
}
nav {
    float:right;
}
nav>ul {
    float:left;
    position:relative
}
nav li {
    list-style:none;
    float:left
}
nav .dropdown {
    position:relative
}
nav li a {
    float:left;
    padding:35px
}
nav li a:hover {
    background:#2C3E50
}
nav li ul {
    display:none
}
nav li:hover ul {
    display:inline
}
nav li li {
    float:none
}
nav .dropdown ul {
    position:absolute;
    left:0;
    top:100%;
    background:#fff;
    padding:20px 0;
    border-bottom:3px solid #34495e
}
nav .dropdown li {
    white-space:nowrap
}
nav .dropdown li a {
    padding:10px 35px;
    font-size:13px;
    min-width:200px
}
nav li li a {
    float:none;
    color:#333;
    display:block;
    padding:8px 10px;
    border-radius:3px;
    font-size:13px
}
nav li li a:hover {
    background:#888888
}
@media only screen and (max-width: 1170px) {
    nav >ul>li >a {
        padding:35px 15px
}
}
@media only screen and (min-width: 960px) {
    nav {
        display:block!important
}
}
@media only screen and (max-width: 959px) {
    nav {
        display:none;
        width:100%;
        clear:both;
        float:none;
        max-height:400px;
        overflow-y:scroll
}
    #menu-icon {
        display:inline;
        top:45px;
        cursor:pointer
}
    #menu-icon.active .first {
        transform:rotate(45deg);
        -webkit-transform:rotate(45deg);
        margin-top:10px
}
    #menu-icon.active .second {
        transform:rotate(135deg);
        -webkit-transform:rotate(135deg);
        position:relative;
        top:-9px;
    }
    #menu-icon.active .third {
        display:none
}
    .search {
        float:none
}
    .search input {
        width:100%
}
    nav {
        padding:10px
}
    nav ul {
        float:none
}
    nav li {
        float:none
}
    nav ul li a {
        float:none;
        padding:8px;
        display:block
}
    #header nav ul ul {
        display:block;
        position:static;
        background:none;
        border:none;
        padding:0
}
    #header nav a {
        color:#fff;
        padding:8px
}
    #header nav a:hover {
        background:#fff;
        color:#333;
        border-radius:3px
}
    #header nav ul li li a:before {
        content:"- "
}
    .mega-col {
        width:100%
}
}