Question

在Windows小屏幕上它可以工作，但在电话上它消失了，我尝试了很多事情，但是找不到解决的方法或解决方法。

https://meedia-testomgeving.nu/index.html

我遵循了指南。和一些youtube视频，但没有用。关于导航菜单。我不知道我前一段时间使用过哪种代码。

HTML

<!doctype html>
<html>
<header>   
<nav id="cssmenu">
<div class="logo"><img src="Meedia Producten PC & Hardware/Background/Home Page&Favicon&Footer/Meedia LOGO.png"></div>
<div id="head-mobile"></div>
<div class="button-nav"></div>
<ul>
<li class="active"><a href="index.html">HOME</a></li>
<li><a href="Over ons.html">OVER ONS</a>
   <ul>
       <li><a href="Voor Ouders.html" target="">Voor Ouders</a></li>
         <ul>
         </ul>
      </li>
             <li><a href="Voor Hulpverleners.html" target="">Voor Hulpverleners</a></li>
         <ul>
         </ul>
       </li>
   </ul>
</li>
<li><a href="Meedoen met meedia.html">MEEDOEN MET MEEDIA</a>
   <ul>
       <li><a href="ICT & Multimedia.html" target="">ICT & Multimedia</a></li>
         <ul>
         </ul>
      </li>
           <li><a href="Fashion & Lifestyle.html" target="">Fashion & Lifestyle</a></li>
         <ul>
         </ul>
      </li>

             <li><a href="Onderwijs Ondersteuning.html" target="">Onderwijs Ondersteuning</a></li>
         <ul>
         </ul>
       </li>
   </ul>
</li>
<li><a href="Producten.html">PRODUCTEN</a> 
   <ul>
      <li><a href="PC & Hardware.html" target="">PC & Hardware</a>
         <ul>
            <li><a href="Meedia Market PC.html" target="_blank">PC</a></li>
            <li><a href="Meedia Market Laptop.html" target="_blank">Laptop</a></li>
            <li><a href="Meedia Market Monitoren.html" target="_blank">Monitoren</a></li>
            <li><a href="Meedia Market Randapparatuur.html" target="_blank">Randapparatuur</a></li>
            <li><a href="Meedia Market Hardware.html" target="_blank">Hardware</a></li>
            <li><a href="Meedia Market Onderdelen.html" target="_blank">Onderdelen</a></li>
            <li><a href="Meedia Market Netwerk.html" target="_blank">Netwerk</a></li>
            <li><a href="Meedia Market Printers.html" target="_blank">Printers</a></li>
         </ul>
      </li>
      <li><a href="Market Fashion & Lifestyle.html">Fashion & LifeStyle</a>
         <ul>
            <li><a href="Meedia Market Kasten.html" target="_blank">Kasten</a></li>
            <li><a href="Meedia Market Lampen.html" target="_blank">Lampen</a></li>
            <li><a href="Meedia Market Manden.html" target="_blank">Manden</a></li>
            <li><a href="Meedia Market Stoelen.html" target="_blank">Stoelen</a></li>
            <li><a href="Meedia Market Iets aan de wand.html" target="_blank">iets aan de Wand</a></li>
            <li><a href="Meedia Market sign borden.html" target="_blank">Sign Borden</a></li>
            <li><a href="Meedia Market Boekjes.html" target="_blank">Boekjes</a></li>
            <li><a href="Meedia Market Kleding.html" target="_blank">Kleding</a></li>
         </ul>
       </li>
   </ul>
</li>
<li><a href="Nieuws.html" target="">NIEUWS</a></li>
<li><a href="Foto's.html" target="">FOTO'S</a></li>
<li><a href="Contact.html">CONTACT</a>

  <ul>
       <li><a href="Contactformulier.html" target="">Contactformulier</a></li>
         <ul>
         </ul>
      </li>
         <ul>
         </ul>
      </li>
</ul>
</nav>

</header>

CSS

*{margin:0;padding:0;text-decoration:none}
body{background:url(Images/.jpg)}
header{position:relative;width:100%;background:#333;}
.logo{position:relative;z-index:123;padding:10px;font:18px verdana;color:#31a3dd;float:left;width:19%}
.logo a{color:#31a3dd;}
nav{position:relative;width:1010px;margin:0 auto;}
#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #head-mobile{border:0;list-style:none;line-height:1;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#cssmenu:after,#cssmenu > ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
#cssmenu #head-mobile{display:none}
#cssmenu{font-family:sans-serif;background:#333}
#cssmenu > ul > li{float:left}
#cssmenu > ul > li > a{padding:17px;font-size:12px;letter-spacing:1px;text-decoration:none;color:#FFFFFF;font-weight:700;}
#cssmenu > ul > li:hover > a,#cssmenu ul li.active a{color:#fff}
#cssmenu > ul > li:hover,#cssmenu ul li.active:hover,#cssmenu ul li.active,#cssmenu ul li.has-sub.active:hover{background:#31a3dd!important;-webkit-transition:background .3s ease;-ms-transition:background .3s ease;transition:background .3s ease;}
#cssmenu > ul > li.has-sub > a{padding-right:30px}
#cssmenu > ul > li.has-sub > a:after{position:absolute;top:22px;right:11px;width:8px;height:2px;display:block;background:#ffffff;content:''}
#cssmenu > ul > li.has-sub > a:before{position:absolute;top:19px;right:14px;display:block;width:2px;height:8px;background:#ffffff;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu > ul > li.has-sub:hover > a:before{top:23px;height:0}
#cssmenu ul ul{position:absolute;left:-9999px}
#cssmenu ul ul li{height:0;-webkit-transition:all .25s ease;-ms-transition:all .25s ease;background:#333;transition:all .25s ease}
#cssmenu ul ul li:hover{}
#cssmenu li:hover > ul{left:auto}
#cssmenu li:hover > ul > li{height:35px}
#cssmenu ul ul ul{margin-left:100%;top:0}
#cssmenu ul ul li a{border-bottom:1px solid rgba(150,150,150,0.15);padding:11px 15px;width:170px;font-size:12px;text-decoration:none;color:#FFFFFF;font-weight:400;}
#cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a{border-bottom:0}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover{color:#fff}
#cssmenu ul ul li.has-sub > a:after{position:absolute;top:16px;right:11px;width:8px;height:2px;display:block;background:#ffffff;content:''}
#cssmenu ul ul li.has-sub > a:before{position:absolute;top:13px;right:14px;display:block;width:2px;height:8px;background:#ffffff;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu ul ul > li.has-sub:hover > a:before{top:17px;height:0}
#cssmenu ul ul li.has-sub:hover,#cssmenu ul li.has-sub ul li.has-sub ul li:hover{background:#363636;}
#cssmenu ul ul ul li.active a{border-left:1px solid #333}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active> a{border-top:1px solid #333}

@media screen and (max-width:1000px){
.logo{position:absolute;top:0;left: 0;width:100%;height:46px;text-align:center;padding:10px 0 0 0 ;float:none}
.logo2{display:none}
nav{width:100%;}
#cssmenu{width:100%}
#cssmenu ul{width:100%;display:none}
#cssmenu ul li{width:100%;border-top:1px solid #444}
#cssmenu ul li:hover{background:#363636;}
#cssmenu ul ul li,#cssmenu li:hover > ul > li{height:auto}
#cssmenu ul li a,#cssmenu ul ul li a{width:100%;border-bottom:0}
#cssmenu > ul > li{float:none}
#cssmenu ul ul li a{padding-left:25px}
#cssmenu ul ul li{background:#333!important;}
#cssmenu ul ul li:hover{background:#363636!important}
#cssmenu ul ul ul li a{padding-left:35px}
#cssmenu ul ul li a{color:#FFFFFF;background:none}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a{color:#fff}
#cssmenu ul ul,#cssmenu ul ul ul{position:relative;left:0;width:100%;margin:0;text-align:left}
#cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before{display:none}
#cssmenu #head-mobile{display:block;padding:23px;color:#FFFFFF;font-size:12px;font-weight:700}
.button-nav{width:55px;height:46px;position:absolute;right:0;top:0;cursor:pointer;z-index: 12399994;}
.button-nav:after{position:absolute;top:22px;right:20px;display:block;height:4px;width:20px;border-top:2px solid #FFFFFF;border-bottom:2px solid #FFFFFF;content:''}
.button-nav:before{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;position:absolute;top:16px;right:20px;display:block;height:2px;width:20px;background:#FFFFFF;content:''}
.button-nav.menu-opened:after{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;top:23px;border:0;height:2px;width:19px;background:#fff;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
.button-nav.menu-opened:before{top:23px;background:#fff;width:19px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
#cssmenu .submenu-button-nav{position:absolute;z-index:99;right:0;top:0;display:block;border-left:1px solid #444;height:46px;width:46px;cursor:pointer}
#cssmenu .submenu-button-nav.submenu-opened{background:#262626}
#cssmenu ul ul .submenu-button-nav{height:34px;width:34px}
#cssmenu .submenu-button-nav:after{position:absolute;top:22px;right:19px;width:8px;height:2px;display:block;background:#FFFFFF;content:''}
#cssmenu ul ul .submenu-button-nav:after{top:15px;right:13px}
#cssmenu .submenu-button-nav.submenu-opened:after{background:#fff}
#cssmenu .submenu-button-nav:before{position:absolute;top:19px;right:22px;display:block;width:2px;height:8px;background:#FFFFFF;content:''}
#cssmenu ul ul .submenu-button-nav:before{top:12px;right:16px}
#cssmenu .submenu-button-nav.submenu-opened:before{display:none}
#cssmenu ul ul ul li.active a{border-left:none}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{border-top:none}
}


#cssmenu{
z-index: 1000;
position:relative;
}

#cssmnu {
  opacity: 1.1;
}

JQuery

(function($) {
$.fn.menumaker = function(options) {  
 var cssmenu = $(this), settings = $.extend({
   format: "dropdown",
   sticky: false
 }, options);
 return this.each(function() {
   $(this).find(".button-nav").on('click', function(){
     $(this).toggleClass('menu-opened');
     var mainmenu = $(this).next('ul');
     if (mainmenu.hasClass('open')) { 
       mainmenu.slideToggle().removeClass('open');
     }
     else {
       mainmenu.slideToggle().addClass('open');
       if (settings.format === "dropdown") {
         mainmenu.find('ul').show();
       }
     }
   });
   cssmenu.find('li ul').parent().addClass('has-sub');
multiTg = function() {
     cssmenu.find(".has-sub").prepend('<span class="submenu-button-nav"></span>');
     cssmenu.find('.submenu-button-nav').on('click', function() {
       $(this).toggleClass('submenu-opened');
       if ($(this).siblings('ul').hasClass('open')) {
         $(this).siblings('ul').removeClass('open').slideToggle();
       }
       else {
         $(this).siblings('ul').addClass('open').slideToggle();
       }
     });
   };
   if (settings.format === 'multitoggle') multiTg();
   else cssmenu.addClass('dropdown');
   if (settings.sticky === true) cssmenu.css('position', 'fixed');
resizeFix = function() {
  var mediasize = 1000;
     if ($( window ).width() > mediasize) {
       cssmenu.find('ul').show();
     }
     if ($(window).width() <= mediasize) {
       cssmenu.find('ul').hide().removeClass('open');
     }
   };
   resizeFix();
   return $(window).on('resize', resizeFix);
 });
  };
})(jQuery);

(function($){
$(document).ready(function(){
$("#cssmenu").menumaker({
   format: "multitoggle"
});
});
})(jQuery);

已经谢谢

Answer 1

添加此CSS

@media screen and (max-width:1000px)
    #cssmenu {
        z-index: 1000;
        position: fixed;
    }
}

Answer 2

我已经这样更改了，但仍然无法正常工作

CSS

*{margin:0;padding:0;text-decoration:none}
body{background:url(Images/.jpg)}
header{position:relative;width:100%;background:#333;}
.logo{position:relative;z-index:123;padding:10px;font:18px verdana;color:#31a3dd;float:left;width:19%}
.logo a{color:#31a3dd;}
nav{position:relative;width:1010px;margin:0 auto;}
#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #head-mobile{border:0;list-style:none;line-height:1;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#cssmenu:after,#cssmenu > ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
#cssmenu #head-mobile{display:none}
#cssmenu{font-family:sans-serif;background:#333}
#cssmenu > ul > li{float:left}
#cssmenu > ul > li > a{padding:17px;font-size:12px;letter-spacing:1px;text-decoration:none;color:#FFFFFF;font-weight:700;}
#cssmenu > ul > li:hover > a,#cssmenu ul li.active a{color:#fff}
#cssmenu > ul > li:hover,#cssmenu ul li.active:hover,#cssmenu ul li.active,#cssmenu ul li.has-sub.active:hover{background:#31a3dd!important;-webkit-transition:background .3s ease;-ms-transition:background .3s ease;transition:background .3s ease;}
#cssmenu > ul > li.has-sub > a{padding-right:30px}
#cssmenu > ul > li.has-sub > a:after{position:absolute;top:22px;right:11px;width:8px;height:2px;display:block;background:#ffffff;content:''}
#cssmenu > ul > li.has-sub > a:before{position:absolute;top:19px;right:14px;display:block;width:2px;height:8px;background:#ffffff;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu > ul > li.has-sub:hover > a:before{top:23px;height:0}
#cssmenu ul ul{position:absolute;left:-9999px}
#cssmenu ul ul li{height:0;-webkit-transition:all .25s ease;-ms-transition:all .25s ease;background:#333;transition:all .25s ease}
#cssmenu ul ul li:hover{}
#cssmenu li:hover > ul{left:auto}
#cssmenu li:hover > ul > li{height:35px}
#cssmenu ul ul ul{margin-left:100%;top:0}
#cssmenu ul ul li a{border-bottom:1px solid rgba(150,150,150,0.15);padding:11px 15px;width:170px;font-size:12px;text-decoration:none;color:#FFFFFF;font-weight:400;}
#cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a{border-bottom:0}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover{color:#fff}
#cssmenu ul ul li.has-sub > a:after{position:absolute;top:16px;right:11px;width:8px;height:2px;display:block;background:#ffffff;content:''}
#cssmenu ul ul li.has-sub > a:before{position:absolute;top:13px;right:14px;display:block;width:2px;height:8px;background:#ffffff;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu ul ul > li.has-sub:hover > a:before{top:17px;height:0}
#cssmenu ul ul li.has-sub:hover,#cssmenu ul li.has-sub ul li.has-sub ul li:hover{background:#363636;}
#cssmenu ul ul ul li.active a{border-left:1px solid #333}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active> a{border-top:1px solid #333}

@media screen and (max-width:1000px){
.logo{position:absolute;top:0;left: 0;width:100%;height:46px;text-align:center;padding:10px 0 0 0 ;float:none}
.logo2{display:none}
nav{width:100%;}
#cssmenu{width:100%}
#cssmenu ul{width:100%;display:none}
#cssmenu ul li{width:100%;border-top:1px solid #444}
#cssmenu ul li:hover{background:#363636;}
#cssmenu ul ul li,#cssmenu li:hover > ul > li{height:auto}
#cssmenu ul li a,#cssmenu ul ul li a{width:100%;border-bottom:0}
#cssmenu > ul > li{float:none}
#cssmenu ul ul li a{padding-left:25px}
#cssmenu ul ul li{background:#333!important;}
#cssmenu ul ul li:hover{background:#363636!important}
#cssmenu ul ul ul li a{padding-left:35px}
#cssmenu ul ul li a{color:#FFFFFF;background:none}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a{color:#fff}
#cssmenu ul ul,#cssmenu ul ul ul{position:relative;left:0;width:100%;margin:0;text-align:left}
#cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before{display:none}
#cssmenu #head-mobile{display:block;padding:23px;color:#FFFFFF;font-size:12px;font-weight:700}
.button-nav{width:55px;height:46px;position:absolute;right:0;top:0;cursor:pointer;z-index: 12399994;}
.button-nav:after{position:absolute;top:22px;right:20px;display:block;height:4px;width:20px;border-top:2px solid #FFFFFF;border-bottom:2px solid #FFFFFF;content:''}
.button-nav:before{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;position:absolute;top:16px;right:20px;display:block;height:2px;width:20px;background:#FFFFFF;content:''}
.button-nav.menu-opened:after{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;top:23px;border:0;height:2px;width:19px;background:#fff;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
.button-nav.menu-opened:before{top:23px;background:#fff;width:19px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
#cssmenu .submenu-button-nav{position:absolute;z-index:99;right:0;top:0;display:block;border-left:1px solid #444;height:46px;width:46px;cursor:pointer}
#cssmenu .submenu-button-nav.submenu-opened{background:#262626}
#cssmenu ul ul .submenu-button-nav{height:34px;width:34px}
#cssmenu .submenu-button-nav:after{position:absolute;top:22px;right:19px;width:8px;height:2px;display:block;background:#FFFFFF;content:''}
#cssmenu ul ul .submenu-button-nav:after{top:15px;right:13px}
#cssmenu .submenu-button-nav.submenu-opened:after{background:#fff}
#cssmenu .submenu-button-nav:before{position:absolute;top:19px;right:22px;display:block;width:2px;height:8px;background:#FFFFFF;content:''}
#cssmenu ul ul .submenu-button-nav:before{top:12px;right:16px}
#cssmenu .submenu-button-nav.submenu-opened:before{display:none}
#cssmenu ul ul ul li.active a{border-left:none}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{border-top:none}
}

@media screen and (max-width:600px){
#cssmenu {
        z-index: 1000;
        position: fixed;
    }


#cssmenu{
z-index: 1000;
position:relative;
}

#cssmnu {
    opacity: 1.1;}
}

但是感谢您非常感谢！

Answer 3

$(".open button").click(function(){
  $("ul").slideToggle();
})

*{
  margin:0;
  padding:0;
}
nav{
  width:100%;
    background:purple;
padding: 10px 0px;
    
}
.container{
  margin:0 100px ;
}
.flex{
    display:flex;
  flex-wrap:wrap;
}
nav ul {
  display:flex;
  flex-wrap:wrap;
  list-style-type:none;
}
nav ul li {
  margin: 0 20px;
  color:white;
  font-size:20px;
}
.open{
  margin-left:auto;
  display:none;
}
@media(max-width:768px){
  nav{
    position:fixed;
    top:0;
    left:0;
  }
  nav ul {
    width:100%;
    display:block;
    display:none;
    text-align:center;
  }
  nav ul li{
    margin:10px 0px;
  }
  .open{
  display:block;
}
}

.content{
  width:100%;
  height:2000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <div class="container flex">
      <div class="open"><button>show</button>
          </div>
  <ul>
    <li>home</li>
     <li>about</li>
     <li>contanct</li>
  </ul>
</div>

  </nav>
<div class="content"></div>

这是用于小屏幕的粘性导航栏！为媒体查询添加固定位置！

当我在手机上向下滚动时，如何修复下拉菜单

3 个答案: