你好 stackoverflow 研究员 我仍在处理我的画廊网站。 当屏幕小于 640px 时,#menu 按钮会出现 但是当我将光标放在它上面时,它会给我新的导航,但是当我将光标移出任一导航#menu 时,它将关闭导航,但我想让它打开导航,直到我再次单击#menu。我听说很多人尝试使用 CSS3 使网站具有响应性。我发现 :active 选择器不能解决这个问题 另外,当我访问网站时 http://kyu317.dothome.co.kr/ , internet explorer 在 png 图像外画出 pupple? 蓝线...我对此一无所知。\ 感谢阅读我的帖子,请评论和批评我。
$(document).ready(function(){
$(".showhome").click(function(){
$(".home").show();
$(".Profile").hide();
$(".Gallery").hide();
$(".Contact").hide();
});
$(".showProfile").click(function(){
$(".home").hide();
$(".Profile").show();
$(".Gallery").hide();
$(".Contact").hide();
});
$(".showGallery").click(function(){
$(".home").hide();
$(".Profile").hide();
$(".Gallery").show();
$(".Contact").hide();
});
$(".showContact").click(function(){
$(".home").hide();
$(".Profile").hide();
$(".Gallery").hide();
$(".Contact").show();
});
// Hide all and show home on page loading
$(".home").show();
$(".Profile").hide();
$(".Gallery").hide();
$(".Contact").hide();
});
@font-face {
font-family: font1;
src: url('fonts/CaviarDreams.woff');
}
#wrapper {
margin:0 auto;
background: white;
border:1px solid white;
max-width: 1000px;
}
header {
max-width: 1000px;
width: 100%;
height: 76px;
top: 0;
left: 0;
border-bottom:1px solid black;
}
#logo {
margin-top: 37px;
margin-left: 10px;
float: left;
width: 160px;
height: 30px;
background: url(logo6.png) no-repeat center;
display: block;
}
nav {
float: right;
margin-top: 27px;
margin-right: 10px;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
float: left;
font-family: font1;
font-size: 15px;
padding: 10px;
text-decoration: none;
cursor: pointer;
}
nav ul li:hover {
color: #6F6F6F;
}
#menu{
display: hidden;
width: 40px;
height: 40px;
background: url(menu-icon.png) center;
}
/* MEDIA QUERY */
@media all and (max-width:640px) {
#menu {
display:inline-block;
}
#menu:hover, nav:hover {
background-color: #CBCBCB;
border-radius: 3px 3px 0 0;
}
nav ul {
display: none;
position: absolute;
padding: 10px;
background: #fff;
border: 3px solid #CBCBCB;
right: 19px;
top: 57px;
width: 25%;
border-radius: 3px 0 3px 3px;
z-index: 200;
}
#menu:hover, nav:hover ul {
display: block;
}
nav ul li {
text-align: center;
width: 85%;
margin: 0 auto;
}
}
#swap{
margin: 40px 10px 40px;
max-width: 980px;
position: relative;
padding: 0;
border: 1px solid white;
z-index:100;
overflow: hidden;
}
/* home */
.home img {
display: block;
margin-left: auto;
margin-right: auto;
max-height: 100%;
max-width: 100%;
}
/* gallery */
.Gallery li{
font-family: century gothic;
font-size: 12px;
display: block;
list-style: none;
text-align: center;
}
.Gallery img {
display: block;
margin-left: auto;
margin-right: auto;
max-height: 100%;
max-width: 100%;
padding-top: 30px;
padding-bottom: 10px;
}
/* footer */
#sns {
text-align: center;
}
#sns li{
display: inline-block;
margin-right: 10px;
}
#copyright li{
font-family: inherit;
font-size: 13px;
text-align: center;
list-style: none;
}
<div id="wrapper">
<header class="header-site" role="banner">
<a href="#" id="logo" class=showhome></a>
<nav>
<a href="#" id="menu"></a>
<ul>
<li class=showProfile>Profile</li>
<li class=showGallery>Gallery</li>
<li class=showContact>Contact</li>
</ul>
</nav>
</header>
<div id="swap">
<div id="Home_contents" class=home > <img src="images/home.png"> </div>
<div id="Profile_contents" class=Profile >Profile contents</div>
<div id="Gallery_contents" class=Gallery >
<img src="images/1.jpg">
<li>GX1 20mm #Flower @CSUN Farmer's Market</li>
<img src="images/2.jpg">
<li>GX1 20mm #Nissan PGC10 @Motor show</li>
<img src="images/3.jpg">
<li>GX1 20mm #Fixie @Encino Velodrom</li>
<img src="images/4.jpg">
<li>GX1 20mm #Parents @In_cheon Int. Airport</li>
<img src="images/5.jpg">
<li>GX1 20mm #Melrose St. @Hollywood</li>
<img src="images/6.jpg">
<li>GX1 20mm #Street near LACMA @Los Angeles </li>
</div>
<div id="Contact_contents" class=Contact >Contact contents</div>
</div>
<footer>
<div id="sns">
<li>
<a class="Facebook-icon" href="https://www.facebook.com/verdi.park.1" target=" _blank"><img src="FACEBOOK.png"></a>
</li>
<li>
<a class="instagram-icon" href="https://instagram.com/ipark317/" target=" _blank"><img src="INSTAGRAM.png"></a>
</li>
</div>
<div id="copyright">
<li> COPYRIGHT © 2015 INKYU PARK.<br>ALL RIGHTS RESERVED. </li>
</div>
</footer>
</div>
<!-- Must have this line first, to enable functions in test.js -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Here you get the hide/show functions -->
<script type="text/javascript" src="test.js"></script>
</body>
最佳答案
您所要做的就是将 content: menu;
添加到媒体查询中的菜单 @media all and (max-width:640px)
就像这样
@media all and (max-width:640px) {
#menu {
display:inline-block;
content: menu;
}
}
@font-face {
font-family: font1;
src: url('fonts/CaviarDreams.woff');
}
#wrapper {
margin:0 auto;
background: white;
border:1px solid white;
max-width: 1000px;
}
header {
max-width: 1000px;
width: 100%;
height: 76px;
top: 0;
left: 0;
border-bottom:1px solid black;
}
#logo {
margin-top: 37px;
margin-left: 10px;
float: left;
width: 160px;
height: 30px;
background: url(logo6.png) no-repeat center;
display: block;
}
nav {
float: right;
margin-top: 27px;
margin-right: 10px;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
float: left;
font-family: font1;
font-size: 15px;
padding: 10px;
text-decoration: none;
cursor: pointer;
}
nav ul li:hover {
color: #6F6F6F;
}
#menu{
display: hidden;
width: 40px;
height: 40px;
background: url(menu-icon.png) center;
}
/* MEDIA QUERY */
@media all and (max-width:640px) {
#menu {
display:inline-block;
content: menu;
}
#menu:hover, nav:hover {
background-color: #CBCBCB;
border-radius: 3px 3px 0 0;
}
nav ul {
display: none;
position: absolute;
padding: 10px;
background: #fff;
border: 3px solid #CBCBCB;
right: 19px;
top: 57px;
width: 25%;
border-radius: 3px 0 3px 3px;
z-index: 200;
}
#menu:hover, nav:hover ul {
display: block;
}
nav ul li {
text-align: center;
width: 85%;
margin: 0 auto;
}
}
#swap{
margin: 40px 10px 40px;
max-width: 980px;
position: relative;
padding: 0;
border: 1px solid white;
z-index:100;
overflow: hidden;
}
/* home */
.home img {
display: block;
margin-left: auto;
margin-right: auto;
max-height: 100%;
max-width: 100%;
}
/* gallery */
.Gallery li{
font-family: century gothic;
font-size: 12px;
display: block;
list-style: none;
text-align: center;
}
.Gallery img {
display: block;
margin-left: auto;
margin-right: auto;
max-height: 100%;
max-width: 100%;
padding-top: 30px;
padding-bottom: 10px;
}
/* footer */
#sns {
text-align: center;
}
#sns li{
display: inline-block;
margin-right: 10px;
}
#copyright li{
font-family: inherit;
font-size: 13px;
text-align: center;
list-style: none;
}
<div id="wrapper">
<header class="header-site" role="banner">
<a href="#" id="logo" class=showhome></a>
<nav>
<a href="#" id="menu"></a>
<ul>
<li class=showProfile>Profile</li>
<li class=showGallery>Gallery</li>
<li class=showContact>Contact</li>
</ul>
</nav>
</header>
<div id="swap">
<div id="Home_contents" class=home > <img src="images/home.png"> </div>
<div id="Profile_contents" class=Profile >Profile contents</div>
<div id="Gallery_contents" class=Gallery >
<img src="images/1.jpg">
<li>GX1 20mm #Flower @CSUN Farmer's Market</li>
<img src="images/2.jpg">
<li>GX1 20mm #Nissan PGC10 @Motor show</li>
<img src="images/3.jpg">
<li>GX1 20mm #Fixie @Encino Velodrom</li>
<img src="images/4.jpg">
<li>GX1 20mm #Parents @In_cheon Int. Airport</li>
<img src="images/5.jpg">
<li>GX1 20mm #Melrose St. @Hollywood</li>
<img src="images/6.jpg">
<li>GX1 20mm #Street near LACMA @Los Angeles </li>
</div>
<div id="Contact_contents" class=Contact >Contact contents</div>
</div>
<footer>
<div id="sns">
<li>
<a class="Facebook-icon" href="https://www.facebook.com/verdi.park.1" target=" _blank"><img src="FACEBOOK.png"></a>
</li>
<li>
<a class="instagram-icon" href="https://instagram.com/ipark317/" target=" _blank"><img src="INSTAGRAM.png"></a>
</li>
</div>
<div id="copyright">
<li> COPYRIGHT © 2015 INKYU PARK.<br>ALL RIGHTS RESERVED. </li>
</div>
</footer>
</div>
<!-- Must have this line first, to enable functions in test.js -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Here you get the hide/show functions -->
<script type="text/javascript" src="test.js"></script>
关于javascript - 我想让我的元素网站的#menu 按钮像开关一样工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30699162/