使用图像创建下拉菜单

时间：2014-04-01 16:18:45

标签： html css mobile menu submenu

我想创建一个下拉菜单，该菜单适用于移动设备（我使用媒体查询）平台。 我能够创建媒体查询，使其仅适用于320/480 / 720px，但我无法创建此子菜单类，有下拉菜单。

我能看到的任何提示或教程？任何帮助将不胜感激......

我的小提琴： http://jsfiddle.net/KZ7p9/2/

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{}

2 个答案:

答案 0 :(得分：0)

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

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"));
}

答案 1 :(得分：-1)

好的@uniqezor我做smth ^^ 看：

<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 class="topmenu container clearfix">
        <div class="top">
            <a href="#" class="logo">
                <img src="http://wemadeyou.pt/img/logo.png" alt="WeMadeYou - Future Together" class="logo" width="65"
                     height="21" itemprop="image"/>
            </a>
            <span class="textbox">This is what we made of you!</span>

            <div class="clear"></div>

            <div class="nav">
                <ul>
                    <li><a href="index.html" id="home">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>
    </div>
</div>




.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);
}

.logo{
    float: left;
    margin-top: 6px;
    margin-right: 10px;
    margin-left: 5px;
}

.topmenu{
    text-align: center;
    height: 50px;
    margin: 0 auto;
}

.top{
    display: inline;
    padding: 0;
}

span.textbox{
    display: inline;
    float: left;
    font-size: 13px;
    margin-top: 14px;
    color: white;
    font-weight: bold;
}

.nav{
    float: right;
    display: inline;
    margin: 0;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
}

.nav ul{margin: 0;}

.nav li{
    width: 100px;
    height: 50px;
    display: inline-block;
    float: right;
    margin-right: 5px;
}

.nav li a{
    height: 40px;
    color: white;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    line-height: 48px;
    padding: 16px 20px 14px 20px;
}

.nav li a#home{
    height: 40px;
    padding: 16px 30px 14px 30px;
}

.nav li a:hover{border-bottom:thick solid #fff;}

.menu{display: none; }

@media screen and (max-width: 294px) {
    span.textbox {
    font-size: 10px;

}}
@media screen and (max-width: 859px) {
.clear{clear: both}
.nav{float: left;max-width: 100%;width: 100%;}
.nav li {display: block;width: 100%;
float: none;margin: 0 auto;}
.nav ul{padding: 0}
.nav li a{color:black}
}
相关问题
最新问题