我可以在所有浏览器中使用我的屏幕外菜单吗?
I am currently building a site for school and things were going great. However, I attempted to open the site on different browsers and ran into a problem. In some browsers the off screen menu I made in html/css does not seem to want to work right. Sometimes it will appear on the screen and never close and sometimes the button I made will disappear and you can't access the menu at all. Is there a way to make it work across all browsers. I believe the error occurred in chrome and internet explorer as well as firefox. However it works right on my computer in all three browsers.
我目前正在为学校建立一个网站,事情进展顺利。但是,我试图在不同的浏览器上打开该网站并遇到问题。在某些浏览器中,我在html / css中制作的屏幕外菜单似乎不想正常工作。有时它会出现在屏幕上并且永远不会关闭,有时我制作的按钮会消失,你根本无法访问菜单。有没有办法让它适用于所有浏览器。我相信错误发生在chrome和Internet Explorer以及firefox中。但是它在所有三种浏览器中都可以在我的计算机上运行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Code Resources</title>
<link rel="stylesheet" type="text/css" href="cisco.css" media="screen">
<link rel="stylesheet" type="text/css" href="template.css" media="screen">
</head>
<body>
<div class="navigation">
<figure>
<img src="menubanner.jpg" alt="menu banner" />
</figure>
<ul>
<li class="nav-item"><a href="index.html">Home</a></li>
<li class="nav-item"><a href="about.html">About</a></li>
<li class="nav-item"><a href="htmlcss.html">HTML & CSS</a></li>
<li class="nav-item"><a href="ciscohome.html">Cisco</a></li>
</ul>
</div>
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger"></label>
<div class="site-wrap">
<h1>Cisco Router and Switch Commands</h1>
<h2></h2>
<br>
<br>
<br>
<br>
</div>
</body>
</html>
The Css is:
Css是:
.navigation {
/* critical sizing and position styles */
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
/* non-critical appearance styles menu color */
list-style: none;
background: #333;
}
figure {
width: 200px;
text-align: center;
margin: 20px 0;
}
figure img {
width: 100px;
}
/* Navigation Menu - List items */
.nav-item {
/* non-critical appearance styles */
width: 200px;
border-top: 1px solid #111;
border-bottom: 1px solid #000;
}
.nav-item a {
/* non-critical appearance styles */
display: block;
padding: 1em;
background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
color: white;
font-size: 1.2em;
text-decoration: none;
transition: color 0.2s, background 0.5s;
}
.nav-item a:hover {
background: white;
color: rgb(123,193,149);
}
/* Site Wrapper - Everything that isn't navigation */
.site-wrap {
/* Critical position and size styles */
min-height: 100%;
min-width: 100%;
background-color: white; /* Needs a background or else the nav will show through */
position: relative;
top: 0;
bottom: 100%;
left: 0;
z-index: 1;
/* non-critical apperance styles */
padding: 4em;
background-image: url(b1.gif);
background-size: contain;
}
/* Nav Trigger */
.nav-trigger {
/* critical styles - hide the checkbox input */
display: block;
height: 0;
width: 0;
}
label[for="nav-trigger"] {
/* critical positioning styles */
position: fixed;
left: 15px; top: 15px;
z-index: 2;
/* Menu Button*/
/* non-critical apperance styles */
height: 75px;
width: 125px;
cursor: pointer;
background-image: url("menubutton.jpg");
background-size: contain;
}
/* Make the Magic Happen */
.nav-trigger + label, .site-wrap {
transition: left 0.2s;
}
.nav-trigger:checked + label {
left: 215px;
}
.nav-trigger:checked ~ .site-wrap {
left: 200px;
box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}
body {
/* Without this, the body has excess horizontal scroll when the menu is open */
overflow-x: hidden;
}
/* Additional non-critical styles */
h1, h2, h3, h4, h5, h6, p {
max-width: 600px;
margin: 0 auto 1em;
}
code {
padding: 2px;
background: #ddd;
}
/* Micro reset */
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
html, body { height: 100%; width: 100%; font-family: Helvetica, Arial, sans-serif; }
@media only screen
and (min-width : 1224px) {
/* Styles */
.nav-trigger,label {display:none;}
.nav-item,figure {width:20%}
.site-wrap {min-width:80%;float:right;}
figure img {
width: 150px;
}
}
1 个解决方案
#1
0
in this section needed to change the min-width to 1600 px
在本节中需要将最小宽度更改为1600像素
@media only screen
and (min-width : 1224px) {
/* Styles */
.nav-trigger,label {display:none;}
.nav-item,figure {width:20%}
.site-wrap {min-width:80%;float:right;}
figure img {
width: 150px;
}
}
更多相关文章
- 浏览器加载和渲染html的顺序
- 网页语言有html,php.jsp,无论什么语言浏览器总是能正常显示,这个解
- body和html到底有多高&&浏览器的背景色问题
- 浏览器的地址栏尺寸是否会影响CSS媒体查询?
- 关于大背景图片随浏览器百分比缩放的问题
- html5结合flash实现视频文件在所有主流浏览器兼容播放
- 如何在bootstrap中添加汉堡包菜单
- 安装的Moodle字体在其他浏览器中不起作用
- 解决IE9以下版本浏览器不支持HTML5标签的问题