个人中心
gpt4 book ai didi

html - 使用图像创建下拉菜单

转载 作者：太空宇宙 更新时间：2023-11-04 13:28:52 26 4
gpt4 key购买 nike

我想创建一个适用于移动(我正在使用媒体查询)平台的下拉菜单。我能够创建媒体查询以使其仅适用于 320/480/720px，但我无法创建此子菜单类，它具有下拉菜单。

我可以看到任何提示或教程吗？任何帮助将不胜感激...

HTML

<div class="header">
                <div class="menu">
                    <ul>
                        <li><a href="#"><img src="www.wemadeyou.pt/img/menu.png" alt="Menu" width="22" height="17"/></a>
                            <ul class="sub-menu">
                                <li><a href="#">Home</a></li>
                                <li><a href="#">Portfolio</a></li>
                                <li><a href="#">Services</a></li>
                                <li><a href="#">About</a></li>
                                <li><a href="#">Contacts</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>        
</div>

CSS

.header{
    position: relative;
    width: 100%;
    height: 50px;
    margin: 0 auto;
    padding: 0;
    display: block;
    text-align: center;
    margin-bottom: 25px;
    background-color: rgba(0, 0, 0, 0.2);
}

.menu{}

最佳答案

也许不是最适合您的解决方案，但我已尽力而为。

https://codepen.io/leobezr/pen/VweOELv

注意:使用 devTools 更改窗口大小。

注意:您可能需要使用以下代码

<body>
    <div class="header">
        <div class="logo">LOGO</div>
        <div class="navigation">
            <ul class="sub-menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contacts</a></li>
            </ul>
        </div>
        <div class="mobileController" style="display: none;">
            <a href="#" role="button" action="openMenu">
                <span class="sandwich">
               <span></span>
                </span>
            </a>
        </div>
    </div>
    <div class="content">
        Hello world
    </div>
</body>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500&display=swap');
body {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    min-height: calc(100vh * 2);
}

.header {
    display: flex;
    flex: 1;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
    height: 40px;
    background: #ecf5ff;
}

.header:not(.fixed) {
    position: relative;
}

.header.fixed {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    animation: fadeDown 400ms 1 ease-in;
    animation-fill-mode: forwards;
}

.header .navigation ul {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center
}

.header .navigation li {
    display: flex;
    padding: 12px 6px;
}

.header .navigation li a {
    text-decoration: none;
    font-weight: 600;
    position: relative;
    color: #222;
}

.header .navigation li a:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 5px;
    opacity: 0;
    height: 2px;
    width: 100%;
    display: block;
    background: #222;
}

.header .navigation li a:hover {
    filter: brightness(1.1);
    transition: all 200ms ease-in;
}

.header .navigation li a:hover:before {
    opacity: 1;
    transform: translateY(7px);
    transition: all 200ms ease-in;
}

.mobileController .sandwich span {
    display: block;
    width: 35px;
    height: 2px;
    background: #222;
    position: relative;
}

.mobileController .sandwich span:before {
    content: "";
    width: inherit;
    height: inherit;
    position: absolute;
    left: 0;
    top: -6px;
    background: inherit;
}

.mobileController .sandwich span:after {
    content: "";
    width: inherit;
    height: inherit;
    position: absolute;
    left: 0;
    top: 6px;
    background: inherit;
}

.mobileController>a {
    display: flex;
    height: 20px;
    align-content: center;
    align-items: center;
    cursor: pointer;
}

.mobileController>a:hover {
    transform: scale(.9);
    transition: all 200ms ease-in;
}

@media (max-width: 992px) {
    .navigation {
        display: none;
        position: absolute;
        left: 0;
        top: 40px;
        background: #fff;
        width: 100%;
        z-index: -1;
        border-bottom: solid 1px #ebebeb;
    }
    .navigation.view {
       display: block !important;
       animation: slideIn 400ms ease-in 1;
       animation-fill-mode: forwards;
    }
    .navigation ul {
        flex-direction: column !important;
    }
    .mobileController {
        display: block !important;
    }
}

@keyframes fadeDown {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
   0% {
      opacity: 0;
      display: block !important;
      transform: translateX(-100%);
  }
  100% {
      opacity: 1;
      display: block !important;
      transform: translateX(0);
  }
}
window.addEventListener("scroll", () => {
  const $header = document.querySelector(".header");
  const headerHeight = $header.offsetHeight;
  
  if (window.pageYOffset >= Math.round(headerHeight * 2)) {
    $header.classList.add("fixed");
  } else {
    $header.classList.remove("fixed");
  }
})

!function(){
 window.addEventListener("load", init);
}()

function init() {
const $button = document.querySelector(".mobileController");
const $navigation = document.querySelector(".navigation");
$button.addEventListener("click", () => $navigation.classList.toggle("view"));
}

关于html - 使用图像创建下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22791382/

26 4 0
文章推荐： html - 绝对定位的 div 被父级切断。
文章推荐： html - 将颜色移动到单独的 CSS 文件不起作用
文章推荐： c++ - 为模板类重载友元运算符<<
文章推荐： jquery - IE10 - 需要将 CSS 光标更改为 "pointer"在 contenteditable