html - 如何将移动菜单一页更改为多页?
问题描述
我有一个页面滚动菜单,但我已经在多个页面中更改了它。这种菜单在桌面上工作,但在移动版本上不起作用。我如何更改代码 css 或 html,因为在移动版本中,当我点击时菜单并在我单击的任何地方关闭它,将我重定向到另一个页面。
.mobile-menu {
display: block;
width: 18%;
right: -20%;
height: 100%;
background: rgba(1, 16, 25, 0.67);
position: fixed;
z-index: 9998;
transition: 0.6s ease;
top: 0;
opacity: 0;
}
.mobile-menu ul {
position: relative;
top: 20%;
padding: 0;
}
.mobile-menu ul li {
list-style: none;
margin-bottom: 2em;
display: block;
}
.mobile-menu ul li a {
width: 100%;
margin: 0 auto;
display: block;
text-align: center;
text-decoration: none;
color: #fff;
font-size: 1em;
font-weight: bold;
overflow: hidden;
position: relative;
padding: 1em 0;
text-transform: uppercase;
letter-spacing: 3px;
}
.open > ul.dropdown-menu.agile_short_dropdown{
display: block;
transform: none !important;
min-width: 65%;
border: none;
box-shadow: none;
border-radius: 0;
left: 18%;
}
.open > ul.dropdown-menu.agile_short_dropdown li{
margin:0 !important;
}
ul.dropdown-menu.agile_short_dropdown > li > a:hover{
background: none;
}
.mobile-menu ul li a:after {
content: '';
background: #191143;
width: 100%;
height: 100%;
position: absolute;
right: -100%;
top: 0;
z-index: -1;
transition: 0.4s ease;
}
.mobile-menu ul li a:hover,.mobile-menu ul li.active a {
color: #fff;
}
.mobile-menu ul li a:hover:after,.mobile-menu ul li.active a:after {
right: 0;
}
li.dropdown.act a.w3_icons_act {
background: #0e0e0e;
color: #fff;
}
.mobile-menu img {
position: absolute;
width: 150px;
display: block;
left: 50%;
top: 3rem;
transform: translatex(-50%);
-webkit-transform: translatex(-50%);
-moz-transform: translatex(-50%);
-o-transform: translatex(-50%);
-ms-transform: translatex(-50%);
padding: 0;
text-align: center;
}
.mobile-menu--open {
opacity: 1;
right:0%;
}
.dropdown.active.open a ul.dropdown-menu.agile_short_dropdown li a.w3_icon_1:after{
background:none !important;
<div class="center-container">
<div class="w3_agile_header">
<div class="w3_menu">
<div class="agileits_w3layouts_banner_info">
</div>
<div class="mobile-nav-button">
<div class="mobile-nav-button__line"></div>
<div class="mobile-nav-button__line"></div>
<div class="mobile-nav-button__line"></div>
</div>
<nav class="mobile-menu">
<ul>
<li><a href="https://ioanasandu.ro/online/web/index.html" class="hover" >Despre mine</a></li>
<li><a href="https://ioanasandu.ro/online/web/repertoriu.html" class="scroll">Repertoriu</a></li>
<li><a href="https://ioanasandu.ro/online/web/discografie.html" class="scroll">Discografie</a></li>
<li><a href="https://ioanasandu.ro/online/web/evenimente.html" class="scroll">Evenimente</a></li>
<li><a href="https://ioanasandu.ro/online/web/foto.html" class="scroll">Foto</a></li>
<li><a href="https://ioanasandu.ro/online/web/video.html" class="scroll">Video</a></li>
<li><a href="https://ioanasandu.ro/online/web/contact.html" class="scroll">Contact</a></li>
</ul>
</nav>
</div>
<div class="clearfix"></div>
</div>
谁能帮我?
解决方案
推荐阅读
- c# - AR Foundation - TrackedPoseDriver 组件未缓存在更新循环中
- javascript - JQuery 是开发依赖还是依赖?
- node.js - socket.io / 和 node / 的逻辑反应
- c - C插座关闭检测
- javascript - 总是在我的网址中显示 nopreview 消息?
- python - 将 if-else 代码重构为更易于维护的代码
- video - 如何将两个 ffmpeg 命令组合在一起 - 添加 Intro Outro 和介于两者之间的图像
- sparql - Jena querybuilder clearWhereValues 不起作用
- scheme - 球拍 - 产生二叉树中的操作数
- swiftui - mapItem.openInMaps() 未知位置