Javascript按钮可在手机上展开网站菜单-JavascriptButtontoexpandsitemenuonphone

作者：lovely--蕙蕙_868 | 来源：互联网 | 2023-05-19 04:45

imusinganonlinemegamenuformysite,theentirecodeishere我正在为我的网站使用在线大型菜单,整个代码都在这里<a

i'm using an online mega menu for my site, the entire code is here

我正在为我的网站使用在线大型菜单,整个代码都在这里

On mobile it has a button like an app button for opening the menu. The problem is that it's working on desktop but it doesn't open on my smartphone.

在移动设备上,它有一个按钮,如用于打开菜单的app按钮。问题是它在桌面上工作但它不能在我的智能手机上打开。

It's any way to solve the problem? Thanks!

这有什么方法可以解决这个问题?谢谢!

1 个解决方案

#1

Here to open menu using CSS developer has used :hover, and hover doesn't occur in phones, so you need to replace :hover css with :active for phone, See codepen

这里打开菜单使用CSS开发人员使用:hover,并且hover不会出现在手机中,所以你需要替换:hover css with:active for phone,请参阅codepen

Note: I have checked this in landscape mode of my phone

/* Body Styles */
body { 
  margin: 0px; 
  padding: 0px; 
  font-family: 'Open Sans', sans-serif; 
  background-color: #fff;  
}

header.dark blockquote { color:#fff; }
header.light blockquote { color:#000; }

blockquote { 
  max-width: 1000px; 
  margin:0 auto;
  font-size: 16px; 
  border-left: 0px;
  padding:  20px ;
}

blockquote h2 { padding-right: 40px; margin: 0px; }
header.dark blockquote a {color: orange; text-decoration: underline;}
header.light blockquote a {text-decoration: underline;}
header { min-height: 450px; }
header.dark { background-color: #444; }
header.light { background-color: #fff; }

/* Navigation Styles */
nav { position: relative;  }
header.dark nav { background-color:rgba(255,255,255,0.5); }
header.light nav { background-color:rgba(0,0,0,0.5); }

ul.main-nav { 
  list-style-type: none; 
  padding: 0px;
  font-size: 0px;
  max-width: 1000px;
  margin: 0 auto;
}

ul.main-nav > li { 
  display: inline-block;
  padding: 0; 
}

ul.main-nav > li > a { 
  display: block; 
  padding: 20px 30px; 
  position: relative;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  box-sizing: border-box;
}

ul.main-nav > li:hover { background-color: #f9f9f9; }
ul.main-nav > li:hover > a { color: #333; font-weight: 400; }

ul.main-nav > li ul.sub-menu-lists {
  margin: 0px;
  padding: 0px;
  list-style-type : none;
  display:block;
}

ul.main-nav > li ul.sub-menu-lists > li {
  padding: 2px 0;
}

ul.main-nav > li ul.sub-menu-lists > li > a {
  font-size: 14px;
}

.ic {
  position: fixed; 
  cursor: pointer;
  display: inline-block;
  right: 25px;
  width: 32px;
  height: 24px;
  text-align: center;
  top:0px;
  outline: none;
}

.ic.close { 
  opacity: 0; 
  font-size: 0px; 
  font-weight: 300; 
  color: #fff;
  top:8px;
  height:40px;
  display: block;
  outline: none;
}

/* Menu Icons for Devices*/
.ic.menu { top:25px; z-index : 20; }

.ic.menu .line { 
  height: 4px; 
  width: 100%; 
  display: block; 
  margin-bottom: 6px; 
}
.ic.menu .line-last-child { margin-bottom: 0px;  }

.sub-menu-head { margin: 10px 0; }
.banners-area { margin-top: 20px; padding-top: 15px; }


@media only screen and (max-width:768px) {
  .sub-menu-head { color:orange; }
  .ic.menu { display: block; }
  header.dark .ic.menu .line { background-color: #fff; } 
  header.light .ic.menu .line { background-color: #000; }
  .ic.menu .line {
    -webkit-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
  }
  .ic.menu:focus .line { background-color: #fff !important; }
  
  .ic.menu:focus .line:nth-child(1) { 
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg); 
  }
  
  .ic.menu:focus .line:nth-child(2) { 
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg); 
    margin-top: -10px;
  }
  
  .ic.menu:focus .line:nth-child(3) {
    transform: translateY(15px);
    opacity: 0;
  }
  
  .ic.menu:focus{ outline: none; }
  .ic.menu:focus ~ .ic.close { opacity: 1; z-index : 21;  outline: none;  }
  
  /*
  
  .ic.menu:focus ~ .ic.close { opacity: 1.0; z-index : 21;  }
  .ic.close:focus { opacity: 0; }
  */
  .ic.menu:focus { opacity: 1;  }
  

  nav { background-color: transparent; }
  
 /* Main Menu for Handheld Devices  */
  ul.main-nav {
    z-index:2; 
    padding: 50px 0;
    position: fixed;
    right: 0px;
    top: 0px;
    width: 0px;
    background-color:rgba(0,0,0,1);
    height: 100%;
    overflow: auto;
    /*CSS animation applied : Slide from Right*/
   -webkit-transition-property: background, width;
    -moz-transition-property: background, width;
    -o-transition-property: background, width;
    transition-property: background, width;
   	-webkit-transition-duration: 0.6s;
	  -moz-transition-duration: 0.6s;
	  -o-transition-duration: 0.6s;
    transition-duration: 0.6s;
  }
  
  .ic.menu:focus ~ .main-nav { width: 300px; background-color:rgba(0,0,0,1); }
  
  ul.main-nav > * { 
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    transition-property: opacity;
   	-webkit-transition-duration: 0.4s;
	  -moz-transition-duration: 0.4s;
	  -o-transition-duration: 0.4s;
    transition-duration: 0.4s;
    opacity: 0;
  }
  .ic.menu:focus ~ .main-nav > * {opacity: 1;}
  
  ul.main-nav > li > a:after {display: none;}
  ul.main-nav > li:first-child { border-radius: 0px; }
  ul.main-nav > li {
    display: block;
    border-bottom: 1px solid #444;
  }
  
  ul.main-nav > li > a { font-weight: 600; }
  
  ul.main-nav > li ul.sub-menu-lists > li a { color: #eee; font-size: 14px; }
  .sub-menu-head { font-size: 16px;}
  ul.main-nav > li:hover { background-color: transparent;  }
  ul.main-nav > li:hover > a {color: #fff; text-decoration: none; font-weight: 600;}
 .ic.menu:focus ~ ul.main-nav > li > div.sub-menu-block {
    border-left: 0px solid #ccc;
    border-right: 0px solid #ccc;
    border-bottom: 0px solid #ccc;
    position: relative;
    visibility: visible;
    opacity: 1.0;
  }
  
  .sub-menu-block { padding: 0 30px; }
  .banners-area { padding-bottom: 0px;  }
  .banners-area div { margin-bottom: 15px;  }
  .banners-area { border-top: 1px solid #444; }
}

@media only screen and (min-width:769px) {
  .ic.menu { display: none; }
  /* Main Menu for Desktop Devices  */
  ul.main-nav { display: block; position: relative; }
  .sub-menu-block { padding: 15px; }
  
  /* Sub Menu */
  ul.main-nav > li > div.sub-menu-block { 
  visibility: hidden;
  background-color: #f9f9f9;
  position: absolute;
  margin-top: 0px;
  width: 100%;
  color: #333;
  left: 0;
  box-sizing: border-box;
  z-index : 3;
  font-size: 16px;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  opacity: 0;
    
  /*CSS animation applied for sub menu : Slide from Top */
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  transform: rotateX(90deg);
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
  transform-origin: top center;
  
  }
  
  ul.main-nav > li:hover > div.sub-menu-block,   ul.main-nav > li:active > div.sub-menu-block{ 
    background-color: #f9f9f9; 
    visibility: visible;
    opacity: 1;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  
  ul.main-nav > li > div.sub-menu-block > * {
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    transition-property: opacity;
   	-webkit-transition-duration: 0.4s;
	  -moz-transition-duration: 0.4s;
	  -o-transition-duration: 0.4s;
    transition-duration: 0.4s;
    opacity: 0;
  }
  
  ul.main-nav > li:hover > div.sub-menu-block > *,ul.main-nav > li:active > div.sub-menu-block > * {
    opacity: 1;
  }
  
  .sub-menu-head { font-size: 20px;}
  
  /* List Separator: Outer Border */
  header.dark ul.main-nav > li > a { border-right: 1px solid #bbb; }
  header.light ul.main-nav > li > a { border-right: 1px solid #666; }
  
  /* List Separator: Inner Border */
  ul.main-nav > li > a:after {
    content: '';
    width: 1px;
    height: 62px;
    position: absolute;
    right:0px;
    top: 0px;
    z-index : 2;
  }
  header.dark ul.main-nav > li > a:after { background-color: #777; }
  header.light ul.main-nav > li > a:after { background-color: #999; }
  
  /* Drop Down/Up Arrow for Mega Menu */
  ul.main-nav > li > a.mega-menu > span { display: block; vertical-align: middle; }
  ul.main-nav > li > a.mega-menu > span:after {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
    content: '';
    background-color: transparent;
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
  }

  ul.main-nav > li:hover > a.mega-menu span:after,ul.main-nav > li:active > a.mega-menu span:after {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 0px solid transparent;
    border-bottom: 5px solid #666;
  }
  .banners-area { border-top: 1px solid #ccc; }
}



  
    
      
      
      
    
    
    
      
        Home      
       
      
      
        Products
        
          
            
              Clothing
              
                Mens
                Womens
                Kids
                New Born
                View All
                         
            
            
              Handbags
              
                Wallets
                Athletic bag
                Backpack
                Bucket Bag
                View All
              
            
            
              Shoes
              
                Mens
                Womens
                Kids
                View All
              
            
          
          
          
            
              
            
            
              
            
          
          
        
      
      
        Services    
      
      
        About
        
          
            
              Company
              
                About
                Mission
                Community
                Team
                         
            
            
              Media
              
                News
                Events
                Blog
              
            
            
              Careers
              
                New Opportunities
                Life @ Company
                Why Join Us?
              
            
          
          
          
            
              
            
            
              
            
          
          
        
      
      
        Contact      
      
     
  
    
      Responsive Mega Menu - CSS3
      

      Cross Browser Support: 

      Tested on Chrome (48.0.2564.109 m), Firefox, IE 11, Chrome Browser for Android 5.1.1 (Xperia Z2), Windows Phone 8.0 for Lumia 720
      


      Expected Support for Desktop:

      IE9+, Chrome, Firefox, Opera, Safari for Mac, See All Browsers
      


      Expected Support for Handheld:

      Chrome Browser for Android, Android Browser, Safari for iOS, Windows Phone 8.1, See All Browsers
      

      
      Available in two variations: "light" and "dark" | Change  class to see impact.

enter image description here

推荐阅读

ip
CSS3选择器的使用方法详解，提高Web开发效率和精准度

本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]

蜡笔小新 2023-12-14 14:37:52
version
MooTools和JQuery并排 - MooTools and JQuery Side by Side

IjustinheritedsomewebpageswhichusesMooTools.IneverusedMooTools.NowIneedtoaddsomef ... [详细]

蜡笔小新 2023-12-12 13:43:58
ip
Nginx使用（server参数配置）

本文介绍了Nginx的使用，重点讲解了server参数配置，包括端口号、主机名、根目录等内容。同时，还介绍了Nginx的反向代理功能。 ... [详细]

蜡笔小新 2023-12-14 17:08:34
ip
Java实战之电影在线观看系统的实现

本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述，然后展示了系统的效果图。接着介绍了系统的核心代码，包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明，包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]

蜡笔小新 2023-12-14 15:52:03
ip
javascript – 概述在Firefox上无法正常工作

我试图提出一些自定义大纲,以达到一些Web可访问性建议.但我不能用Firefox制作.这就是它在Chrome上的外观：而那个图标实际上是一个锚点.在Firefox上,它只概述了整个 ... [详细]

蜡笔小新 2023-12-14 10:20:38
ip
Voicewo在线语音识别转换jQuery插件的特点和示例

本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]

蜡笔小新 2023-12-13 20:01:16
ip
使用圣杯布局模式实现网站首页的内容布局

本文介绍了使用圣杯布局模式实现网站首页的内容布局的方法，包括HTML部分代码和实例。同时还提供了公司新闻、最新产品、关于我们、联系我们等页面的布局示例。商品展示区包括了车里子和农家生态土鸡蛋等产品的价格信息。 ... [详细]

蜡笔小新 2023-12-10 20:09:23
ip
从零基础到精通的前台学习路线

随着互联网的发展，前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线，包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习，可以掌握前台开发的基本技能，并有能力找到一份月薪8000以上的工作。 ... [详细]

蜡笔小新 2023-12-10 20:05:15
ip
深入剖析jquery源码，探寻框架底层原理

随着前端技术的发展，越来越多的开发者开始使用react、vue等web框架，但很少有人深入理解这些框架的源码。然而，这些框架底层都是由原生的javascript构建而成。对于初学前端的人来说，可能会认为javascript很容易上手，但实际上只是因为它被高度封装了。与能够使用封装类的人相比，能够理解框架原理的人则处于另一个层面。本文将深入剖析jquery源码，探寻框架底层的原理，帮助读者更好地理解web框架的运行机制。 ... [详细]

蜡笔小新 2023-12-10 17:42:39
javascript
如何在输入字段中使用默认值的方法及代码

本文介绍了在满足特定条件时如何在输入字段中使用默认值的方法和相应的代码。当输入字段填充100或更多的金额时，使用50作为默认值；当输入字段填充有-20或更多（负数）时，使用-10作为默认值。文章还提供了相关的JavaScript和Jquery代码，用于动态地根据条件使用默认值。 ... [详细]

蜡笔小新 2023-12-10 12:35:46
ip
JNI原理及常用方法概述

本文概述了JNI的原理以及常用方法。JNI提供了一种Java字节码调用C/C++的解决方案，但引用类型不能直接在Native层使用，需要进行类型转化。多维数组（包括二维数组）都是引用类型，需要使用jobjectArray类型来存取其值。此外，由于Java支持函数重载，根据函数名无法找到对应的JNI函数，因此介绍了JNI函数签名信息的解决方案。 ... [详细]

蜡笔小新 2023-12-09 17:55:40
stream
java.lang.NoSuchMethodError.getMessage()方法的使用及代码示例

本文整理了Java中java.lang.NoSuchMethodError.getMessage()方法的一些代码示例，展示了NoSuchMethodErr ... [详细]

蜡笔小新 2023-12-09 17:50:11
ip
获取ul中第一个li元素的五种方法和多个ul中第一个li元素的四种方法

本文介绍了获取ul中第一个li元素的五种方法和多个ul中第一个li元素的四种方法，包括使用jQuery的选择器和遍历方法。通过这些方法，可以方便地获取到所需的元素，并进行相应的操作。 ... [详细]

蜡笔小新 2023-12-09 10:26:04
ip
如何压缩网站页面以减少页面加载时间

本文介绍了影响网站打开时间的两个因素，即网页加载速度和网站页面大小。重点讲解了如何通过压缩网站页面来减少页面加载时间。具体包括图片压缩、Javascript压缩、CSS压缩和HTML压缩等方法，并推荐了相应的压缩工具。此外，还提到了一款Google Chrome插件——网页加载速度分析工具Speed Tracer。 ... [详细]

蜡笔小新 2023-12-09 09:17:00
javascript
常用的CSS属性及用法整理

本文整理了常用的CSS属性及用法，包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等，方便开发者查阅和使用。 ... [详细]

蜡笔小新 2023-12-09 03:01:43

lovely--蕙蕙_868

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章