我想让我的项目网站的#menu按钮像switch一样工作

时间：2015-06-07 22:34:43

标签： javascript html css3

Hello stackoverflow研究员 我还在我的画廊网站上工作。 屏幕小于640px时会出现#menu按钮 但是当我在它上面时它会给我新的导航，但是当我将光标移出导航器#menu时，它会关闭导航但我想让它打开导航，直到我再次点击#menu。我听说很多人试图通过CSS3使网站响应。我发现：主动选择器无法解决这个问题 此外，当我访问网站http://kyu317.dothome.co.kr/时，网络浏览器会在png图像之外绘制蓝色线条......我对此一无所知。 感谢您阅读我的帖子，请评论并批评我。

＆＃13;
＆＃13; 
$(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();
});
＆＃13; 
@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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

您只需将content: menu;添加到媒体查询@media all and (max-width:640px)中的菜单

@media all and (max-width:640px) {
  #menu {
    display:inline-block;  
    content: menu; 
  }
}

＆＃13;
＆＃13; 
@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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

使用jQuery 

$('#menu ul li')
.css({cursor: "pointer"})
.on('click', function(){
  $(this).find('ul').toggle();
})

（或）使用CSS，请遵循本文。

http://koen.kivits.com/articles/pure-css-menu/

相关问题
最新问题