suchen

Heim  >  Fragen und Antworten  >  Hauptteil

So erstellen Sie ein responsives Dropdown-Menü

<p>Das Hamburger-Menüsymbol sollte sich rechts und das Bild links befinden. </p> <p>Wenn wir auf das Menü klicken, um es zu öffnen, sollte es zu einem Dropdown-Menü erweitert werden, das das Logo Startseite <em>Über uns</em> Galeriekontakt enthalten sollte. </p> <pre class="brush:html;toolbar:false;"><div class="rectangle1"> <ul class="dropdown"> <li class="li1"><a href="home.html"><img class="img" src="YOGI Logo.svg" </a></li> <li class="li2"><a class="a1" href="#home">Home</a></li> <li class="li3"><a class="a2" href="aboutus.html">Über uns</a></li> <li class="li4"><a class="a3" href="gallery.html">Gallery</a></li> <li class="li5"><a class="a4" href="contact.html">Kontaktieren Sie uns</a></li> <a class="Contact_Us" href="contact.html"> <img class="Contact-us-img"src="Vector.svg" <span class="Contact-us-text">Kontaktieren Sie uns</span> </a> </ul> </div> </pre> <p>Ich muss es nur in CSS konvertieren. </p> <p>Ich muss es an das responsive Design des iPhone 14 Pro anpassen, um ein Hamburger-Menü zu werden. </p>
P粉521013123P粉521013123470 Tage vor635

Antworte allen(2)Ich werde antworten

  • P粉748218846

    P粉7482188462023-09-05 09:49:42

    我认为这可能对你有帮助:CSS @media Rule。正如你在教程中所看到的,CSS有一种方法可以检查屏幕的宽度。

    @media only screen and (max-width: 600px) {
      body {
        background-color: lightblue;
      }
    }
    

    在这个例子中,当宽度小于600像素时,背景颜色将被设置为浅蓝色。使用这个规则,你可以相应地改变你的CSS。

    你应该尝试自己实现它,而不仅仅是从互联网上复制粘贴。去尝试,享受使用CSS的乐趣;这是学习它的唯一方式。

    Antwort
    0
  • P粉738821035

    P粉7388210352023-09-05 00:41:11

    这是修改后的CSS代码,用于实现响应式汉堡菜单:

    CSS(styles.css):

    body {
        margin: 0;
        font-family: Arial, sans-serif;
    }
    
    header {
        background-color: #333;
        color: #fff;
        padding: 10px;
        display: flex;
        align-items: center;
    }
    
    .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .logo {
        color: #fff;
        text-decoration: none;
        font-size: 24px;
    }
    
    .menu-toggle {
        width: 30px;
        height: 30px;
        background-color: #fff;
        cursor: pointer;
        display: none; /* 在较大屏幕上默认隐藏菜单图标 */
    }
    
    .menu-toggle::before, .menu-toggle::after {
        content: "";
        display: block;
        width: 100%;
        height: 3px;
        background-color: #333;
    }
    
    .menu {
        display: flex;
        align-items: center;
    }
    
    .menu ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
    }
    
    .menu li {
        padding: 10px;
    }
    
    .menu a {
        color: #fff;
        text-decoration: none;
        font-size: 18px;
    }
    
    /* 移动设备的媒体查询 */
    @media only screen and (max-width: 767px) {
        .menu {
            display: none; /* 在小屏幕上默认隐藏菜单 */
            flex-direction: column;
            background-color: #333;
            position: absolute;
            top: 50px;
            right: 0;
            width: 100%;
        }
    
        .menu.active {
            display: flex; /* 激活时显示菜单 */
        }
    
        .menu li {
            width: 100%;
            text-align: center;
        }
    
        .menu-toggle {
            display: block; /* 在小屏幕上显示菜单图标 */
        }
    }

    Antwort
    0
  • StornierenAntwort